Skip to main content
Version: ChatLead

Chat Window Integration Guide

This document provides instructions for integrating the chat widget into your system and customizing its behavior using JavaScript methods. It includes details on triggering the chat window with default values, sending pre-chat data to operators, and showing custom initial messages to visitors.

1. Triggering the Chat Window with Default Values​

The chat widget can be initialized with system default values using a dedicated JavaScript method.

Method to Invoke:​

chatwareComLAHO.integrations.triggerChatWidget();

Description:​

This method will trigger the chat window with default configurations predefined in the system. No additional customization or data needs to be passed.

2. Sending Pre-chat Data to Operators and Custom Initial Messages to Visitors​

This method allows you to:

  • Populate pre-chat fields with default values for the visitor.
  • Send additional information to the chat operator.
  • Display custom initial messages in the chat window for the visitor.

Steps:​

1. Define Additional Information​

Additional information is passed as an array of objects. Each object contains:

  • columnName: The key name corresponding to the label defined in the chat form.
  • columnPrompt: A user-friendly label for display purposes.
  • value: An array of values corresponding to the key.

Example:

var additionalInfo = [
    { columnName: 'name', columnPrompt: 'Name', value: ['John Doe'] },
    { columnName: 'Phone', columnPrompt: 'Phone', value: ['111111111', '22222222'] }
];

2. Define Initial Messages​

Initial messages are passed as an array of strings. These messages will be displayed in the chat window when it opens.

Example:

var initialMessages = ['Good Afternoon', 'How Are You'];

3. Invoke the Method​

Use the following method to trigger the chat widget with additional information and initial messages:

chatwareComLAHO.integrations.triggerChatWidgetWithAdditionalInfo(additionalInfo, initialMessages);

Key Details:​

  • Key-Value Mapping: Pre-chat values will auto-populate the chat form fields, such as firstName, lastName, etc., if the columnName matches the form labels. Visitors will see these pre-filled fields in the chat window.
  • Operator View: The additional information will be visible to the operator in their console, formatted as specified by the columnPrompt and value.

Example Usage​

// Define Additional Information
var additionalInfo = [
    { columnName: 'name', columnPrompt: 'Name', value: ['John Doe'] },
    { columnName: 'Phone', columnPrompt: 'Phone', value: ['1234567890', '0987654321'] }
];

// Define Initial Messages
var initialMessages = ['Hello! How can I assist you today?', 'Please share your query below.'];

// Trigger Chat Widget
chatwareComLAHO.integrations.triggerChatWidgetWithAdditionalInfo(additionalInfo, initialMessages);

In this example:

  • The chat form will auto-populate the visitor's name as "John Doe" and phone numbers as "1234567890" and "0987654321".
  • The visitor will see the initial messages displayed in the chat window.
  • The operator will see the additional information in their console.

For further assistance with integration or advanced customization, please contact our support team.

3. Trigger the SMS chat window​

By the help of the given function below, we can trigger the SMS chat window. This function can be called to open the chat window. It can be applied to any onClick function or event. By using this function, the chat window will pop up when triggered. We can apply it to any button to open the SMS chat window.

For CarChat, RVChat, and LegalChat​

Use the following function to trigger the SMS chat window:

chatwareComLAHO.integrations.customOpenWebSMSChat("sms");

For BoatChat​

Use the following function to trigger the SMS chat window:

chat5058.integrations.customOpenWebSMSChat("sms");

Example​

You can apply these functions to any onClick event or button to open the SMS chat window:

<button onclick="chatwareComLAHO.integrations.customOpenWebSMSChat('sms')">Open Chat</button>
<button onclick="chat5058.integrations.customOpenWebSMSChat('sms')">Open BoatChat</button>

These functions allow seamless integration of the SMS chat window into different platforms.