Q: What is OpenTable?
A: OpenTable, Inc. is the leading provider of free, real-time online reservations for diners and reservation and guest management solutions for restaurants. (Reference: https://www.opentable.com/about/)
*** Important Note ***
. See information starting at step #10.
To add an OpenTable "Make a Reservation" widget to your Talkspot website please follow these instructions:
- Go to https://www.otrestaurant.com/marketing/ReservationWidget/
- Select a language
- Enter a keyword to search for your restaurant
- The search element will transform into a drop-down with options to choose from
- Once you have located your restaurant click "Next" on the right side of the page
- Select radio button according to your preference of Standard, Tall or Wide widget layout
- Click button "Customize"
- Once you have arrived at the page for customization toggle and set the visual features of your widget ensuring the the preview is what you want
- Select and copy the code in the "Grab Code" text area box (Copy on a PC is Ctrl- c, Mac is Command- c)
- Paste OpenTable widget code into the HTML template below replacing the line that says *** PASTE OPENTABLE WIDGET CODE HERE *** while ensuring not to disturb the opening or closing <body> tag
- Copy the HTML code with newly pasted OpenTable widget into a text editor on your computer and save the file as "opentable.html"
- Upload the newly created HTML file opentable.html using "Edit Site > Files > Upload Files"
- Go to "Dashboard" and record your customer number (Example: 133194)
- Login to your Talkspot website if you have not done so already
- Navigate to the page where you want to place your OpenTable widget and click the "Add Widget" button on the admin bar
- Replace [YOUR WEBSITE ADDRESS] with your website address
- Replace [YOUR CUSTOMER #] with your customer number located in step 13
- Replace [WIDTH OF IFRAME] with appropriate pixel width from the "iframe sizing chart" below
- Replace "[HEIGHT OF IFRAME] with appropriate pixel height from the "iframe sizing chart" below. So if you selected the tall OpenTable widget then you would want to use the value 460 here.
- You should now see your make a reservation OpenTable widget. To troubleshoot enter your version of http://[YOUR WEBSITE ADDRESS]/uploads/[YOUR CUSTOMER #]/opentable.html into a browser address line to see if the widget loads firstly.
- If you are having trouble contact email@example.com.
* Cut code below this line after pasting the OpenTable widget code where is says ... " *** PASTE OPENTABLE WIDGET CODE HERE *** "
*** PASTE OPENTABLE WIDGET CODE HERE ***
* Cut above this line including the closing </html> tag
** Change 4 values and cut one line below
<iframe src="http://[YOUR WEBSITE ADDRESS]/uploads/[YOUR CUSTOMER #]/opentable.html" width="[WIDTH OF IFRAME]" height="[HEIGHT OF IFRAME]" style="border:none;"></iframe>
** Cut above this line
<iframe src="http://guitarzone.talkspot.com/uploads/133194/opentable.html" width="200" height="460" style="border:none;"></iframe>
iframe sizing chart: (DIMENSIONS UPDATED: 06/01/2016)
Because there are various sizes and configurations of the make a reservation OpenTable widgets the iframe should have dimensions similar to the following values. When the widget is active, the iframe needs to be larger than the actual widget itself because when in use it expands to a web page. Below are some new recommended dimensions for the iframe itself:
Standard - 840 x 440
Tall - 840 x 560
Wide - 890 x 300 (Note: Do not use this setting if you care about the mobile responsiveness of your website)