DocumentationAdd to Calendar button

Add to Calendar button

Drop a button on any website and visitors add your event to their calendar in one click. There are two ways to use it: point it at an event you already created in AddCal, or drive it with a Smart Link and put the event details right in the HTML.

Get your button, free Smart Links docs

Live preview

This is a real button rendered with the snippet below. Click it to see the calendar chooser.

Q3 Product Launch2026-06-12T11:00:002026-06-12T11:30:00America/Los_AngelesJoin us for a 30-minute walkthrough of what's new.Zoomfalse

Button for an existing event

If you have already created the event in AddCal, point the button at it with data-event. This is the simplest button, the easiest way is to copy the ready-made snippet from the event's Share page in your dashboard.

Event button

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

Parameter	Required	Description
`data-event`	Required	The event to add. Use the event's identifier from AddCal.
`data-base`	Required	Your AddCal domain, for example addcal.co, or your custom domain on Business.
`data-theme`	Optional	The button theme, for example flat or outline.
`data-lang`	Optional	Force a language, for example en or fr. Defaults to the visitor's language.
`data-single`	Optional	Set to true so a recurring event adds only the single occurrence, not the whole series.

On a website builder like Wix, Squarespace, or Webflow, paste this inside an HTML or embed block. No coding required.

Button from a Smart Link

To set the event details right in the HTML, drive the button with a Smart Link instead. Use data-smart-link-key and add the event details as child spans. Include the script once per page.

HTML

<div class="addcal-btn"
  data-base="addcal.co"
  data-smart-link-key="your-key"
  data-theme="default">
  <span class="title">Team Meeting</span>
  <span class="start">2026-05-24T15:00:00</span>
  <span class="end">2026-05-24T16:00:00</span>
  <span class="timezone">America/New_York</span>
  <span class="description">Weekly team sync.</span>
  <span class="location">Conference Room A</span>
  <span class="is_all_day">false</span>
</div>
<script src="https://addcal.co/js/button.js" async defer></script>

Smart Link button attributes

These attributes go on the addcal-btn element.

Parameter	Required	Description
`data-base`	Required	Your AddCal domain, for example addcal.co, or your custom domain on Business.
`data-smart-link-key`	Required	The key of the Smart Link this button creates events through.
`data-theme`	Optional	The button theme. Use default for the standard styling.

Event details

For a Smart Link button, event details are child span elements, each with a class naming the field.

Parameter	Required	Description
`title`	Required	Event title, up to 255 characters.
`start`	Required	Start date and time in ISO format.
`end`	Conditional	End date and time. Use this or duration unless the event is all-day.
`duration`	Conditional	Event length in minutes. Used when you omit end.
`timezone`	Optional	IANA timezone like America/New_York.
`location`	Optional	Physical address or virtual meeting link.
`description`	Optional	A longer description of the event.
`is_all_day`	Optional	true for an all-day event, otherwise false.

Provide either end or duration, unless the event is all-day.