NOTE: This customization doesn't seem to be working at this time. We are looking into why the JS widget isn't reliably loading outside of a Shopify storefront environment.
This tutorial requires some knowledge of HTML, CSS, and Javascript. If you have any questions about this tutorial, don't hesitate to reach out to use using the chat icon below.
Step 1: Create a Shopify storefront access token.
Step 2: Add the booking widget code to your site
Replace the carrots and what's in the middle. e.g. "<SHOP_URL>" would simply be "myshopname.myshopify.com"
Put this script anywhere on your page, but you may want to put it in the <head> of your webpage
<script src="https://widgets.experiencesapp.services/public/prod/widgets.js"></script>
Put this in the body of your page where you want the button to appear.
<button class="expapp-booking-form-activator">Book Now</button>
<div
data-expapp-full-page-booking-form
data-expapp-full-page-booking-form-product-id="<PRODUCT ID>"
data-expapp-full-page-booking-form-shop-url="<SHOP_URL>"
data-expapp-full-page-booking-form-base-url="https://prod-v2-api.experiencesapp.services"
data-expapp-full-page-booking-form-storefront-access-token="<STOREFRONT ACCESS TOKEN>"
></div>
Here's an example of what the body part might look like:
<button class="expapp-booking-form-activator">Book Now</button>
<div
data-expapp-full-page-booking-form
data-expapp-full-page-booking-form-product-id="8493580353851"
data-expapp-full-page-booking-form-shop-url="experiences-app-demo.myshopify.com"
data-expapp-full-page-booking-form-base-url="prod-v2-api.experiencesapp.services"
data-expapp-full-page-booking-form-storefront-access-token="a68786cc6cd552b7889b64df0588888"
></div>