@cognigy/cognigy-web-client

The Cognigy web client is a special version of the Cognigy client which contains everything bundled-together so you can get started to connnect and use the Cognigy brain as fast as possible.

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
11Jun 30, 2021Apr 3, 2017Minified + gzip package size for @cognigy/cognigy-web-client in KB

Readme

CognigyWebClient

Repo for the cognigy web client which can be used to connect to the Cognigy.AI platform from a web browser.

This repository supports the two following options:

  • install the cognigy web-client from npm and integrate it within your own build-pipeline e.g. using webpack, rollup and others
  • simply use the "cognigy-web-client.js" and integrate it within your web page. This file does already contain all dependencies, so your ready to go.

Installation

Version for integrating into your own build-pipeline

npm i @cognigy/cognigy-web-client --save

Version for integrating in a web page

  • Download the cognigy-web-client.js within the /static folder
  • Add this javascript file to your webpage and load it: <script src="./cognigy-web-client.js"></script>

Example

This is a minimal example of how to integrate the congigy-web-client into a web-page. Just see the html-example below.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h1>See your dev-console for the magic that happens.</h1>
        <button id="button">Toggle Record</button>
 
        <script src="./cognigy-web-client.js"></script>
        <script>
            window.onload = function() {
                const options = {
                    /** Required fields */
                    baseUrl: 'server-address',
                    URLToken: 'endoint-url-token',
                    userId: 'your-username',
                    sessionId: 'unique-session-Id',
                    channel: 'my-website',
                    forceWebsockets: false,
                    handleOutput: function(output) {
                        console.log("Text: " + output.text + "   Data: " + output.data);

                        /** use the clients voice synthesis api to 'speak' */
                        client.say(output.text);
                    },

                    /** Optional fields */
                    keepMarkup: true,
                    reconnection: true,
                    interval: 1000,
                    expiresIn: 5000,
                    passthroughIp: "127.0.0.1",
                    handleError: (error) => { console.log(error); },
                    handleException: (error) => { console.log(error); },
                    handlePing: (finalPing) => { console.log("On final ping"); }
                };

                const speechOptions = {
                    /** Required fields */
                    language: 'en-US',
                    
                    /** Optional fields */
                    voiceName: "voice-name",
                    voiceRate: 20,
                    voicePitch: 20,
                }

                const client = new Cognigy.CognigyWebClient(options);
                client.connect()
                    .then(function() {
                        /** Send the event directly */
                        client.sendMessage("I like pizza", undefined);

                        /** Send a transcript that was recorded using the voice recognition api from your browser */
                        client.registerOnRecEnd(function(transcript) {
                            client.sendMessage(transcript, undefined);
                        });
                    })
                    .catch(function(error) {
                        console.log(error);
                    });

                /** a bit js code to make our button work */
                const button = document.getElementById("button");
                if(button !== null) {
                    button.onclick = function() {
                        /** toggles the microphone on/off. The transcript output will be send to the onRecEnd method which you can register using 'client.registerOnRecEnd' */
                        client.toggleRec();
                    }
                }
            }
        </script>
    </body>
</html>

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.