CellarPass Help Center

Get quick answers to common questions

All Articles > Installing the CellarPass v3.01 Javascript Widget For Webdesigners

Installing the CellarPass v3.01 Javascript Widget For Webdesigners

Updated over a week ago

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

This document discusses how to embed the JavaScript version of our widget which is compatible with most content management systems, but not all. If your website does not support the embedding our JavaScript widget, then we suggest you go with the iFrame route which is discussed in this article.
Which ever version you choose, both support the ability to customize the colors so that the CellarPass widget can closely match the colors and theme of your website which is explained in Section 4 below.

 

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: This widget version requires that you have access to edit the <head> portion of your webpage. If you do not have access to place code into the head section of your website, you will need to opt for one of the other widget design options.

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. For those using WordPress, skip to the WordPress section below for this step.
  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 Javascript Widget in the <head> Section

You will need to embed this javascript into the <head> portion of your webpage(s) where you would like to use the CellarPass Inline widget.

  1. Add the following snippets above the closing </head> tag.

<script type="text/javascript" src="https://wgt.cellarpass.com/v301/cp_widget.js"></script>

3. Choosing & Embedding the RSVP Widget

This next step covers the different versions of the widgets that you can embed into your website. You can use multiple on the same page, in necessary. Scripts will need to be embedded into the <body> section of your webpage(s).

Standard Inline RSVP Widget

  1. This widget version will display the standard reservation widget, including any ticketed events.
  2. Add the following snippets above the closing </body> tag.

    <div id = "cellarpass-widget" class="cellarpass-widget" data-modal="false" data-url="mid=26"></div>

  3. Change "26" for your own MemberID. Your MemberID can be found in the top, right-hand corner of Settings, Member Configuration.
  4. Save the changes to your webpage.
  5. Review and test as necessary.

RSVP EventID Inline Widget

  1. This widget version will display a specific RSVP-based EventID.
  2. Add the following snippets above the closing </body> tag.

    <div id = "cellarpass-widget" class="cellarpass-widget" data-modal="false" data-url="mid=26&eventid=14236"></div>

  3. Change "26" for your own MemberID. Your MemberID can be found in the top, right-hand corner of Settings, Member Configuration.
  4. Change "14236" with your own Reservation EventID. This can be found in the admin panel
    1. Click Reservations from the left-hand menu.
    2. Then click Create & Manage from the submenu.
    3. Locate the Event in the Event Manager, the EventID will appear directly below the Event Name.
  5. Copy and paste this code before the <body> tag of your webpage(s)
  6. Save the changes to your webpage.
  7. Review and test as necessary before making the page public.

RSVP SlotID Widget

  1. This widget version will display a specific RSVP-based EventID.
  2. Add the following snippets above the closing </body> tag.

  <div id = "cellarpass-widget" class="cellarpass-widget" data-modal="false" data-slotid ="16471" data-slottype="0" data-url="mid=26"></div>

  1. Change "14236" with your own Reservation SlotID. This can be found in the in Reservations, Create & Manage. The EventID will appear directly below the Event Name.
  2. Change "26" for your own MemberID. Your MemberID can be found in the top, right-hand corner of Settings, Member Configuration.
    1. From the left-hand menu, select Calendar.
    2. From the tabs above the Calendar to the right, select Schedule.
    3. Using the date picker, locate the date, event and time slot.
    4. Double-click the time slot. This will open a new modal window. At the bottom, the EventSlotID will appear. This is what you will replace "16471" with.
  3. Copy and paste this code before the <body> tag of your webpage(s)
  4. Save the changes to your webpage.
  5. Review and test as necessary before making the page public.

4. 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.

5. Additional Steps (optional)

Please note that these instructions are provided as a guide for WordPress. If you need additional assistance with installing plug-ins or custom tailoring your CellarPass widget, please contact your webmaster.

  1. Due to WordPress not providing access to the "head" section of your webpages, you will most likely need to install the "Insert Headers & Footers" plug-in provided by the authors of WordPress.
  2. Follow their installation instructions.
  3. Once the plug has been installed, go to Settings, then select Insert Headers & Footers.
  4. You will need to copy and paste this code into the "head" section of the Insert Headers & Footers plug-in. <script src="https://wgt.cellarpass.com/v301/cp_widget.js"></script>
  5. We also recommend copying and pasting the "Auto Size" code below into the same "<head>" section below the code you pasted in Step 5.4 above.
  6. Click Save (or Update) to save the changes.
  7. Refresh the webpage where the CellarPass widget is installed.
  8. Review and test as necessary before making the page public.

6. 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.

  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.