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

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

  1. Create a separate button on your Wix 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 in order to checkout.
  2. Embed Subbly product checkout to your Wix 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 Wix button to the Subbly product checkout?

For the purpose of this tutorial we created some generic product page on our test Wix page. This one is pretty simple and straighforward 👇

First you'll need to create a button on your Wix page and to position it where you want it to appear.

https://cdn.elev.io/file/uploads/8Vo2HLhmi4gwFsxjYS0KP5AHta7k606-siFhC6yB9Uc/LMqAtUn-gEdfkQAXVrJAbmE7JDRpZZ_K2g5brpIyvRQ/w1-T50.png

Now, we will need to obtain a checkout URL for your product, which is unique for every product created on Subbly.

Please note that you'll need to have your products (subscription-based or one-offs) created first on Subbly. If you haven't done this already, please proceed with creating one here.

After you've created your product on Subbly, you will need to go to Products > Subscription on your Subbly admin and to click on the product you want to connect to your Wix.

You will need to copy the Checkout URL from inside product panel on your Subbly.

https://cdn.elev.io/file/uploads/8Vo2HLhmi4gwFsxjYS0KP5AHta7k606-siFhC6yB9Uc/dcX_v_EcHl2pExmHJqxnG-Mro58txwESTshd3M7Xa14/w2-v1w.png

It's time to go back to our Wix page and to link this URL to a button we previously created 🔙

Simply click on the button, click on Link option, choose Web Address on a subsequent menu and paste the checkout URL from Subbly in the appropriate field.

https://cdn.elev.io/file/uploads/8Vo2HLhmi4gwFsxjYS0KP5AHta7k606-siFhC6yB9Uc/WnvrSsromTPzB3MmtQgYiQCPGH-OEriCBWjLLICGVjc/w3-Pe4.png

Save and you'll be good to go now!


How to embed Subbly product checkout to your Wix page?

Embedding a Subbly product checkout to your Wix page is a little bit trickier than embedding Subbly to other web builder platforms. But please don't worry - it's not rocket science at all! 🚀 If you follow this carefully, you'll be good to go in minutes... You got this!

Let's get started!

First of all, you will need to enable developer tools on your Wix page. In order to do this, click on Code menu and click on the Turn On Developer Tools button.

https://cdn.elev.io/file/uploads/8Vo2HLhmi4gwFsxjYS0KP5AHta7k606-siFhC6yB9Uc/T2WPGyqoRt4GheuKit2LLeCwcOXutY8Xq7_VI4W6s2Q/w4-SHI.png

Now we need to add a button and to position it properly on your Wix page, basically the same to what we did before.

Click on Add + menu, go for Buttons, choose proper style of the button and drag it to where you want it to be on your page.

https://cdn.elev.io/file/uploads/8Vo2HLhmi4gwFsxjYS0KP5AHta7k606-siFhC6yB9Uc/V_3YrnPrh8v6LD06S8d5URZauPOAT5Pe2W1H49X5t_o/w5-phU.png

Now, when we added and positioned a button that we want to use to invoke our checkout directly on our Wix page, we will need to code it properly.

Next step will be to invoke Properties Panel on our Wix. We can do that by clicking on Tools > Properties Panel from your navigation bar.

https://cdn.elev.io/file/uploads/8Vo2HLhmi4gwFsxjYS0KP5AHta7k606-siFhC6yB9Uc/phePTY4M8rKdxY9b0V_zkUT1yRuUwbiszWYVttAd7nA/w6-s9I.png

Properties panel should now be visible on our Wix page in the form of a pop-up.

Now we will select previously created button we want coded by simply clicking on the button. When we clicked on it, we want to add onClick event to that button from Properties panel, like in the picture below 👇

https://cdn.elev.io/file/uploads/8Vo2HLhmi4gwFsxjYS0KP5AHta7k606-siFhC6yB9Uc/f03azPnwLyPVgSeeRQsEMQHJNp9eW7kGUbBHXxBglxs/w7-KFA.png

This will open a console in the bottom of the page where you should be able to input your code for this button.

Don't worry now, we got you covered :) You will simply need to copy this chunk of code to the console below:

import wixWindow from 'wix-window'; export function name_of_function(event, $w) { wixWindow.openModal("https://www.subbly.co/checkout/buy/xxx", { "width": 1200, "height": 800, }); }

As you can see, the only 2 variables that you'll need to change inside this code are name_of_function and xxx parameters included in the checkout URL of the product you want embedded.

name_of_function can be found in the Properties panel right beside the added onClick event. It has some default value (like in the picture) but note that you can change this for convenience. If you opt to change the name of function you will need to change it in the code also.

https://cdn.elev.io/file/uploads/8Vo2HLhmi4gwFsxjYS0KP5AHta7k606-siFhC6yB9Uc/tGowPsOC6jX9nj56uY_5E2k8svyC0HywW7QE-H3QpEY/w8-TX0.png

In order to obtain proper checkout URL for your product, you will need to go inside the product panel on your Subbly admin. Go to Products > Subscription or One-Time (depending on which kind of product you are embedding) and click on the actual product to access its settings.

Checkout URL can be found inside product panel and is unique for every product created on Subbly.

https://cdn.elev.io/file/uploads/8Vo2HLhmi4gwFsxjYS0KP5AHta7k606-siFhC6yB9Uc/th2QGhXjNLEIzj4FrOoPH2VyavMzZhyDUtD9qyYZnvg/w2-BN8.png

As you can see, in this particular case, xxx in our code should be replaced with 491 (unique ID of Subbly product).

That should mean that, in our particular case, code block on Wix should look like in the picture below 👇

https://cdn.elev.io/file/uploads/8Vo2HLhmi4gwFsxjYS0KP5AHta7k606-siFhC6yB9Uc/F8ULmertSMcCnpMW15XCz3Jx81fm265P7uz5NSL8M-w/w9-ssU.png

❗ Please note that if you want to embed several product checkouts on your store by using this method, you will need to repeat the process for each product separately.

Aaaaaaand you're done! 🙃 Click Publish and save your progress on your Wix!


FAQ

How to embed Login area to my Wix?

For more on this, please see the instructions here

How to connect Subbly cart with my Wix?

Once again, it's explained here. 😃

How to create Add to Cart buttons for my one-time products?

Please see this article.