Embedding Forms on Your Website

Introduction

Joiner forms can be embedded on any website. This guide covers all embedding options.

Method 1: Shareable Link

The easiest option - just share a link:

https://joiner.page/your-slug

Perfect for: Twitter bio, email signatures, social media posts, QR codes

Method 2: Inline Embed

Embed the form directly in your page:

<script src="https://joiner.page/embed.js"></script>
<div data-joiner-form="frm_abc123"></div>

The form renders where you place the div. Recommended container width: 400-600px.

Method 3: Popup Modal

Show the form as a popup triggered by user actions:

Button Click

<script src="https://joiner.page/embed.js"></script>
<button onclick="Joiner.popup('frm_abc123', { trigger: 'button' })">
  Join Waitlist
</button>

Timeout (after 3 seconds)

<script src="https://joiner.page/embed.js"></script>
<script>
  Joiner.popup('frm_abc123', { 
    trigger: 'timeout', 
    delay: 3000 
  });
</script>

Exit Intent (when user moves to leave)

<script src="https://joiner.page/embed.js"></script>
<script>
  Joiner.popup('frm_abc123', { 
    trigger: 'exit-intent' 
  });
</script>

Method 4: Manual Initialization

For SPAs or dynamic content:

// Load form into specific container
Joiner.init('frm_abc123', document.getElementById('my-form'));

// Re-initialize after dynamic content loads
Joiner.initInlineForms();

// Close popup programmatically
Joiner.closePopup();

Testing Your Embed

Visit /embed-test.html on your site to test all embedding options before going live.

Troubleshooting

Form not showing?

• Check form ID is correct
• Ensure form status is "Active" in dashboard
• Check browser console for errors

Popup not working?

• Make sure script is loaded before calling Joiner.popup()
• Check that form ID exists