Docs
widgets
Chat

Chat Widget

Integrate our powerful chat widget into your website using the chat nodes. This widget leverages AI-driven conversation technology to provide interactive and context-aware responses to user queries. Now, you can offer this advanced chat functionality directly on your site.

chatwidget.webp

Steps to Integrate the Chat Widget

Follow these steps to integrate the chat widget into your site using the provided CDN script:

1. Whitelist Your Domains

To use the Chat Widget, you need to whitelist the domains where you will deploy the widget. This ensures that the widget is only used on approved domains.

  • Update your chatTrigger settings to include the domains you plan to use.
  • This configuration is typically done through your admin panel or server settings.

2. Configure the Chat Widget

chatwidget.webp

Click the Configure button in the chat widget to customize settings such as the bot name, position, image, policy URL, appearance, and messages.

1. General Settings

FieldDescription
Bot NameSets the name displayed on the chat header.
Example: Google Drive Bot
PositionDetermines which side of the screen the widget appears.
Options: Left, Right
Bot ImageUpload a custom avatar for your bot.
Policy URLLink to your privacy policy, shown in the footer.
Example: https://lamatic.ai/docs/legal/privacy-policy
Show Powered by LamaticToggle to display or hide the "Powered by Lamatic" branding.

2. Appearance Settings

Customize the color scheme of your chat widget:

ElementExample ValueDescription
Primary Color#251d1dPrimary UI accents and theme color.
Header Background#14aadBBackground color of the chat header.
Header Text#FFFFFFText color for the bot name in the header.
User Message Background#1f0ea0Background for messages sent by the user.
User Message Text#FFFFFFText color inside user messages.
Agent Message Background#f1f5f9Background color of bot responses.
Agent Message Text#2c343fText color of bot messages.
Suggestion Background#f1f5f9Background color of quick reply suggestions.
Suggestion Text#334155Text color for suggestion buttons.

3. Messages Configuration

Configure default messages and placeholder texts:

FieldDescription
Greeting MessageMessage shown when the bot first appears.
Example: Hi, I am Lamatic Bot. Ask me anything about Lamatic
Error MessageDisplayed when something goes wrong.
Example: Oops! Something went wrong. Please try again.
Input PlaceholderPlaceholder in the input text box.
Example: Compose your message
Suggested QuestionsAdd up to 3 quick-start suggestions.
Examples: What is lamatic?, How do I add data to my chatbot?

4. Preview Panel

A live preview panel is available on the right side to visualize real-time changes across all tabs.


✅ Final Step

After customizing, don’t forget to click Save to apply your changes.

3. Include the CDN Script and Configure the Widget

Add the CDN script to your HTML file and configure the widget using the provided options.

Here's how to include the CDN script and configure the widget:

<script async>
    (function () {
        // Wait for DOM to be fully loaded
        document.addEventListener("DOMContentLoaded", function () {
            const PROJECT_ID = '42*********************************c';
            const FLOW_ID = '73*********************************b';
            const API_URL = 'https://***.lamatic.ai';
            
            // Create the root element
            const root = document.createElement("div");
            root.id = "lamatic-chat-root";
            root.dataset.apiUrl = API_URL;
            root.dataset.flowId = FLOW_ID;
            root.dataset.projectId = PROJECT_ID;
            document.body.appendChild(root);
 
            // Load the script
            const script = document.createElement("script");
            script.type = "module";
            script.src = `https://widget.lamatic.ai/chat-v2?projectId=${PROJECT_ID}`;
            document.body.appendChild(script);
        });
    })();
</script>

Props

Below is the detailed documentation for the props used in the chat widget configuration:

ParameterTypeDescription
PROJECT_ID (required)stringThe project ID where the chat widget is deployed. This is mandatory for the widget to function correctly.
FLOW_ID (required)stringThe workflow ID where you have set up your chat configuration. This is also mandatory.
API_URL (required)stringThe base URL of your project endpoint. This is mandatory for the widget to function correctly.

4. Testing

If you're using a payload, it would take the following input parameters :

{
  "userId": string,
  "sessionId": string,
  "chatMessage": string,
  "chatHistory": [
    {
      "content": string,
      "role": string,
      "timestamp": string,
      "sessionId": string,
    }
  ]
}

The output will be given as follows :

{
  "output": {
    "content": string,
    "attachments": [],
    "timestamp": string,
    "type": string
  }
}

Otherwise, click on the chat widget located at the bottom right corner of your screen to start a conversation. The widget will open, allowing you to interact with it.

5. Troubleshooting

  • Ensure the apiUrl is correctly set to your pod URL.
  • Verify that the workflowId matches your workflow ID.
  • Check the console for any errors related to script loading or widget initialization.

This documentation provides a comprehensive guide to integrating the chat widget, including all necessary configurations and troubleshooting tips.

Was this page useful?

Questions? We're here to help

Subscribe to updates