How to embed a booking calendar (WordPress, Webflow, Framer, React)

Short answer: load IntoCal's embed script and add a container whose data-intocal value is your public username and appointment slug. The script renders an inline booking iframe. Your website must allow custom HTML and scripts; external calendar sync must be checked separately against your plan and connected accounts.

The inline embed

<script src="https://intocal.com/embed.js" defer></script>
<div data-intocal="yourname/intro-30"></div>

Copy your own identifiers from Dashboard → Distribution. No private API key belongs in this snippet. For plan limits and complete testing steps, read free booking calendar widget for a website.

Website builders

Paste the snippet into a custom HTML or embed section that permits scripts, then test the published page. Editor previews may not execute embedded scripts. On WordPress, your account and hosting restrictions determine whether script tags are retained; no dedicated plugin is required for the HTML approach.

Webflow users can follow the Webflow integration guide. Avoid fixed-height containers that clip the final booking fields.

React

The published @intocal/react package provides an InlineWidget. Open the developer start page for a ready-to-use example with your own public identifiers. This is preferable to relying on a one-time script scan to find containers that React mounts later.

Popup mode

Use the programmatic popup method after the script has loaded. A data-intocal-mode="popup" attribute alone is not supported by the current automatic initializer.

<button id="book-call" type="button">Book a call</button>
<script src="https://intocal.com/embed.js"></script>
<script>
  IntoCal.popup({
    host: 'yourname',
    event: 'intro-30',
    trigger: '#book-call'
  });
</script>

For a calendar whose events or availability you update, see editable calendar widgets. If visitors only need to save a fixed date, use an add-to-calendar link instead of a booking widget.