Category / Section
Live Chat Widget API Overview
Published:
This article covers on:
- Client APIs: Manage email, name, phone number, and the “maintainIsOpen” functionality on the client side.
- SDK Events: Handle email form submissions and control the visibility of the message text editor.
Client APIs
To configure your live chat widget, use the window[‘boldChatSettings’] object. Add this script above your embedded code and adjust the property values as needed:
window['boldChatSettings'] = { email: "", name: "", phoneNo: "", maintainIsOpen: true };
- Pre-fill the visitor’s email address in the chat widget.
- If the email address is provided, visitors don’t need to enter it manually.
- Once the visitor sends their first message, a conversation is created using the pre-configured email.
window['boldChatSettings'] = { email: "daniel@afgc.inc” };
Name
- Pre-fill the visitor’s name in the chat widget. This is applicable only if an email is provided.
window['boldChatSettings'] = { name: "Daniel” };
PhoneNo
- Pre-fill the visitor’s phone number in the chat widget. This is applicable only if an email is provided.
window['boldChatSettings'] = { phoneNo: “1234567890” };
MaintainIsOpen
- The widget’s open/close state is saved in cookies and synced across tabs.
- { MaintainIsOpen: true } (default): The state is maintained across tabs and reloads.
- { MaintainIsOpen: false }: The state is not saved; each tab operates independently and resets upon page reload.
window['boldChatSettings'] = { maintainIsOpen: false };
SDK events
You can use the following SDK events:
- validateForm
- canShow
Initialize $boldChat as an array, if not already done:
window.$boldChat = [] | window.$boldChat;
onValidateForm
Push a validation method into the $boldChat array:
window.$boldChat.push(["on:validateForm", onValidate]);
- Handle form submissions using the “on validate” method. Validate the form data and return an object indicating whether the form is valid.
<script type="text/javascript" >
window.$boldChat = window.$boldChat || [];
window.$boldChat.push(["on:validateForm", onValidate]);
function onValidate(formData) {
return new Promise((resolve) => {
var response = { isValid: false, confirmationMessage: "User is not a valid user." };
resolve(response);
});
}
</script>
Response format:
{
isValid: boolean,
confirmationMessage: string
}
canSend
Control the visibility of the live chat widget’s text editor:
- To hide the text editor:
window.$boldChat.push(["set:canSend", "false"]);
- To show the text editor:
window.$boldChat.push(["set:canSend", "true"]);