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. 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
src="https://widget.lamatic.ai/chat/index.js"
onload="loadChatDialog()"
></script>
<script>
// Set Lamatic config
var CHAT_DIALOG_CONFIG = {
apiUrl: "${podURL()}", // mandatory
workflowId: "${workflowId}", // mandatory
floatingButtonId: "your-custom-button-id", // optional
chatHeaderBgColor: "white", // optional
imageUrl: "https://your-new-image-url.com", // mandatory
userMessageBgColor: "#E0F7FA", // optional
userMessageTextColor: "blue", // optional
agentMessageBgColor: "#F1F8E9", // optional
agentMessageTextColor: "#1B5E20", // optional
position: "right", // left or right only if no floatingButtonId passed
floatingButtonIcon: "💬|| your-new-icon-url", // only if no floatingButtonId passed
userId: "your-new-user-id", // optional any userId which you use to identify the user
};
// Load Lamatic dialog
function loadChatDialog() {
new ChatDialog(CHAT_DIALOG_CONFIG);
}
</script>
Props
Below is the detailed documentation for the props used in the chat widget configuration:
apiUrl
(required)
- Type:
string
- Description: The base URL of your project endpoint. This is mandatory for the widget to function correctly.
workflowId
(required)
- Type:
string
- Description: The workflow ID where you have set up your chat configuration. This is also mandatory.
floatingButtonId
- Type:
string
- Description: The ID of a custom button that triggers the chat dialog. This prop is optional, and if not provided, the default floating button will be used.
chatHeaderBgColor
- Type:
string
- Description: The background color for the chat header. Accepts any valid CSS color value. If not specified, a default color will be used.
imageUrl
(required)
- Type:
string
- Description: The URL of the image to be displayed in the chat widget. This is mandatory and typically represents the bot or company logo.
userMessageBgColor
- Type:
string
- Description: The background color for user messages in the chat. Accepts any valid CSS color value.
userMessageTextColor
- Type:
string
- Description: The text color for user messages in the chat. Accepts any valid CSS color value.
agentMessageBgColor
- Type:
string
- Description: The background color for agent (bot) messages in the chat. Accepts any valid CSS color value.
agentMessageTextColor
- Type:
string
- Description: The text color for agent (bot) messages in the chat. Accepts any valid CSS color value.
position
- Type:
string
- Description: Determines the position of the chat widget on the screen. Accepts either "left" or "right". This prop is only applicable if no
floatingButtonId
is provided.
floatingButtonIcon
- Type:
string
- Description: The icon to be displayed on the floating button. Can be an emoji (e.g., "💬") or a URL to an image. This prop is only used if no
floatingButtonId
is provided.
userId
- Type:
string
- Description: An optional identifier for the user. This can be used to maintain user context across sessions or for analytics purposes.
3. 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.