Skip to main content

Accept Orders On Your Own Website (Pop-over)

How to integrate TicketSpice with your website that uses code to create a popover on top of your website keeping visitors on your website

Written by Maddy

In this guide, we'll show you how to sell tickets on your website using some custom javascript and css that will create a popover on your website that contains your TicketSpice page. This will create a window overlay on top of your own website with your TicketSpice event page.

This guide requires you to have access to the code of your website to implement. If you are using a website builder like Wix, Squarespace, Webflow, Wordpress, this method works too.

Jump To...

Method 1: Popover with Button Included in Code

Step 1: Add the following custom CSS link inside the <head> tag of your website.

  • The first step is to get access to the <head> tag of your website. We would recommend adding this line of CSS to every page of your website, but if your website uses a template file, you can add it once and this file will be loaded on all pages

  • Add the custom CSS link inside your <head> tag of your website

<link rel="stylesheet" href=" https://assets.webconnex.com/widgets/embed-modal/modal.css" media="screen" type="text/css">

Pro Tip: While your website may vary here are some links for editing the head tag in some popular builders.

Step 2: Copy and Paste HTML that will add a Button that will Trigger the Popover

  • To complete this step, you must be able to add or edit HTML on your page. Most website editors allow you to insert an HTML element or switch a text block to HTML view—either works as long as you can edit the HTML

  • Locate where you want the button to appear in the page body and paste the following code (you will need to customize this code slightly) 

<!-- Trigger/Open The Modal --> <button id="myBtn">REGISTER NOW</button> <!-- Modal --> <div id="myModal" class="wbxModal" style="z-index: 9999999"> <span class="wbxModal-close"></span> <!-- Modal Content --> <div class="wbxModal-content"> <iframe src="https://dundermifflin.ticketspice.com/my-first-ticketspice-page" style="width:100%;height:100%;border:hidden;"></iframe> </div> </div> <!-- Modal Script --> <script src="https://assets.webconnex.com/widgets/embed-modal/modal.js" type="text/javascript" ></script>

Step 3: Customize the HTML For Your Event Page

  • Review the HTML to customize the embed code for your event. Locate the line in the code that says src="https://dundermifflin.ticketspice.com/my-first-ticketspice-page" , and replace the URL inside the quotations with your own TicketSpice page URL. Ensure you only change the URL starting from https:// and keep the quotes intact (otherwise, it will break)

  • To change the button text, locate the first line of the code snippet where it says "REGISTER NOW." Replace this text with your preferred wording, ensuring you don't remove any necessary formatting characters

Step 4: Save, Publish, and Test Your Website

  • You can now test the popover on your website to ensure it functions correctly. Visitors will be able to purchase tickets directly from your site

Warning: If you embed a ticketing page that includes Apple Pay, a few additional steps are required to ensure Apple Pay transactions work properly, as Apple Pay has specific requirements for embedded pages.

Click here to learn how to set up your embedded TicketSpice page to successfully process Apple Pay transactions.

Method 2: Customize Your Own Website Button to Use the Popover

If your website tool has pre-designed and pre-built buttons that are consistent with your style and theme, this method allows you to use one of those buttons to trigger the popover.

Step 1: Add the following custom CSS link inside the <head> tag of your website.

  • The first step is to get access to the <head> tag of your website. We would recommend adding this line of CSS to every page of your website, but if your website uses a template file, you can add it once and this file will be loaded on all pages

  • Add the custom CSS link inside your <head> tag of your website

<link rel="stylesheet" href=" https://assets.webconnex.com/widgets/embed-modal/modal.css" media="screen" type="text/css">

Step 2: Add a Code Snippet Anywhere in the Body of Your Page

  • Insert a custom HTML object anywhere on your web page. Since it will be invisible, placement doesn't matter. This code snippet controls the popover, and you'll set the trigger in the next step 

<!-- Trigger/Open The Modal --><!-- Modal --> <div id="myModal" class="wbxModal" style="z-index: 9999999"> <span class="wbxModal-close"></span> <!-- Modal Content --> <div class="wbxModal-content"> <iframe src="https://dundermifflin.ticketspice.com/my-first-ticketspice-page" style="width:100%;height:100%;border:hidden;"></iframe> </div> </div> <!-- Modal Script --> <script src="https://assets.webconnex.com/widgets/embed-modal/modal.js" type="text/javascript" ></script>

Step 3: Customize the HTML For Your Event Page

  • Review the HTML to customize the embed code for your event. Locate the line in the code that says src="https://dundermifflin.ticketspice.com/my-first-ticketspice-page" , and replace the URL inside the quotations with your own TicketSpice page URL. Ensure you only change the URL starting from https:// and keep the quotes intact (otherwise, it will break)

Step 4: Add a Button To Your Web Page and Give it the Appropriate ID

  • Using your website builder, add or drag a button onto the page where you want to provide the button for people to purchase tickets. Then Using the properties or settings for the button, look for an option to declare an ID on the button. When you find where to put the ID, give the following ID: myBtn

  • In your website builder, add or drag a button on the page where you want to provide the button for people to purchase tickets. Using the properties or settings for the button, look for an option to declare an ID on the button. Set the ID to: myBtn

Step 5: Save, Publish, and Test Your Website

  • You can now test the popover on your website to ensure it functions correctly. Visitors will be able to purchase tickets directly from your site

Warning: If you embed a ticketing page that includes Apple Pay, a few additional steps are required to ensure Apple Pay transactions work properly, as Apple Pay has specific requirements for embedded pages.

Click here to learn how to set up your embedded TicketSpice page to successfully process Apple Pay transactions.

FAQs

How does the pop-over feature work on mobile devices?

The pop-over method works seamlessly on mobile. On mobile devices, the pop-over automatically adjusts to fit phone screens.

Does the pop-over feature affect conversion tracking or analytics?

While linking directly to your TicketSpice page is recommended, your traffic stats, conversion tracking, and other integrations will work when using the pop-over feature. However, backlink tracking from sources outside of your website won't be captured, as this method requires your own website to open the window to the event page.

What's the difference between a pop-over and iframe option to embed my page?

  • Pop-Over: A pop-over adds a button or link to your website. When a visitor clicks it, your TicketSpice page opens in an overlay on top of your existing website. Visitors can easily close the pop-over to return to your website at any time. This approach provides a seamless experience while keeping your website visible in the background. Click here to view a pop-over experience.

  • iFrame: An iframe embeds your TicketSpice page directly into a section of your website, so the ticketing page is visible immediately without requiring visitors to click a button. While this can work well in some situations, iframes are more likely to experience issues on mobile devices

Should I use a pop-over or an iframe if most attendees purchase tickets on mobile devices?

We recommend using a pop-over whenever possible, especially if many of your attendees purchase tickets on their phones. Pop-overs are mobile-friendly and provide a more reliable checkout experience across devices.

While TicketSpice also supports iframes, the mobile experience depends on how well the website hosting the iframe is optimized for mobile. Iframes are more likely to experience issues with sizing, scrolling, and mobile responsiveness.

Can the TicketSpice team help me add a pop-over to my website?

TicketSpice provides the code needed to embed your ticketing page as a pop-over. However, we do not provide support for adding this code to your website.

If you need help implementing a pop-over, please contact your website platform, hosting provider, or web developer for assistance. They can help you add the TicketSpice embed code to your website.

Related Articles
Did this answer your question?