8.2 Embed the self service widget
This guide covers the steps necessary to embed the BluSynergy self-service portal inside your own website. In this model your customers login using their BluSynergy userid and password. or they may choose to perform a quick-pay.
If you wish to employ Single Sign On whereby the customer has already logged into your website/application (with a different set of credentials) and you do not want the customer to have to enter their BluSynergy credentials, then please refer to the SSO option instead.
The remainder of this document refers to the non-SSO option.
On the webpage inside your application/website where you wish to show the self-service feature, add a HTML iframe. Note that most Content Management Systems (CMS) like Joomla, Wordpress, etc. allow you to do this easily without any programming expertise. Note that your webpage must be secured by HTTPS using a certificate.
Set the iframe source to the link for your company. Add the 1st part to the <head> section of your webpage, and then add the <iframe> part to the body of your webpage. Note that the yellow highlighted fields have to be replaced with your own settings. It is strongly recommended that you link to the "selfService.js" javascript library (instead of copying its source into your webpage) so that new functionality and updates will be automatically reflected. The "profile" parameter is configured here, and the default value is used if not configured.
<head>
<script type="application/javascript" src="https://yourcompany.blubilling.com/js/selfService.js"></script>
...
</head>
<iframe style="border: none;" width="100%" height="1000" src="https://yourcompany.blubilling.com/widget/" profile="DEFAULT" id="iframeBluBilling" frameborder="0"></iframe>
Once this is done, a CSS stylesheet may be used to make the look-and-feel of the self-service portal match that of your website. This CSS stylesheet can then be uploaded to the BluSynergy servers by contacting customer support or you may host this css file on your own website. Note that Cross Origin Resource Sharing (CORS) restrictions in conjunction with HTTPS may require special configurations.
Notes:
Using a web browser like Chrome is usually the easiest way to adapt the CSS styling interactively. Then simply save of the changed styles:
https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/basics
https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/edit-styles
The sample screens below show the basic functionality related to a customer logging in. Once logged in, the functionality is similar to the the SSO option
Fig 1. The customer self-service iframe embedded inside your company website
The sample screen above also shows the option to pay an invoice without logging in. In this case a payment can be accepted provided the customer knows the invoice number and amount. No history or other details are available if the customer elects for this approach.
Customer Notification Emails
Most of the standard customer notification messages (under the [Settings >> Notifications >> Customer Notifications] menu will need to reflect the URL of your webpage. Please make sure that settings like "Account Login" point to the right URL. This can be done by either using the link editor (place your cursor on the "Account Login" text and then click the 'green globe icon with the chain link') or by using the appropriate system variable such as " #customer.iframeLoginUrl# ". See the "show variables" link to view the list of available variables.
Fig 2. Customer notification email settings for New Invoice
Similarly the "forgot password" notification needs to reference the #forgotPassword.url# as seen below
Fig 3. Customer notification email settings for Forgot Password