CellarPass Help Center

Get quick answers to common questions

All Articles > Installing the CellarPass v3.01 Widget via iFrame for Webdesigners

Installing the CellarPass v3.01 Widget via iFrame for Webdesigners

Updated over a week ago

This article covers all the necessary steps to successfully install and style the CellarPass v3.01 widget using the iFrame method

This document discusses how to embed the iFrame version of our widget which is compatible with most content management systems, but not all due to some being of older generation programming languages.

If your website does not support the embedding iFrame code, then we suggest you go with the Javascript route which is discussed in this article. If you have a choice of one or the other, recommend the JavaScript has it provides the optimal performance. You can learn more about the JavaScript version in this document.

If your website is built on WordPress, this is NOT the option to use. You will use the "Javascript" version which the installation instructions are provided here. Please see the WordPress notes in the "Additional Notes" section at the bottom of the article to aid in the successful installation.

Do note, that whatever version you choose to install, you can set the colors or "theme" of the widget to more closely match your website's colors by going to Content, Checkout Theme.

1. Generating the CellarPass Inline Widget Code

CellarPass offers several different versions of the widget, these instructions are specific to the Inline <head> version. Being one of the most advanced versions, we recommend that you only attempt to install this version unless you a) have editor-level access to your website and b) you are comfortable with embedding code. NOTE: We recommend installing the javascript version for better compatibility and the iFrame version should only be used as a last resort.

As with all modifications to a webpage, we strongly recommend you make any changes to a copy of your webpage that is not available to the public until you have fully-tested the widget on your website in all browsers and devices.

  1. Log into the CellarPass admin panel by going to https://www.cellarpass.com/manage
  2. Click Content.
  3. Click Widget Code.
  4. Select Inline Widget <head> from the dropdown menu.
  5. Follow the steps in section two as you will need to copy two pieces of code and place them into the webpage(s) you wish the CellarPass widget to appear.

2. Installing the CellarPass Widget via iFrame

You will need to embed this iframe code into your webpage where you would like the widget to render.

NOTE: You must adjust the height and width values to adjust the widget size to fit your website.

<iframe src="https://www.cellarpass.com/widget?mid=XXXX" style="border: 0px; margin: 0px; text-align: center; overflow: hidden; height: 1000px; width:100%;"></iframe>
Change MID=XXXX value to be your MemberID. You will find your MemberID to the right of your company name in the top, right-hand section of our admin panel.

3. Using the CellarPass Widget Theme System

There is no need to write any CSS for CellarPass as the widget's theme is all controlled via the CellarPass admin panel. You will need Administrative-level access to make these changes. You will need to first complete steps 1-3 to your website before this feature will function properly on your website.

  1. Log into the CellarPass admin panel by going to https://www.cellarpass.com/manage
  2. Click Content.
  3. Click Widget Theme.
  4. This panel will allow you to make changes to all the Widget styles available to you.
  5. Switch the Enable Theme system.
  6. Make the style changes to meet your design needs.
  7. Click Save.
  8. Refresh the webpage where the CellarPass widget is installed.
  9. Review and test as necessary before making the page public.

4. Advanced Auto Sizing (optional)

With a little bit of extra effort, you can add some additional code to your website that will allow the CellarPass Inline Widget automatically adjust the size (width & height) based on the guest's browser size. Here's a link on how to add code to the <head> section of your website.

  1. Locate the closing <head> tag of your webpage.

  2. Add the following script to your webpage

    <script type="text/javascript" src="https://cdn.cellarpass.com/static/js/iframeResizer.min.js"></script>

    <script type="text/javascript">

                setTimeout(function(){iFrameResize({

            log: true, // Enable console logging

            inPageLinks: true,

                            scrolling: false

          }); }, 4000);

    </script>

  3. Refresh the webpage where the CellarPass widget is installed.
  4. Review and test as necessary before making the page public.

5. Using EventIDs

If you would like to link to a specific experience (EventID), then you will modify the code slightly to have the widget only show one EventID, not all your EventIDs.

  1.  First you will need to locate your EventID for the experience you want to market.
  2. Log into the CellarPass admin panel.
  3. In the main menu, select Reservations.
  4. In the submenu, select Create & Manage
  5. You will then see a list of your reservation experiences. Just below each Event's title, you will see the EventID. Or you can also edit the event and look at the end of the URL. Either one works.
  6. You will then need to generate the code used to embed/iframe into your website. Below is the script.
  7. You will need to replace the "XXXX" to the right of the "mid" with your own. This is displayed to right of your property name, located at the top of this page.
  8. Lastly, you will need to replace the "XXXX" to the right of the "eventID" with your own. You located this in step 5 above.
  9. Once your script is set, copy and paste this follow the normal iframe embed and you'll be set.

<iframe src="https://www.cellarpass.com/widget?mid=XXXX&eventid=XXXXX" style="border: 0px; margin: 0px; text-align: center; overflow: hidden; height: 1000px; width:100%;"></iframe>

6. Additional Notes

This version is compatible with WineDirect and SquareSpace websites.

If you plan on using this version with your SquareSpace website, be sure to use the "Code" version of the content block to place the iFrame code onto your webpage as the traditional "embed" version doesn't appear to accept the widget code.

  1. Log into your SquareSpace website.
  2. Locate where you would like to add the CellarPass widget onto the page.
  3. Add a content block, choosing the "Code" version of their "pod".
  4. Copy and paste this code into the SquareSpace or CMS 'Code' window.<iframe src="https://www.cellarpass.com/widget?mid=XXXX" style="border: 0px; margin: 0px; text-align: center; overflow: hidden; height: 1000px; width:100%;"></iframe>
  5. Change MID=XXXX value to be your MemberID. You will find your MemberID to the right of your company name in the top, right-hand section of our admin panel.
  6. You can update the width & height of the widget by adjusting the height and width values in the widget code.
  7. Save your changes.
  8. Preview the page in SquareSpace where you installed the widget.
  9. Lastly, go to Content, Checkout Theme to adjust the colors of your buttons. Be sure to click the "Enable" theme system or the widget will not use your theme.