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.


<script type="application/javascript" src="https://yourcompany.blubilling.com/js/selfService.js"></script>



<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.

Using a web browser like Chrome is usually the easiest way to adapt the CSS styling interactively. Then simply save of the changed 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