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 See the calendar embed

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

<script src="https://addcal.co/js/iframe.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

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

<script src="https://addcal.co/js/calendar.js"></script>

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

Parameter	Required	Description
`data-calendar-uid`	Required	The calendar to embed.
`data-initial-view`	Optional	Starting view: month, week, or schedule. Defaults to month.
`data-theme`	Optional	light or dark. Defaults to light.
`data-show-title`	Optional	Show the calendar title above the widget. true or false.

Build your 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

<div class="addcal-btn" data-event="evt_abc123" data-base="addcal.co"></div>
<script src="https://addcal.co/js/button.js"></script>

Read the Add to Calendar button docs