A Feature Rich Chat Client for Teneo

About • Installation • Features • Documentation • Demo • Contributing • Author • Support • License

About

Installation

Windows Users

If you're developing on windows you will most likely have to install node-gyp before you attempt to run npm install. You will need to compile some native node modules. To enable this on Windows you can run this one liner. It's going to take a while to complete but it only has to be run once. Start PowerShell as Administrator and run:

npm install --global windows-build-tools

Downloading and installing steps:

git clone https://github.com/jolzee/leopard-chat-ui-teneo
cd leopard-chat-ui-teneo
npm install

Configuration

Leopard is configured using /config/default.js which is a commented JavaScript module. You can either directly add your configuration to default.js or to an adjacent local.js which takes precedence and is added to .gitignore. The conversational solutions are configured through the .env.solution.json file in the root of the project. If you want to make some changes prior to running/building Leopard then do so now.

Run Locally in Development Mode

npm run serve

Build for production

The build process runs the source code through Webpack and produces the final build into the /dist folder.

npm run build

Deployment

Copy all the files within /dist to any web server - For example https://mydomain.com/leopard/.

The Chat UI can then be used in Sales Engineering mode by visiting https://mydomain.com/leopard/

Embed in Production

You can inject Leopard Chat UI into a specific element on a page. This might be beneficial if you want to place it in a specific tab order. To enable this add a <div id="leopardChatWindow"></div> anywhere on the page. This is not required though and if absent the UI will automatically be injected at the beginning of the body.

<script type="text/javascript">
  window.TENEOCTX || (TENEOCTX = {});
  TENEOCTX = {
    init: {
      trustedDomain: "", // something like http://localhost:8080 // "" = receive and post messages to all domains
      allowScripts: true // false = if you want to disable potential eval
    },
    ctx: {
      eventSource: "leopard-embed",
      pageTitle: document.title,
      pageUrl: window.location.href,
      pageTopic: "Help",
      message: "This was sent from the customer's web site"
    }
  };
</script>

<div id="leopardChatWindow"></div>

<script src="https://mydomain.com/leopard/static/embed-leopard.js"></script>

Features

Screenshots

Documentation

Do you need some help? Check the complete documentation.

Contributing

Got something interesting you'd like to share? Learn about contributing.

Author

Peter Joles

Support

Reach out to me at one of the following places:

• peter.joles.xyz
• [email protected]

License

Distributed under the Apache License 2.0. See LICENSE for more information.

Attributions

Icons made by Pixel perfect from www.flaticon.com