How do I add an OpenTable make a reservation widget to my website? (Tags: 3rd party software, advanced)

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 ***
Because of a resource conflict the OpenTable widget code that is extracted from the OpenTable reservation widget generator can not be directly dropped into a Talkspot Javascript Widget and instead must be deferred through an additional and very simple HTML file.  While this adds a number of steps to the process it is currently necessary to get the full OpenTable reservation widget as opposed to just a OpenTable reservation button.  See information starting at step #10.
 
 
To add an OpenTable "Make a Reservation" widget to your Talkspot website please follow these instructions:
  1. Go to https://www.otrestaurant.com/marketing/ReservationWidget/
  2. Select a language
  3. Enter a keyword to search for your restaurant
  4. The search element will transform into a drop-down with options to choose from
  5. Once you have located your restaurant click "Next" on the right side of the page
  6. Select radio button according to your preference of Standard, Tall or Wide widget layout
  7. Click button "Customize"
  8. 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
  9. Select and copy the code in the "Grab Code" text area box (Copy on a PC is Ctrl- c, Mac is Command- c)
  10. 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
  11. Copy the HTML code with newly pasted OpenTable widget into a text editor on your computer and save the file as "opentable.html"
  12. Upload the newly created HTML file opentable.html using "Edit Site > Files > Upload Files"
  13. Go to "Dashboard" and record your customer number (Example: 133194)
  14. Login to your Talkspot website if you have not done so already
  15. Navigate to the page where you want to place your OpenTable widget and click the "Add Widget" button on the admin bar
  16. Choose the Javascript Widget and place the Talkspot Javascript Widget on your page
  17. Using the code format below at ** enter your specific information for the following 4 items and paste the iframe line into the Talkspot Javascript Widget
    1. Replace [YOUR WEBSITE ADDRESS] with your website address
    2. Replace [YOUR CUSTOMER #] with your customer number located in step 13
    3. Replace [WIDTH OF IFRAME] with appropriate pixel width from the "iframe sizing chart" below
    4. 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.
  18. Click "Submit" to save the code you have entered into the Javascript Widget
  19. Go into preview mode or log-out because the javascript will not be executed in Edit mode
  20. 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.
  21. If you are having trouble contact support@talkspot.com.
 
 
 
 
* Cut code below this line after pasting the OpenTable widget code where is says ... " *** PASTE OPENTABLE WIDGET CODE HERE *** "
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
 
*** PASTE OPENTABLE WIDGET CODE HERE ***

</body>
</html>
* 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
 
Example:
<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)
 
 
 
 
 
 
 

Add Feedback