1. Help Center
  2. Sell online and in-venue
  3. Selling online

Add the overlay checkout experience to your website

Maximize guest engagement and revenue generation with the overlay checkout on your website. From a button or other element on your webpage, you can trigger the overlay checkout to open as a right-side panel over your website page.

This guide walks through the different overlay checkout options and how to add this checkout experience to your webpages.

How it works

You can present your overlay checkout in the following four ways:

  1. Open the entire checkout: The checkout will open as a side-panel and guests can scroll through your products at their leisure. This is perfect for a button such as Book now, which guests use to browse your ticketing options.
  2. Open the checkout at a specific section of the checkout: Guests can browse that relevant section (while still having access to your full list of products).
  3. Open the checkout on a specific product: Guests can quickly add that product to their cart.
  4. Open the checkout on a specific date: Guests can conveniently purchase seasonal products and passes.

The great thing about the overlay experience is that with one checkout you can use a combination of the options above throughout your website. These options all reduce the effort it takes for guests to find what they want and make a purchase, increasing your conversion rates.

The more you streamline the purchasing experience for guests, the more likely they are to make a purchase.

To learn more about how to implement these overlay options on your website, follow the relevant instructions below.

You'll need your website developer to implement the overlay experience as it involves adding code to your website pages.

Open the overlay checkout at the products page

If you have a general checkout link on your website (eg a Buy tickets button) you can overlay your full checkout, leaving guests to browse your products at their leisure.

overlay.gif

To set this up on your chosen webpage, provide the following two pieces of code to your web developer.

You can configure multiple overlays on your website.

1. Script to add to the <head> element of your website

To find the script for your developer, follow the steps below:

  1. From Venue Manager, go to Apps > Progressive checkouts > All Checkouts.
  2. Select your checkout.
  3. Select Share in the top right of the setup page.
  4. Under Step 1: Add your script, copy the first piece of code to provide to your web developer.
  5. Ask your web developer to add it to the <head> element of the website page.

Note for step 4:

  • If your venue is using custom domains, when you copy the script for your web developer, you must replace the ROLLER checkout link with your custom domain checkout link. By making this change, you'll avoid any issues with GTM cross-domain tracking.
  • For example:

    <script id="roller-checkout" src="https://cdn.rollerdigital.com/scripts/widget/checkout_iframe.js" data-checkout="https://ecom.roller.app/rollerverse/rollerversecheckout/en/home"></script>

    Becomes:

    <script id="roller-checkout" src="https://cdn.rollerdigital.com/scripts/widget/checkout_iframe.js" data-checkout="https://tickets.rollerverse.com/rollerverse/rollerversecheckout/en/home"></script>

Notes for step 5:

  • If adding multiple overlay checkouts to your website, add the relevant checkout code to the <head> element of the individual page you want to add the checkout to.
  • Whether you've built your website using a website builder like WordPress, Squarespace, or Webflow, or have a custom website, your web developer should be able to add the script to the <head> element at the page level.

2. Java script element to add the trigger

Provide the following Java script element to your web developer:

onclick="RollerCheckout.show()"

Ask them to add it to the button or other element on your webpage that you want to launch the overlay checkout from.

Best practice is to add this script to a specific button element on your webpage and include an aria-label to describe what the button should do. A unique ID also helps with Google Analytics tracking (if you use this).

Here's an example:

<button type="button" onclick="RollerCheckout.show()" aria-label="Show checkout to buy now" class="buy-now__button" id="unique-buy-now-button">
<span class="buy-now__button--wrapper">Buy now<span>
</button>

You can replace the aria-label, class and ID's, along with the button content, with your own instructions.

Open your overlay checkout at a specific section

If you’d like to send guests to a specific section in your checkout (eg Memberships) then you can add code to a button to direct guests to that specific section. All guests have to do is click the button, browse the relevant section and add products to their cart.

Find the section name and then ask your web developer to add some code to the button. Follow the steps below.

