Step 1 - Install the Customer Portal

This installation will generate the Customer Portal directly in your web application.

Step 1

In the pages you want to display the Customer Portal, copy-paste this code in the <head> tag.

<script type="text/javascript" src="https://portal.proabono.com/Get/portal.js"></script>

Step 2

Place a <div> in the page where you want the Customer Portal to be generated.

<div id="proabono_portal">loading...</div>

Its content will be overwritten after loading.

Step 3

Load the Customer Portal with this code and watch the result.
The customer_ref must be inferred from your users’s identifier. The one below is just an example.
This article will tell you more about the opening parameters.

<script type="text/javascript">
  ProAbonoPortal.open({
    business_id: 42,
    segment_ref: "demo-eur",
    customer_ref: "cust-42",
    customer_name: "John Doe", // optional
    customer_lang: "en", // optional
  });
</script>

Parameters	Descriptions
business_id	This is the identifier of your ProAbono environment.
segment_ref	The Segment is where your Customer is stored. When your business grows larger, you may need an extra segment. For now, just use the one in the sample above.
customer_ref	Unique reference for that Customer Recommanded: use your internal id + a prefix (like cust-42) That way, no need to store an extra field in your database and you can deduce the ReferenceCustomer from your existing data.
customer_name	Your internal customer name Never displayed to the customer.
customer_lang	(optional) the Customer language

Step 4 (optional for testing)

Before switching to production, you have to secure the hosted pages to prevent identity theft.
To do that, you have to generate a security hash for the logged user, then add it to the window.ProAbono.start(...) call.

<script type="text/javascript">
  ProAbonoPortal.open({
    ...
    hash: "29d8bf6e5edadfgfd2dccac0d60bd3377a2331e314e752d6bf0731e7c3c22b"
  });
</script>

How to generate the security hash
The security hash for a customer is generated using HMAC-256 with a secret key and the customer’s reference.
Get the code to generate the hash by selecting the server-side language you are using.