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"
  userId="CLIENT_USER_ID"
  locale="en_US"
  metadataItem="some value"
  customInternalId="my-custom-ID-here">
</bella-ai>

Explanation of Inputs

Here's an overview of what each input for the web component does:

Events

Bella emits a number of events that you can capture to perform additional functionality outside of the web component.

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