There are four ways to put a booking form in front of your visitors. All of them show the same fast, timezone-aware booking widget.
1. Booking pages (automatic)
Every published event type gets its own page at a friendly URL, with no setup:
https://yoursite.com/schedule/{host}/{event}/For example https://yoursite.com/schedule/jane/discovery-call/. You’ll find the exact link in the Booking link box on the event type editor. These pages render inside your active theme (both classic and block themes are supported) and work with pretty or plain permalinks.
Great for sharing directly — in your email signature, a social bio, or a text message.
2. The block
In the block editor, add the Availo Booking block:
- Edit any page or post.
- Add a block and search for Availo Booking.
- In the block settings (right sidebar), choose the event type.
- Pick a display style: inline widget or popup button.
The block previews your selection right in the editor.
3. The shortcode
Use the shortcode anywhere shortcodes work — including inside page builders like Elementor, Divi, WPBakery, and Bricks (use their Shortcode, Text, or HTML element):
[availo event="discovery-call"]Attributes
| Attribute | Values | Default | Description |
|---|---|---|---|
event | event type slug | — | Which event type to show. Find the slug in the event’s URL. |
mode | inline or popup | inline | Show the widget on the page, or as a button that opens it in a popup. |
text | any text | “Schedule a meeting” | Button label when mode="popup". |
Examples
Inline widget:
[availo event="discovery-call"]Popup button with custom text:
[availo event="discovery-call" mode="popup" text="Book a free call"]4. Popup button
Both the block and the shortcode can render as a popup button instead of an inline widget. The visitor clicks the button and the booking form opens in a modal overlay — handy for landing pages and calls-to-action where you don’t want the calendar taking up space until someone’s ready.
Page builders
Availo is built to work inside page builders. The widget mounts correctly even when a builder injects it after the page loads — for example inside an Elementor popup, a Divi tab, or a Bricks accordion. Its styling is isolated so your theme’s and builder’s button and input styles don’t interfere.
If you build something especially custom and need to trigger the widget to initialize after your own scripts run, call:
window.Availo.scan();Manage-booking pages
When someone books, their confirmation email contains a secure manage link where they can cancel or reschedule without needing an account:
https://yoursite.com/schedule/manage/{token}/You don’t need to create or configure these — they’re generated automatically and work out of the box.
Styling
The widget inherits an accent color you can set under Settings — match it to your brand. Beyond that, the widget uses clean, theme-neutral styles. Developers can target the .availo- prefixed classes with custom CSS for deeper changes.