Skip Main Navigation

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

Eventbrite LogoUpdated by Cortney N

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}.

<h2 id="1">1. Generate your embed code.</h2> <div>To get the embed code you&#39;ll add to your website, eblink{follow our step-by-step instructions=&gt;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}.</div> <p class="text-small l-pad-vert-2 l-pad-hor-2 card l-mar-top-2">TIP: Leave the browser window with your Eventbrite embed code open. You’ll have to copy the code in Step 11.</p> <h2 id="2">2. Go to your WordPress.org account.</h2> <p>Open the website or app from which you manage your WordPress.org site.</p> <h2 id="3">3. Go to “Plugins” and select “Add New”.</h2> <div>In your WordPress.org environment, hover over “Plugins” in the sidebar and click “Add New”.</div> <h2 id="4">4. Search for “Raw HTML”.</h2> <div>Under Add Plugins, click the search bar and enter “Raw HTML”. Hit the enter / return key on your keyboard to search.</div> <h2 id="5">5. Click “Install Now,” then “Activate”.</h2> <div>Under Raw HTML, click “Install Now”. Once you&#39;ve installed Raw HTML, click “Activate”.</div> <h2 id="6">6. Edit your WordPress.org page.</h2> <div>Select “Pages” from the sidebar. From the Pages menu, click the page that should include embedded checkout.</div> <p class="text-small l-pad-vert-2 l-pad-hor-2 card l-mar-top-2">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.</p> <h2 id="7">7. Click “Text”.</h2> <div>On the Edit Page, click on “Text”. You’ll notice the text editor now includes the HTML code for your page.</div> <h2 id="8">8. Click “Preview changes”.</h2> <div>Click “Preview changes” to see a preview of your WordPress.org page.</div> <p class="text-small l-pad-vert-2 l-pad-hor-2 card l-mar-top-2">NOTE: Click “Preview changes” to see a preview of your WordPress.org page.</p> <h2 id="9">9. Decide where to add embedded checkout.</h2> <div>Pick the paragraph after which you want to insert embedded checkout. Highlight and copy the last word of the paragraph.</div> <p class="text-small l-pad-vert-2 l-pad-hor-2 card l-mar-top-2">EXAMPLE: John is adding embedded checkout below the paragraph ending with “rain”.</p> <h2 id="10">10. Find your keyword on the Edit Page.</h2> <div>Go back to the Edit Page and find your keyword.</div> <p class="text-small l-pad-vert-2 l-pad-hor-2 card l-mar-top-2">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=&gt;https://www.wikihow.com/Search-for-a-Word-on-a-Webpage}.</p> <h2 id="11">11. Copy-paste the embed code.</h2> <div>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.</div> <p class="text-small l-pad-vert-2 l-pad-hor-2 card l-mar-top-2">TIP: You can usually recognize an end tag (also known as closing tag) by the “/” within the tag. eblink{Learn more=&gt;https://www.w3schools.com/html/html_elements.asp}.</p> <h2 id="12">12. Add “[raw]” before and “[/raw]” after your embed code.</h2> <div>Type “[raw]” before the embed code and “[/raw]” after the embed code. This will keep WordPress.org from automatically formatting the code.</div> <h2 id="13">13. Preview your WordPress.org page.</h2> <div>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.</div> <p class="text-small l-pad-vert-2 l-pad-hor-2 card l-mar-top-2">TIP: If you’ve never published this WordPress.org page, you’ll see “Preview” instead of “Preview Changes”.</p> <p class="text-small l-pad-vert-2 l-pad-hor-2 card l-mar-top-2">NOTE: The button and ticket listing versions of embedded checkout have a different appearance.</p> <h2 id="14">14. Click “Update”.</h2> <div>Once you’re happy with how your new embedded checkout looks, click “Update”.</div> <p class="text-small l-pad-vert-2 l-pad-hor-2 card l-mar-top-2">TIP: If you’ve never published this WordPress.org page, you’ll see “Publish” instead of “Update”.</p> <h2 id="15">15. Test your embedded checkout.</h2> <p>Test your website, to be sure that people can buy tickets — no matter their browser, device, or screen size. eblink{Learn more=&gt;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}.</p> <p class="text-small l-pad-vert-2 l-pad-hor-2 card l-mar-top-2">NOTE: If you notice an issue with how embedded checkout functions or experience rendering issues, eblink{disable Gutenberg editor=&gt;https://www.eventbrite.com/support/articles/en_US/Troubleshooting/troubleshooting-eventbrite-s-new-embedded-checkout?lg=en_US#13}.</p>

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