Add custom CSS to your chatbox

Last update: вторник, сеп. 03, 2019

By adding custom CSS to your chatbox, you are aware that new Xeno updates may break your custom CSS anytime. It will be your responsibility to maintain your code.

The different Components of your chatbox are embed into separate iframes, which means the only thing you will be able to customize from a style tag is the position of the iframe.

This is why we are offering a way to let your chatbox know if it needs to add a custom CSS code inside these iframes.

window._xenoSettings = {
  key: "your-public-key",
  options: {
    custom_css: {
      button: "div { color: black; }",
    },
  }
}

In this example, button is the name of the Component that will receive the custom CSS code.

Here is a list of the existing Components you can customize:

alert, alert-overlay, button, gradient, message, tooltip, topbar, widget

Add custom CSS to your chatbox

Design