Skip to main content

How to Embed LaunchPass Payment Widget on Your Website

TL;DR Copy two code snippets from your LaunchPass dashboard. Paste button code where you want the button. Paste script code before closing body tag. Members can subscribe directly from your site.

Seth avatar
Written by Seth
Updated this week

Quick Answer: Two Simple Code Snippets

The LaunchPass embed widget lets members subscribe without leaving your website.

What You Need:

  1. A paid offer already created in LaunchPass

  2. Access to edit your website HTML

  3. Two code snippets from LaunchPass dashboard

How It Works:

  1. Get embed code from LaunchPass (2 snippets)

  2. Paste button code where you want button to appear

  3. Paste script code at bottom of page

  4. Publish your page

Takes 5-10 minutes to set up.

Why Use the Embed Widget?

Keep visitors on your website during signup.

Benefits of Embedding

Higher Conversions: Members don't leave your site. Less friction means more signups.

Brand Consistency: Your website design stays intact. Button fits your style.

Better Trust: Members stay on your domain. Builds confidence in your brand.

Easier Comparison: Show multiple tiers on one page. Members compare and choose.

Your Analytics: Track button clicks with your own analytics tools.

Widget vs Hosted Page

You have two options for accepting payments:

LaunchPass Hosted Page:

  • URL: launchpass.com/your-community

  • Pre-built page design

  • No coding required

  • Ready instantly

Embedded Widget (This Guide):

  • On your own website

  • Your design and branding

  • Requires code pasting

  • Takes 10 minutes to set up

Most people use embedded widget if they have a website. It converts better.

Requirements Before You Start

Make sure you have everything ready.

1. Paid Offer Created

You must create your paid offer first:

  • Log into LaunchPass dashboard

  • Create your community offer

  • Set pricing

  • Publish the offer

Cannot embed until offer exists.

2. Website Access

You need permission to edit your website:

  • Login credentials to your site builder

  • Ability to add HTML code

  • Access to the page where button will appear

If you don't have website access, ask your web developer to help.

3. LaunchPass Premium (For Paid Offers)

To charge members:

  • Requires LaunchPass Premium plan ($29/month)

  • 14-day free trial available

  • Free tier only allows free communities

Embed works with both free and paid offers.

4. HTTPS Website

Your website must use HTTPS:

  • Modern payment security requires it

  • Check your URL starts with "https://"

  • If using "http://", upgrade to HTTPS first

Most website builders use HTTPS automatically.

Step-by-Step: Getting Your Embed Code

Find your embed codes in LaunchPass dashboard.

Step 1: Log Into LaunchPass

  1. Go to launchpass.com

  2. Click "Log In"

  3. Enter your email and password

  4. Access your admin dashboard

Step 2: Find Your Offer

Scroll through your dashboard to find the offer you want to embed.

Look for the offer name you created (e.g., "Premium Membership" or "Gold Tier").

Step 3: Click Embed Button

Next to your offer, you'll see a button labeled "</Embed>".

Click this button. A popup window opens.

Step 4: Copy First Code Snippet (Button)

The popup shows two code blocks.

First Code Block (Button Code):

  • This creates the clickable button

  • Copy by clicking "Copy to clipboard"

  • Keep this code ready

Step 5: Copy Second Code Snippet (Script)

Second Code Block (Script Code):

  • This makes the button work

  • Scroll down in the popup to see it

  • Click "Copy to clipboard"

  • Keep this code ready

You now have both codes. Leave the popup open while you paste them.

Step-by-Step: Pasting Code on Your Website

Now add both codes to your website.

Part 1: Paste Button Code

The button code goes where you want the button to appear.

Where to Put It:

  • In your pricing section

  • Next to benefit descriptions

  • On your homepage

  • On a dedicated signup page

How to Paste:

  1. Open the page in your website editor

  2. Find the spot for your button

  3. Switch to HTML or code view

  4. Paste the button code

  5. Don't change anything in the code

Part 2: Paste Script Code

The script code goes at the bottom of your page.

Exact Location:

  • Just before the </body> tag

  • At the very bottom of your page HTML

  • After all your content

How to Find </body> Tag:

  1. View your page's HTML

  2. Scroll to the bottom

  3. Look for </body> (closing body tag)

  4. Paste script code right before this tag

Important: Only paste script code once per page, even if you have multiple buttons.

Part 3: Save and Publish

  1. Save your page changes

  2. Publish or update your live site

  3. The button now works on your live website

Test by clicking the button yourself.

What Members See

Here's the member experience when they click your button.

