1. Home
  2. Connect your chatbot
  3. Tune your Clustaar Webchat!

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!

Updated on August 6, 2020

Was this article helpful?

Related Articles

Need Support?
Can’t find the answer you’re looking for? Don’t worry we’re here to help!
More help

Leave a Comment