Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

primo-explore-libraryh3lp-widget

1.1.2 • Public • Published

primo-explore-libraryh3lp-widget

Build Status npm version Coverage Status

Description

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

Screenshot

screenshot1

screenshot2

gif

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/ask@chat.libraryh3lp.com?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;
  }
}

Install

npm i primo-explore-libraryh3lp-widget

DownloadsWeekly Downloads

12

Version

1.1.2

License

MIT

Unpacked Size

22.4 kB

Total Files

9

Last publish

Collaborators

  • avatar
  • avatar
  • avatar