The Billsby checkout and account management can be added to your WordPress website, allowing your customers to sign up to your plans and manage their subscription.
WordPress places some limitations on custom code, preventing the use of embed or iframe popup modals on sites without a plugin-enabled plan. You can learn more about WordPress limitations on their support site.
If you're unhappy with these limitations, we have a solution called Billsby Pages - it's completely free and allows you to create a subscription landing page that you can link to from your main website to handle all of your subscription and account management options.
The step-by-step video guide below uses our handy button generator to create a subscribe button for your website that opens the Billsby checkout modal when clicked.
Creating a Subscribe Button
In your Billsby account, navigate to the Settings > Embed code menu and copy the header code provided.
Then in your WordPress page editor, add a Custom HTML block to where you want the subscribe button to be. If you're using the Elementor page builder plugin, this will be a HTML element.
Next, paste the header code into the Custom Code box of the HTML section.
You can then copy and paste the subscribe button code provided in your Billsby account on a new line to create a simple unstyled subscribe link. However, if you're wanting to create a styled button, you'll need to add your own CSS or use our button generator.
To use the button generator, click here and use the provided tools to customize the text and look of your button.
Once you're happy with it, click Get code. Then, copy all of the code from the button generator and paste it on a new line in the Custom HTML block/element.
Your code should look something like this:
<head> <script src="https://checkoutlib.billsby.com/checkout.min.js" data-billsby-company="candybypost"></script> </head>
<body> <a href="javascript:void:(0)" class="shiny-button" data-billsby-type="checkout"><strong>Subscribe</strong></a>
<style>
.shiny-button {
display: inline-block;
margin-bottom: 3px;
margin-top: 3px;
margin-left: 3px;
margin-right: 3px;
text-align: center;
border-width: 1px;
border-style: solid;
text-decoration: none !important;
line-height: 1.1;
font-weight: normal;
font-family: sans-serif;
color: #FFFFFF !important;
font-size: 12px;
background-color: #D100D1;
background-image: -webkit-linear-gradient(top, #d600d6 0%, #e119e1 48%, #D100D1 49%, #D100D1 82%, #ed00ed 100%);
background-image: -moz-linear-gradient(top, #d600d6 0%, #e119e1 48%, #D100D1 49%, #D100D1 82%, #ed00ed 100%);
background-image: -o-linear-gradient(top, #d600d6 0%, #e119e1 48%, #D100D1 49%, #D100D1 82%, #ed00ed 100%);
background-image: linear-gradient(top, #d600d6 0%, #e119e1 48%, #D100D1 49%, #D100D1 82%, #ed00ed 100%);
border-color: hsl(300, 40%, 41%);
-webkit-box-shadow: inset 0 0 1px 1px #ff1eff, 0 0 1px 3px rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 0 1px 1px #ff1eff, 0 0 1px 3px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 0 1px 1px #ff1eff, 0 0 1px 3px rgba(0, 0, 0, 0.15);
-webkit-text-shadow: 1px 1px 1px #6b006b;
-moz-text-shadow: 1px 1px 1px #6b006b;
-o-text-shadow: 1px 1px 1px #6b006b;
text-shadow: 1px 1px 1px #6b006b;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 12px 30px 12px 30px;
}
.shiny-button strong {
letter-spacing: 1px;
font-size: 22px;
}
.shiny-button:hover {
color: #FFFFFF !important;
background-color: #e000e0;
background-image: -webkit-linear-gradient(top, #e500e5 0%, #e622e6 48%, #e000e0 49%, #e000e0 82%, #fc00fc 100%);
background-image: -moz-linear-gradient(top, #e500e5 0%, #e622e6 48%, #e000e0 49%, #e000e0 82%, #fc00fc 100%);
background-image: -o-linear-gradient(top, #e500e5 0%, #e622e6 48%, #e000e0 49%, #e000e0 82%, #fc00fc 100%);
background-image: linear-gradient(top, #e500e5 0%, #e622e6 48%, #e000e0 49%, #e000e0 82%, #fc00fc 100%);
border-color: hsl(300, 41%, 44%);
-webkit-box-shadow: inset 0 0 1px 1px #ff28ff, 0 0 1px 3px rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 0 1px 1px #ff28ff, 0 0 1px 3px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 0 1px 1px #ff28ff, 0 0 1px 3px rgba(0, 0, 0, 0.15);
-webkit-text-shadow: 1px 1px 1px #7a007a;
-moz-text-shadow: 1px 1px 1px #7a007a;
-o-text-shadow: 1px 1px 1px #7a007a;
text-shadow: 1px 1px 1px #7a007a;
}
.shiny-button:active {
color: #FFFFFF !important;
background-color: #c200c2;
background-image: -webkit-linear-gradient(top, #b800b8 0%, #D100D1 100%);
background-image: -moz-linear-gradient(top, #b800b8 0%, #D100D1 100%);
background-image: -o-linear-gradient(top, #b800b8 0%, #D100D1 100%);
background-image: linear-gradient(top, #b800b8 0%, #D100D1 100%);
padding: 13px 30px 11px 30px;
}
</style> </body>
Finally, save/update any changes and publish them to your website.
Creating an Account Management Button
To create an account management button, simply copy your subscribe button and then all you need to do is replace the second line of code with the following.
<a href="javascript:void:(0)" class="shiny-button" data-billsby-type="account"><strong>Manage my subscription</strong></a>