The Account management modal is embedded in exactly the same way as the checkout modal.
If you've already added the checkout to your website, half the work is done already as the relevant code snippet will already be added into the header code. All you need to do then is add the Account management snippet wherever you'd like the button to appear in your website, and this should appear as soon as this is saved. To find the code snippet you need for this, navigate to Settings > Embed codes > Self service and use the second code snippet provided.
For most website builders, you'll be able to add this third-party HTML code. If you're looking for something simple like a hyperlink, you can create a HTML code box on your given website and add these two codes within the box on separate lines:
<script src="https://checkoutlib.billsby.com/checkout.min.js" data-billsby-company="YourCompanyDomainHere"></script>
<a href="javascript:void(0)" data-billsby-type="account">Manage account</a>
A hyperlink, however, can be a little lacklustre, and in most cases you'll actually want a sleek button in its place. And we have you covered! Simply head to our button generator and create a button how you'd like it look, and then hit generate. Here's an example button:
Once you've got the codes, you'll see three separate boxes. You'll only need these 2:
Once you have those two codes you'll put them all the box like in the box below. Once you've saved your changes on your website, and refreshed the page your button will now be live!
<script src="https://checkoutlib.billsby.com/checkout.min.js" data-billsby-company="YourCompanyDomainHere"></script>
<a href="javascript:void:(0)" class="billsbybutton-wpio" data-billsby-type="account"><strong>Your account</strong><br /></a>
<style type="text/css" media="screen">
.billsbybutton-wpio {
display: inline-block;
text-align: center;
border-width: 1px;
border-style: solid;
text-transform: uppercase;
text-decoration: none;
line-height: 1.1;
font-weight: normal;
font-family: sans-serif;
color: #ffffff;
font-size: 12px;
background-color: #060606;
background-image: -webkit-linear-gradient(top, #090909 0%, #171717 48%, #060606 49%, #060606 82%, #151515 100%);
background-image: -moz-linear-gradient(top, #090909 0%, #171717 48%, #060606 49%, #060606 82%, #151515 100%);
background-image: -o-linear-gradient(top, #090909 0%, #171717 48%, #060606 49%, #060606 82%, #151515 100%);
background-image: linear-gradient(top, #090909 0%, #171717 48%, #060606 49%, #060606 82%, #151515 100%);
border-color: hsl(0, 0%, 2%);
-webkit-box-shadow: inset 0 0 1px 1px #222222, 0 0 1px 3px rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 0 1px 1px #222222, 0 0 1px 3px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 0 1px 1px #222222, 0 0 1px 3px rgba(0, 0, 0, 0.15);
-webkit-text-shadow: 1px 1px 1px #000000;
-moz-text-shadow: 1px 1px 1px #000000;
-o-text-shadow: 1px 1px 1px #000000;
text-shadow: 1px 1px 1px #000000;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
padding: 7.199999999999999px 18px 7.199999999999999px 18px;
}
.billsbybutton-wpio strong {
letter-spacing: 1px;
font-size: 22px;
}
.billsbybutton-wpio:hover {
color: #ffffff;
background-color: #0e0e0e;
background-image: -webkit-linear-gradient(top, #101010 0%, #171717 48%, #0e0e0e 49%, #0e0e0e 82%, #1d1d1d 100%);
background-image: -moz-linear-gradient(top, #101010 0%, #171717 48%, #0e0e0e 49%, #0e0e0e 82%, #1d1d1d 100%);
background-image: -o-linear-gradient(top, #101010 0%, #171717 48%, #0e0e0e 49%, #0e0e0e 82%, #1d1d1d 100%);
background-image: linear-gradient(top, #101010 0%, #171717 48%, #0e0e0e 49%, #0e0e0e 82%, #1d1d1d 100%);
border-color: #060606;
-webkit-box-shadow: inset 0 0 1px 1px #2a2a2a, 0 0 1px 3px rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 0 1px 1px #2a2a2a, 0 0 1px 3px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 0 1px 1px #2a2a2a, 0 0 1px 3px rgba(0, 0, 0, 0.15);
-webkit-text-shadow: 1px 1px 1px #000000;
-moz-text-shadow: 1px 1px 1px #000000;
-o-text-shadow: 1px 1px 1px #000000;
text-shadow: 1px 1px 1px #000000;
}
.billsbybutton-wpio:active {
padding: 8.2px 18px 6.199999999999999px 18px;
color: #ffffff;
background-color: #000000;
background-image: -webkit-linear-gradient(top, #000000 0%, #060606 100%);
background-image: -moz-linear-gradient(top, #000000 0%, #060606 100%);
background-image: -o-linear-gradient(top, #000000 0%, #060606 100%);
background-image: linear-gradient(top, #000000 0%, #060606 100%);
}
</style>
When your customer click the button, they'll be asked to input the email address that they signed up with. They'll be sent an email with the passcode they'll need to access their account (if they have multiple subscriptions tied to that email they'll receive multiple pass codes). Once they've done this, they'll have access to all the features you have switched on in your chosen configuration.
If you need any help adding this code to your website, get in touch with the team using the chat widget provided and they'll be able to guide you. We're always happy to help!