Don’t forget to add the relevant script to the element of your website. See step one in the Open the overlay checkout at the products page section above.
  1. From Venue Manager, go to Apps > Progressive checkouts > All Checkouts.
  2. Select the checkout to open the setup area, and then go to the Products tab.
  3. Find the checkout section you want to link to and note down the name of the section (this must be exact).

    2024-05-02_16-04-07.png
     
  4. Provide the following Java script element to your web developer with the section name you've identified:

    onClick="RollerCheckout.show({section: '<Section name>'})"
     
  5. Ask them to:
    Replace <Section name> with the section name you found in step 3. For example:

    onClick="RollerCheckout.show({section: 'Trampoline Park'})"

    Then add the code to the button or other element on your webpage that you want to open the specific checkout section from.

Note:

  • The section name you input into the script must match what’s in your checkout, but you don’t need to match upper- and lowercase letters (eg both “Memberships” and “memberships” will work).
  • If two sections have the same name, the checkout will open at whichever section comes first in your checkout order.
  • If there’s no section match found, the overlay checkout will open but it won't display correctly.
  • Avoid using non-alphanumeric characters in your section names (eg “Memberships!” with the exclamation point will fail to match).

Open your overlay checkout at a specific product

If you’d like to send guests to a specific product in your checkout (eg Buy an elite membership) then you can add code to a button to direct guests to that specific product. All guests have to do is click the button, add that product to their cart and pay!

First, you’ll need to find its product ID and then ask your web developer to add some code to the button.

Don’t forget to add the relevant script to the <head> element of your website. See step one in the Open the overlay checkout at the products page section above.
  1. From Venue Manager, go to Apps > Progressive checkouts > All Checkouts.
  2. Select the checkout to open the setup area.
  3. Select View checkout in the top right of the page to open the checkout in a new browser tab.
  4. Browse to the product you want and select to open its product details.

    2024-05-02_16-16-32.png
     
  5. From the URL in the browser address bar, copy the product ID. The product ID is the number at the end of the URL.

    2024-05-02_16-17-22.png
     
  6. Provide the following Java script element to your web developer with the product ID you've identified:

    onClick="RollerCheckout.show({productId: '<PRODUCTID>'})"
     
  7. Ask them to:
    Replace <PRODUCTID> with the product ID you found in step 5. For example:

    onClick="RollerCheckout.show({productId: '65290'})"

    Then add the code to the button or other element on your webpage that you want to open the specific product from.

Open your overlay checkout at a specific product, date and time

You can also send guests to a specific product, date and session time in your checkout (eg 1-hour jump pass on Monday 16 Dec at 2 pm). This option is great if you want to reduce the amount of “clicks” required by a guest to checkout and buy tickets, increasing your conversion rates.

To configure this option, you will need to identify:

  1. The date you want your overlay checkout to open at. Format needs to be year-month-day (eg 2024-04-20).
  2. The product ID for the product you want your overlay checkout to open on.
  3. The session date you want your overlay checkout to open at. This helps match the session when there are sessions of the same time but different dates (eg session over midnight). This is the same as the date in point 1. Format needs to be year-month-day (eg 2024-04-20).
  4. The session start time you want selected for the product. The format needs to be hour:minute using military time (eg 14:30).
Don’t forget to add the relevant script to the <head> element of your website. See step one in the Open the overlay checkout at the products page section above.

Once you have these four elements, ask your web developer to add some code to the button on your webpage. Follow the steps below.

  1. To find the product ID, follow the steps in the section above and note the product ID down.
  2. Then, provide the following Java script element to your web developer with the correct date, product ID, session date and session start time:

    onClick="RollerCheckout.show({productId: '<PRODUCTID>', date: '<DATE>', sessionDate: '<DATE>', sessionStart: '<TIME>'})"
     
  3. Ask them to replace <PRODUCTID> with the product ID you identified in step 1. Replace <DATE> with the date you want your checkout’s product detail page to open on. And replace <TIME> with the specific session time you want selected. For example:

    onClick="RollerCheckout.show({productId: '65290', date: '2025-04-20', sessionDate: '2025-04-20', sessionStart: '14:00'})"

Add the code to the button or other element on your webpage that you want to open the specific date/product/time from.

Open your date-led overlay checkout on a specific date

If you’ve configured a date-led checkout, you have a further two options for your overlay experience.

  1. Configure your overlay checkout to open on a specific date and display all available products for that date.
  2. Configure your overlay checkout to open on a specific date and display only a specific product for that date (this option is great for seasonal products and passes).

1. Configure your overlay checkout to open on a specific date and display all available products for that date

