Additional Styling

Using additional styling you can add that extra customisation that your brand needs.

While the settings on the widget should give you the flexibility you need, sometimes there is a need to make additional changes. With that in mind the widget can also accommodate additional CSS that you want to use.

From the Settings page select the Web Plugin option, under the Style tab you'll see a setting called Additional Styling

The value of this setting is the URL that points to an additional style sheet to load. logicdialog does not host this file and so you'll need a mechanism to host this additional CSS. Typically your existing website will have mechanisms to do so, although this will vary by platform.

Our chat plugin is loaded as an iframe and as a result is self contained to its own page. With this in mind, any CSS changes that you make in this additional file will only be applied to elements within the iframe and therefore will not affect anything else on the page. If you wish to restrict the styles even further however, you can make use of the #wbb-chat selector which is the top element with the widget. All other buttons, text, backgrounds and so on are within an object containing this class. For example additional CSS similar to that shown below will turn all of the buttons red :

Example CSS

#wbb-chat .wbb-qreply-button { 
  background: red !important;
}

Please note that you may need to include the !important flag on the CSS statements to ensure the values you provide override the defaults provided by the widget.

We suggest using a browser Web Inspector to find the element you wish to change, and from that identify the ID or classname for that element, as shown below.