Smartify

Custom attributes

In this tutorial you will learn how to initialize custom attributes in the Tiledesk Widget and use them in your chatbot flow. You'll see how to:

1

Define and initialize custom attributes

  1. Copy and paste the basic Tiledesk Widget script.

  2. Define your initial custom attributes inside the customAttributes field of window.tiledeskSettings.

2

Trigger initialization

  1. Listen for the event you want to use as a trigger (in this example, a button click).

3

Update attributes dynamically

  1. Update the custom attributes by using the setAttributeParameter method.

Here is the full code example:

custom-attributes_dynamic.html
<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>

Usage steps when testing the example:

1

Open the widget

2

Start a new conversation

The printed custom attributes should show the initial values you set in customAttributes (e.g., city, name).

3

Click the "Update attributes" button

This triggers updating the payload (adds surname in the example).

4

Start a new conversation again

The printed custom attributes should now reflect the updated values.

Note: the custom attributes JSON data is stored in the System defined section under the variable name payload and can be accessed from your chatbot blocks.

Custom Attributes screenshot

Demo: View result here

References:

  • Tutorial zone: https://developer.tiledesk.com/widget/tutorials

Last updated 24 days ago

Privacy: This site uses cookies. By browsing this site, you accept the privacy policy.

PreviousWidget for Flutter with WebViewNextWeb SDK v4