Web Client

Integration published by Jovo | 6,495 downloads

Build voice experiences and chatbots for the web

Jovo Web Client

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) in your frontend web app and connect it to your Jovo backend using the Jovo Core Platform.

Introduction

Jovo Client and Jovo Core Platform

Jovo 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 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:

Quickstart

You can find starters for our Vue.js client at github.com/jovotech/jovo-client-web-starters.

Configuration

To access the Jovo Web Client, you have to create a new client object:

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:

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:

Event Listeners

You can use listeners to react to events of the Jovo app from within your Vue component

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:

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:

Jovo Client Web Changelog

Current version might be higher than the latest changes displayed below because of updates of dependencies.

2020-11-05 [3.2.1]`

3.0.18 (2020-05-13)

🐛 Bug Fix

3.0

No functional changes since the release of Jovo version 3.x.

2.x

Find the 2.x changelog here.

Join Our Newsletter

Be the first to get our free tutorials, courses, and other resources for voice app developers.