Step 1: Member Clicks Button

Your website displays normally. Member sees your button (styled however you want).

They click the button labeled "Join" or "Subscribe" or whatever text you chose.

Step 2: Payment Widget Opens

A popup modal appears on top of your website.

Modal Contains:

  • Community name

  • Price and billing frequency

  • Email field

  • Payment card fields

  • Subscribe button

Your website remains visible behind the modal.

Step 3: Member Enters Information

Member fills out the form:

  • Email address

  • Credit card number

  • Expiration date

  • CVV code

  • Billing zip code

Stripe processes the payment securely.

Step 4: Payment Processes

LaunchPass charges the card through Stripe. Takes 2-3 seconds.

Member sees processing indicator.

Step 5: Confirmation

Success message appears. Member receives:

  • Email confirmation

  • Invite link to your community

  • Access instructions

Modal closes. They're now on your website thank you message.

Embedding on Different Platforms

Platform-specific instructions for popular website builders.

WordPress

WordPress has three main editing methods.

Method 1: Page Builders (Elementor, Divi, etc.)

  1. Edit your page in the page builder

  2. Find "Custom HTML" or "HTML" widget

  3. Drag it to where you want the button

  4. Paste button code into the HTML widget

  5. Add another HTML widget at page bottom

  6. Paste script code into bottom widget

  7. Save and publish

Method 2: Gutenberg Editor (Block Editor)

  1. Edit your page

  2. Click + icon where you want button

  3. Search for "Custom HTML" block

  4. Add the block

  5. Paste button code

  6. Scroll to bottom of page

  7. Add another Custom HTML block

  8. Paste script code

  9. Update page

Method 3: Classic Editor

  1. Edit your page

  2. Switch from "Visual" to "Text" tab

  3. Find where you want the button

  4. Paste button code

  5. Scroll to bottom of HTML

  6. Paste script code before </body>

  7. Update page

Webflow

Webflow makes embedding easy.

  1. Open your project (website)

  2. Navigate to the page for the button

  3. In the left sidebar, click + icon

  4. Under "Components," select "Embed"

  5. Drag embed element where you want button

  6. Double-click the embed element

  7. Paste button code

  8. Add another embed at page bottom

  9. Paste script code

  10. Publish site

Note: Embed feature requires Webflow paid plan. Not available on free tier.

Squarespace

Squarespace uses embed blocks.

  1. Edit the page where you want the button

  2. Click an insert point (+ icon appears)

  3. Search for "Code" or "Embed" block

  4. Click to add the block

  5. Paste button code into the block

  6. Save

  7. Add another Code block at page bottom

  8. Paste script code

  9. Save and publish

More info: support.squarespace.com/hc/en-us/articles/206543617-Embed-blocks

Carrd

Carrd is a simple one-page site builder.

  1. Edit your Carrd page

  2. Click + icon in your editor

  3. Find "Embed" element

  4. Click to add it

  5. Paste button code

  6. Position it where you want

  7. Add another Embed element

  8. Paste script code

  9. Publish site

Note: Embed feature requires Carrd Pro (paid plan). Not available on free tier.

Wix

Important Limitation: Wix only supports iframe embeds. LaunchPass widget uses JavaScript, which doesn't work with iframes.

Workaround: Instead of embedding, use a button that links to your LaunchPass hosted page.

  1. Add a button element in Wix

  2. Set button text ("Join Now")

  3. Link the button to your LaunchPass URL

  4. Example: launchpass.com/your-community-name

Members click button → go to LaunchPass page → complete signup → return to your site.

Not ideal, but works with Wix's limitations.

Shopify

Shopify works great for embedding.

  1. Go to Online Store > Pages

  2. Create or edit a page

  3. Click "Show HTML" button

  4. Paste button code where you want it

  5. Scroll to bottom of HTML

  6. Paste script code before </div> that closes your page

  7. Save page

Can also add to product pages or theme files if you're comfortable with Liquid templates.

Custom HTML Websites

If you code your own site:

  1. Open your HTML file

  2. Find <body> section

  3. Paste button code where you want button

  4. Scroll to find </body> tag

  5. Paste script code right before </body>

  6. Save file

  7. Upload to your server

Simple as that for custom sites.

Kajabi

Kajabi is popular for online courses.

  1. Go to your page editor

  2. Add a "Custom Code" block

  3. Paste button code

  4. Add another Custom Code block at bottom

  5. Paste script code

  6. Save and publish

Works in landing pages, course pages, and checkout pages.

Ghost

