primo-explore-libraryh3lp-widget

Description

Add a libraryh3lp embedded chat widget to the bottom-right of the page.

Screenshot

Installation

1. Assuming you've installed and are using primo-explore-devenv.

2. Navigate to your template/central package root directory. For example:

   cd primo-explore/custom/MY_VIEW_ID
   

3. If you do not already have a package.json file in this directory, create one:

   npm init -y
   

4. Install this package:

   npm install primo-explore-libraryh3lp-widget --save-dev
   

Usage

Once installed, inject libraryh3lpWidget as a dependency:

let app = angular.module('viewCustom', ['libraryh3lpWidget'])

Note: If you're using the --browserify build option, you will need to first import the module with:

import 'primo-explore-libraryh3lp-widget';

You'll need to configure the module by passing it an object as an angular constant:

name	type	usage
mode	string	'script' or 'iframe'`, identifying the type of libraryh3lp insertion method to use (see libraryh3lp documentation).
url	string	the iframe or javascript url for your instance of libraryh3lp
prompt	string	the text for the prompt when closed
icon	object	defines the icon for the link. must be chosen from https://material.io/icons/. you need to specify both the name of the action "set" (see link) and the icon itself, in the form "ic_person_outline_24px". note that all icons do not work so you may have to experiment some

Example

mode: iframe

app.constant('libraryh3lpWidgetConfig', {
  mode: 'iframe',
  url: 'https://us.libraryh3lp.com/chat/[e-mail]?skin=1',
  prompt: 'Chat with us',
  icon: {
    set: 'communication',
    icon: 'ic_chat_24px'
  }
});

mode: script

app.constant('libraryh3lpWidgetConfig', {
  mode: 'script',
  // 'http' or 'https' will be handled based on the protocol of your Primo server.
  url: 'libraryh3lp.com/js/libraryh3lp.js?7516',
  prompt: 'Chat with us',
  icon: {
    set: 'communication',
    icon: 'ic_chat_24px'
  }
});

app.run(runBlock);

runBlock.$inject = [
  'libraryh3lpInjectionService',
];

function runBlock(libraryh3lpInjectionService) {
  libraryh3lpInjectionService.injectScript();
}

Styles

Finally you'll need to add the following lines to your CSS to stylize the colors:

#chat_widget_icon svg {
  fill: yourTextColor;
}

.chat-tab{
  color: yourTextColor;
  background: yourBackgroundColor;
}

In order to add focus styling for better visual accessibility, you can use the following CSS to stylize this:

.chat-tab:focus {
  -webkit-box-shadow: inset 0 0 0 2px yourFocusColor;
  box-shadow: inset 0 0 0 2px yourFocusColor;
  overflow: -moz-hidden-unscrollable;
}

.chat-close:focus {
    -webkit-box-shadow: inset 0 0 0 2px yourFocusColor;
    box-shadow: inset 0 0 0 2px yourFocusColor;
    overflow: -moz-hidden-unscrollable;
  }
}