Tune your Clustaar Webchat!

Change the position of the widget

In some cases, the default widget position won’t fit your needs. Please do not panic, as there is a solution for that 😉

Inside the window.clustaarSettings object, you can add a position object.

position : {  bottom: 10,  right: 20}

These are the default values we use, but you can change them. You can even change the side, using left instead of right.

A full example could be:      

    window.clustaarSettings = {      bot_id: '558484dfgdfg7484dfg2144',      bot_token: 'eyJ2YWx1ZSI6InJWb2VZVkhDcWdHVElJS1VoZ0J5bXNYN2JsRW5UVk50WFY5d0NFM1lPNWMiLCJzdWJqZWN0Ijp7InR5cGUiOiJib3QiLCJpZCI6IjViMWU5ODMwNzEzYjhhMDA1YjNjNjRkOSJ9fQ==',position : {  bottom: 10,  right: 20}    };

 
You can now move the widget wherever you want on your website 🙂

Change your widget dimensions

You might want to adapt widget dimensions to your needs. Fortunately, it is very easy to adapt width / height of the widget!

Warning #1:  by changing widget dimensions you could break some layouts; please test your changes to validate them!
Warning #2: widget is responsive by default, but if you force width or height responsiveness will be deactivated.

 Inside the window.clustaarSettings object, you can add a height and width attributes:

  height: 550,  width: 372

A full example could be:

    window.clustaarSettings = {      bot_id: '558484dfgdfg7484dfg2144',      bot_token: 'eyJ2YWx1ZSI6InJWb2VZVkhDcWdHVElJS1VoZ0J5bXNYN2JsRW5UVk50WFY5d0NFM1lPNWMiLCJzdWJqZWN0Ijp7InR5cGUiOiJib3QiLCJpZCI6IjViMWU5ODMwNzEzYjhhMDA1YjNjNjRkOSJ9fQ==',      height: 550,      width: 372   };

Here you are, with a perfectly tuned widget!