Skip Main Navigation

How to add Eventbrite’s Embedded Checkout to your WordPress.org site

With our new embedded checkout, people buy tickets without ever leaving your website — connecting attendees to your brand and making registration seamless. First generate your embed code on Eventbrite. Then follow this step-by-step guide to set up embedded checkout on WordPress.org. Be sure to preview and and test your WordPress.org page and embedded checkout before you publish.

TIP: To use our new embedded checkout, your website needs an HTTPS certificate. eblink{Learn more=>https://www.eventbrite.com/support/articleredirect?anum=41024}.

PRO TIP: Not sure which type of website integration to use? eblink{Learn which type of website integration is best for you=>https://www.eventbrite.com/support/articleredirect?anum=41026}.

NOTE: Some Eventbrite features will disqualify your event from using the new embedded checkout. eblink{Read our troubleshooting article to learn more=>https://www.eventbrite.com/support/articleredirect?anum=41635}.

1. Generate your embed code.

Generate your embed code
Generate your embed code

To get the embed code you'll add to your website, eblink{follow our step-by-step instructions=>https://www.eventbrite.com/support/articles/en_US/Multi_Group_How_To/how-to-sell-eventbrite-tickets-on-your-website-through-an-embedded-checkout#1-4}.

TIP: Leave the browser window with your Eventbrite embed code open. You’ll have to copy the code in Step 11.

2. Go to your WordPress.org account.

Open the website or app from which you manage your WordPress.org site.

3. Go to “Plugins” and select “Add New”.

Go to “Plugins” and select “Add New”
Go to “Plugins” and select “Add New”

In your WordPress.org environment, hover over “Plugins” in the sidebar and click “Add New”.

4. Search for “Raw HTML”.

Search for “Raw HTML”
Search for “Raw HTML”

Under Add Plugins, click the search bar and enter “Raw HTML”. Hit the enter / return key on your keyboard to search.

5. Click “Install Now,” then “Activate”.

Click “Install Now,” then “Activate”
Click “Install Now,” then “Activate”

Under Raw HTML, click “Install Now”. Once you've installed Raw HTML, click “Activate”.

6. Edit your WordPress.org page.

Edit your WordPress.org page
Edit your WordPress.org page

Select “Pages” from the sidebar. From the Pages menu, click the page that should include embedded checkout.

NOTE: If you’d like to add our embedded checkout to a specific blog post, go to “Posts” instead of “Pages”. From the Posts menu, click on the post that will include the embedded checkout.

7. Click “Text”.

Click “Text”
Click “Text”

On the Edit Page, click on “Text”. You’ll notice the text editor now includes the HTML code for your page.

8. Click “Preview changes”.

Click “Preview changes”
Click “Preview changes”

Click “Preview changes” to see a preview of your WordPress.org page.

NOTE: Click “Preview changes” to see a preview of your WordPress.org page.

9. Decide where to add embedded checkout.

Pick the paragraph after which you want to insert embedded checkout. Highlight and copy the last word of the paragraph.

EXAMPLE: John is adding embedded checkout below the paragraph ending with “rain”.

10. Find your keyword on the Edit Page.

Find your keyword on the Edit Page
Find your keyword on the Edit Page

Go back to the Edit Page and find your keyword.

TIP: To open a search bar from where you can quickly search, hit “Ctrl + F” on a PC and “cmd + F” on a Mac. eblink{Learn more=>https://www.wikihow.com/Search-for-a-Word-on-a-Webpage}.

11. Copy-paste the embed code.

Return to Eventbrite’s embedded checkout page and copy the embed code. Go back to WordPress.org and paste the embed code after the end tag of the paragraph with your keyword.

TIP: You can usually recognize an end tag (also known as closing tag) by the “/” within the tag. eblink{Learn more=>https://www.w3schools.com/html/html_elements.asp}.

12. Add “[raw]” before and “[/raw]” after your embed code.

Add “[raw]” before and “[/raw]” after your embed code
Add “[raw]” before and “[/raw]” after your embed code

Type “[raw]” before the embed code and “[/raw]” after the embed code. This will keep WordPress.org from automatically formatting the code.

13. Preview your WordPress.org page.

Preview your WordPress.org page
Preview your WordPress.org page

Click “Preview Changes” to see how your embedded checkout will appear for potential attendees. If it’s in the wrong place, return to the Edit Page and move the embed code.

TIP: If you’ve never published this WordPress.org page, you’ll see “Preview” instead of “Preview Changes”.

NOTE: The button and ticket listing versions of embedded checkout have a different appearance.

14. Click “Update”.

Once you’re happy with how your new embedded checkout looks, click “Update”.

TIP: If you’ve never published this WordPress.org page, you’ll see “Publish” instead of “Update”.

15. Test your embedded checkout.

Test your website, to be sure that people can buy tickets — no matter their browser, device, or screen size. eblink{Learn more=>https://www.eventbrite.com/support/articles/en_US/Multi_Group_How_To/how-to-sell-eventbrite-tickets-on-your-website-through-an-embedded-checkout#3-1}.

NOTE: If you notice an issue with how embedded checkout functions or experience rendering issues, eblink{disable Gutenberg editor=>https://www.eventbrite.com/support/articles/en_US/Troubleshooting/troubleshooting-eventbrite-s-new-embedded-checkout?lg=en_US#13}.

Still have questions? Our team can help. Contact us.