[ Documentation ](https://addcal.co/documentation.md) Embeds 

Documentation menu- [ Overview](https://addcal.co/documentation.md)

No code

- [ Add to Calendar button](https://addcal.co/documentation/calendar-button.md)
- [ Embeds](https://addcal.co/documentation/embeds.md)
- [ Smart Links](https://addcal.co/documentation/smart-links.md)

AI assistants

- [ MCP Server](https://addcal.co/documentation/mcp-server.md)

Developers

- [ Dynamic Links](https://addcal.co/documentation/dynamic-links.md)
- [ Developer API](https://addcal.co/documentation/api.md)

 Embeds 
========

 Put AddCal directly on your own site. Embed a single event page with its RSVP form, a full calendar, or a one-click Add to Calendar button. Each is a copy-paste snippet that works in any website builder, no coding required.

[ Start free ](https://addcal.co/register)[ See the calendar embed ](https://addcal.co/solutions/calendar-embed.md)

The embed types
---------------

### Event page & RSVP form

Embed a single event page, including its RSVP form, inline on your site with an iframe.

### Calendar

Embed a whole calendar as a live month, week, or schedule widget that updates itself.

### Add to Calendar button

A one-click button that adds an event to the visitor's calendar app.

Event page & RSVP form
--------------------------

 Embed a single event's page inline with an iframe. The embedded page includes the event details and, if the event has one, its RSVP form, so people can register without leaving your site. The iframe script resizes the frame to fit its content.

Event iframe embed Copy

```
<script src="https://cdn.addcal.co/embed/v1/embed.min.js"></script>
<iframe
  id="addcal-event-evt_abc123"
  src="https://addcal.co/e/your-event?embed_view=1"
  style="width: 100%; border: none; min-height: 400px;">
</iframe>
```

 Grab the ready-made snippet for any event from its Share page in your dashboard. 

[ Create an event to embed ](https://addcal.co/events/create)

Calendar embed
--------------

 Embed a whole calendar as a live widget. Visitors can switch between month, week, and schedule views, and it stays in sync as you add or change events.

Calendar embed Copy

```
<script src="https://cdn.addcal.co/embed/v3/calendar.min.js"></script>

<div class="addcal-calendar"
     data-calendar-uid="cal_abc123"
     data-initial-view="month">
</div>
```

 The calendar widget is fully themeable, the view, colours, fonts, and which controls show (subscribe, timezone, tag filter, navigation, and more) are all set in the visual customiser, which generates the finished snippet for you. Rather than hand-edit data attributes, build it there and copy the result.

###  Show only certain tags 

 Add `data-tags` to scope an embed to a subset of the calendar, so one calendar can power several pages, a Dallas page and an Austin page, without duplicating events. It takes a comma separated list, and an event matches if it carries any of the tags.

Tag-filtered calendar embed Copy

```
<div class="addcal-calendar"
     data-calendar-uid="cal_abc123"
     data-tags="dallas,austin">
</div>
```

 The scope is fixed: visitors see only the matching events, the tag filter button is hidden, and Follow Calendar subscribes them to those tags alone. Leave `data-tags` off and the embed shows everything, with the tag filter available so visitors can narrow it themselves and choose whether to subscribe to all events or just their selection.

 Open the embed customiser to pick a calendar, style it live, and copy your ready-made snippet with every option already set. 

[ Open the embed customiser ](https://addcal.co/integrations/calendar-embed)

Add to Calendar button
----------------------

 For a single event, the Add to Calendar button is the lightest option. It is covered in full on its own page, including themes and every data attribute.

Event button Copy

```
<a href="https://addcal.co/e/evt_abc123" class="addcal-btn" data-event="evt_abc123" data-base="addcal.co"></a>
<script src="https://cdn.addcal.co/embed/v1/button.min.js"></script>
```

[ Read the Add to Calendar button docs ](https://addcal.co/documentation/calendar-button.md)