Add to calendar button in WordPress
Most WordPress calendar plugins install a database table, a settings page and a script bundle to do something that is a link. If you have one event, or a handful, you do not need any of that.
The Custom HTML block
In the block editor, add a Custom HTML block and paste the widget snippet:
<div data-add-to-calendar
data-title="Q4 product webinar"
data-start="2026-09-10T14:00"
data-end="2026-09-10T15:00"
data-timezone="Europe/Brussels"
data-location="https://meet.example.com/abc"></div>
<script src="https://makecalendarlink.com/embed.js" async defer></script>That is the whole integration. The widget renders inside a shadow root, so your theme's CSS cannot break it and it cannot break your theme.
Styling it to match your theme
The widget reads a handful of CSS custom properties, so you can restyle it from your theme without touching the script:
[data-add-to-calendar] {
--atc-bg: #111827;
--atc-color: #ffffff;
--atc-border: #111827;
--atc-radius: 999px;
--atc-accent: #6366f1;
}Classic editor and page builders
- Classic editor. Switch to the Text tab and paste there. The Visual tab strips the data attributes.
- Elementor. Use an HTML widget.
- Divi. Use a Code module.
- Bricks. Use a Code element with execution enabled.
If you would rather have no JavaScript
Use the plain HTML snippet instead of the widget. Five styled links, zero script, works everywhere, and it costs you the dropdown. On a page with a single event that is often the better trade.