Booking Widget Troubleshooting

Widget Not Loading

If the booking widget doesn't appear on your page:

Check the Embed Code

Make sure both the container div and the script tag are present:

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

The script tag should be placed after the div, ideally just before the closing </body> tag.

Verify Your Organization Slug

The data-org attribute must match your organization's slug exactly. You can find your slug in Settings > Organization. It's the same value that appears in your booking page URL.

Check for JavaScript Errors

Open your browser's developer tools (usually F12 or right-click > Inspect) and check the Console tab for errors. Common issues:

• CORS errors — your website's hosting may be blocking the widget script
• Content Security Policy — if your site has a CSP, you need to allow widget.joyn.com as a script source
• Ad blockers — some ad blockers may interfere with third-party scripts

WordPress Sites

If you're using WordPress:

• Use a Custom HTML block (not a Paragraph block) to paste the embed code
• Some page builders (Elementor, Divi) have their own HTML widgets — use those
• Clear your WordPress cache after adding the widget

Widget Displays But Shows No Classes

If the widget loads but shows an empty state:

1. Verify you have published classes in Joyn
2. Check that your classes have upcoming sessions
3. Make sure the classes have available capacity

Widget Looks Wrong or Overlaps Content

• The widget is responsive and should fit its container. Set a minimum width of 320px on the parent container.
• If the widget overlaps other elements, check for CSS z-index conflicts
• Add overflow: hidden to the widget container if scrollbars appear unexpectedly

Still Having Issues?

Contact our support team with your website URL and a screenshot of the issue, and we'll help you get the widget working.