Experiences Calendar Booking Widget

NOTE: There is a risk with this widget that your theme styles will conflict with the styles of the widget. We recommend using our new full page widget instead, which will not collide with your theme styles.

To configure this, you can go into your Experiences App Settings page and find the drop down labelled "Default Template". Once there, you can select "Full Page" from the menu and click "Save".

One of the latest additions to our experience booking flow is our new calendar booking widget. This is an embeddable widget that you can place anywhere on your Shopify site or even on an external site, pass in a few configuration values, and allow your customers to buy or reserve your experience.

It adds a couple of neat features.

Customers can browse a full month calendar rather than just a single week at a time. We hope this will decrease the time your customers are clicking around and decrease the time it takes for them to book an experience with you.
It is embeddable anywhere using Shopify's Javascript BuySDK. By creating a custom storefront app and passing the storefront access token into our widget, you'll be able to embed this form anywhere on the internet, not just on your Shopify store. For example, if you sell your experiences on a WordPress, Drupal, or some other site, you can easily set up our widget to sell/reserve anywhere

Here's what the booking experience looks like

If you want to skip the reading, you can follow along with a video tutorial we've made here. All code snippets that are mentioned in the video will be provided below for you to copy/paste wherever you're embedding the widget.

To get started, you're going to need to decide if you're embedding this on your Shopify store or if you're embedding this into a site outside of Shopify.

Embed in your Shopify store

The most straightforward way of embedding the Calendar Booking Widget is to simply embed it in your Shopify store in place of the previous experiences booking widget. To do this first open your theme code by clicking on the "Online Store" button in the Shopify sidebar.

You can either edit the published theme which will change your live theme, or you can duplicate your theme, edit it and publish the duplicate so as not to break anything that's live.

Open your theme to edit by clicking "Actions > Edit Code". This will take you to an editor where you can see all your shop's liquid templates.

Under the "Templates" folder you'll want to find a file called product.experiences.liquid. Click on this template to open it in the editor.

(Here's how to find your theme file if you've never done this)

Replace the HTML element:

First, you'll want to replace the HTML element for the previous booking form with the element for the new one. On line 90 (may change based on your template customizations), you'll want to find the following line which loads the previous booking form widget.

<div class="product__dropdown-group" id="exp__booking-embed"></div>

And replace it with this line to load the new calendar booking widget.

<div data-expapp-calendar-booking-form
      data-expapp-calendar-booking-form-language-code="{{ metadata.languageCode }}"
      data-expapp-calendar-booking-form-product-id="{{product.id}}"
      data-expapp-calendar-booking-form-shop-url="{{shop.permanent_domain}}"
      data-expapp-calendar-booking-form-base-url="https://prod-v2-api.experiencesapp.services"></div>

Add the javascript link for the widget:

The next step is to link the javascript code that will load the calendar booking to the page. To do this scroll down to around line 162 (again, this may differ based on your customizations in the template) and find the other <script> tags in the template. You should see one that looks like the following:

<script src="//prod-v2.experiencesapp.services/storefront/embedded.js"></script>

and directly under it add the following line to load in the widget code.

<script src="//widgets.experiencesapp.services/public/prod/widgets.js"></script>

Comment out the old booking widget code:

Just to keep things clean, we can comment out the code that initializes the old booking widget which is no longer needed. To do that you should go to around line 164 which is right below where you just added the link for the widget javascript code.

Find the section that starts with ExperiencesApp.enableBooking and comment out to the end of the enableBooking function. You can comment out a full section by selecting all the lines you want to comment out and typing CMD + "/" on a mac or CTRL + "/" on windows. At the end of this the final lines of your product.experiences.liquid template should look like the following:

<script defer>
//   ExperiencesApp.enableBooking({
//     baseUrl: "https://expapp.ngrok.io/api",
//     currencyFormat: '{{ shop.money_format }}',
//     languageCode: "{{ metadata.languageCode }}",
//     minLimit: parseInt({{ metadata.minLimit }}),
//     maxLimit: parseInt({{ metadata.maxLimit }}),
//     productId: {{ product.id }},
//     productName: "{{ product.title | escape }}",
//     paymentType: "{{ metadata.paymentType }}",
//     rootSelector: "#exp__booking-embed",
//     shopName: "{{ shop.name | escape }}",
//     shopEmail: "{{ shop.email }}",
//     shopId: "{{ shop.permanent_domain }}",
//     ticketCost: parseInt({{ product.price }}) / 100,
//     variants: {{ product.variants | json }},
//     startOnMonday: true
//   });
  let imageUrls = [];
  {% for image in product.images %}
    imageUrls.push({
      featured: "{{image}}" === "{{product.featured_image}}",
      url: "https:{{image | img_url: "master" }}"
    });
  {% endfor %}
  ExperiencesApp.enableCarousel({
    rootSelector: "#exp__carousel",
    imageUrls,
  });
</script>

where the ExperiencesApp.enableBooking is commented out so as not to load.

Save and test out:

At this point, you have completed all the edits needed and should save your product.experiences.liquid file.

You can test out the new booking widget by going to any of your experience productions on the storefront and seeing the following button in place of your previous booking widget.

Explanation of the embed code

Want to do some extra credit? If you'd like to understand what the embed code does, here's a quick explanation.There are really just 4 main pieces here. On the div element, we have 4 attributes.

data-expapp-calendar-booking-form - this tells our app which widget to load into that div element. All other attributes must be prepended with this as a prefix.
data-expapp-calendar-booking-form-product-id - this is the Shopify product id which is supplied to many liquid templates by default. It tells our app which product to present to the customer. It must be an experience that was created through the app admin dashboard. If you load the widget outside of Shopify you'll have to provide the correct Shopify product id.
data-expapp-calendar-booking-form-shop-url - this is the myshopify.com URL for your shop. Again this is provided by default in most Shopify liquid templates but if you load the widget outside of Shopify, you'll need to ensure this is provided in that ecosystem. It tells our widget which shop is loading the app.
data-expapp-calendar-booking-form-base-url - this is the base URL for our widget to communicate with our backend. It will always be the same but allows us to configure the widget to different backends if needed. This can be hardcoded as shown above to https://prod-v2-api.experiencesapp.services

Let's get into how you can start using our widget on your site today.

Embed in your Shopify store

Explanation of the embed code