Custom attributes
In this tutorial we will show you how to easily initialize custom attributes in the Tiledesk Widget and use them inside your chatbot flow. We will explain how to define these attributes so they appear in the “System defined” → payload section of your chatbot blocks, how to trigger their initialization when needed, and finally how to dynamically update their values when a specific event occurs (in our example, a button click).
The steps to achieve this are very simple:
Copy and paste the basic Tiledesk Widget script.
Define your initial custom attributes inside the customAttributes field of window.tiledeskSettings.
Listen for the event you want to use as a trigger (in this example, a button click).
Update the custom attributes by using the setAttributeParameter method.
Here is the full code example
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
Hello Tiledesk Widget example page. Tutorial available in Tiledesk
<a href="https://developer.tiledesk.com/widget/tutorials" target="_blank">developer zone</a>
<h2><b>Here an example to update custom attributes.</b></h2>
<h5>
Steps:
<ol>
<li>Open the widget</li>
<li>Start a new conversation (the printed custom attributes should be the initial ones)</li>
<li>Click the "Update attributes" button"</li>
<li>Start again a new conversation (the new printed custom attributes should be the updated ones)</li>
</ol>
</h5>
<br><br>
<h3>Click the button to update the custom attributes</h3> <button id="myButton">Update attibutes</button>
<script type="application/javascript">
var PROJECT_ID = "<<TILEDESK_PROJECT_ID>>"
let payload = {
"city": "California",
"name": "William",
}
window.tiledeskSettings =
{
projectid: PROJECT_ID,
customAttributes: payload
};
(function (d, s, id) {
var w = window; var d = document; var i = function () {i.c(arguments);};
i.q = []; i.c = function (args) {i.q.push(args);}; w.Tiledesk = i;
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id; js.async = true; js.src = "https://widget.tiledesk.com/v6/launch.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'tiledesk-jssdk'));
document.getElementById("myButton").addEventListener("click", function () {
//Update payload object
let updatedPayload = {
...payload,
"surname": "Smith"
};
// Send to widget
window.Tiledesk('setAttributeParameter', {
key: 'payload',
value: updatedPayload
});
});
</script>
</body>
</html>The screen below highlights how to read your defined or updated customAttributes inside the chatbot flow. As shown, the customAttributes JSON data is stored in the payload variable under System Defined section.
View result here
Last updated
Was this helpful?