Back to Help Center

Booking Widget Setup

Embed the Joyn booking widget on your website so families can browse and enroll directly.

What Is the Booking Widget?

The booking widget is an embeddable component you can add to your own website. It lets families browse your classes, view schedules, and enroll — all without leaving your site.

Adding the Widget to Your Website

  1. Go to Settings > Booking Widget in your Joyn dashboard
  2. Copy the embed code snippet
  3. Paste it into your website's HTML where you want the widget to appear

The embed code looks like this:

<div id="joyn-widget" data-org="your-org-slug"></div>
<script src="https://widget.joyn.com/embed.js"></script>

Customization

The widget automatically adapts to your organization's branding:

  • Your organization name and logo appear in the widget header
  • Colors can be customized to match your website's design
  • The widget is responsive and works on mobile devices

Widget vs. Booking Page

You have two options for how families book with you:

| | Booking Widget | Booking Page | |---|---|---| | Where | Embedded on your website | Hosted by Joyn (your-org.joyn.com) | | Best for | Organizations with existing websites | Organizations without a website | | Branding | Matches your website | Joyn-branded with your logo | | Setup | Paste embed code | Share the link — no setup needed |

You can use both simultaneously — many organizations embed the widget on their site and also share the direct booking link on social media.

Testing Your Widget

After embedding the widget:

  1. Visit your website and verify the widget loads
  2. Browse your classes to confirm they display correctly
  3. Test the enrollment flow end-to-end (use a test card in Stripe test mode)
  4. Check that confirmation emails are sent correctly

Troubleshooting

If the widget isn't appearing:

  • Make sure the embed code is placed inside the <body> tag of your page
  • Check that your organization slug in the data-org attribute is correct
  • Verify there are no JavaScript errors in your browser's developer console
  • See Booking Widget Troubleshooting for more detailed solutions

Was this article helpful?