The Billsby checkout and account management can be added to your GoDaddy website, allowing your customers to easily sign up to your plans and manage their subscription.
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 code provided.
Then in the GoDaddy website builder, navigate to the page that you'd like to add the Billsby checkout to and add a new section.
Search for HTML and then select Add.
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 Code box of your HTML section. underneath the header code.
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>
GoDaddy places some limitations on third-party HTML code and does not support the use of modal pop-ups. To work around this, you should set the Forced Height of your HTML section to 560 px.
If you're unhappy with the look of your site due to 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.
Finally, if you want the button to be centred on your web page, you can toggle the Centre Align property on.
Don't forget to click the 'Done' button and save or publish any changes 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>