Ai Chat Widget

Embed your AI Assistant on your website by enabling the Widget directly from the Suggestic Console.

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.

How to access to your widget

1. Go to 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.

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	Keeps chat history when navigating between pages using session storage. ⚠️ Note: This uses session storage, so the history is cleared if the browser is closed.
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:

<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>

Each parameter must follow the chat_utm_* key pattern (e.g., chat_utm_source)

Option 2: Via iFrame URL

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

<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

Widget

<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>

iFrame

<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>