Overview

Embedding a scheduler on your website lets clients book meetings, consultations, and sessions without leaving your site. Instead of directing visitors to a separate page, Wedy Pro provides a lightweight booking widget that lives directly on your website — fully branded and styled to match your business.

You can also share a direct booking link if you prefer to send clients to a dedicated page. Both options give clients the same seamless booking experience: pick a date, choose a time slot, fill in their details, and confirm.

Time to complete: 5–10 minutes.

Before you begin

You need at least one active scheduler. If you haven't created one yet, see Create a Scheduler.
Your calendar must be connected. Schedulers use your connected calendar to show real-time availability to clients.
Only active schedulers can be shared or embedded. If your scheduler is turned off, click Turn On on its card first.

How to get the embed code

To embed your scheduler on a website, you first copy the embed code from the Share modal in Wedy Pro.

Navigate to Schedulers in the sidebar (under the CRM section). The page title is Scheduling.
Find the scheduler you want to embed and click the Share button on its card.
The Share your scheduler modal opens with two sections: SHARE VIA URL and EMBED ON WEBSITE.
Under the EMBED ON WEBSITE section, click COPY CODE to copy the embed snippet to your clipboard.

The embed code looks like this:

<div id="wedy-scheduler-container">
  <div data-wedy-scheduler="YOUR_SCHEDULER_ID" data-wedy-theme="light"></div>
  <script src="https://wedypro.ai/widget.js" async defer></script>
</div>

The data-wedy-scheduler attribute contains your unique scheduler ID, and data-wedy-theme controls whether the widget appears in light or dark mode.

Embed on your website

Paste the embed code into the HTML of any page on your website where you want the booking widget to appear. The widget works on any website platform — WordPress, Wix, Squarespace, React, Next.js, or plain HTML.

WordPress

Open the page or post where you want the scheduler.
Add a Custom HTML block (in the Gutenberg editor) or switch to the Text tab (in the Classic editor).
Paste the embed code and publish.

Wix

Open your Wix Editor and navigate to the page.
Click Add, then Embed Code, then Custom Element or HTML iframe.
Paste the embed code and save.

Squarespace

Edit your page and add a Code Block.
Paste the embed code into the code block.
Save and publish.

Plain HTML or other platforms

Paste the embed code directly into the <body> section of your page where you want the scheduler to appear. The widget is self-contained — it loads its own styles and functionality without conflicting with your website's design.

Share a direct booking link instead

If embedding code on your website isn't an option — or you simply want to share a link via email, social media, or a link-in-bio tool — use the direct booking URL.

Open the Share your scheduler modal (click Share on an active scheduler card).
Under the SHARE VIA URL section, click COPY LINK to copy the direct booking page URL.
Share the link anywhere: email signatures, Instagram bios, Facebook posts, text messages, or printed materials.

The direct link takes clients to a standalone booking page at wedypro.ai/appointments/your-scheduler-id. They see the same calendar, time slot selection, and booking form as the embedded widget.

A wedding photographer, for example, might include the direct booking link in their email signature so every inquiry recipient can instantly schedule a consultation — no extra steps required.

Choose a light or dark theme

The embedded widget supports two themes: light and dark. The theme is controlled by the data-wedy-theme attribute in the embed code.

Light theme (default) — a clean, bright background suited for most websites. Use data-wedy-theme="light".
Dark theme — a dark background designed for websites with a darker color palette. Use data-wedy-theme="dark".

To switch themes, change the attribute value in the embed code before pasting it into your website:

<div data-wedy-scheduler="YOUR_ID" data-wedy-theme="dark"></div>

For deeper customization — including fonts, colors, button styles, and layout — open the theme editor in Wedy Pro. Click the three-dot menu on your scheduler card and select Edit Theme. See Customize Your Scheduler Theme and Branding for details.

How the widget works on your site

The Wedy scheduler widget uses Shadow DOM isolation, which means it loads inside a self-contained boundary on your page. Your website's CSS cannot accidentally break the widget's layout, and the widget's styles cannot leak into your site's design. This is a significant advantage over iframe-based solutions — the widget feels native to your page while remaining fully protected from style conflicts.

Here is what happens behind the scenes:

The widget.js script scans your page for elements with the data-wedy-scheduler attribute.
When it finds one, it loads only the scheduler component — no unnecessary code is shipped to your visitors.
If your website is a single-page application (built with React, Next.js, or a similar framework), the widget automatically detects dynamically added elements and initializes them on the fly.
Booking form submissions are protected by reCAPTCHA to prevent spam.

What clients see when they book

Whether a client uses the embedded widget or the direct booking link, the booking experience follows the same flow:

Pick a date — clients see a calendar with available dates highlighted. Dates without availability are greyed out.
Choose a time slot — after selecting a date, available time slots appear based on your scheduler's availability settings.
Fill in the booking form — clients enter their name, email, and any custom questions you added to your scheduler.
Confirmation — a success screen shows the message This meeting is scheduled along with the booking details: date, time, duration, location, and a conferencing link if applicable.

Clients also receive a confirmation email with the meeting details and options to reschedule or cancel (if you enabled those in your scheduler's booking settings).

Tips

Place the scheduler widget on a high-traffic page — your contact page, services page, or homepage — to maximize bookings.
If you serve different event types, create separate schedulers for each (up to 10 per account) and embed them on the relevant service pages. A florist could have one scheduler for consultations and another for on-site walkthroughs.
Test the widget after embedding by visiting your page in a private/incognito browser window to see exactly what clients experience.
Use the Availability overview page in Wedy Pro to see a consolidated monthly view of all your available time slots across every active scheduler.
The widget loads asynchronously and does not slow down your website. The async defer attributes on the script tag ensure your page content loads first.

Frequently asked questions

Does the embedded widget slow down my website?

No. The widget script loads asynchronously after your page content is ready, so it has no impact on your page load speed. Only the scheduler component is loaded — nothing extra.

Can I embed multiple schedulers on the same page?

Yes. Add a separate embed code block for each scheduler you want to display. Each one uses a different data-wedy-scheduler ID, and the widget script only needs to be included once.

Does the widget work on mobile devices?

Yes. The scheduler widget is fully responsive and adapts to any screen size, whether your visitors are on a desktop, tablet, or phone.

What if my scheduler is turned off?

If a scheduler is inactive, visitors who access its booking page (via direct link or embed) see an unavailable message. Make sure your scheduler is active before sharing it — click Turn On on the scheduler card in Wedy Pro.

Can I customize the widget beyond light and dark themes?

Yes. You can customize fonts, colors, button styles, and more using the theme editor. You can also pass custom attributes directly in the embed code for font overrides and primary color changes. See Customize Your Scheduler Theme and Branding for a full walkthrough.