embed scheduling widget in app with custom branding

To embed a scheduling widget in your app with custom branding, the general approach is:

1. Choose the embed method

   • Iframe embed: easiest and most common.
   • JavaScript widget: more flexible for styling and interactions.
   • SDK/component: best if the scheduler platform provides one.

2. Set up branding

   • Match your app’s:
     • logo
     • colors
     • typography
     • button styles
     • rounded corners/shadows
   • Pass brand settings via query params, config, or widget props if supported.

3. Example iframe embed

<iframe
  src="https://scheduler.example.com/embed?brand=acme&primaryColor=%23007aff&logoUrl=https%3A%2F%2Fyourcdn.com%2Flogo.png"
  style="width:100%;height:700px;border:0;border-radius:12px;"
  allow="camera; microphone"
></iframe>

4. Example JavaScript embed

<div id="scheduler-widget"></div>
<script src="https://scheduler.example.com/widget.js"></script>
<script>
  SchedulerWidget.init({
    container: "#scheduler-widget",
    brand: {
      primaryColor: "#007aff",
      logoUrl: "https://yourcdn.com/logo.png",
      fontFamily: "Inter"
    }
  });
</script>

5. If you’re building your own widget

   • Create a branded scheduling component in your frontend framework.
   • Connect it to your backend calendar/booking API.
   • Handle:
     • available slots
     • timezone selection
     • confirmation flow
     • email/calendar invites
     • rescheduling/canceling

6. Important considerations

   • Ensure responsive design for mobile.
   • Support accessibility and keyboard navigation.
   • Keep the widget isolated so branding doesn’t conflict with the host app.
   • Test loading speed and script security.

If you want, I can help you with a React, Next.js, Vue, or plain HTML embed example tailored to your branding.