This is considered an advanced tutorial and will require some knowledge of the Liquid templating language. You should be comfortable editing your theme files directly.

You can customize the colors, fonts, and styles of the booking experience to match your brand and theme.

By default, the booking form is separate from your theme's template structure. This was done to avoid conflicts between your theme's styles and the booking form's styles. This ensures that the setup works smoothly without any issues preventing your customers from checking out.

The downside is that it's not as straightforward for you, as a merchant, to make small changes to the booking form, like modifying button colors or fonts.

To address this, we have designed the booking form to allow you to embed the complete booking form within your themes by making a few adjustments to your experiences liquid template. This way, the booking form will inherit the corresponding styles from your theme.

In most cases, the booking form will work well with your themes, and you'll be ready to proceed after making these changes. However, if there are conflicts between the theme styles and the booking form, you may need to add some additional CSS to resolve the issue.

In this tutorial, we'll guide you on making edits to the product.experiences.liquid file to embed the booking form on your site. If you're unsure where to find that file, please refer to our help article on locating your product liquid template.

Let's get started!

If you'd rather follow along with a video guide here's a recording of us walking through the same steps!

Step 1: Swap out your "activator" button for the embedded button

Once you have located your product.experiences.liquid file, the initial step is to modify the full-page activator button. By default, this button redirects to the non-embedded version of the booking form. We will replace it with a button that triggers the full-page form to appear within your theme.

To accomplish this, find the activator button in your template. It will resemble the following:

Tip to find code: When you're in the template, click on the main body of code and then use CMD+F (or equivalent for Windows) to search for a bit of the code you're looking for.

<button class="exp__book-now-btn" onclick="redirectToExperiences()">Book now</button>

Once you've found that, you'll want to replace it with this code:

<button class="button button--color-primary expapp-booking-form-activator">Book Now</button>

The differences between the buttons are small but significant. You can include multiple buttons on your page if desired.

For instance, if you want call-to-action buttons at the top and bottom of your experience product page, copy and paste the same button wherever you want. After making the modifications, any of these buttons will activate the booking form.

This is also an opportunity to customize the button label according to your preference, such as "See Dates," "View Classes," or any other appropriate label.

Step 2: Create the mounting point for the booking form

Perfect! Now, let's proceed to the next step, which involves adding the actual spot where the booking form will attach itself in our HTML when triggered.

The specific location of this element isn't crucial, but I recommend placing it right above or below one of the buttons you added earlier. This way, it will be easy to locate them later.

Important note: Unlike the activator button, ensure that you only include ONE copy of the base element. Adding more than one will result in the form loading multiple times on your page.

Here's the code snippet for the base element:

<div        
            data-expapp-full-page-booking-form        
            data-expapp-full-page-booking-form-shop-url="{{ shop.permanent_domain }}"        
            data-expapp-full-page-booking-form-base-url="https://prod-v2-api.experiencesapp.services"        
            data-expapp-full-page-booking-form-background-color="#fff"        
            data-expapp-full-page-booking-form-text-color="#505655"        
            data-expapp-full-page-booking-form-primary-color="#505655"        
            data-expapp-full-page-booking-form-secondary-color="#252525bf"        
            data-expapp-full-page-booking-form-button-shape="square"        
            data-expapp-full-page-booking-form-product-id="{{ product.id }}"
            data-expapp-full-page-booking-form-language-code="{{metadata.languageCode | default: "en-US" }}"
      >
      </div>

Step 3: Include the script tag to import the booking form JavaScript file

Now that you have added the activator button and base element for the booking form, the last step is to import the JavaScript file responsible for making everything function properly!

To achieve this, insert the following code snippet into the template towards the bottom third on its own line:

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

Step 4: Customizations (Optional)

In the final step, you can customize the booking form according to your preferences. When you visit one of your experience products, you should see the activator/booking button. Clicking on it will open the booking form.

Upon closer inspection, you'll notice that the booking form adopts some of the fonts and colors from your theme.

At this point, it's important to thoroughly check for any issues caused by your theme styles, such as elements being hidden or disabled.

Once you've completed the review, you can add custom CSS to the product.experiences.liquid file. To do this, create a <style> tag around line 43 of the template directly below the link to our embedded.css file.

For example, if you wish to change the primary button colors from blue to red, you can include a code snippet like the one below:

<style>
  .button--color-primary {
    background-color: red;
    color: white;
  }
</style>

Or, you may want to hide prices on the step where your customer chooses the day and time. You can do that by adding this:

<style>
  .timeslot-card__details__pricing {
    display: none;
  }
</style>

From there, you only need to identify a unique class or id on the element you want to style and overwrite the built-in styles.

Wrapping Up

Well done! You've officially embedded the Full Page Booking Form inside of your theme. We hope this has been helpful.

If you have any additional questions or issues, don't hesitate to contact someone from our team using the little chat bubble or email us directly at hello@experiencesapp.com.