When implementing a webchat sometimes it can be necessary to send information from the webpage to the live chat. Usually this is something like a customer number or other identifier which is used to retrieve information from a backend system via API. Depending on the way your flow is setup there are multiple approached to accomplishing this. This article will describe three methods for this.
Useful Documentation
It is recommended you familiarize yourself with the GitHub page for Webchat v3 as most methods described here will be using the information therein.Data via Start Behavior
The most common method for sending data from the webpage is via a data payload at the beginning of the conversation. This uses the Start Behavior settings of the Webchat V3 endpoint. However, this isn't set up in the actual endpoint but needs to be done on the Webpage side as described here: GitHub Start Behavior
Keep in mind this only works with the startBehavior set either to "button" or "inject". This means the user will not be able to put in a random text to start the conversation. In our example we will the button function.
Let's assume we have a simple webpage with the following HTML to initiate your chat:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Sending data via startBehavior</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>This is an example page for sending data to Cognigy from a website.</h1>
<script src="https://github.com/Cognigy/Webchat/releases/download/v3.7.0/webchat.js"</script>
<script>
initWebchat("https://endpoint-trial.cognigy.ai/{{URLToken}}");
</script>
</body>
</html>
We then need to have a process to retrieve the data from the local storage, which might look something like this. Keep in mind it might look different depending on your integration.
// Fetch the customerNum from localStorage
const customerNum = localStorage.getItem("customerNum") || "AB1234"; // Default value if not found
Then we need to set up a process to send this data when the first message is sent. In this case I am setting up a button in my webchat and when the button is pressed it will send the customer number in the input data which can be done via the settings of the webchat embedding endpoint.
initWebchat("https://endpoint-trial.cognigy.ai/{{URLToken}}",
{
settings: {
startBehavior: {
startBehavior: "button",
getStartedData: { customerNum },
},
},
}
);
The complete code would look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Sending data via startBehavior</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>This is an example page for sending data to Cognigy from a website.</h1>
<script src="https://github.com/Cognigy/Webchat/releases/latest/download/webchat.js"</script>
<script>
// Fetch the customerNum from localStorage
const customerNum = localStorage.getItem("customerNum") || "AB1234"; // Default value if not found
initWebchat("https://endpoint-trial.cognigy.ai/{{URLToken}}",
{
settings: {
startBehavior: {
startBehavior: "button",
getStartedData: { customerNum },
},
},
}
);
</script>
</body>
</html>
The customer number would then be send when clicking the button at the beginning of the conversation.
In the Cognigy backend your information would then arrive as a user input in the "input.data" variable and in the UI would look something like this.
In your input object it would look like this:
Keep in mind you will need to set up a process to catch and save the data, for example be using the Add To Context Node at the beginning of the conversation.
Data via Webchat and Analytics API
Another possibility is to use the Webchat API in connection with the Analytics API to send the data.
The basic concept is the same as with the start behavior but the method is different and can also be applied at any point in the conversation (for example only in processes where the design requires this information).
This required two parts:
- A Say Node with a data package to trigger the script
- A process on the HTML page to return the information back to the flow
We'll assume we have a simply webpage as described here. Instead of using the settings we will set up code to "listen" for the signal from the Cognigy flow.
initWebchat(
"https://endpoint-trial.cognigy.ai/{{URLToken}}"
).then((webchat) => {
// use the webchat
window.webchat = webchat;
// Listen for webchat events
webchat.registerAnalyticsService((event) => {
// listen if is a message from bot
if (event.type === "webchat/incoming-message") {
// listen if data in message
if (event.payload.data.retrieveData === true) {
webchat.sendMessage("", {
customerNum,
});
}
}
});
});
The complete code would then look something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Sending data via startBehavior</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>This is an example page for sending data to Cognigy from a website.</h1>
<script src="https://github.com/Cognigy/Webchat/releases/latest/download/webchat.js"</script>
<script>
// Fetch the customerNum from localStorage
const customerNum = localStorage.getItem("customerNum") || "AB1234"; // Default value if not found
initWebchat(
"https://endpoint-trial.cognigy.ai/{{URLToken}}"
).then((webchat) => {
// use the webchat
window.webchat = webchat;
// Listen for webchat events
webchat.registerAnalyticsService((event) => {
// listen if is a message from bot
if (event.type === "webchat/incoming-message") {
// listen if data in message
if (event.payload.data.retrieveData === true) {
webchat.sendMessage("", {
customerNum,
});
}
}
});
});
</script>
</body>
</html>
Of course we will also need to send the data package from the flow in order to trigger this process. This is relatively easy because all that needs to be done is to add the structured data object in the Options dropdown of a normal Say Node.
Keep in mind the data from the webpage would be received as if it was a user input. In this case we would need to add a Wait for Input Node in order to catch it. Alternatively we could also use a Question Node to proper catch and process this information.
Here is an example:
Sending Data via the Context Inject API
The last possibility is to use the Cognigy API in order to send data directly to the Context of the flow via the Context Inject function. This would require more complicated backend system to be integrated though and is probably the most difficult process to use.
We highly suggest you do use this approach as it would require having sensitive information (API keys or Login information) in clear text in the frontend.
Comments
0 comments