Use Widget on WordPress with Elementor

Got a website built with WordPress with Elementor? Great news, adding your Billy checkout to it is quick and easy!

Billy's widget lets your fans buy tickets directly on your site, no redirects, no confusion, no tech headaches.

You can choose between two simple options

Option 1: Embedded Checkout

The Billy checkout appears directly inside your event page, so fans can browse and buy tickets in one place.

Option 2: Pop-up window

The Billy checkout opens in a clean pop-up window when visitors click your "Buy Now" button, perfect for keeping your page layout simple.

No matter which option you choose, fans can complete their purchase without leaving your website.

That means:

• A smoother checkout experience
• Higher conversion rates
• A stronger, more professional brand image

Ready to set it up? Let's go, it only takes a few minutes.

Before starting…

Where to Find Your Sales Channel ID

Publish your Sales Channel first

Important: You will NOT see a Sales Channel ID until your Sales Channel is published. If it's still in draft, the link and ID won't exist yet.

Open your Sales Channels

• Go to Studio → Event → Sales Channels
• Select the channel you want to use
• Scroll down to the bottom and click the Share button

Extract your Sales Channel ID

• The Sales Channel ID is simply the long code at the end of the URL.
• Example URL: https://events.billyapp.live/12b8b09a-eb23-4d65-ba92-f6059cb18648 → Here, 12b8b09a-eb23-4d65-ba92-f6059cb18648 is your Sales Channel ID.

If you have not published your sales channel yet, see Publish your Sales Channel.

Before you start embedding

1. Ensure WordPress is installed.
2. Install and activate the Elementor plugin (from the Plugins Marketplace).
3. Once activated, you'll see the Edit with Elementor option.

Elementor is an editor, which helps you better shape the website in an easier and more responsive way.

• For simple page creation, we will still edit with WordPress
• For more organized needs, we will edit with Elementor.

Option 1: Embedding your checkout flow on a page

You can insert Billy's checkout widget directly on your website in a new page. Your attendees will be able to purchase tickets or products without being redirected to third parties.

A smooth ticketing experience worth remembering.

In 2 simple steps we can make it happen — let's see how below.

Step 1. Create a new page with an HTML block for the widget display (edit with WordPress)

1. Add a new page. Insert a block called Custom HTML, you can find it by searching.

1. Click Write HTML… on the interface
2. One step closer — copy and paste the following code into the editor

<div style="display: flex; align-items: center; justify-content: center; height: 100vh;">
<iframe src="[EVENT URL]"
width="100%" height="100%"
style="display: block; margin: 0; padding: 0; border: none;">
</iframe>
</div>

1. Click the Save button. You can now view this page showing Billy's widget.

Step 2. Link the button to your checkout widget page

1. Choose the button on your homepage (edit with Elementor) which your visitors can click to start checkout
2. In the Link field, add the URL of your widget page, where you will display the checkout widget, to this button.

1. Click the Publish button, and voilà!

You now have your checkout flow well integrated into your event website, congratulations! You can now publish this updated version and test the user experience.

Option 2: Using a pop-up to display your checkout flow

You can also use a pop-up window to display your checkout flow on a single page. Simply follow the steps below to make the magic happen.

Step 1. Copy and paste the mandatory script

1. Navigate to the left sidebar
2. Again, add a Custom HTML block into your current page
3. Copy and paste the following code

<script type="text/javascript"
        defer src="https://events.billyapp.live/embed.js"
        data-host="https://events.billyapp.live"></script>

Step 2. Add customized attributes code

1. Again, add a Custom HTML block into your current page

1. One step closer — copy and paste the following code

<div class="popmake-234">
    <a role="button" aria-haspopup="dialog"
       aria-controls="billy-dialog-[YOUR_SALES_CHANNEL_ID]"
       aria-expanded="false"
       style="
           display: inline-block;
           background-color: #FFFCE8; /* Button background */
           color: #0d0d0d; /* Text color */
           font-size: 16px;
           font-weight: bold;
           padding: 2px 50px; /* Adjusted padding to reduce height */
           border-radius: 40px; /* Keep rounded edges */
           text-align: center;
           text-decoration: none;
           transition: background-color 0.3s ease, transform 0.2s ease;border: none;
           cursor: pointer;
           box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15); /* Soft shadow */
           user-select: none; /* Prevent accidental text selection */
           white-space: nowrap; font-weight:600;font-size:19px;/* Prevent text from wrapping */
       "
       onmouseover="this.style.backgroundColor='#F0E6D2'; this.style.transform='scale(1.08)';"
       onmouseout="this.style.backgroundColor='#FFFCE8'; this.style.transform='scale(1)';">
       Réserver →
    </a>
</div>
<style>
    @media (max-width: 767px){ /* For responsive function in mobile page */
        .popmake-234 a{
            font-size:14px!important ;
            font-weight:600 ;
            padding: 3px 13px!important;
        }
    }
</style>

1. Click the Publish button in the upper right corner

You now have your checkout flow pop-up integrated into your event website, congratulations! Now preview your website, and Billy's widget will pop up on your page.