Newzware E-Pass Customization

NOTE - This page is for developers with knowledge of Javascript, HTML and CSS.

The login, registration and purchase panels can be customized by setting the necessary javascript override variables in the configuration javascript file (config.js). Setting the below variables to anything other than blank, will override the system default HTML and load the contents of that variable into the corresponding panel. All Newzware E-Pass fields must still be present in the customized HTML. The configuration javascript file contains three javascript global variables:

var nwCustomRegistrationPanel="";
var nwCustomPurchasePanel="";
var nwCustomLoginTable="";

These variables can be set using the SSM Admin Console. Once in the SSM Admin Console, under the Circulation accordion , click the E-Pass button.

In the E-Pass page, there are three convenience buttons that can be used for getting the values of the three variables above. You can also scroll or use the search feature to find those variables in the configuration file and copy the values from those variables to work on your local PC or Mac.

Get Login Panel
Get Registration Panel
Get Purchase Panel

The Administrator can select all the contents of the textarea box and customize the default HTML as desired, leaving the necessary E-Pass fields in the resulting document. When customization is finished, the customized HTML can be assigned to the corresponding javascript variable(described above).
NOTE: This method of setting the HTML must adhere to the javascript syntax. Line breaks, etc, without the correct Javascript syntax will result in an error. The HTML can then be placed inside the correct Javascript variable above and the Site Configuration file can be saved.

Default Login Panel

The login panel is where users sign in to read the story protected by the E-Pass and is the first initial screen the user sees.

Javascript functions used in the default Login Panel:

Function	Description
newzware_forgotPassword()	Forwards the user into the Forgot Password SSM page.
newzware_doLogin()	Calls the authentication module using the login table's nwloginid and nwpassword input fields.

Registration Panel

The registration panel is a bit more complicated because of the onlick events of the radio buttons associated with showing the subscriber and non-subscriber registration forms.

Javascript functions used in the default Registration Panel:

Function	Description
newzware_showRegistrationChoice()	When the user clicks the radio button, the correct panel is shown for subscribers or non-subscribers.
newzware_cancelRegistration()	Returns the user to the Login screen.
newzware_createOnlineAccount()	Calls to the Newzware API to create the subscriber online account using the nwsub* fields in the registration form.
newzware_createGeneralAccount()	Calls to the Newzware API to create the non-subscriber(general) online account using the nwnonsub* fields in the registration form.

Purchase Panel

The default purchase panel is a jquery accordion that presents the options chosen to be shown. Each option contains a javascript function that will perform the appropriate action. The list below contains the option and the corresponding javascript function that should go with it:

Subscription Option	Javascript E-Pass Function

Term Subscription	newzware_purchaseTermSubscription()
Day Pass	newzware_purchaseDayPass()
E-Copy	newzware_purchaseECopy()

Each of the above options require the user to already be registered and logged in. But any HTML can be placed in the nwPurchasePanel variable with any of the correct javascript functions above. The default HTML for the purchase panel can be used to customize the panel. An Administrator can copy and edit the Purchase Panel using the SSM Admin Console. The default Purchase Panel options are broken into three accordion segments: nwTermOption, nwECopyOption and nwDayPassOption. Each segment can be edited accordingly while keeping the accordion intact.

Controlling the Logout

The variables discussed in this section can be edited in the E-Pass conguration file as described above. Setting the nwShowLogout variable to Y will trigger the logout mechanisms that come packaged within the E-Pass. There are two ways that the E-Pass module will provide mechanisms to the users for logging out.

1) Floating a button at the top left of the page. This is done by setting the nwFloatLogout variable to Y. A button will appear for the user to click and it will log the user out by deleting the cookies for the session (Requires the nwDeleteAllOnLogout to be Y ). The variables: nwLogoutDivHTML and nwLogoutDivStyle are used to generate the HTML (button). The nwLogoutDivHTML must contain the E-Pass javascript function newzware_doLogout() as a link or button.
2) Placing a link inside a defined element on the page that contains the newzware_doLogout() function. The variable nwLogoutID contains the id of the element that will receive the link. The HTML link is then placed inside this element and the user can use it to log out.

With method 2 above, the site can substitute a login link with a logout link and vice versa using callbacks (defined below).

Uploading Images/CSS

If other files are necessary for your customization, they should be uploaded using the SSM Admin Console and referenced in your E-Pass scripts included on the protected pages. For example, an uploaded stylesheet through the Custom File button of the SSM Admin Console called mystyle.css would be referenced with the Newzware E-Pass scripts as:

