Using Embedded Checkout to sell tickets on your website

• Using Embedded Checkout

• If Eventbrite's embedded checkout doesn't work

Using Embedded Checkout

Adding embedded checkout requires access to your website's HTML. Also, you must have an HTTPS certificate for attendees to complete their registration on your website.

If you need help, contact your web developer. Eventbrite can't assist with adding the code on your website or adjusting your website's settings.

1. Go to "Embedded Checkout".

1. Log into your account and go to Events .

2. Select your event.

3. Select Marketing.

4. Select Embedded checkout.

2. Choose how checkout appears. 

You can choose between two options:

• Button: opens a window on top of your website to reveal available tickets. To preview, click “Buy Tickets."

• Embedded: available tickets are automatically shown on the page. To preview, choose your ticket quantity and click “Checkout."

Your ticket types need to be on sale for the preview to work. If you complete the checkout process, Eventbrite will treat it as a real registration.

3. Optional: Update the appearance of your checkout.

You can change the color of the branding, the font, and the background. To update your appearance:

1. Enable Customize checkout.

2. For each option, select the color box or enter a hex code to set the color.

3. If you chose to embed your checkout with a button, you can also change the label for the button.

4. Select Apply changes. This will update the code on the page.

If colors you select don't meet accessibility guidelines, an error message will appear.

Changes you make won't impact any code you've previously copied and used. Also, changes on this page won't save if you exit the page.

4. Copy the embed code and paste it into your website.

When you're ready to add your code, take the following steps:

1. Select Copy code. 

2. Paste the code into your website's HTML code.

3. View and test the embedded checkout on your website to confirm it’s working.

If Eventbrite's embedded checkout doesn't work

Because embedded checkout uses your website's code, Eventbrite is unable to thoroughly troubleshoot issues. Contact your web developer if you have any issues implementing the fixes below.

“Website Integrations” is greyed out on the Event Dashboard.

Some features are unavailable while your event is a draft. You have to publish your event before you can access Website Integrations.

The checkout redirects to your Eventbrite event listing.

If your event no longer qualifies for embedded checkout, attendees are sent to your Eventbrite event listing to complete registration.

Your event may no longer qualify because you don’t have an HTTPS certificate on your website. Learn more about setting up HTTPS for your website.

Tracking pixels aren't working.

Due to international regulations, tracking pixels are disabled in the embedded checkout in certain regions, such as Europe and the UK.

Buy now, pay later isn't available.

Buy now, pay later options aren’t available for embedded checkout. If available in their region, purchasers can still access this option when they visit your event listing on the Eventbrite website.

Wordpress added HTML formatting code to the Eventbrite embed code.

Gutenberg editor is enabled by default in new versions of Wordpress and is not compatible with the Raw HTML plugin. If you notice an issue with how embedded checkout functions or experience rendering issues, try disabling Gutenberg editor.

1. Go back to the "Text" editor for your page in Wordpress.

2. Check for any added HTML formatting code  (e.g., code for paragraphs and line breaks)

3. Install the "Disable Gutenberg editor" plugin .

4. Go to Settings and choose General. Then, make sure “WordPress should correct invalidly nested XHTML automatically” is not selected/enabled.

Attendees can't register on Safari.

There may be an issue with your website's referrer policy, which results in the following error message: “There was a problem submitting your order. Please try again."

To resolve this, check if your website's code has the following header: referrer-policy: no-referrer. Because of how Safari handles cookies from different domains, this header will prevent Eventbrite's server from validating order purchases.

To resolve this, set a value of origin or origin-when-cross-origin for your header. This will allow attendees to register on Safari.

You can’t scroll in embedded checkout.

If you’re trying to add multiple embeds on the same page, your attendees won’t be able to scroll unless you change the embed code. 

FIRST BUTTON EMBED

1. Give the <button id> parameter a unique value for each embed. For example, for the first embed on your website, change:

<button id="eventbrite-widget-modal-trigger-43896296003" type="button">Buy Tickets</button>

to

<button id="number1-43896296003" type="button">Buy Tickets</button>

2. Then, within the same code snippet, change the modalTriggerElementId to match:

modalTriggerElementId: 'eventbrite-widget-modal-trigger-43896296003'

to

modalTriggerElementId: 'number1-43896296003'

SECOND BUTTON EMBED

1. Make sure the second "button id" has a different, distinct value. The value needs to match the modalTriggerElementId. For example, change:

<button id="eventbrite-widget-modal-trigger-43896296003" type="button">Buy Tickets</button>

to

<button id="number2-43896296003" type="button">Buy Tickets</button>

2. Then change:

modalTriggerElementId: 'eventbrite-widget-modal-trigger-43896296003'

to

modalTriggerElementId: 'number2-43896296003'