primo-explore-libraryh3lp-widget

    1.1.9 • 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

    38

    Version

    1.1.9

    License

    MIT

    Unpacked Size

    22.5 kB

    Total Files

    9

    Last publish

    Collaborators

    • barnaby.alter
    • etgrieco
    • eric.griffis