In this article, you'll learn how you can share your checkout with your guests from your website or social pages once you’re ready to start selling online.
To use Progressive Checkouts, your venue must be using ROLLER Payments
Direct link or integrate with your website
There are two ways you can add your checkout to your webpages:
- Use a direct web link to launch a full-page experience from your website and socials. You can add links to as many checkouts as you want (depending on your plan).
- Integrate with your website to launch an overlay experience on your website. You can only integrate one checkout into your website.
If you haven't yet decided which checkout experience is right for you, refer to the guide Prepare for your Progressive Checkout.
And take a look at this video on our Academy to see how the experience you use determines the way you share your checkout with guests.
Use a direct web link for a full-page experience
For the full-page experience, you simply add a direct link to the checkout from your website or social media sites. Guests click your 'Book now' links on your website or social pages to launch a full-screen standalone experience.
- From Venue Manager, go to Apps > Progressive checkouts > All Checkouts
- Click the checklist you want
- Click Share in the top right of the setup page
- Click the direct link to copy the URL
- Add the link to your website or social 'Book Now' buttons
Integrate with your website for an overlay experience
From a button or other element on your webpages, you can trigger the checkout to open an overlay experience at the products page or a specific product within your checkout. There is no home page with the overlay experience.
Follow the relevant instructions to provide the code your web developer needs.
If you want to open the overlay checkout from a button on your website, provide the following two pieces of code to your web developer.
1. Script to add to the <head> element of your website
To find the script for your developer:
- From Venue Manager, go to Apps > Progressive checkouts > All Checkouts
- Click the checklist (you can only link to one overlay checklist from your website)
- Click Share in the top right of the setup page
- Under Step 1: Add your script, copy the first piece of code to provide to your web developer.
- Ask your web developer to add it to the <head> element of your website.
2. Java script element to add the trigger
Provide the following Java script element to your web developer. Ask them to add it to the button or other element on your webpage that you want to launch the overlay experience from.
onclick="RollerCheckout.show()"If you want to open a specific product from a button on your website, find its product ID and then ask your web developer to add some code to the button.
- From Venue Manager, go to Apps > Progressive checkouts > All Checkouts
- Click the checkout to open the setup area
- Click View checkout in the top right to open the checkout in a new browser tab
- Browse to the product you want & select to open its product details
- From the URL in the browser address bar, copy the product ID. The product ID is the number at the end of the end of the URL.
- Provide the following Java script element to your web developer with the product ID you've identified. Ask them to:
- Replace <PRODUCTID> with the product ID you found in step 3
- Add it to the button or other element on your webpage that you want to open the specific product from
RollerCheckout.showProduct({productId: '<PRODUCTID>'})
Take a look at the videos on our Academy to learn more about how to prepare for, create and share your Progressive Checkout.