Hosted Self-Service Pages
The Hosted Self-Service Pages allow you to embed the "My Account" functionality from BluBilling into your own website. This allows your customer to perform self-service activities such as view their account balances and status, current and past invoices, make payments, etc. All of these self-service screens are already built into BluBilling, and may be quickly deployed within a framed page on your own website so that you maintain brand presence with your customer by keeping her on your own website.
There are two approaches for deploying the BluSynergy Self-Service Portal inside your website:
Single Sign On (SSO) Option - In this model, your customers have already logged on to your application/website using a set of credentials that is managed outside BluSynergy. Your application/website handles the authentication of the customer, and makes an API call to indicate the particular customer for whom the self-service portal is to be shown.
BluSynergy Login Option - in this model your customers login using their BluSynergy userid and password. This greatly simplifies the integration, and no API calls are required. Simply create a iframe on your webpage and set the iframe source to https://yourcompany.blubilling.com/widget/login.
The remainder of this document refers to the SSO option.
Step 1 - Initiate the Self-Service Page Request
In order to initiate the request, the following HTTP GET request must be initiated:
GET /rest/widget/start?params...
GET /rest/widget/start?format=xml¶ms...
The following query string parameters may be passed in the URL to control behavior. Note that you must first make a choice between either
Providing your own navigation structure (outside the framed content) for pages within the framed content OR
Using the default navigation elements provided inside the framed content.
Query String Parameters
The response is dependent on whether xml format was requested or not.
Sample request (non-XML): Note that you must supply the username and password (using basic authentication over HTTPS) in the request. The user must have the ROLE_API security role.
GET https://acme.BluBilling-test.com/rest/widget/start?cssURL=/css/widget.css&customerId=101&loginUrl=https://myapp.com/mylogin
(actual request after escaping will be of this form:)
GET https://acme.BluBilling-test.com/rest/widget/start?cssURL=%2Fcss%2Fwidget.css&customerId=101...
we get a response similar to this (with content type "text/text"):
https://acme.BluBilling-test.com/widget/customerHome/f76b5c8e68ae4c2da69bed68845f1bc6
Note: The link is valid for 30 minutes after which it expires.
Step 2 - Host a Page with an IFrame
Having got the response the hosting website can then create a web page with an iframe. The source for the iframe must be set to the url returned from Step 1 above.
<html>
Conent for hosting website such as banner, menu, headers, etc goes here....
<br><br>
<iframe frameborder="0" height="800" width="700" src="http://acme.BluBilling.com/widget/customerHome/f76b5c8e68ae4c2da69bed68845f1bc6"/>
<br><br>
Footer and other content from hosting website goes here...
</html>
This causes the browser to display the webpage with the iframe content. The picture below shows the sample login.
If you set ShowNavigationBar=true in the request then BluBilling will display the navigation bar
On the other hand, if you are set showNavigationBar=false and showStatements =true&showPayments=true in the querystring, then BluBilling won't show the navigation bar and you can control the "My Statements" and "My Payment" menus from outside the iFrame.
Some additional screen shots of the pages within the iframe are shown below.
Invoice Details:
Pay Now:
Invoices:
Payments:
Add a Payment Method:
