Step 1: Copy the JavaScript SDK Code
Open up your Club profile and head to "Embed your Club" (top left of your screen). Now, grab the JavaScript SDK code from the Embed Club settings.
🔹 Example script:
<script type="module" src="https://embed-club.club.co/"></script>
Where does this go? Add this snippet to your main theme file (for example, your base file if you're using HubSpot). Make sure to place it just before the closing </body> tag.
Step 2: Add the Club Badge or Custom Link to Your Header
Once the JavaScript SDK is in place, it’s time to embed the Club badge or a custom link in your navigation menu.
Option 1: Club Badge
If you want a stylish badge that blends seamlessly into your site, use this code:
<div data-club-embed="true" data-brand-name="yourbrand" data-badge-text="Join our community" data-badge-color="dark" data-badge-size="xSmall"></div>
Option 2: Custom Link
Prefer a simple link instead? Use this:
<div data-club-embed="true" data-custom="true" data-brand-name="yourbrand">Join our Club</div>
Pro Tip: You can customize the data-badge-text, data-badge-color, and data-badge-size values to match your branding!
Step 3: Add the Badge or Link to Your Site’s Header or Footer
Now, let's place your badge or link where it belongs:
Find your header or footer file.
Look for an option to add custom HTML (or
<div>elements).Paste the Club badge or link code inside the custom HTML block.
✨ Example: Here’s how we added it to our HubSpot footer:
<div class="button-1 has-icon text-center" data-club-embed="true" data-brand-name="club_innovators" data-badge-text="Join our community" data-badge-color="light" data-badge-size="medium"></div>
And that’s it! 🎉 Your Club is now seamlessly embedded into your non-Shopify site. Welcome to a more connected community experience!
Need help? Ping us anytime—we’re happy to assist! 💬