Links
Comment on page

Order info (webhook)

In this tutorial you will learn:
  1. 1.
    how to pass chatbot attributes to your webhook APIs
  2. 2.
    How to use custom attributes to pass info from your Web page through the Widget

Create your project

image

Import your chatbot

Go to the tutorial example chatbot on the Chatbot's Community:
image
Import the chatbot with the "Import Chatbot" button
Go on the "order info" block:
image
This block is connected to a webhook.

Configure your webhook endpoint

Go on replit and fork our chatbot backend demo, written in NodeJS, from this URL:
Get the app public endpoint:
Go in the Fulfillment section here and set the tutorial endpoint:
image
Press update bot.
Now press "Test it out" to see the chatbot in action:
image
Invoke the order info pressing the button:
Reply "123" when asked:
image
The backend will reply correctly with the order status (using the nodeJS app)
image
As you can see "fullname" is not populated. We left this on purpose unfulfilled.

Custom attributes - Get info from the widget page

Sometimes you need to get some info from outside of the chatbot environmet. Fro example, in this case, some info are only available in the web page osting the widget.
Go in this example HTML page, clone it and replace projectId with your own:
To pass custom attributes use the synthax highlithed:
image
This attributes will be automatically passed in all webhooks. You can get those properties through the "variables" map, or you can just leave Tiledesk chatbot automatically fulfill them, as in our example.
To try the fulfullment, connect the chatbot to the defaul department, to make it available as soon as you start a conversation:
image
image
Now launch the page:
Et voilà, also the fullname is fulfilled now!
image
Happy coding with Tiledesk Chatbot!