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..

There are basically 2 ways of integrating Subbly to 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 the 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 envoke a checkout in a popup directly on site.

How to link a button to the Subbly product checkout?

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 product description while on Weebly web builder. Drag and drop button element.

https://cdn.elev.io/file/uploads/8Vo2HLhmi4gwFsxjYS0KP5AHta7k606-siFhC6yB9Uc/OrO8ZwTCHd5mwZDAKpPxnYsRIuSDK5faiCZBeyrVGJs/w1-SMg.png

Second step will be customizing your button on Weebly. Change its caption, size, style, and alignment.

https://cdn.elev.io/file/uploads/8Vo2HLhmi4gwFsxjYS0KP5AHta7k606-siFhC6yB9Uc/Zm9lBmY0br53oJQfjHXv1arTcwyug_-MEM3MELPC0Q0/w2-79w.png

For the next step 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.

https://cdn.elev.io/file/uploads/8Vo2HLhmi4gwFsxjYS0KP5AHta7k606-siFhC6yB9Uc/orxbY9_NYLWjqm5Mrk9Hvzy0Lj4_RstPaILDjgVMuT0/w3-HMk.png

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

https://cdn.elev.io/file/uploads/8Vo2HLhmi4gwFsxjYS0KP5AHta7k606-siFhC6yB9Uc/pjZElOmx5d70UIqnvUYQTcd0GJaPkIGPjSUWw-Sq0wY/w4-Exs.png

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

Watch a short video tutorial on how to do this here.

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.

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 to drag and drop that element to a desired position, just like in the picture.

https://cdn.elev.io/file/uploads/8Vo2HLhmi4gwFsxjYS0KP5AHta7k606-siFhC6yB9Uc/v18RCd_-En-di9CvZAlNnNaqzFjczLLkUpyNiHcr5ZY/w5-gtk.png

It's time for us to get back to our Subbly product listing page and to extract an embed code for our 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.

https://cdn.elev.io/file/uploads/8Vo2HLhmi4gwFsxjYS0KP5AHta7k606-siFhC6yB9Uc/W_d2CnXoqi8izO-wu68URoA-q3q-a2332uue8TLaA-k/w6-iBc.png

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...

https://cdn.elev.io/file/uploads/8Vo2HLhmi4gwFsxjYS0KP5AHta7k606-siFhC6yB9Uc/9uDdsAYkhKmuAWAFueY95prW9nFH2tUlCfTQ_udey2c/w7-Wxo.png

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

https://cdn.elev.io/file/uploads/8Vo2HLhmi4gwFsxjYS0KP5AHta7k606-siFhC6yB9Uc/mzLsfQpUI1fM5IUyKKOdotPo8IGnzDPZpltl5ZJQuy8/w8-HDY.png

Don't forget to save your progress after that.

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.

As always, you can see short video tutorial on how to do this here.

If there are any questions you might have, feel free to shoot an email to [email protected] anytime.