---
title: "Embed Luma on Your Website"
subtitle: "Embed a checkout button or the full event page on your site so visitors can register without leaving."
slug: "embed-luma-on-your-website"
url: "https://help.luma.com/p/embed-luma-on-your-website"
tags: ["Integrations"]
---

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! 🎉

![](https://images.lumacdn.com/cdn-cgi/image/format=auto,dpr=2,anim=false,background=white,quality=75,width=800/editor-images/j8/833ed58f-d35a-47d7-8e02-10f6a897aa03)

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](/p/create-coupons-for-paid-events) or [unlock code](/p/unlock-codes) when the checkout opens.
- `data-luma-utm-source="source"` — tags registrations with a [utm_source](/p/event-referrals) so you can see them in your [event insights](/p/event-insights).

For example:

```html
<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](https://github.com/luma-team/examples) and [this demo website](https://luma-embed-examples.vercel.app/).

## 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](https://docs.luma.com).

## Embed Calendar

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

1. Open [luma.com/home/calendars](https://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