How to add an OpenTable reservation widget to your chatbot
Last updated: 05 July 2021
A chatbot can be a perfect tool to help eager (and hungry) customers book a table at your restaurant.
In this tutorial, we show you how to combine the ease and conversational interaction of a chatbot with the most popular table booking widget OpenTable.
Step 1: Set up your OpenTable reservation widget
To start us off, let’s find your OpenTable reservation widget.
If you have a website, chances are you (or your web designer) have already grabbed this once. It’s very easy, follow these steps:
In the search box on the left, find your restaurant.
(Optional) Change your widget language.
In the Widget type, pick either Standard or Tall.
Leave Load widget in an iframe ticked.
(Optional) Change the Source tracking to Others and enter Chatbot.
(Optional) Give your campaign a name.
In your preview, you should have something like this:
Step 2: Find your embed code
OpenTable make it really easy to grab their code and paste it into a website. If you scroll below the preview, there it is:
Unfortunately, this code doesn’t work as an embedded inside a chatbot. It’s missing crucial elements we need to render the widget.
Fear not. While the following might seem complicated, it’s actually very simple. Just follow the steps and you will be fine.
To find the right code, first copy the widget’s URL into a new browser tab and hit enter.
What you should see is a bunch of code. This is normal.
Within this code, you’re going to need to look for a URL that starts with https://www.opentable.com/widget/reservation/canvas?. If you can’t find it, try command+F (ctrl+F on Windows) and type canva?. You will find the URL immediately. Here it is:
Great, now save this entire URL. This is what we will need to copy into our chatbot’s message.
Step 3: Create an embed message
You could surface your reservation widget at any point during a conversation or as a response to an FAQ. Whether that is, you will need to set up an embed message.
For now, let’s assume you’re going to create an FAQ with the OpenTable widget.
Head over to Knowledge → FAQs.
Create a new FAQ. Enter a few ways of asking the same question (e.g. ‘can I book a table?’).
In the response, select Embed as the message type.
Write your message copy.
Write a title (e.g. ‘Book a table’).
Copy your new URL into the URL field.
Hit Save.
Step 4: Test your new FAQ
Go to Demo and test your new FAQ.
As the response pops up, click the View button. Your reservation widget should appear inside the embed slide-in.
