Preview Changes will not be visible to customers until published.

Embedded Event Checkout / Sales Modal

Using the Embedded Event Checkout Sales Modal, ticket buyers can purchase tickets directly on your website through a secure modal that's connected to a call-to-action button you link to the modal. This modal can be installed once per each event. 

This article includes:

Generating the Sales Modal Code

For the event you'd like to integrate the embedded checkout, navigate to the Marketing & Promotion menu item in the Event Menu and then select Website Integration. You'll see something similar to the following code:

Installing the Code on Your Website

The code to initiate the sales modal needs to be added in a few different places on your website. 

  • Head Code: Include the first portion of code in the <head> on your page. This is typically where you include your tracking pixel code. 
  • Modal Script: Add the second part of code right before the end of your </body> tag in the main content of your page. 
  • Button & ID: Wherever you want to launch your modal (like clicking on a <div> or <button>), include id="modal-trigger-element-id" in the tag code. We've included an example button above but you might opt to use a different element on your page. Here's another example: <div id="modal-trigger-element-id">Click here for tickets</div>

Customizing Colors

The modal uses the Modern Theme as its base. To edit the colors, make sure your event is using the Modern Theme under Edit Event > Style / Theme. Select the Modern Theme and use the Customize Colors feature. 

The sales modal supports click-tracking event affiliate, promoter links, and non-click tracking event affiliate links. 

Click-Tracking Event Affiliate Links

To add your click-tracking event affiliate link to the sales modal, take your shareable affiliate link, extract the utm_source, utm_name, and utm_id, and add it to a list of params as shown below:

Example URL: https://tickets.sdevents.com/e/7th-annual-beach-bach/tickets?utm_source=affiliate&utm_name=mailinglist&utm_id=6544ffb4bc293cfeba4963c30ad560d9


Non-Click Tracking Event Affiliate Links

To add a non-click tracking affiliate link to your sales modal, add modalAffiliateCode: 'your-code-here', to your code. Example: 

Learn more about Affiliate Tracking Links. 

To add your promoter affiliate link to the sales modal, take your shareable promoter list URL, extract the utm_source and utm_id, and add it to a list of params as shown below:

Example URL: https://tickets.sdevents.com/promoter/613a4ce6-d6bc-4a89-acc5-500c0ad1e030?utm_source=promoter&utm_id=613a4ce6efa445e8b679500c0ad1e030

NOTE: The utm_id is NOT the promoter ID. The utm_id must be pulled from the individual event promoter link. The utm_id will not have dashes (-) in it. 

Access Codes 

The sales modal supports ticket access codes in two different ways:

  1. Manual Access Code Entry: Customers can enter an access code once the modal has loaded (recommended when the customer needs to have a code to get access to certain tickets
  2. Pre-fill Access Code in Code: The modal code can pre-fill an access code to already unlock tickets once the modal is launched (recommended when you need to limit the tickets shown in the modal and not display all of them)

To prefill an Access Code when the modal is lauched, add the following to your installation: 

Set up access codes for your event under the Marketing & Promotion > Access Codes menu item on your event. 

Learn more about Access Codes. 

FAQ

Can I use tracking pixels with the modal?

Sure can! As long as your Google Analytics ID, Google Tag Manager ID and/or your FB Tracking Pixel is added to your event, the modal will record data for these pixels. Add your tracking pixels under Event Settings> Analytics & Tracking.

Can I use questionnaires with the modal?

Yup! The sales modal supports custom questionnaires. Set up questionnaires for your event under the  Edit Event > Questionnaires menu item on your event. 

How can I add the modal multiple times for different events on the same page? 

If you'd like to add the sales modal multiple times to the same page on your website, you need to create a new unique id for each event that's used for the trigger element ID. For example, event one could have 'modal-trigger-element-id-1' and the next event would have 'modal-trigger-element-id-2'. 

When I add the modal to my site, it redirects to the tickets page. What's happening?

There are certain kinds of events and features that are not supported with the sales modal. These include:  

  • Password Protected Events
  • Shopping Cart and Timed Entry Events
  • Seated Events
  • Session Events

If your event uses one of the above features, connect your button to link directly to the tickets page instead of loading the modal. 

Related Articles