1. Home
  2. Connecter son Bot
  3. Personnaliser votre Clustaar Webchat

Personnaliser votre Clustaar Webchat

Adaptez la position et les dimensions du Webchat Clustaar sur votre site web.

Modifier la position de votre widget

Dans certains cas, la position par défaut du widget ne correspond pas à vos besoins. Ne paniquez pas, car il existe une solution 🤔

À l’intérieur de “the window.clustaarSettings“, vous pouvez ajouter des indications de “position“.

position : {
  bottom: 10,
  right: 20
}

Ce sont les valeurs par défaut que nous utilisons, mais vous pouvez les modifier. Vous pouvez également changer de côté en utilisant la gauche au lieu de la droite.

Un exemple complet pourrait être :    

    window.clustaarSettings = {
      bot_id: '558484dfgdfg7484dfg2144',
      bot_token: 'eyJ2YWx1ZSI6InJWb2VZVkhDcWdHVElJS1VoZ0J5bXNYN2JsRW5UVk50WFY5d0NFM1lPNWMiLCJzdWJqZWN0Ijp7InR5cGUiOiJib3QiLCJpZCI6IjViMWU5ODMwNzEzYjhhMDA1YjNjNjRkOSJ9fQ==',

position : {
  bottom: 10,
  right: 20
}

    };

 
Vous pouvez maintenant déplacer le widget où vous le souhaitez sur votre site web 😁

Modifier les dimensions de votre webchat

Vous souhaitez peut-être adapter les dimensions du webchat. Heureusement, il est très facile d’adapter la largeur et la hauteur !

Avertissement #1en modifiant les dimensions du webchat, vous pourriez impacter la mise en page ; pensez à tester vos modifications pour les valider !
Avertissement #2 : le webchat est “responsive” par défaut, mais si vous forcez la largeur ou la hauteur, cela sera désactivé.

 À l’intérieur de “window.clustaarSettings” , vous pouvez ajouter des attributs de hauteur et largeur :

  height: 550,
  width: 372

Un exemple complet pourrait être :

    window.clustaarSettings = {
      bot_id: '558484dfgdfg7484dfg2144',
      bot_token: 'eyJ2YWx1ZSI6InJWb2VZVkhDcWdHVElJS1VoZ0J5bXNYN2JsRW5UVk50WFY5d0NFM1lPNWMiLCJzdWJqZWN0Ijp7InR5cGUiOiJib3QiLCJpZCI6IjViMWU5ODMwNzEzYjhhMDA1YjNjNjRkOSJ9fQ==',

      height: 550,
      width: 372

   
};


Vous y êtes, avec un widget parfaitement réglé !

Updated on août 6, 2020

Was this article helpful?

Related Articles

Besoin d’aide ?
Vous ne trouvez pas la réponse à votre question ? Ne vous inquiétez pas, nous sommes là pour vous aider.
Plus d'aide

Leave a Comment