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.