Getting Started
The plug-in customer portal can be utilized via single-sign-on or stand-alone. Please note that the examples below omit required Javascript libraries and CSS files brevity. A full example is available here.
Single-Sign-On Example
In single-sign-on mode, the user is logged-in via external means and a single-sign-on token obtained via the Accumulus API is utilized to provide access to the end-user information.
<body> <div class="acc-portal" token="…obtained via API…" /><br/> </body>
Obtaining an Access Token
The plug-in portal utilizes a customer access token obtained via the API. The Accumulus API for obtaining the token is described here. When obtaining a token for the plug-in customer portal, make sure you specify the “ajax” parameter and set it to “true” when requesting the token. Refer to the respective SDK documentation, if using and SDK instead of the REST based interface.
Accumulus Login Example
The plug-in customer portal will require the user to log in with credentials stored in Accumulus when configured as shown below.
<body> <div class="acc-portal" headerText="Customer Portal" tenantID="TestInc" loginScreen="true" /> </body>
Configuration
The plug-in customer portal can be configured to show only some of its components.
Turn On/Off Components
Each component inside of the plug-in customer portal can be shown or hidden individually. The following example shows how to remove the profile and usage related components from the portal.
<div class="acc-portal" token="…obtained via API…" headerText="Customer Portal" showBalance="true" showProfile="false" showStatementHistory="true" showPaymentMethods="true" showSubscriptionList="true" showUsageBalances="false" showUsageHistory="false" showMakePayment="false"/>
Default Portal Message
The portal component shows a default empty content area when first instantiated. This are can be customized to show a message instead. The following example shows how to display the contents of an html file in the default content area.
<div class="acc-portal" headerText="Customer Portal" token="…obtained via API…" emptyWidgetAreaUrl="https://myServer/myMessage.html"/>
Custom Logo
The header of the portal component can be configured to show a company logo. The following example shows how to display a company logo to the left of the header text.
<div class="acc-portal" headerText="Customer Portal" token="…obtained via API…" companyLogoUrl="https://myServer/myLogo.png"/>
Component Specific Configuration
Usage Balances
For the usage balances component, a customer value transformation handler can be configured in order to alter the quantity data shown. The example below alters the quantity of the custom usage of type “SUPPORT_TIME” to append the word “hours”.
<head>
<script type="text/javascript">
function formatQuantityHandler(type,value){
if( type == 'SUPPORT_TIME' && value != 0 ){
value += ' hours';
}
return value;
}
</head>
<body>
<div class="acc-portal" headerText="Customer Portal" token="…obtained via API…"
usageBalances_formatQuantityHandler="formatQuantityHandler"/>
</body>
Usage History Filter
For the usage history component, several configuration parameters exist to control what usage records are shown and how many are shown on one page. The take parameter indicates how many usage records to show on a single page and the fromDateTime parameter indicates from which date to show the usage data (from that day going back in time).
<body> <div class="acc-portal" headerText="Customer Portal" token="…obtained via API…" usageHistory_take="5" usageHistory_fromDateTime="12/12/2013"/> </body>
Using Individual Components
Besides using the plug-in portal entirely, it is also possible to use each component individually when using a single-sign-on token. The following examples demonstrate how to include individual components within an HTML page and optional configuration parameters.
Balance
<div class="acc-balance" " token="…obtained via API…" onServerError="errorHandler" showHeader="true"></div>
Profile
The profile_onCustomerEdit and profile_onPasswordChange options allow specifying a handler to be called when the customer information has been edited or the password has been changed.
<div class="acc-profile" token="…obtained via API…" onServerError="errorHandler" showHeader="true" profile_onCustomerEdit="customerEditHandler" profile_onPasswordChange="passwordChangeHandler" \></div>
Payment Method List
The options paymentMethods_showCreditCards, paymentMethods_showBankAccounts, and paymentMethods_showBillingAgreements are either true or false to specify which sections to show. Only showCreditCards is true by default.
<div class=" acc-payment-methods" token="…obtained via API…" onServerError="errorHandler" showHeader="true" paymentMethods_showCCAddressFields="true" paymentMethods_showCreditCards="true" paymentMethods_showBankAccounts="true" paymentMethods_showBillingAgreements="true" paymentMethods_confirmUrl="conformation URL" paymentMethods_cancelUrl="cancellation URL" \></div>
Statement History
<div class=" acc-statement-history" token="…obtained via API…" onServerError="errorHandler" showHeader="true"></div>
Subscription List
The subscriptionList_cancelSubscription option should be set to true or false to specify if subscription cancellation is allowed via the component.
<div class="acc-subscription-list" token="…obtained via API…" onServerError="errorHandler" showHeader="true" subscriptionList_cancelSubscription="false"></div>
Usage Balances
<div class=" acc-usage-balances" token="…obtained via API…" onServerError="errorHandler" showHeader="true" usageBalances_formatQuantityHandler="formatQuantityHandler"</div>
Usage History
<div class=" acc-usage-history" token="…obtained via API…" onServerError="errorHandler" usageHistory_take="10" usageHistory_fromDateTime="10-29-2014" ></div>
Make Payment
<div class=" acc-make-payment" token="…obtained via API…" ></div>