Web Component

Using the Component

You can add an AI agent anywhere on your website for any dataset using the following code. You can find a list of supported locales here.

<script src="https://bellatunes.ai/component/bella-ai.js"></script>
<bella-ai
  clientId="CLIENT_ID"
  clientPublicKey="CLIENT_PUBLIC_KEY"
  dataSetId="DATASET_ID"
  locale="en_US">
</bella-ai>

Styling the Component

Web components use shadow DOM, therefore you can't directly control the classes within the component itself. To compensate for this, we've added a number of CSS variables that you can overwrite in your website's style sheets to adjust the layout of the AI agent chatbox.

Using CSS Variables

<style>
:root {
    --bella-border: 1px solid #ccc;
}
</style>

Available CSS Variables