# jovo-client-web Latest version **3.6.2** (published 2022-07-28) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install jovo-client-web pnpm add jovo-client-web yarn add jovo-client-web bun add jovo-client-web ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 3.6.2 | | Published | 2022-07-28 | | First published | 2020-02-25 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 7 | | Unpacked size | 699.2 KB | | Known vulnerabilities | 0 (+2 in 2 direct dependencies) | | Install scripts | no | | Author | jovotech | | Maintainers | jovotech | ## Links - npm: https://www.npmjs.com/package/jovo-client-web - npm.io page: https://npm.io/package/jovo-client-web ## Dependencies (7) - [uuid](https://npm.io/package/uuid.md) ^3.3.2 - [lodash.get](https://npm.io/package/lodash.get.md) ^4.4.2 - [lodash.set](https://npm.io/package/lodash.set.md) ^4.3.2 - [whatwg-fetch](https://npm.io/package/whatwg-fetch.md) ^3.4.1 - [detect-browser](https://npm.io/package/detect-browser.md) ^5.2.0 - [jovo-platform-web](https://npm.io/package/jovo-platform-web.md) ^3.6.2 - [lodash.defaultsdeep](https://npm.io/package/lodash.defaultsdeep.md) ^4.6.1 ## Recent versions - 3.6.2 (latest) — 2022-07-28 - 3.6.1 — 2022-02-17 - 3.6.0 — 2021-11-18 - 3.5.3 — 2021-05-10 - 3.5.2 — 2021-03-26 - 3.5.1 — 2021-02-22 - 3.5.0 — 2021-02-22 - 3.4.1 — 2021-02-09 - 3.4.0 — 2021-02-04 - 3.3.1 — 2021-01-27 - 3.3.0 — 2020-12-03 - 3.2.7 — 2020-11-25 - 3.2.6 — 2020-11-25 - 3.2.5 — 2020-11-25 - 3.2.4 — 2020-11-20 - … 45 more at https://npm.io/package/jovo-client-web/versions ## README # Jovo Web Client > To view this page on the Jovo website, visit https://v3.jovo.tech/marketplace/jovo-client-web The Jovo Web Client enables you to build voice and conversational experiences for the web. Use this package (vanilla JavaScript, [find the Vue.js client here](https://v3.jovo.tech/marketplace/jovo-client-web-vue)) in your frontend web app and connect it to your Jovo backend using the [Jovo Core Platform](https://v3.jovo.tech/marketplace/jovo-platform-core). - [Introduction](#introduction) - [Installation](#installation) - [Quickstart](#quickstart) ## Introduction ![Jovo Client and Jovo Core Platform](https://raw.githubusercontent.com/jovotech/jovo-framework/master/jovo-platforms/jovo-platform-core/img/jovo-client-platform-communication.png 'How Jovo Core Platform communicates with clients like web apps') [Jovo Clients](https://v3.jovo.tech/marketplace/tag/clients) are used as a frontend that collects user input. This input (e.g. speech or text) is then passed to the [Jovo Core Platform](https://v3.jovo.tech/marketplace/jovo-platform-core) that handles the conversational logic. The "Jovo for Web" client can be used on websites and web apps. It comes with helpful features that make it easier to capture speech input, detect when a user stops speaking, and display information that is returned from the Jovo app. The client is open source and fully customizable. ### Installation Install the client into your web project like this: ```sh $ npm install jovo-client-web ``` ### Quickstart You can find starters for our [Vue.js client](https://v3.jovo.tech/marketplace/jovo-client-web-vue) at [github.com/jovotech/jovo-client-web-starters](https://github.com/jovotech/jovo-client-web-starters). ## Configuration To access the Jovo Web Client, you have to create a new client object: ```js const client = new window.JovoWebClient.Client(endpointUrl: string); ``` The `endpointUrl` specifies the url of your Jovo app. For local development you can use `http://localhost:3000/webhook`. ## Sending a Request to the Jovo App To send a request to the Jovo app, you can use the `$client` object: ```js client.createRequest({ type: RequestType.Text, body: { 'Hello World' } }).send(); ``` ## Recording Voice Input To record the user's voice input and automatically send it to the Jovo app, you can use the `startInputRecording()` and `stopInputRecording()` methods. Here's a sample implementation of a microphone button that will record the audio as long as the button is pushed down and send the audio as soon as it's released: ```html ``` ```js async onMouseDown(event: MouseEvent | TouchEvent) { if (!client.isInitialized) { await client.initialize(); } if (client.isRecordingInput) { return; } if (event instanceof MouseEvent) { window.addEventListener('mouseup', this.onMouseUp); } else { window.addEventListener('touchend', this.onMouseUp); } await client.startInputRecording(); } private onMouseUp(event: MouseEvent | TouchEvent) { window.removeEventListener('mouseup', this.onMouseUp); client.stopInputRecording(); } ``` ## Event Listeners You can use listeners to react to events of the Jovo app from within your Vue component ```js import { ClientEvent } from 'jovo-client-web-vue'; import { Component, Vue } from 'vue-property-decorator'; @Component({ name: 'overlay' }) export default class Overlay extends Vue { mounted() { client.on(ClientEvent.Request, this.onRequest); client.on(ClientEvent.Response, this.onResponse); client.on(ClientEvent.Action, this.onAction); } beforeDestroy() { client.off(ClientEvent.Request, this.onRequest); client.off(ClientEvent.Response, this.onResponse); client.off(ClientEvent.Action, this.onAction); } ``` The following event types are supported: | Name | Description | Parsed Parameters | | :--------- | :--------------------------------------------------------------------------- | :---------------------------- | | `Request` | triggered when the request is received by the Jovo app. Parses the request | `(req: WebRequest)` | | `Response` | triggered when the Jovo app sends out the response. Parses the response | `(res: WebResponse)` | | `Action` | triggered when the Jovo app's response contains an action. Parses the action | `(action: Action)` | | `Reprompt` | triggered when a reprompt is triggered. Parses the reprompt actions | `(repromptActions: Action[])` | ### SpeechRecognizer The SpeechRecognizer uses Google Chrome's ASR and has its own set of listeners: ```js import { SpeechRecognizerEvent } from 'jovo-client-web-vue'; import { Component, Vue } from 'vue-property-decorator'; @Component({ name: 'overlay' }) export default class Overlay extends Vue { mounted() { client.$speechRecognizer.on( SpeechRecognizerEvent.SpeechRecognized, this.onSpeechRecognized, ); } beforeDestroy() { client.$speechRecognizer.off( SpeechRecognizerEvent.SpeechRecognized, this.onSpeechRecognized, ); } ``` | Name | Description | Parsed Parameters | | :----------------- | :----------------------------------------------------------------------- | :-------------------------------- | | `StartDetected` | triggered when the speech input has started | `()` | | `SpeechRecognized` | triggered when the speech input has been collected | `(event: SpeechRecognitionEvent)` | | `End` | triggered when the SpeechRecognizer has ended (after `SpeechRecognized`) | `(event: SpeechRecognitionEvent)` | | `Timeout` | triggered when the SpeechRecognizer has timed out | `()` | | `SilenceDetected` | triggered when the SpeechRecognizer detected silence | `()` | | `Error` | triggered when the SpeechRecognizer encountered an error | `(error: Error)` | The `AudioHelper` class can be used to get the transcript from the `SpeechRecognizerEvent`: ```js import { AudioHelper } from 'jovo-client-web-vue'; //... onSpeechRecognized(event: SpeechRecognitionEvent) { this.inputText = AudioHelper.textFromSpeechRecognition(event); } ``` --- _Source: https://npm.io/package/jovo-client-web · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._