Articles in this category

GOOD STUFF!

How to embed Subbly on Weebly

Since we have plenty of customers using Weebly for their site, it would be really useful for them to know how they can easily integrate their Subbly product checkouts on their existing Weebly store. Read on.

Video tutorial

Before we proceed with the instructions, for those of you that are more comfortable with the actual video walkthrough you can find one below:

Options for embedding Subbly checkout onto Weebly

There are basically 2 ways of integrating Subbly into your Weebly page to allow you to accept recurring payments:

  1. Create a separate button on your Weebly site and link it to the Subbly product checkout page. Note that this will open a checkout in a separate tab and will move customers away from your site to checkout.
  2. Embed Subbly product checkout to your Weebly website. This will create a button on your existing page and will invoke a checkout in a popup directly on the site. Useful if you don't want your customers to feel like they are being taken off of your Weebly page.
Subbly has also a featured app on Weebly's app store which you'll be able to install directly from there. However, this requires a paying plan on Weebly, whereas this article will show you how to embed Subbly's products onto your Weebly page even if you're on the free trial plan.

For the purpose of this tutorial, we will use some generic Weebly theme and just show you how to create a button on it and how to link it to your product created on the Subbly admin.

First of all, you will need to choose to add a button to a desired place underneath the product description while on Weebly web builder. Drag and drop button element.

You will be able to customize the styling of this button directly through the context menu on Weebly. You can change the likes of color style, font family, and size of the button or caption 😉

Next, we will need a Subbly product unique URL. In order to obtain one, go to your Subbly admin and paste the Checkout Product URL from your product's page.

Of course, you will need to create a product before that. You can do it from here.

We have detailed instructions on how to build products on Subbly here. 

Paste the Checkout URL to an appropriate field on your Weebly button editor. Click on Link, choose the Website URL option, and paste the code provided on Subbly.

And that's it! The checkout will now open in a new tab whenever someone clicks on this button.

How to embed Subbly product checkout to your Weebly page?

In this subsection, we will guide you on how to embed your Subbly checkouts to your Weebly page by adding an Embed Code block to it.

The main benefit of doing this is to keep the entire checkout experience on the same page, without the need for the customer to be redirected to a separate page in order to finish the checkout. If you embed Subbly product checkouts to your Weebly page, they will appear as a pop-up on your (Weebly) site.

So, first, you'll need to choose to add Embed Code and drag and drop that element to a desired position, just like in the picture.

It's time for us to get back to our Subbly product listing page and extract an embed code for the Subbly product we want to embed on our Weebly page.

Go here and click on Action --> Embed from the menu to the right of the desired product.

You will be redirected to the Widget Builder page on Subbly where you will be able to change the looks of your button. After you've finished customizing it, make sure to copy the chunk of widget embed code generated...

...and paste it into the appropriate field on your Weebly page.

Don't forget to save your progress after that and Publish the store!

Congrats! You just embedded Subbly product checkout to your Weebly page. Your product checkout will now appear as a pop-up after someone clicks on the Subscribe button you just embedded.

If there are any questions you might have, feel free to reach out to our customer support chat!

Did you find this resource helpful?
Return to top
Ready to get started
with Subbly?
Try for free