Hosted Self Service Pages Without SSO

This guide covers the steps necessary to embed the BluSynergy self-service portal inside your own website. In this model your customers can login using either BluSynergy user-Id 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.

1. 1. 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.
  2. Set the iframe source to the link provided by your customer support agent. This is typically something like this:

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. Note that Cross Origin Resource Sharing (CORS) restrictions in conjunction with HTTPS will prevent this CSS file from being hosted on your website.

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

The sample screens show 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.

Reset password inside the self-service page

When a customer clicks the "forgot password" link, the password reset is sent via email and contains a URL that has your webpage (the one hosting the iframe) plus a "trackingId" querystring parameter . For example:
https://yourcompany.com/billing?trackingId=abcd1235efg125482wertg2154sre851dsf3s8e4

This webpage now needs to retrieve the "trackingId" querystring parameter and set the iframe source to:
https://yourcompany.blubilling.com/widget/resetPassword/abcd1235efg125482wertg2154sre851dsf3s8e4

The following steps explain the details:

Step 1 - Set Forgot password notification Email template.

Go to [Settings >> Notifications >> Customer Notifications].
Select "Forgot Password" from "Notification Type".
From the email body replace following text "https://#organization.domainPrefix#.blubilling-test.com/login/resetPassword/#forgotPassword.tracking#" to #forgotPassword.url# this will take care of generating the reset password URL. if you have configured the Forgot Password URL under the Self Service Settings in next step.

Step 2 - Configure Forgot Password Url in Self-Service Settings.

Go to [Settings >> Customer Care >> Self-service Settings].

Add the full address of the webpage where you are hosting the iframe. For example, if you entered
"https://www.yourcompany.com/billing", then the reset password URL sent in the email will be something like "https://www.yourcompany.com/billing?trackingId=abcd1235efg125482wertg2154sre851dsf3s8e4"

So on your self-service page, you have to handle this "trackingId=X" querystring parameter and change the iframe src url accordingly to "https://yourcompany.blubilling.com/widget/resetPassword/{trackingId}"

This may be done on the server side (by your development team) or you can simply cut and paste the following javascript (see below) to do this automatically on the web browser. The self-service page for reset password would then look like this. Note that the "Manes Winchester" demo site would correspond to your website and display the logo/headers/footers that are defined in the "https://www.yourcompany.com/billing" page in our example.

Adapt this javascript and insert in in the <head> section. This

var profileId = 'DEFAULT'; // CHANGE THIS VALUE to the PROFILE ID configured under [System >> Customer Care >> Self-Service Settings] menu

document.addEventListener( 'DOMContentLoaded', function () {

createIframeUrl()

}, false );

function createIframeUrl(){

var src = document.getElementById('iframeBluBilling').src;

var trackingID = getParameterByName("trackingId");

var urlPostFix = "";

if(trackingID){

if(src.slice(-1) == "/"){

urlPostFix = "widget/resetPassword/"+trackingID

}else{

urlPostFix = "/widget/resetPassword/"+trackingID

}

}else{

if(src.slice(-1) == "/"){

urlPostFix = "widget/login?profileId="+profileId

}else{

urlPostFix = "/widget/login?profileId="+profileId

}

document.getElementById('iframeBluBilling').src = src += urlPostFix;

}

function getParameterByName(name, url) {

if (!url) {

url = window.location.href;

}

name = name.replace(/[\[\]]/g, "\\$&");

var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),

results = regex.exec(url);

if (!results) return null;

if (!results[2]) return '';

return decodeURIComponent(results[2].replace(/\+/g, " "));

}

</script>

And place the iframe tag on the webpage.