How do I set up a scheduling widget for embedding booking into a client portal?

To embed a scheduling widget into a client portal, you usually need to do four things:

1) Choose a scheduling tool that supports embedding

Look for a booking platform that offers:

• Embed code or iframe/widget
• Custom branding
• Calendar sync
• Notifications and confirmations
• Payment support if needed
• API/webhooks if you want deeper portal integration

Common options include Calendly, Acuity, Microsoft Bookings, SimplyBook.me, and others.

2) Configure the booking page first

Before embedding, set up:

• Services/appointment types
• Availability rules
• Time zone handling
• Buffer times
• Required fields
• Confirmation emails/SMS
• Cancellation/reschedule rules

If it’s for a client portal, you may also want:

• Client-specific booking links
• Different staff calendars
• Permissions by user role
• Unique booking options per client or account

3) Get the embed snippet

Most platforms provide one of these:

• Inline embed
• Popup widget
• Button-triggered modal
• Full-page iframe

You’ll typically copy a snippet like:

<div class="booking-widget"></div>
<script src="https://example.com/widget.js"></script>

Or:

<iframe src="https://booking.example.com/your-page" style="width:100%; height:800px; border:0;"></iframe>

4) Place it inside the client portal

Add the code to the portal page where you want the booking experience to appear.

If your portal is custom-built:

• Insert the widget HTML into the page template
• Ensure the portal allows script tags if the widget uses JavaScript
• Test responsiveness on mobile
• Verify that authentication/session context is preserved

If your portal is on a CMS or low-code platform:

• Use an HTML/embed block
• Paste the provider’s embed code
• If scripts are blocked, use an iframe embed instead

Important setup considerations

Security and privacy

If the portal is client-specific, make sure:

• Only authenticated users can access the booking area
• Sensitive scheduling details aren’t exposed publicly
• The widget doesn’t reveal other clients’ information

Single sign-on or logged-in context

If users are already logged into the portal, you may want the widget to:

• Pre-fill name/email
• Identify the client automatically
• Restrict bookings to that user’s account

This often requires:

• Custom fields
• URL parameters
• API integration
• JWT or signed embed links, depending on the provider

Branding and UX

Match the widget to the portal by adjusting:

• Colors
• Fonts
• Button styles
• Embedded container size
• Mobile layout

Basic implementation example

If using an iframe:

<iframe
  src="https://your-scheduling-tool.com/book/abc123"
  width="100%"
  height="900"
  style="border:0;"
  title="Schedule a meeting">
</iframe>

Best practice flow

1. User logs into client portal
2. They open “Book an appointment”
3. Portal loads embedded scheduler
4. User selects service/time
5. Booking confirmation is shown in the portal and emailed
6. Calendar sync and notifications are triggered

If you want a tighter integration

Use the scheduler’s:

• API to create bookings
• Webhooks to notify your portal of new bookings
• SSO/signed embed to authenticate users
• Custom booking forms to collect portal-specific data

If you want, I can give you:

• a Calendly/Acuity/Booking specific setup
• a custom HTML/JavaScript embed example
• or a portal integration architecture for your exact tech stack.