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 #1 : en 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é !