@cognigy/cognigy-web-client
v3.0.1
Published
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.
Downloads
38
Keywords
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 --saveVersion for integrating in a web page
- Download the
cognigy-web-client.jswithin the/staticfolder - 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>