Ghost is a blogging platform.

  1. Create or edit a post/page

  2. Click + to add a card

  3. Select "HTML" card

  4. Paste button code

  5. Add another HTML card at bottom

  6. Paste script code

  7. Publish

Notion (Public Pages)

Notion recently added public pages.

Limitation: Notion doesn't support custom JavaScript on public pages.

Workaround: Link to your LaunchPass hosted page instead of embedding.

Embedding Multiple Tiers on One Page

Show all membership levels together.

Why Display Multiple Offers?

Comparison View: Members see all options side-by-side.

Higher Revenue: Members choose higher tiers when they see value differences.

Clarity: Clear pricing structure reduces confusion.

How to Embed Multiple Offers

Step 1: Get All Embed Codes

For each offer (Bronze, Silver, Gold):

  1. Click </Embed> button

  2. Copy button code

  3. Copy script code

  4. Keep all codes organized

Step 2: Paste All Button Codes

Place button codes next to each other:

html

<h3>Bronze - $19/month</h3> <ul>   <li>Basic access</li> </ul> [Paste Bronze button code here]  <h3>Silver - $49/month</h3> <ul>   <li>Everything in Bronze</li>   <li>Plus: Advanced training</li> </ul> [Paste Silver button code here]  <h3>Gold - $99/month</h3> <ul>   <li>Everything in Silver</li>   <li>Plus: 1-on-1 coaching</li> </ul> [Paste Gold button code here]

Step 3: Paste Script Code Once

At page bottom, paste ONE script code (from any offer).

Don't paste script three times. Once is enough for all buttons.

Styling Multiple Offers

Make your tiers look professional:

Use CSS Grid or Flexbox:

html

<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px;">   <div>     [Bronze offer]   </div>   <div>     [Silver offer - add "Popular" badge]   </div>   <div>     [Gold offer]   </div> </div>

This creates three columns side-by-side.

Custom Button Styling

Make buttons match your brand.

Understanding the LP Class

Each LaunchPass button has a unique class identifier:

html

<button class="lp12345">Join Now</button>

The lp12345 part is unique to your offer.

Using Your Own Button Design

You can style the button however you want:

Step 1: Create Your Button

html

<button class="lp12345 my-custom-style">   Join Premium Community </button>

Add your own CSS classes alongside the lp class.

Step 2: Style With CSS

css

