Embed Luma on Your Website

To embed checkout / registration, go to the manage page of an event and navigate to the More tab. You’ll find the “Embed Registration Button” with a code snippet.

Copy the code snippet and paste it into your website, and congrats — you have added the Luma checkout widget to your website! 🎉

As seen in the above screenshot, we have two options:

• Embed as a Button — When you embed as a button, users can click the button to see the event registration flow in an overlay.
  
  You can customize how this button looks using CSS but you cannot customize the overlay.
• Embed Event Page — You can embed a small version of the event page directly on your site which shows information about the event and let’s them checkout directly there.
  
  You are not able to customize how this event page looks.

Pre-Apply Coupons or Tag Registrations

You can add two optional attributes to the embed button:

• data-luma-coupon="CODE" — pre-applies a coupon or unlock code when the checkout opens.
• data-luma-utm-source="source" — tags registrations with a utm_source so you can see them in your event insights.

For example:

<a
  href="https://luma.com/your-event"
  class="luma-checkout--button"
  data-luma-action="checkout"
  data-luma-event-id="evt-xxx"
  data-luma-coupon="SUBSCRIBER10"
  data-luma-utm-source="newsletter"
>
  Register for Event
</a>

If the attributes aren’t set on the button, we’ll fall back to ?coupon= and ?utm_source= on the host page’s URL.

Test It Out

The Register for Event button on the manage page gives you a preview of how embedded checkout works. click on it to see what the widget looks like.

You can see more examples in this Github Repo and this demo website.

Notes

• You’ll need a website platform like Squarespace or Webflow to embed the Luma event page on your site. You cannot embed the button in an email.
• We have all of the embed options listed on the Manage Event page. If you want even more control, you could look into using the Luma API.

Embed Calendar

You can also embed all upcoming events for your Calendar onto your website. To do so:

1. Open luma.com/home/calendars
2. Choose the calendar you’d like to embed
3. Navigate to Settings → Embed
4. You’ll see all of the embed options there