Skip to main content

Installing the CellarPass Booking Widget For Web Designers (2025)

Updated

This article covers all the necessary steps to successfully install and style the CellarPass v4 widget which was upgraded on 2/03/25. We recommend all installed widgets be upgraded to this version so you can begin testing compatibility.

One of the last steps to launching on CellarPass is offering some means for your guests to book reservations or purchase tickets on your website. This will require you to generate code from our admin panel and making edits to your website. Depending on your skillset, there are different options for you to choose from based on your CellarPass subscription.

GENERAL WIDGET EMBED NOTES
We DO NOT recommend you install the booking widget in a modal window or popup window linked from your website. This provides your guests with a poor booking experience on different mobile devices. If you cannot install the embedded widget, there's methods on how you can link to it.

For the best user experience, reduce the masthead, banner, navigation menus and any other content that is outside of the widget itself. This will reduce the amount of required scrolling or possible conflicting content or code.

GENERATING YOUR WIDGET CODE
You will generate the widget code needed to link to or embed the CellarPass widget into your website (or emails) by using the admin panel's Widget Code Generator feature.

NOTE: You must have admin-level access to the admin panel and your own website to follow these steps.

  1. Log into the CellarPass admin panel by going to https://www.cellarpass.com/manage
  2. Click Marketing from the left-hand main menu.
  3. Click Widget from the submenu.
  4. This will take you to the Widget Code Generator page where you will be provided different options depending on your CellarPass subscription.

CHOOSING A WIDGET VERSION
Depending on the design of your website and the platform that is used to host it, can impact the widget options that are available to you. We will list them in order that starts with the easiest to the more customized version.

As always, we recommend testing your webpage(s) after any time they are modified to ensure any simple changes did not have adverse effects on the widget installation.


1. SHARE WIDGET LINK (Easiest)
Requires Reservation Plan Subscription
This is the easiest of all widget options to get your website booking reservations in just a couple of steps. This is just a matter of adding a button to your website (or text link) that links to your profile page on the CellarPass website.

This same method can be used in social media posts, emails and paid ads.

    1. On the Widget Code Generator page in our admin panel, select the Share Link option from the menu on the left.
    2. Click the Copy button to the far right of the displayed URL. This will copy the URL link to your computer's clipboard.
    3. In your own website's editor, add a button or text link in the page where you would like to link to your booking engine.
    4. In the button or text link's property window, locate where you can assign a URL to be linked to.
    5. Paste the URL from CellarPass into the link's property window.
    6. Click Save.
    7. Depending on your website's editor, publish your changes.
    8. Preview the webpage that has the button or link and confirm that it is linked properly.
    9. Complete thorough tests of your webpage in a desktop browser, on a tablet and a mobile device to ensure that your buttons are displayed and linked properly.


2. EMBEDDING COMBO VERSION OF WIDGET (Intermediate)
Requires Reservation Plan Subscription
You can seamlessly embed the CellarPass booking widget into your website by simply copying and pasting some code into your website's editor. This is one of the more popular choices that properties use to accept reservations on their website.

View Example

      1. On the Widget Code Generator page in our admin panel, select the Combo option from the menu on the left.
      2. Click the Copy button to the far right of the displayed RUL. This will copy the URL link to your computer's clipboard.
      3. In your own website's editor, add a button or text link in the page where you would like to link to your booking engine.
      4. In the button or text link's property window, locate where you can assign a URL to be linked to.
      5. Paste the URL from CellarPass into the link's property window.
      6. Click Save.
      7. Depending on your website's editor, publish your changes.
      8. Preview the webpage that has the button or link and confirm that it is linked properly.
      9. Complete thorough tests of your webpage in a desktop browser, on a tablet and a mobile device to ensure that your buttons are displayed and linked properly.

3. EMBEDDING LIST VERSION OF WIDGET (Intermediate)
This version will display a list of all your public Reservation-based experiences and any available public Ticketed events into your website.

View Example

  1. The Inline version of the widget will display the standard reservation widget, including any public ticketed events you published.
  2. Select Inline button on the left to preview the Inline version of the booking widget which is displayed on the right hand side.
  3. Click the Get the Code button to the far right. Doing so will generate the widget code to embed into your website.
  4. Click the Copy Code button.
  5. In your website's editor, you will need to Paste this code into the area on your website where you would like the booking widget to appear.
    1. The alternative is to click the Email Instructions button which will send an email to an email that you provide in the form.
  6. Save the changes to your webpage.
  7. Review and test your widget in different browsers and devices as necessary to ensure optimal user experience.