<link type="text/css" href="https://<newzware server>/ss70v2/<site name>/custom/mystyle.css" rel="stylesheet" />

Additional Workflow Option

The Newzware E-Pass module comes with a default workflow, where a user will see the Login screen, then register, then choose the subscription. An alternate workflow is available where the user can see the subscription options first, choose an option, then register and upon successful registration, complete the subscription process. This workflow uses the customization methods described above, along with a set of independent javascript functions that store the offer selected and automatically shift the user to the SSM to complete the purchase. In this optional workflow, the Login Panel is still shown first, but a user can select to see the subscription offers or register using a customized version of the Login Panel. An example of the HTML is below:

var nwCustomLoginTable="<div id='sjmetered-container'> <aside class='sjmetered-leftcol'> <div class='sjmetered-logo'><img src='https://ssm.hgbc.com/e-pass/salina70/images/SAJ-logo.jpg' alt='Salina Journal'></div> <div class='sjmetered-bundle-pic'><img src='https://ssm.hgbc.com/e-pass/salina70/images/bundle-img-75.png' alt='99¢ Trial Offer' width='236' height='215'></div> </aside> <section class='sjmetered-stopscreen'> <h1>Try the Salina Journal day pass for <span>just 75¢</span></h1> <p>You have reached your limit of 10 free articles a month.</p> <p>Get instant access to the site for as little as $9.99 a month!</p> <a href='javascript:newzware_hideLoginShowPurchase()'><img src='https://ssm.hgbc.com/e-pass/salina70/images/see-options-btn.png'> </a></section> <section class='sjmetered-loginform cf'> <p><span>Already a subscriber?</span> Please Log in:</p> <ul> <li><input type='email' name='nwloginid' id='nwloginid' placeholder='name@email.com' required></li> <li><input type='password' id='nwpassword' name='nwpassword' placeholder='password' required></li> <li><input type='submit' onclick='newzware_doLogin()' value='GO'></li> </ul> </form> <p class='sjmetered-clear'></p> <p>Need a user name and password? Click <a href='javascript:newzware_hideLoginShowRegistration();'>here</a> to register.</p> </section> <p class='sjmetered-clear'></p> <div style='display: none'><input type='checkbox' name='nwpublic' id='nwpublic' value='N'></div></div>";

The above uses an uploaded style sheet containing the styles for the elements in the nwCustomLoginTable variable. The javascript E-Pass function: newzware_hideLoginShowPurchase() hides the Login Panel and shows the Purchase Panel, which has been customized to look like the below:

The nwCustomPurchasePanel variable in the above looks like the below:

