[ Documentation ](https://addcal.co/documentation.md) Add to Calendar button 

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)

 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 ](https://addcal.co/register)[ Smart Links docs ](https://addcal.co/documentation/smart-links.md)

Live preview
------------

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

[Q3 Product Launch 2026-06-12T11:00:00 2026-06-12T11:30:00 America/Los\_Angeles Join us for a 30-minute walkthrough of what's new. Zoom false](https://addcal.co/s/z2xrwph2pl/)

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 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" 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: default, light, iconlist, or buttonlist. Defaults to default. |
| `data-btn-text` | Optional | Custom button label. Applies to the default and light themes. |
| `data-color` | Optional | Custom button background as a hex value like #7C3AED. Text colour is auto-chosen for contrast. |
| `data-calendars` | Optional | Comma-separated allow-list of calendar services to show, in order, for example google,apple. |

 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 ](https://addcal.co/documentation/smart-links.md) instead. Use `data-smart-link-key` and add the event details as child spans. Include the script once per page.

HTML Copy

```
<style>.addcal-btn span{display:none}</style>
<a href="https://addcal.co/s/your-key/"
  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>
</a>
<script src="https://cdn.addcal.co/embed/v1/button.min.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: default, light, iconlist, or buttonlist. Defaults to default. |

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. 

Your own button (headless)
--------------------------

 Want full control over the look? Bring your own element. Keep the `addcal-btn` class and the target attribute (`data-event` or `data-calendar`), add `data-addcal-headless`, and put your own clickable element inside. AddCal wires up the calendar chooser and leaves all the styling to you.

Headless button Copy

```
<span class="addcal-btn" data-event="evt_abc123" data-base="addcal.co" data-addcal-headless>
  <button class="my-button">Add to my calendar</button>
</span>
<script src="https://cdn.addcal.co/embed/v1/button.min.js" async defer></script>
```

 Keep the `addcal-btn` class and a target attribute (`data-event` or `data-calendar`). Without them, the button cannot attach.