How To Embed the LaunchPass Payment Widget On Your Website
Learn how to use the our Embed feature to enable subscription directly from your site
3 years ago
While you can create an awesome landing page for your community directly from the LaunchPass platform, we understand that you might want to keep your invite page on your own website.
No problem! That’s why we created our embeddable payment widget. It allows you to get subscriptions directly from your own website, with minimal effort. We’re going to give you a quick how-to, but before we get started make sure you have these things in mind:
-
You have already created your paid group and are not starting this from scratch. If you still need to set everything up, check out our getting started collection on our help center.
-
You’re going to need to paste some code to your website, so make sure you have access to it and are logged in.
-
The exact steps for embedding the widget to your website depends on what your site is built on. We’re going to go into a bit more detail for popular ones below (let us know if we’ve missed any you’d like to see!)
Now, let’s get that payment widget on your site.
1. Get your embed code
In your LaunchPass dashboard, scroll to the group you’ve created. Click the button “</Embed>” button.
2. Copy your code (Part 1)
Once you’ve clicked the button, a window will pop up that looks this:
Click “Copy to clipboard” to grab the first code snippet. This will create a button on your page that users will click through to be directed to a payment form.
Go to the website page where you want the widget to display and paste that code anywhere on your page.
3. Copy your code (Part 2)
Go back to your LaunchPass dashboard embed widget and copy the second code snippet. Navigate back to the same page of your website and place the code at the bottom of your page, just before the end of the body.
Once you have done this, it should look something like this:
Clicking the button will take users to your payment widget where they can complete their subscription, like so:
Keep in mind that any content or additional messaging - such as benefits, membership perks, etc - that you want potential subscribers to see will need to be added to your page separate from the payment widget. Here are a couple of examples of LaunchPass communities who have done this well:
4. Publish the changes on your website page
Hit publish, and you’re all set! Users can now subscribe to your community directly from your website!
Embedding your Widget by Website Platform
Note: Wix currently only allows embedding via iframe. Unfortunately LaunchPass’ payment widget embed will not work using this method. The workaround is to use a link from your website page to your LaunchPass invite page.
The exact method for embedding our payment widget will differ based on the website platform you use. If you need a little bit of extra help, we have some brief instructions for embedding using popular site builders.
1. Wordpress
Themes with Page Builders - Many Wordpress themes have page builders - Elementor, Divi, Visual Composer, etc. - that allow you to add and edit content blocks. To embed your LaunchPass payment widget, find the Custom HTML block in the page builder and add it to your page.
Follow the instructions above to copy and paste your embed code snippet into the HTML block.
Using Gutenberg Editor - With Gutenberg editor, the process is very much the same as with page builder. Within your website page, click the + icon to add a content block in the area you want the widget to appear, and select “Code”. Copy and paste the embed code into the element.
Using Classic Editor - With Classic editor, select the “text” tab in the page editor and copy/paste your code into the editor in the section of the page you want the widget to appear.
2. Webflow
Note: The embed function is not available of Webflow’s free version
Select the project (your website) and navigate to the page where you want to embed your payment widget.
In the side menu, click the + icon and select “embed” under the Components section. Paste the LaunchPass embed code where you want your widget to appear.
3. SquareSpace
Use Squarespace’s “Embed Block” element on your page and drop the code into your page where you want the embed code to appear.
You can find out more about using Squarespace’s Embed blocks here.
4. Caard
Note: The embed function is not available on Caard’s free version
Navigate to your page and select the + icon from the menu. Navigate to the Embed element. Copy and paste your LaunchPass embed code.
Need additional support with embedding the LaunchPass payment widget on your website? Feel free to reach out to our support team over chat or at [email protected]!