Your events can live on your own website, not just on Eventrise. Visitors see your lineup, tap Buy Tickets, and check out without leaving your site. Your Eventrise event pages stay live too, so you keep the traffic and search visibility from both.
How do I embed checkout on my site?
You can drop Eventrise checkout into any web page, on any website builder that lets you add a bit of HTML. You have two choices, checkout right on the page or checkout behind a button.
Either way, you need your event's checkout address. Open your event, go to Manage › Event Details, and look at the line that says your event slug will be app.eventrise.com/events/ followed by a short name. That short name is your slug. Your checkout address is:
https://checkout.eventrise.com/checkout/your-event-slug
How do I put checkout right on the page?
Paste this where you want checkout to appear, and swap in your own slug.
<iframe
src="https://checkout.eventrise.com/checkout/your-event-slug"
width="100%"
height="900"
allow="payment"
sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
referrerpolicy="strict-origin-when-cross-origin"
title="Eventrise Checkout"
style="border: 0;"
loading="lazy">
</iframe>
How do I put checkout behind a button?
This opens checkout in a pop-up when someone selects Buy Tickets. Closing the pop-up clears checkout, so it starts fresh next time. Swap in your own slug on the line that starts with var src.
<button id="er-checkout-trigger" type="button">Buy Tickets</button>
<dialog
id="er-checkout-dialog"
style="border:0; padding:0; width:90vw; max-width:1200px; height:90vh; max-height:900px; background:#fff; border-radius:16px;">
<iframe
id="er-checkout-iframe"
src="about:blank"
width="100%"
height="100%"
allow="payment"
sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
referrerpolicy="strict-origin-when-cross-origin"
title="Eventrise Checkout"
style="border:0; display:block;"></iframe>
</dialog>
<script>
(function () {
var trigger = document.getElementById('er-checkout-trigger');
var dialog = document.getElementById('er-checkout-dialog');
var iframe = document.getElementById('er-checkout-iframe');
var src = 'https://checkout.eventrise.com/checkout/your-event-slug';
trigger.addEventListener('click', function () {
iframe.src = src;
dialog.showModal();
});
dialog.addEventListener('close', function () {
iframe.src = 'about:blank';
});
})();
</script>
Can I see it working first?
Yes. Open checkout.eventrise.com/sample to see both versions on a live page.
Which attributes should I keep?
Keep allow="payment" so card and wallet payments work inside the frame. The sandbox and referrerpolicy lines keep the embed safe, and they're set up so guest checkout, Stripe, and seat selection all keep working.
How do I add my events with WordPress?
Eventrise has a WordPress plugin. Right now we share it directly, so email support@eventrise.com and we'll send it over. It needs WordPress 6.4 or newer and PHP 7.4 or newer.
Install it. Upload the plugin and activate it.
Connect it. Open Settings › Eventrise in WordPress and enter your organization's slug. We check it when you save. You don't need an API key for the events block.
Add a block. Each option below works as a block in the WordPress editor, and as a shortcode if you use a page builder like Elementor or Beaver Builder.
What can I add with the plugin?
Events. Your upcoming events grouped by day, with a Buy Tickets button that opens checkout in a pop-up. It can also show a calendar, with a switch between list and calendar view, and a featured strip at the top. You can hide the featured strip, the list, or the calendar, choose the default view, limit how many events show, and rename the headings. The featured strip needs your organizer page turned on.
Inline checkout. Checkout built right into the page.
Get Tickets button. A button that opens checkout in a pop-up.
Event cards. A grid of cards for your events.
Auto-link. Any link to Eventrise checkout on your site opens in the pop-up.
How will the plugin look on my site?
It uses Eventrise's own styling, kept separate from your theme so your theme can't scramble it. You can restyle it with CSS variables that start with --eventrise-. Times show in each event's own time zone, and your event details refresh about every five minutes.