< img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=578402809390336&ev=PageView&noscript=1" /> Advanced Customization of Chat Widget | Acobot

You are here

Advanced Customization of Chat Widget

Customizing CSS for Chat Widget

You can change the look and feel of the chat widget by customizing CSS. The CSS file used by Quick Widget can be found below. You may write your own CSS codes to override the styles.

If you're a web developer, you may also customize its behavior or even create a new widget from scratch. To do so you may download the source codes of Quick Widget with the below link and use it as a start point.

  • widget.js: Replace strings between [[ and ]] with proper contents.
  • widget.zip: Unzip this to /widget on your web server.

Dynamic Coloring

If you web pages vary in color, you may use "color=[code]" parameter to specify a different color for each web page. For example, the follow example code displays a widget in red .

<script src="https://acobot.ai/js/w?gid=12345&key=mZ2b2...vb9zju&color=#ff0000"></script>
<script src="https://acobot.ai/js/w?gid=12345&key=mZ2b2...vb9zju&color=red"></script>