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.

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

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

2. Appearance Settings

Customize the color scheme of your chat widget:

3. Messages Configuration

Configure default messages and placeholder texts:

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:

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. Chat Widget CSS IDs Documentation

Note: The asterisk (*) in the IDs represents a dynamic index that gets assigned to each element. For example, lam-chat-message-0, lam-chat-message-1, etc.

Usage Examples

Here are examples of how to use these CSS IDs as selectors:

Plain selector (targeting all elements of that type):

#lam-chat-message-bubble-* {
  border-radius: 12px;
  padding: 12px 16px;
}

Specific index selector (targeting a specific element):

#lam-chat-message-bubble-0 {
  background-color: #e3f2fd;
  border-left: 4px solid #2196f3;
}

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

Common Issues

Chat Input Not Focusing When Using Material UI Drawer

If you're using Material UI's Drawer component alongside the chat widget, you might encounter an issue where the chat input cannot be focused when the Drawer is open. This happens because the Drawer's Modal behavior enforces focus within itself.

Solution:

Add the disableEnforceFocus prop to the Drawer's ModalProps:

// Option 1: Apply to a specific Drawer instance
<Drawer
  anchor="right"
  open={drawerOpen}
  onClose={toggleDrawer}
  ModalProps={{
    disableEnforceFocus: true,
  }}
>
  {/* Drawer content */}
</Drawer>
 
// Option 2: Apply globally using a custom theme
const theme = createTheme({
  components: {
    MuiDrawer: {
      defaultProps: {
        ModalProps: {
          disableEnforceFocus: true,
        },
      },
    },
  },
});

This allows the chat widget input to properly receive focus even when the Drawer is open, without affecting the overall functionality of your drawer.

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