@pnimedia/analytics-wizard NPM

Analytics-Wizard

Analytics-Wizard is a Javascript library for handling dynamic questions on a wizard.

Installation

Use the npm package manager to install Analytics-Wizard.

npm install @pnimedia/analytics-wizard

Usage as module

import * as wizard from 'analytics-wizard'

wizard.openInteractiveWizard() // opens wizard
wizard.closeInteractiveWizard() // closes wizard
wizard.resetInteractiveWizard() // reset the wizard selections

Add in main body of root html file

Usage as commonjs module

index.html or root file

<html>
<head>
 <link rel="stylesheet" href="./node_modules/analytics-wizard/dist/style.css">   
 <script src="./node_modules/analytics-wizard/dist/index.js"></script>
 ...
 ...
 </head>

 <body>
    <Analytics-Wizard></Analytics-Wizard>
    <!-- Or -->
    <div class="pni-wizard" id="pni-interactive-wizard" positioning='true' top='10%' right='5%' left="10%"></div>

    ...
    ...
 </body>

 ...

 </html>

commonjs events

// PniWizard will be global object
PniWizard.openInteractiveWizard() // opens wizard
PniWizard.closeInteractiveWizard() // closes wizard
PniWizard.resetInteractiveWizard() // reset the wizard selections

Wizard Positioning

For setting the position of the analytics-wizard on the page there are few attributes that can be passes.

Attributes:  
    - positioning: This is a boolean flag that should be set true for setting the wizard position.  
    - top: This value can be passed as percentage or pixel to set top position of the wizard.  
    - right: This value can be passed as percentage or pixel to set right position of the wizard.  
    - left: This value can be passed as percentage or pixel to set left position of the wizard.  
If both right and left position values are passed then right will take precedence.

Example:

<Analytics-Wizard positioning='true' top='10%' right='3%' left="10%"></Analytics-Wizard>
OR
<Analytics-Wizard positioning='true' top='20px' right='17px left="15px"></Analytics-Wizard>  
OR
<div class="pni-wizard" id="pni-interactive-wizard" positioning='true' top='10%' right='3%' left="10%"></div>
OR
<div class="pni-wizard" id="pni-interactive-wizard" positioning='true' top='20px' right='17px left="15px"></div>

Set Color Theme

To set the color theme of the wizard, you can pass an attribute "color" with some value. Examples of values: "rgb(0, 0, 255)", "black", "#79b7db"

<Analytics-Wizard positioning='true' top='10%' right='3%' left="10%" tracking='true' color='#79b7db'></Analytics-Wizard>

Tracking user activity

For tracking user activity on the wizard and making use of pni-analytics services, Pass a flag tracking=true Example:

<Analytics-Wizard positioning='true' top='10%' right='3%' left="10%" tracking='true'></Analytics-Wizard>

License

4 years ago

4 years ago

4 years ago