Skip to main content

Adding Club Embed to Your Non-Shopify Site🚀

Want to bring the magic of Club to your website? You’re in the right place!

Written by Otto

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: Create your intent ID (Highly Recommended)

  1. Head to your recruitment page in your Club admin

  2. Click 'Manage' next to Auto-Tag Members with Invitation Links

  3. Click 'Create invitation link'

  4. Click 'Select/create tags' and either choose an existing tag or create a new one

  5. Enter a link name e.g. Homepage embed button

  6. Click 'Generate link' and copy the intent id from the end of your new link

Step 3: 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" data-intentid="<intentid>"></div>Option

Prefer a simple link instead? Use this:

<div data-club-embed="true" data-custom="true" data-brand-name="yourbrand" data-intentid="<intentid>">Join our Club</div>


​Pro Tip: You can customise the data-badge-text, data-badge-color, and data-badge-size values to match your branding!
​
​Step 4: Add the Badge or Link to Your Site’s Header or Footer

Now, let's place your badge or link where it belongs:

  1. Find your header or footer file.

  2. Look for an option to add custom HTML (or <div> elements).

  3. 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! 💬
​
​

Did this answer your question?