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
- Go to Settings > Booking Widget in your Joyn dashboard
- Copy the embed code snippet
- 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:
- Visit your website and verify the widget loads
- Browse your classes to confirm they display correctly
- Test the enrollment flow end-to-end (use a test card in Stripe test mode)
- 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-orgattribute 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?