# Ai Chat Widget

{% hint style="info" %}
This feature may require additional backend configuration to work as expected. Please ensure that your organization’s account is enrolled in the AI program before proceeding.
{% endhint %}

## How to access to your widget

1. Go to [**https://console.suggestic.com**](https://console.suggestic.com/) in your browser.
2. Log in with your credentials.
3. From the left menu, select **AI Assistance**.
4. In the list of **AI Assistants**, select the assistant you want to use for the widget.
5. Once selected, navigate to the **Widgets** section.
6. Select **Edit** to set a name, avatar and welcome message to the AI assistance widget.
7. Click on **Embed on Website** and select the preferred method:
   1. Widget (Floating chat bubble experience using javascript )
   2. iFrame (Chat embed directly on website using html)
8. Select **Copy to clipboard** and proceed to add the code snipped to your website.

{% embed url="<https://storage.googleapis.com/sg-data/Docs/0722.mp4>" %}

## Available Query parameters

| name                        | description                                                                                                                                                                           |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `disable_image_upload`      | When set to true, disables the option for users to upload images in the chat.                                                                                                         |
| `disable_suggested_replies` | Disables suggested reply buttons, allowing only free text input.                                                                                                                      |
| `enable_chat_history`       | <p>Keeps chat history when navigating between pages using session storage.</p><p>⚠️ <em>Note: This uses session storage, so the history is cleared if the browser is closed.</em></p> |
| `color` / `data-color`      | Sets the primary color of the widget UI (e.g., header, buttons). Accepts HEX color values (e.g., #D36086).                                                                            |
| `max_width`                 | Defines the maximum width of the widget in pixels, allowing better control over its size on the page.                                                                                 |

## Set UTM Parameters

You can pass custom UTM parameters to the chat widget so they are available within the chat session. This allows you to track the source, medium, or campaign of the conversation for analytics and personalization.

#### Option 1: Via Script (Recommended)

Add the data-utm-params attribute to the chat widget script using the following format:

```javascript
<script
  src="./chatWidgetBundle.js"
  id="chat-widget"
  data-client-id="xxxx"
  data-assistant-id="xxxx"
  data-disable-image-upload="true"
  data-enable-chat-history="true"
  data-utm-params='[
    {"key": "chat_utm_source", "value": "test"},
    {"key": "chat_utm_medium", "value": "test"},
    {"key": "chat_utm_campaign", "value": "test"}
  ]'
></script>
```

{% hint style="info" %}
Each parameter must follow the chat\_utm\_\* key pattern (e.g., chat\_utm\_source)
{% endhint %}

#### Option 2: Via iFrame URL

You can also pass UTM parameters directly in the iframe URL:

```html
<iframe 
  src="https://widget-chat-suggestic.vercel.app/?client_id=123&assistant_id=123&chat_utm_source=test&chat_utm_medium=test&chat_utm_campaign=test" 
  allow="camera; microphone; clipboard-read; clipboard-write">
</iframe>
```

The parameters will be automatically captured and made available in the chat session.

## Widget Examples

{% tabs %}
{% tab title="Widget" %}

```javascript
<script
  src="https://storage.googleapis.com/sg-data/chatWidgetBundle.v1.8.0.js"
  id="chat-widget"
  data-client-id="test-1234-5678-9101-abcdef123456"
  data-assistant-id="QXNzaXN0YW50OnRlc3QtMTIzNC01Njc4LTkxMDEtYWJjZGVmMTIzNDU2"
  data-color="#D36086"
  data-disable-image-upload="true">
</script>
```

{% endtab %}

{% tab title="iFrame" %}

```html
<iframe
  src="https://widget-chat-suggestic.vercel.app/?client_id=test-1234-5678-9101-abcdef123456
    &assistant_id=QXNzaXN0YW50OnRlc3QtMTIzNC01Njc4LTkxMDEtYWJjZGVmMTIzNDU2
    &color=%23D36086
    &disable_image_upload=true"
  allow="camera; microphone; clipboard-read; clipboard-write">
</iframe>
```

{% endtab %}
{% endtabs %}