Order info (webhook)
In this tutorial you will learn:
- How to pass chatbot attributes to your webhook APIs
- How to use custom attributes to pass info from your Web page through the Widget
Create your project
Section titled “Create your project”Import your chatbot
Section titled “Import your chatbot”Go to the tutorial example chatbot on the Chatbot’s Community:
Import the chatbot with the “Import Chatbot” button
Go on the “order info” block:
This block is connected to a webhook.
Configure your webhook endpoint
Section titled “Configure your webhook endpoint”Go on replit and fork our chatbot backend demo, written in NodeJS, from this URL:
https://replit.com/@pingstreams/chatbot-order-info-webhook#index.js
Get the app public endpoint:
https://chatbot-order-info-webhook.pingstreams.repl.co
Go in the Fulfillment section here and set the tutorial endpoint:
Press update bot.
Now press “Test it out” to see the chatbot in action:
Invoke the order info pressing the button:
Reply “123” when asked:
The backend will reply correctly with the order status (using the NodeJS app)
As you can see “fullname” is not populated. We left this on purpose unfulfilled.
Custom attributes - Get info from the widget page
Section titled “Custom attributes - Get info from the widget page”Sometimes you need to get some info from outside of the chatbot environment. For example, in this case, some info are only available in the web page hosting the widget.
Go in this example HTML page, clone it and replace projectId with your own:
https://replit.com/@pingstreams/Pingstreams-HTML-Site#custom-attributes.html
To pass custom attributes use the syntax highlighted:
These attributes will be automatically passed in all webhooks. You can get those properties through the “variables” map, or you can just leave Pingstreams chatbot automatically fulfill them, as in our example.
To try the fulfillment, connect the chatbot to the default department, to make it available as soon as you start a conversation:
Now launch the page:
https://pingstreams-html-site.pingstreams.repl.co/custom-attributes.html
Et voilà, also the fullname is fulfilled now!
Happy coding with Pingstreams Chatbot!