To help you integrate Billsby with your Squarespace website, we’ve created a step-by-step video to guide you through the process.
In order to integrate Billsby into your Squarespace website you'll need to be on at least the Squarespace 'Business' plan, as their 'Personal' plan doesn't include Complete Customization with CSS and JavaScript.
The first step to integrating Billsby into your Squarespace website is adding the Billsby header code. In the Billsby control panel, navigate to Settings > Embed codes and copy the header code.
In Squarespace, go to Settings > Advanced > Code Injection and paste the header code that you copied. Hit 'Save' to save the changes.
Adding a subscribe button
Adding a subscribe button will let customers subscribe to the products, plans and cycles that you have setup in your Billsby account.
Open the page that you'd like to add the subscribe button to in editing mode and add a new code block.
In Billsby, copy the subscribe button embed code.
And paste it into the Squarespace code block.
This will create an unstyled subscribe link. To add button styling to the subscribe link, you can use the following subscribe button code instead:
<a class="sqs-block-button-element--large sqs-block-button-element" href="javascript:void(0)" data-billsby-type="checkout">Subscribe</a>
For most Squarespace templates, this will make the subscribe button inherit the same styling as all of the other buttons on your website. And if you change the button styling down the line, it'll automatically update.
You can change the text of the button to whatever you'd like by changing the word "Subscribe" at the end of the subscribe button code that you copied.
You can also center the button by adding a <center> tag at the start of the code. And a closing </center> tag at the end. Like so:
<center><a class="sqs-block-button-element--large sqs-block-button-element" href="javascript:void(0)" data-billsby-type="checkout">Subscribe</a></center>
Click 'Apply' and then in the top left corner click Done > Save.
Adding an account button
You can add an account management button for existing subscribers to manage their account.
The easiest way to do this is to copy the subscribe button code and to add another new code block.
Change the text of the button to something like "Manage my account" and change the button type to "account", like so:
<center><a class="sqs-block-button-element--large sqs-block-button-element" href="javascript:void(0)" data-billsby-type="account">Manage my account</a></center>
Click 'Apply' and then in the top left corner click Done > Save.
Passing product, plan and cycle IDs into the subscribe button
If you'd like to add a button to your Squarespace website that opens the Billsby checkout with a product, plan and cycle already selected, you can pass the IDs into the subscribe button code.
In the Billsby control panel, go to Settings > Embed codes and use the 'Passing product, plan, cycle, add-on allowance IDs into the subscribe button' section to generate the embed code you need.
Once that's done, you just need to copy the generated code and use this instead of the standard subscribe button code.
For example:
<center><a class="sqs-block-button-element--large sqs-block-button-element" href="javascript:void(0)" data-billsby-type="checkout" data-billsby-product="11874" data-billsby-plan="16580" data-billsby-cycle="20022">Subscribe</a></center>
The above code passes a product, plan and cycle ID into the subscribe button. The button is also centered and has the same button styling as the rest of the buttons on your Squarespare website. For the code to work, however, you must use the actual IDs of your own products, plan and cycles.
If you're passing over a plan that is unit based, you'll also need to enter the amount of units you want to include in the plan.