var nwCustomPurchasePanel="<div id='sjmetered-container'> <header> <div id='sjmetered-logo'><img src='https://ssm.hgbc.com/e-pass/salina70/images/SAJ-logo.jpg' width='467' height='71' alt='Salina Journal'></div> <h1>Choose the Access Option That's Right for You</h1> </header> <section class='sjmetered-col1'> <h2>Print + Digital Subscription</h2> <article> <p>All the benefits of the digital subscription, PLUS:</p> <ul> <li>The print newspaper delivered to your home 7 days a week</li> <li>Special print inserts</li> <li>Salina.com on your computer, phone and tablet</li> <li>Our digital edition newspaper replica</li> <li>as low as <span>$13.00</span> a month</li> </ul> <div class='sjmetered-buttons'> <div class='sjmetered-clickcall'>Click to call<br><a href='tel:+18008276363'>800-827-6363</a></div> <a href='javascript:newzware_offerClicked(7669)'><img src='https://ssm.hgbc.com/e-pass/salina70/images/subscribe.png' width='116' height='24'></a> <p class='sjmetered-clear'></p> </div> </article> <p class='sjmetered-clear'></p> </section> <section class='sjmetered-col2'> <div class='sjmetered-weekend'><img src='https://ssm.hgbc.com/e-pass/salina70/images/weekend-digital.jpg' width='258' height='225'></div> <h2>Weekend Only + Digital Subscription</h2> <p>All the benefits of the digital subscription, PLUS:</p> <ul> <li>Saturday and Sunday newspaper with inserts</li> <li>Salina.com on your computer, phone and tablet</li> <li>Our digital edition newspaper replica</li> <li><span>$9.99</span> a month</li> </ul> <div class='sjmetered-buttons'> <div class='sjmetered-clickcall'>Click to call<br> <a href='tel:+18008276363'>800-827-6363</a></div> <a href='javascript:newzware_offerClicked(5064)'><img src='https://ssm.hgbc.com/e-pass/salina70/images/subscribe.png' width='116' height='24'></a> <p class='sjmetered-clear'></p> </div> </article> <p class='sjmetered-clear'></p> </section> <section class='sjmetered-col3'> <h2>Digital-Only Access Subscription</h2> <p><div class='sjmetered-mobile-img'><img src='https://ssm.hgbc.com/e-pass/salina70/images/mobile.png' width='45' height='80'></div>Get the news and community information that matters most to you 24/7, no matter where you are. With the digital subscription you get full access to:</p> <ul> <li>Salina.com on your computer, phone and tablet</li> <li>Our digital edition newspaper replica</li> <li><span>$9.99</span> a month</li> </ul> <div class='sjmetered-buttons'> <div class='sjmetered-clickcall'>Click to call<br> <a href='tel:+18008276363'>800-827-6363</a></div> <a href='javascript:newzware_offerClicked(7666)'><img src='https://ssm.hgbc.com/e-pass/salina70/images/subscribe.png' width='116' height='24'></a> <p class='sjmetered-clear'></p> </div> </article> <p class='sjmetered-clear'></p> </section> <section class='sjmetered-col4'> <h2>Day Pass</h2> <article> <p><div class='sjmetered-daypass-img'><img src='https://ssm.hgbc.com/e-pass/salina70/images/24hr.png' width='76' height='67'></div>Need short-term access? Purchase a day pass and view as many articles as you wish for 24 hours.</p> <ul> <li><span>75¢</span> per day</li> </ul> <div class='sjmetered-buttons'> <a href='javascript:newzware_offerClicked(7668)'><img src='https://ssm.hgbc.com/e-pass/salina70/images/day-pass-button.png' width='116' height='27'></a> <p class='sjmetered-clear'></p> </div> </article> <section class='sjmetered-loginform cf'> <p><span>Already a subscriber?</span> <br> <a href='javascript:newzware_showLogin()'>Click here to login</a> <p class='sjmetered-clear'></p> <p>Need a user name and password? Click <a href='javascript:newzware_hidePurchase(); newzware_showRegistrationPanel()'>here</a> to register.</p> </section> </section> <p class='sjmetered-clear'></p> </div>";

The user then registers and is automatically forwarded to the subscription start page within the SSM.

In order for the above workflow to work, the commented section for the alternate workflow must be uncommented in the config file and the following configuration changes must be made.

var nwAfterRegistrationCallback="newzware_afterRegistration()";
var nwCustomPurchasePanel=Your HTML Code HERE with newzware_offerClicked(rate id) defined for each offer.

Uncomment the section of code in the configuration file containing the following functions:

function newzware_offerClicked(val){
......
}
function newzware_afterRegistration(){
......
}
function newzware_getWebLogin(l,p){
......
}

No Cookies/No Javascript Pages

There are two pages that should be customized for those users that wish to not have Javascript enabled or allow cookies to be set. These users will be forwarded to one of the two pages listed below:

No Javascript Page
Cookies Disabled Page

These can be found in the drop down list of configuration files under the Site Configuration File and can be made to appear in the format of the existing website.

Publishing

All changes are done to the test site. The included scripts should always reference the production site. Test sites include the _test (Same as the SSM). To publish the changes to any of the files in the drop down list, select the file and have it load into the text area. Then click the Publish button. The file will be published to the production site and made immediately available.

Available Callback Methods

All callbacks are set to one of the javascript variables below that are defined in the E-Pass configuration file. These variables can be set after the loading of the configuration file in the page or set directly in the configuration file.

Javascript Variable	Description

nwContentCallback	If defined, this will be called when the content is going to be displayed. It overrides the default method for showing content. This is called before the nwAfterLogin.
nwAfterLogin	If defined, this will be called after a user successfully logs in. This is NOT predicated on whether or not a user is authorized.
nwAfterLogout	If defined, this is invoked in the e-pass logout function and only called if the nwShowLogout is Y and nwFloatLogout is N. See the Controlling the Logout section above.
nwLoggedInAndAuthorizedCallback	If defined, this is invoked when all the metered views are used up, or registration is forced. It is performed with the showing of the content for users that have already been authorized and have the authorized cookie set. For example: If a user logs in while on page A, then navigates to Page B, the content is automatically shown on Page B, and if this variable is defined, the callback will be executed when showing the content for Page B.
nwAfterRegistrationCallback	After a user registers, the default is to show the user a panel that states an email has been issued confirming registration and the user can click a Continue button to proceed to the purchase options panel. This behavior can be modified to perform another function as defined by the nwAfterRegistrationCallback. At this time, the login id and password entered for the registration are now in the login id and password fields of the login panel, so they can be accessed with: document.getElementById("nwloginid").value and document.getElementById("nwpassword").value;

