Add custom CSS to your chatbox

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