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

There are basically 2 ways of integrating Subbly to your Squarespace page to add the ability to take recurring payments:

  1. Create a separate button on your Squarespace 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 Squarespace 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 Squarespace theme and just show you how to create a button on Squarespace and link it to your product created on the Subbly admin.

First of all, you should enter edit mode on Squarespace and choose to add a button to the selected area.

https://cdn.elev.io/file/uploads/8Vo2HLhmi4gwFsxjYS0KP5AHta7k606-siFhC6yB9Uc/RAZijy_Nev5K-jtZFOeLIlG-BwsuEJmrOgaDaGBZdHI/1sq-hl0.png

After that, you can customize caption of the button (caption should preferably be ''subscribe'' or ''buy''), it's size and alignment inside the HTML element.

https://cdn.elev.io/file/uploads/8Vo2HLhmi4gwFsxjYS0KP5AHta7k606-siFhC6yB9Uc/UTiVyf5t4Fc5d_rnXlqrw0kKJaWavmwGOodX4rUdqbQ/2sq-p60.png

Now it's time for us to head back to our Subbly admin and to copy the product checkout URL to the appropriate field on Squarespace.

Of course, in order to do so, you will need to have your product(s) on Subbly created beforehand. Make sure to do it from here.

When you create your product on Subbly, you can enter specific product's panel from Products --> Subscription or One-Time and copy the unique checkout URL for the product into Squarespace's Clickthrough URL field.

https://cdn.elev.io/file/uploads/8Vo2HLhmi4gwFsxjYS0KP5AHta7k606-siFhC6yB9Uc/A2ViAtiMwSU6MbbqoNjHf1A8yBwMbXXa6Eh3_qfn-j8/3sq-f3Q.png


https://cdn.elev.io/file/uploads/8Vo2HLhmi4gwFsxjYS0KP5AHta7k606-siFhC6yB9Uc/mfiRr3Njk-bVJ2Tdh2G3lMC_z5wT2Ub99BrWLBPJctg/4sq-oRs.png

While on Squarespace click Apply and Save your progress.

You're all done here now and your Subscribe button is opening Subbly checkout in the new window!

You can take a look into this video tutorial on how to link a button to the Subbly product checkout here.

How to embed Subbly product checkout to your Squarespace page?

In this subsection, we will guide you on how to embed your Subbly checkouts to your Squarespace page by adding a code block(s) to your Squarespace.

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 checkout URL. If you embed Subbly product checkouts to your Squarespace page, they will appear as a pop-up on your Squarespace site.

First of all, head to your Squarespace page where you'd want to embed Subbly checkout, choose a desired area and opt for adding a Code to it.

https://cdn.elev.io/file/uploads/8Vo2HLhmi4gwFsxjYS0KP5AHta7k606-siFhC6yB9Uc/wbrV7odQwuVOKdbB5nOJTkHBrnA0Q-nFPX3pu9KEXtI/5sq-qpo.png

Now it's time for us to head back to our Subbly products listing page on your Subbly admin (Products-->Subscription or One Time on your admin) and to click on Action-->Embed for the product which checkout we want embedded on our Squarespace.

https://cdn.elev.io/file/uploads/8Vo2HLhmi4gwFsxjYS0KP5AHta7k606-siFhC6yB9Uc/ct_2AL2tZErFwc3cjPIKQdpnWX10Eg9jQR7ZVddTM7w/6sq-Hhs.png

You will be taken to Widget Builder panel where you can customize looks of the embed button that will appear on your Squarespace store.

After you're finished with customizing the way your button will look, make sure to copy the widget embed code in the appropriate field on your Squarespace page.

https://cdn.elev.io/file/uploads/8Vo2HLhmi4gwFsxjYS0KP5AHta7k606-siFhC6yB9Uc/FNw_Sw98KhSYZp92BOcgLCpFnfPi5Y5KccsoKQdrYBo/7sq-jiw.png


https://cdn.elev.io/file/uploads/8Vo2HLhmi4gwFsxjYS0KP5AHta7k606-siFhC6yB9Uc/w3nNmdX-o1pGqSBc9m1DcBMU3ZH-iY0ItlSpfpFpOog/8sq--vI.png


Click on Apply and make sure to Save your progress on your Squarespace admin.

Voila! If you open up your site you will see that you successfully embedded your Subbly product checkout to your Squarespace store. The best part of it - it opens up in the popup directly on site when you click on Subscribe button.

Make sure to check a quick video tutorial on how to embed Subbly product checkouts to your Squarespace store here.

As always, let us know if any questions by shooting an email to [email protected]