JQuery UI Customization

The JQuery UI theme can be customized further by loading the CSS manually after the site.js javascript include. See below:

All available JQuery UI Theme classes can be overwritten in this manner. To use this method to load the JQuery UI Theme, the configuration property: nwLoadThemeSeparate should be set to N in the configuration file. The above would place an eight pixel border around the JQuery Dialog popup.

An Administrator can also style the JQuery Dialog popup using an existing class and defining that class in the configuration variable: nwJQueryDialogClass
The class defined will be given to the JQuery Dialog popup when initialized. The source CSS file containing the class or the style declaration of the class MUST BE PLACED AFTER the E-Pass Newzware insert. The Administrator can also load the theme manually like the above and place the style or style include directly after the JQuery Theme link.

Developer API

Method	Description
newzware_epassInit()	Initializes and builds all the panels and forms. This also sets the current page URL for returning the user back to the page. This method will also pop up the login dialog if the nwInitLogin is set to true. The newzware_epassInit() method also controls the metering if enabled. This method must be called before calling any other methods.
newzware_authorization(login,password,hash,useSingleSignOn)	The newzware_authorization() method is used internally by the program to validate a user. This method should not be called by third parties. It is described here for INFORMATIONAL PURPOSES ONLY. This method will call the nwAfterLogin callback after a user's login and password have been validated. If the user has a valid subscription, the content will be displayed. If the user has a valid login and password, but does not have a valid subscription, the purchase panel will be shown. If metering is enabled and the configuration is forcing user registration, the meter is checked during this method and will show content based on the views returns from the Newzware database and the configured threshold in the configuration file. If single sign on is enabled, the tracker is set in this method upon successful authentication. If the nwAfterLogin is not set, and the nwShowLogout variable is set to Y, the E-Pass module will do one of two things: If nwFloatLogout is N, it will place inner HTML into the nwLogoutID that contains a link to log out. If nwFloatLogout is Y, it will create a div element with the id of 'nwlogoutdiv' and assign the nwLogoutDivHTML to it's innerHTML property, along with setting the CSS from the nwLogoutDivStyle variable. This is all done in the newzware_showLogout() method. This is the default behavior but can be overridden by setting the nwAfterLogin variable, which will disable the calling of the newzware_showLogout() method.
newzware_isAuthorized()	This method checks the authorized cookie and will return true or false. True if the user has been authorized to view content. False otherwise.
newzware_start(boolean)	This method is called from the newzware_epassInit() method and checks the authorized cookie. If the authorized cookie is set, it will display the content. If it is not set and the nwuser and nwuserlg cookies are set, it will attempt to authorize the user. If either of those cookies are not set, and the nwInitLogin is true, it will display the login screen.
newzware_login()	This will show the login screen. If single sign on is configured, it will attempt the authorization using the single sign on method. This method calls the newzware_showLogin() method.
newzware_showLogin()	This will show the login screen.
newzware_purchaseCancelled()	Hides the purchase panel and displays the login panel.
newzware_loginCancelled()	Hides the login panel and closes the dialog.
newzware_doLogin()	Performs the authorization using the login and password input fields in the login form.
newzware_doLogout()	Logs the user out by deleting all the cookies (if nwDeleteAllOnLogout is equal to Y in the configuration). This method also calls back to the Newzware server and logs the user out of the Newzware database (if configured with tracking). After a successfull logout, this will hide the logout button (if enabled), and call the after logout function (if configured). This method also calls nwAfterLogout, if configured, after the above is completed.
newzware_showContent(boolean showLogout)	This method will display the content. If the variable nwContentCallback has been set to another function, it will override this methods default behavior. If the boolean passed to this method is true, the log out button will be displayed. This method will display contents within the element id defined in the nwContentId variable. It will also hide any content within the nwTeaserId if the nwIsTeaserBlock has been configured with a value of Y (For sites using a teaser block). Teaser blocks can also be controlled at the CMS level, which would negate the use of the teaser configuration.
newzware_doSSMRedirect()	This method will redirect a user that is already logged in, directly into the dashboard area of the Newzware Self Service module. A user must be logged in for successfull entry into the Newzware SSM.
newzware_forgotPassword()	Sends the user into the forgot password page of the Newzware SSM.

The JQuery UI theme can be customized further by loading the CSS manually after the site.js javascript include. See below:

Back