If you want to open the overlay checkout on a specific date from a button on your website, confirm the date in year-month-day format (eg 2024-04-20) and then provide the following Java script element to your web developer with the date you've identified:

onClick="RollerCheckout.show({date: '<DATE>'})"

Ask them to:

  • Replace <DATE> with the date you want your checkout to open on (eg 2024-04-20). For example:

    onClick="RollerCheckout.show({date: '2024-04-20'})"
     
  • Add the code to the button or other element on your webpage that you want to open the overlay checkout from.
Don’t forget to add the relevant script to the <head> element of your website. See step one in the Open the overlay checkout at the products page section above.

2. Configure your overlay checkout to open on a specific date and display only a specific product for that date

You can also set your date-led overlay checkout to open on a specific date and only show a specific product, from a button on your website.

This option is great if you have products like seasonal passes. For example, Winter session passes that can be purchased at any time throughout the year but with sessions that only start in November.

To configure this option, you will need to identify:

  1. The date you want your overlay checkout to open at. Format needs to be year-month-day (eg 2024-04-20).
  2. The product ID for the product you want your overlay checkout to open on.

Once you have these two elements, ask your web developer to add some code to the button on your webpage.

To find the product ID, follow the steps below.

  1. From Venue Manager, go to Apps > Progressive checkouts > All Checkouts.
  2. Select the checkout to open the setup area.
  3. Select View checkout in the top right to open the checkout in a new browser tab.
  4. Browse to the product you want and select to open its product details.

    2024-05-02_16-16-32.png
     
  5. From the URL in the browser address bar, copy the product ID. The product ID is the number at the end of the URL.

    2024-05-02_16-17-22.png
     
  6. Provide the following Java script element to your web developer with the date and product ID you've identified:

    onClick="RollerCheckout.show({productId: '<PRODUCTID>', date: '<DATE>'})"
     
  7. Ask them to:
    Replace <PRODUCTID> with the product ID you found in step 5.

    Replace <DATE> with the date you want your checkout’s product detail page to open on.

    onClick="RollerCheckout.show({productId: '65290', date: '2024-04-20'})"

    Add the code to the button or other element on your webpage that you want to open the specific date/product from.
     

Enable Apple Pay on the overlay checkout

If your venue would like to include Apple Pay as a payment option for guests on your overlay checkout, you’ll need to work with our support team to obtain your domain association file.

A domain association file is a configuration file that associates your website domain with Apple Pay so it can appear as a payment option for your guests. To obtain the file you need and associate it with your web domain, follow the steps below.

  1. Contact the ROLLER support team to request your domain association file. This file is provided by our payment partner, Adyen. Our support team will send you the file once it has been sent to us by Adyen. Alternatively, you can access the most recent version of this file on Adyen’s website.
  2. Upload the domain association file to your web domains. You may need to ask a web developer to help with this.
  3. Once you’ve uploaded your domain association file, let our support team know as we’ll reach out to Adyen on your behalf and get the domain whitelisted for Apple Pay.
  4. Once this is done, we’ll let you know and Apple Pay will be available on your overlay checkouts.

Configure different checkouts to open from the same page

For venues with embedded checkouts, you can configure multiple online checkouts to launch from a single page on your site.

For example, you might create a central booking page with different buttons for each of your venues or experiences. When a guest clicks the link or button to a particular checkout, the right checkout opens straight away in the overlay. This makes it easier for guests to find the right experience, while reducing the need for you to manage multiple landing pages.

To set this up, follow the steps below: 

  1. Add the overlay checkout script to the <head> of your page (as described in Step 1: Script to add to the <head> element …).
  2. Before calling headRollerCheckout.show()set the checkout URL you want with: RollerCheckout.setCheckoutUrl(checkoutUrl);
  3. Then call: headRollerCheckout.show();This will open the overlay for the checkout URL you have just set.

Notes: 

  • After you call RollerCheckout.setCheckoutUrl(...), you can then use headRollerCheckout.show(...) with any of the supported arguments.
  • Make sure the checkout URL you set corresponds to a checkout you have already configured (found in Venue Manager > Progressive checkouts > All Checkouts).
  • Only one overlay script can be added to any given page. Switching the URL lets you re-use that overlay for different checkouts from that same page.

Was this article helpful?

Yes, thanks Not really
Return to top

Articles in this section

See more

Related articles