Articles in this category

GOOD STUFF!

How to embed Subbly on Wix

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

Important consideration: When embedding Subbly product checkouts into Wix you will have to handle your customer's subscriptions through your Subbly, and not through your Wix admin. Any subscriptions on your Wix site will not be recorded on your Wix admin.

TL; DR (Video tutorial)

For those of you who prefer to watch through the video footage for getting the ropes of how this should be done, please take a look here:

 

There are basically 2 ways of integrating Subbly into your Wix page to allow you to 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 a 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 evoke 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 pages on our test Wix page. This one is pretty simple and straightforward.

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

https://files.helpdocs.io/h1fi47vfhz/articles/0fa79xfvaz/1639434354990/w-1-t-50.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 on Subbly beforehand. 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 click on the product you want to connect to your Wix.

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

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

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

https://files.helpdocs.io/h1fi47vfhz/articles/0fa79xfvaz/1639434355651/w-3-pe-4.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 the Dev Mode menu and click on the Turn On Developer Tools button (Wix has recently changed the name of the section from Code to Dev Tools, don't get confused with that). 

https://files.helpdocs.io/h1fi47vfhz/articles/0fa79xfvaz/1639434356009/w-4-shi.png

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

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

https://files.helpdocs.io/h1fi47vfhz/articles/0fa79xfvaz/1639434356365/w-5-ph-u.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.

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

https://files.helpdocs.io/h1fi47vfhz/articles/0fa79xfvaz/1639434356747/w-6-s-9-i.png

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

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

https://files.helpdocs.io/h1fi47vfhz/articles/0fa79xfvaz/1639434357079/w-7-kfa.png

This will open a console at 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 the function you will need to change it in the code also.

In order to obtain a 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.

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

https://files.helpdocs.io/h1fi47vfhz/articles/0fa79xfvaz/1639434357733/w-2-bn-8.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, the code block on Wix should look like this in the picture below:

https://files.helpdocs.io/h1fi47vfhz/articles/0fa79xfvaz/1639434357989/w-9-ss-u.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.

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

FAQ

How to embed the Login area to my Wix?

For more on this, please see the instructions here. 

How to connect the 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.




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