* We do not support the installation of more than one inline widget on the same web page.  If you must go with this approach, you must use the hyperlink approach.

4. EMBEDDING TICKETED EVENT WIDGET (Intermediate)
This version will display a list of all your available public Ticketed events into your website.

  1. Select Tickets button on the left to preview the Inline version of the booking widget which is displayed on the right hand side.
  2. Click the Get the Code button to the far right. Doing so will generate the widget code to embed into your website.
  3. Click the Copy Code button.
  4. In your website's editor, you will need to Paste this code into the area on your website where you would like the booking widget to appear.
    1. The alternative is to click the Email Instructions button which will send an email to an email that you provide in the form.
  5. Save the changes to your webpage.
  6. Review and test your widget in different browsers and devices as necessary to ensure optimal user experience.

* We do not support the installation of more than one inline widget on the same web page. If you must go with this approach, you must use the hyperlink approach.

5. SHARING BOOKING LINKS

If you cannot install the widget, you can create buttons or links on your website which will then use the "Share the link" method which appends "book=true" URL to your business page URL. You can find this URL by going to Marketing, then select Widget. The link will appear to the right.

An example of this link for our Encore Winery is:

https://www.cellarpass.com/profile/encore-winery?book=true

Do not ever link to your business page on the CellarPass.com website as this will mark these booked reservations as "REF" instead of "WGT".

 

6. RESERVATION ACCESS CODES
If you are using Access Codes for Reservation-based experiences, yes, you will need to update these links as all of our links to Business pages have been updated. You will need to update all of these by going to the Access Codes panel for each of your experiences and update them accordingly.

 

ADDITIONAL CUSTOMIZATION OPTIONS
There are a few additional customization features you can use with the widget:

1. WIDGET THEME DESIGNER

The Widget Theme Designer allows you to define the colors of the theme for the Inline and List widgets. You will need Administrative-level access to make these changes. We recommend you first install the Widget into your website so that you can review the results after making changes to the theme.

  1. Log into the CellarPass admin panel by going to https://www.cellarpass.com/manage
  2. Click Marketing from the left-hand main menu.
  3. Click Widget from the submenu.
  4. Below the types of Widgets, select the Theme Designer button.
  5. This panel will allow you to make changes to all the Widget styles available to you.
  6. Switch the Enable Theme system.
  7. Make the style changes to meet your design needs.
  8. Click Save.
  9. Refresh the webpage where the CellarPass widget is installed.
  10. Review and test as necessary before making the page public.

NOTE: The standard CellarPass booking widget theme meets all the current ADA and WAVE requirements. You assume all liability and responsibility when making any modifications to the widget theme.

2. SINGLE RESERVATION EVENTS (Reservation Subscribers Only)
For those that want to create a Widget that only shows a specific event, you can do this by changing the Show All Events option to be Select Single Event via the dropdown on the left, under the type of Widget.

Once you have selected this option, you must choose which Reservation-based experience you would like to generate the Widget code for. Be sure to select date range (or single date) that matches the date range your experience is valid.  

NOTE: This widget will only work with Active-Public events only. If you need to share a link for an Active-Private Reservation-based experience, please use Access Codes which are not embeddable, but you can use a button link method instead.

Advanced Options to Consider

RSVP EventID Combo Widget (Advanced)
For those that are looking to create a customized widget that limit the display to a single EventID, you can follow these instructions to do so.

  1. Select Inline button on the left to preview the Inline version of the booking widget which is displayed on the right hand side.
  2. Select the Show All Events button.
  3. In the input field, select the name of the Experience you wish to select.
  4. Click the Get the Code button to the far right. Doing so will generate the widget code to embed into your website.
  5. Click the Copy Code button.
  6. In your website's editor, you will need to Paste this code into the area on your website where you would like the booking widget to appear.
    1. The alternative is to click the Email Instructions button which will send an email to an email that you provide in the form.
  7. Save the changes to your webpage.
  8. Review and test as necessary before making the page public.

* Note if you install an EventID-specific widget code, we strongly recommend that you understand that once the event's End Date is in the past, this will prevent the guest from booking any experiences.

Related articles

Comments

0 comments

Article is closed for comments.

Powered by Zendesk