Skip to Content
Integrations & Actions
Connect to Twilio Flex WebChat
This guide outlines how to connect with Flex WebChat 2.0. The setup for Flex WebChat 3.0 is similar.
Requirements
Contributor Access To Mavenoid: If you do not have contributor permissions, contact your Mavenoid representative.
Mavenoid Embed Script Access: The integration uses the External Script node in Mavenoid.
Configure the Integration
Use the External Script node to trigger the live chat to open when customers want to chat with an agent.
Copy the Twilio Chat Code:
Obtain the Flex WebChat code using the CDN setup. See Twilio's guide Set up and use Flex Webchat 2.0 for details.Configure Opening Function:
After loading the Chat SDK, call thewebchat.init()function to display the webchat.Pass context to Twilio:
Use the context property and/or set attribute values in the pre-engagement form to convey context from the assistant to Twilio.Close Mavenoid Assistant:
If using the Mavenoid Web Touchpoint, callmavenoid.push({ event: assistant-unmount })to avoid widgets overlapping. The event ToggleChatVisibility can be used to determine when the WebChat widget has been opened.Add HubSpot's Code to External Script:
See External Scripts for Chat Handovers for detailed setup instructions.
Here’s an example of what the external script might look like:
externalScripts = {
async openWebChat(input) {
const { name, question, assistantContext } = input;
const appConfig = {
available: true,
tokenServerUrl: "https://iam.twilio.com/v1/Accounts/{accountSid}/Tokens",
flexWebChannelsUrl: "https://flex-api.twilio.com/v1/WebChannels",
context: {
transcript: assistantContext,
},
startEngagementOnInit: false,
sdkOptions: {
chat: {},
},
preEngagementConfig: {
description: "Please provide some information",
fields: [
{
label: "What is your name?",
type: "InputItem",
attributes: {
name: "friendlyName",
type: "text",
placeholder: "Enter your name",
required: true,
value: "Bob",
readOnly: false,
},
},
{
label: "What is your email?",
type: "InputItem",
attributes: {
name: "email",
type: "email",
placeholder: "Enter your email",
required: true,
value: "[email protected]",
readOnly: false,
},
},
{
label: "What is your name?",
type: "InputItem",
attributes: {
name: "friendlyName",
type: "text",
placeholder: "Type your name here",
required: fatruelse,
value: name,
readOnly: false,
},
},
{
label: "What is your question?",
type: "TextareaItem",
attributes: {
name: "question",
type: "text",
placeholder: "Type your question here",
required: false,
rows: 5,
value: question,
readOnly: false,
},
},
],
submitLabel: "Ok Let's Go!",
},
};
// Create a script element
var script = document.createElement("script");
// Set attributes for the script element
script.src =
"https://assets.flex.twilio.com/releases/flex-webchat-ui/2.9.1/twilio-flex-webchat.min.js";
script.integrity =
"sha512-yBmOHVWuWT6HOjfgPYkFe70bboby/BTj9TGHXTlEatWnYkW5fFezXqW9ZgNtuRUqHWrzNXVsqu6cKm3Y04kHMA==";
script.crossOrigin = "anonymous";
script.onload = function () {
Twilio.FlexWebChat.renderWebChat(appConfig);
Twilio.FlexWebChat.Actions.on("afterToggleChatVisibility", (payload) => {
mavenoid.push({ event: "assistant-unmount" });
});
};
// Append the script element to the head of the document
document.head.appendChild(script);
},
};
Note: To bypass the pre-engagement form, set startEngagementOnInit to "true" and provide all context in the context property instead of using the preEngagementConfig.