Skip to main content

Add to Calendar button: install, language and layout

Paste the button into your website, set its language, colour and calendars, and fix layout issues.

T
Written by Tom

The Add to Calendar button is a small snippet you paste into your website. Visitors click it, pick their calendar app, and the event is added. It works on any plan.

Get the button code

  1. Open the event and go to the Share Event tab.

  2. Find the Add to Calendar Button card and pick a style: Default Button, Light Button, Icon List, Button List, or Your Button to use your own element.

  3. Click Customise to change the settings below (not shown for Your Button), then copy the code.

  4. Paste it into a custom HTML block on your page.

For a whole calendar, use the Subscribe Button card on the calendar's Share tab instead. Visitors subscribe to the calendar rather than adding one event.

Customise the button

Click Customise on the card to set:

  • Language: Auto (Browser), the default, shows the button in each visitor's browser language. You can also pick a fixed language.

  • Button color and Button text (Default Button and Light Button styles only).

  • Calendars: which calendar apps appear in the menu.

The button is translated into Arabic, Czech, Dutch, English, French, German, Hebrew, Hungarian, Italian, Japanese, Korean, Polish, Portuguese, Russian, Spanish, Swedish and Turkish. Other languages in the list, such as Finnish and Slovenian, show English. For those, type your own wording in Button text. See Languages on your public event and calendar pages.

Centring and layout

The Default Button and Light Button styles are a link, so they work inside a paragraph (including WordPress paragraph blocks) and follow the paragraph's alignment. To centre the button, centre the paragraph it sits in.

If you copied the button before August 2026, it may be an older version that breaks when placed inside a paragraph. Copy the snippet again from the Share Event tab.

The Icon List and Button List styles are blocks. Put them in their own HTML block rather than inside a paragraph.

Using it in email

Email clients cannot run the button script. Use the Add to Calendar Links card on the event's Share Event tab instead (or Follow Calendar Links on a calendar's Share tab), and paste the links into your email tool's own button or text. These guides show how:

Keep the button up to date

The current snippet loads https://cdn.addcal.co/embed/v1/button.min.js, which always serves the latest version. If your page loads an address with a version number in it, replace it with this one.

Related

Did this answer your question?