Setting Up Chatbot Webhook
What Is a Webhook?
A webhook is a mechanism that calls external services over the internet using HTTP/HTTPS URLs (i.e., via a Web API).
WebAPI
An API made accessible over the internet.
You can send commands to the API via an HTTP/HTTPS URL.
It connects one web service to another.
Calling a Web API with a Webhook
Request
Send the Web API URL and the required parameters (data) over HTTP.
• To send data to the server, place it in the request body.
• HTTP POST = write data.
• HTTP GET = read data.
• Data added to the request URL comes after a “?” (e.g., http://example.com/foo?name1=value1&name2=value2).
Authentication
When accessing someone else’s data, you must design an authentication flow (user login, server login, etc.).
If the webhook calls a login Web API, a custom design is also required to meet the other service’s requirements.
The other server sends data back as a response.
Format: JSON.
Creating a Custom Bot That Uses Webhooks
Prerequisite: Before using a webhook in a custom bot, you must first create both a Widget and an Automated Message.
Widget Configuration
Create an input-form template that the custom bot will use.
From the Property Management screen, go to [Chat] → [Widgets].
Click New Widget.
For each row, choose the Field Name (information you want to collect) and the Field Type.
Click the ＋ button on the right to add more rows.
Choose from nine available field types.
Creating an Automated Message
Define when the bot should be triggered.
From the Property Management screen, select [Settings] → [Automated Messages].
Click Add New Automated Message and fill in the settings.
If linking to an FAQ response, choose FAQ AI Response as the trigger and enter the FAQ answer code.
Building the Custom Bot
Create the custom bot that incorporates the webhook.
Go to [Chat] → [Bots] and click Create Bot.
Enter a name (not shown to guests). Template selection is currently unavailable.
Click Add Step and add question steps following your flowchart.
How to Add a Webhook Step
After saving the bot name, you’ll see the bot editor.
Click Add Step and choose Send API Request.
Fill out the API Request screen.
(Optional) Enable Notify chatbot user while processing to set a progress message and map response data to variables.
When guests with registered email addresses use the bot, a confirmation email is automatically sent (also BCC’d to the hotel).
When guests with registered email addresses use the bot, a confirmation email is automatically sent (also BCC’d to the hotel).
Click Allow access to Google Account and sign in.
Configure the step (sheet, range, etc.).
Map variables to columns to write captured data to the sheet.
Prepare a blank sheet and label the first row as headings.
Use Test Bot in the top-right corner of the editor to preview the conversation.
Example 1: Using Data Retrieved via Webhook
You can insert data retrieved by a webhook into a message.
Select [Add] → [Send Message].
In the message content, drag and drop variables from the right-hand panel.
These variables should be ones you've set in the "Map Response to Variables" section of the API request step.
Example 2: Selling Items Like Drinks via API
Here’s an example of an API response:
{ img: "...5j1513706393.jpg", menu_name: "Drink name" menu_subname: "Purple Rum, soda", menu_description: "1000yen", price: 1000, id: 1 }
Assign variable names to the API response fields.
You can drag and drop variables shown on the right-hand side of the message editor.
Select [User Input].
Choose [Slider Widget].
Based on the API response, configure the widget to display all drink items as a list by assigning a Response Key.
The drink list will be shown on the customer-facing screen as configured.
Note: You can also assign variable names like “img” or “menu_name” to display only specific information.
When the user selects an item (e.g., order), create a message using [Send Message].
Insert variables into the message to confirm the order details.
If the user wants to change their selection, provide a message to return them to the previous input step.
Enable [Allow user to revisit a previous step] and select the relevant User Input step.
Enter any instructional text.
Processing Payments by Credit Card
Select [Request].
In the request setup screen, select [Payment], enter the amount, and click Save.
After configuring payment, the system displays branching options for Success and Failure.
If Payment Is Successful:
Add a step and select [Send Message] to show a confirmation message.
If Payment Fails:
Add a step and select [Send Message] to notify the user of the failure.
Enable [Allow user to revisit a previous step] so they can retry.
Set it to return to the message just before the payment step.
If you want to send a confirmation email to the user, check the box [Send confirmation email to user].
A confirmation email like the one below will be sent.
Example 3: Selling Options via Chatbot (tripla Book)
You can sell options (add-ons) from tripla Book through the chatbot.
Setup:
First, create the options using the tripla Book option feature.
The created options will appear in a pull-down list.
Choose up to 8 options to offer via chatbot.
If date/time has been set via a previous User Input step, you can map them to corresponding variables.
When an option is added, it will be included in the request.
Make sure to assign the variable set for that option.
Example 4: Writing to a Google Spreadsheet
If you're collecting reservation details or similar information, you can write the data into a Google Spreadsheet.
Setup:
Prepare a blank spreadsheet and input the data fields you want to collect.
Select [Google Spreadsheet].
Follow the configuration format shown in the table (not included in this translation).
Once this is set up:
The [Write] section will display the input fields from the spreadsheet.
Link the fields with variables to export the input data correctly.
That completes the setup process.
Related Articles
Chatbot FAQs
Q.I want to change the text in the speech bubble. A.You can do this by editing the icon message. [Click here for instructions.] Q.I’ve changed the text in the speech bubble and want it translated. A.Please request the translation via the chatbot ...Booking Widget Webhook Configuration
Open [Admin Settings] from the brand management screen. Select [Admin Settings] → [Webhook]. A list or the initial screen will be displayed. Click [+Webhook]. Enter the required information. In the "Reservation Event" field, you can now select from ...LINE Integration (SNS Distribution, Chatbot Integration)
By integrating tripla with LINE, you can easily send LINE messages to customers and let the AI-powered bot handle inquiries. Additionally, by utilizing the rich menu settings, you can offer convenient features such as “Online Reservation” and ...Chatbot Widget Settings
You can configure the chatbot’s appearance, name, icon image, and more. ⏱ Estimated time: about 10 minutes Where to configure In the facility management screen, go to Settings → Widget Settings → open the Chatbot Widget. You can configure various ...Chatbot Frequently Asked Questions (FAQ) Registration
Here is a guide on how to display Frequently Asked Questions (FAQs) within the chatbot and how to configure question-triggering messages based on specific conditions. How to Set Up FAQ Display The following explains how to display FAQs like those ...