.my-custom-style {   background: #FF6B35;   color: white;   padding: 15px 30px;   border: none;   border-radius: 8px;   font-size: 18px;   font-weight: bold;   cursor: pointer; }  .my-custom-style:hover {   background: #E55A28; }

Step 3: Keep the LP Class

Always keep the lp class on your element. That's what triggers the widget.

Making Any Element a Button

Not just buttons work. ANY HTML element with the LP class becomes clickable:

Text Link:

html

<a href="#" class="lp12345">Click here to join</a>

Div Box:

html

<div class="lp12345" style="padding: 20px; background: blue; color: white;">   Join Now - $49/month </div>

Image:

html

<img src="join-button.png" class="lp12345" alt="Join Now">

Anything with the LP class opens the widget when clicked.

Troubleshooting Common Issues

Fix problems with your embed.

Button Doesn't Appear

Problem: No button shows up after pasting code.

Causes:

  • Pasted in wrong location

  • Website builder stripped the code

  • Code got modified accidentally

Solutions:

  1. Check you're in HTML/code view (not visual editor)

  2. Verify code pasted exactly as copied

  3. Look for error messages in browser console (F12)

  4. Try pasting in a different location on page

  5. Contact [email protected] with screenshot

Button Appears But Doesn't Work

Problem: Button visible but nothing happens when clicked.

Causes:

  • Script code not pasted

  • Script code in wrong location

  • JavaScript blocked by browser

  • Ad blocker interfering

Solutions:

  1. Verify script code pasted before </body> tag

  2. Check only ONE script code on page

  3. Disable ad blockers and test again

  4. Try different browser

  5. Check browser console for errors (F12)

Widget Opens But Shows Error

Problem: Modal opens but displays error message.

Causes:

  • Offer unpublished or deleted

  • Stripe not connected

  • Payment processor issue

Solutions:

  1. Check offer is published in LaunchPass dashboard

  2. Verify Stripe connected properly

  3. Test with different payment card

  4. Check LaunchPass system status

  5. Contact [email protected]

Script Conflicts With Website

Problem: Website breaks or looks wrong after adding script.

Causes:

  • Script conflicts with existing JavaScript

  • CSS conflicts

  • Incorrect placement

Solutions:

  1. Move script to different position (but still before </body>)

  2. Wrap script in async tags

  3. Check browser console for specific errors

  4. Remove script, reload page, add back carefully

  5. Ask your web developer for help

Multiple Buttons All Open Same Offer

Problem: You want three buttons for three tiers, but all open the same offer.

Cause: Used same button code three times with same LP class.

Solution:

  1. Get separate embed codes for each offer

  2. Use Bronze button code for Bronze

  3. Use Silver button code for Silver

  4. Use Gold button code for Gold

  5. Each has unique LP class identifier

Mobile Display Issues

Problem: Button looks wrong on mobile devices.

Causes:

  • CSS not responsive

  • Button too large for small screens

  • Script conflicts on mobile

Solutions:

  1. Add mobile-responsive CSS:

css

@media (max-width: 768px) {   .your-button-class {     width: 100%;     font-size: 16px;   } }

  1. Test on actual mobile device

  2. Use browser mobile emulator (F12 > device toolbar)

  3. Make button full-width on mobile

Best Practices for Higher Conversions

Optimize your embed for more signups.

Practice 1: Clear Call-to-Action Text

Bad Button Text:

  • "Click Here"

  • "Submit"

  • "Go"

Good Button Text:

  • "Join Now - $49/month"

  • "Start My Free Trial"

  • "Get Instant Access"

Be specific about what happens when they click.

Practice 2: Show Social Proof

Near your button, display:

Member Count: "Join 1,247 members"

Testimonials: Short quote from happy member

Trust Badges: "Secure payment via Stripe"

Money-Back Guarantee: "Cancel anytime, no questions asked"

Social proof increases conversions 20-30%.

Practice 3: List Benefits Clearly

Right above your button:

What They Get:

  • Access to private Discord server

  • Weekly coaching calls

  • Resource library with 100+ templates

  • 24/7 support

Make value crystal clear.

Practice 4: Create Urgency

Add time-sensitive elements:

Limited Spots: "Only 15 spots left this month"

Price Increase Warning: "Price increases to $69 on Dec 1"

Bonus Offer: "Sign up today, get free onboarding call ($200 value)"

Urgency drives action.

Practice 5: Reduce Friction

Make signing up easy:

Above the Fold: Button visible without scrolling

Large Button: Easy to click, especially on mobile

Fast Loading: Page loads quickly

One Click: Don't ask for info before opening widget

Remove obstacles between member and signup.

Practice 6: Mobile Optimization

Most signups happen on mobile:

Large Tap Target: Button at least 44x44 pixels

Fast Loading: Optimize page speed for mobile

Easy Form: Widget works smoothly on small screens

Test Thoroughly: Sign up yourself on your phone

Mobile experience matters more than desktop.

Tracking and Analytics

Measure how well your embed performs.

Google Analytics Integration

Track button clicks:

html

<button    class="lp12345"    onclick="gtag('event', 'click', {     'event_category': 'signup',     'event_label': 'premium_tier'   });" >   Join Premium </button>

This sends event to Google Analytics when clicked.

Facebook Pixel Tracking

Track for Facebook ads:

html

<button    class="lp12345"   onclick="fbq('track', 'InitiateCheckout', {     value: 49.00,     currency: 'USD'   });" >   Join Now </button>

Helps optimize Facebook ad campaigns.

Conversion Tracking Setup

What to Track:

  • Button clicks

  • Widget opens

  • Successful signups (Stripe webhooks)

  • Which tier gets most clicks

Tools to Use:

  • Google Analytics

  • Facebook Pixel

  • Mixpanel

  • Heap Analytics

Track everything to improve conversions.

Advanced Customization

Take your embed to the next level.

Custom Success Messages

After signup, redirect members:

  1. Set up redirect in LaunchPass dashboard

  2. Create custom thank-you page

  3. Include:

    • Confirmation message

    • Next steps

    • Welcome video

    • How to access community

A/B Testing Different Buttons

Test which converts better:

Test A: Green Button

  • Color: #28A745

  • Text: "Join Community - $49"

Test B: Orange Button

  • Color: #FF6B35

  • Text: "Start Free Trial"

Run both for 2 weeks. Use winner.

Exit-Intent Popups

Show widget when visitors try to leave:

javascript

document.addEventListener('mouseout', function(e) {   if (e.clientY < 50) {     // Trigger LP widget programmatically     document.querySelector('.lp12345').click();   } });

Captures abandoning visitors.

Seasonal Campaigns

Change button text for promotions:

Normal: "Join for $49/month"

Black Friday: "Black Friday Sale - 50% Off First Month"

New Year: "New Year Special - First Month Free"

Update easily without touching embed code.

Security and Compliance

Keep member data safe.

HTTPS Requirement

Your website MUST use HTTPS:

  • Protects payment information

  • Required by payment processors

  • Builds member trust

  • Improves SEO

If still on HTTP, upgrade immediately.

PCI Compliance

LaunchPass and Stripe handle PCI compliance:

  • Card data never touches your server

  • Stripe securely processes all payments

  • You don't store sensitive data

  • Automatic compliance

You just embed the code. Security is handled.

Privacy Policy

Your website should have:

Privacy Policy stating:

  • You use LaunchPass for subscriptions

  • Stripe processes payments

  • What data you collect

  • How you use member information

Link to privacy policy near signup button.

Terms of Service

Include terms covering:

  • Subscription terms

  • Cancellation policy

  • Refund policy

  • Community rules

Protects both you and members.

Getting Help

LaunchPass support assists with embedding.

Free Implementation Help

Email [email protected] for:

  • Help pasting code

  • Troubleshooting broken embeds

  • Custom styling questions

  • Platform-specific guidance

  • Best practices advice

When to Contact Support

Technical Issues:

  • Button won't appear

  • Widget won't open

  • Error messages

  • Code conflicts

Customization Questions:

  • Custom button styling

  • Multiple offers on one page

  • Advanced tracking setup

  • Mobile optimization

Strategy Help:

  • Conversion optimization

  • Pricing page design

  • A/B testing guidance

  • Analytics interpretation

What to Include in Support Email

Subject: Help with Embed Widget  Hi LaunchPass Support,  I need help embedding the widget on my website.  Website: yourwebsite.com Website Platform: WordPress with Elementor Issue: [Describe specific problem] What I've tried: [Steps you already took] Screenshot: [Attached if helpful]  Thank you! [Your Name] [Your LaunchPass Email]

Support responds within 24 hours.

Related Resources

Learn more about LaunchPass features:

  • How to create a high-converting LaunchPass page

  • Multi-tier subscriptions setup guide

  • Create a paid Slack community step-by-step

  • Create a paid Discord community step-by-step

  • LaunchPass pricing and billing explained

All guides available in LaunchPass help center.

Quick Reference: Embed Checklist

Use this checklist when embedding:

Before You Start:

  • Paid offer created and published

  • Website uses HTTPS

  • Have access to edit website HTML

  • LaunchPass Premium active (for paid offers)

Getting Code:

  • Logged into LaunchPass dashboard

  • Found correct offer

  • Clicked </Embed> button

  • Copied button code (first snippet)

  • Copied script code (second snippet)

Pasting Code:

  • Pasted button code where button should appear

  • Pasted script code before </body> tag

  • Only pasted script once (even with multiple buttons)

  • Didn't modify the code

Testing:

  • Saved and published page

  • Tested button click

  • Widget opens correctly

  • Test payment goes through

  • Tested on mobile device

  • Checked different browsers

Optimization:

  • Clear call-to-action text

  • Benefits listed above button

  • Social proof displayed

  • Button visible without scrolling

  • Mobile-responsive design

  • Analytics tracking set up

Summary

The LaunchPass embed widget lets members subscribe directly from your website.

How It Works: Two code snippets. Button code creates the button. Script code makes it function. Widget opens as a popup modal over your site.

Setup Time: 5-10 minutes for basic embed. 30 minutes including styling and optimization.

Requirements: Paid offer created, website with HTML access, HTTPS enabled, LaunchPass Premium for paid communities.

Works With: WordPress, Webflow, Squarespace, Carrd, Shopify, Kajabi, Ghost, custom HTML sites. Not compatible with Wix (use link instead).

Custom Styling: Any HTML element with the LP class becomes a clickable button. Style however you want with CSS.

Multiple Offers: Paste multiple button codes on one page. Only paste script code once.

Conversions: Embed typically converts 2-3x better than sending visitors to external pages.

Support: Free help available at [email protected] for setup and troubleshooting.

Best Practice: Place button above the fold, use clear call-to-action text, show benefits and social proof, optimize for mobile.

Start embedding to keep visitors on your site and increase signups.

Related Articles
Why Your LaunchPass Page is Disabled (And How to Fix It)
Can I Use LaunchPass on My Own Domain/Website?
Can You Use Discord With LaunchPass?
How to Create Multi-Tier Subscriptions on LaunchPass
What Is Stripe? Your LaunchPass Payment Partner
Did this answer your question?