Voice Toggle

Voice Toggle is a voice-enabled single-select button group component. It changes the selection based on the intent, entity type or entity value found in the SpeechSegment.

Preview

Voice Toggle

Voice Toggle dressed in capsule and mui themes. See styling the components for more information.

Usage

You’ll need a Speechly React app and a Speechly configuration that tags entities in phrases to use this component.

Ensure you have added the @speechly/react-voice-forms dependency:

npm i @speechly/react-voice-forms

Import the component and a css theme:

import { VoiceToggle } from '@speechly/react-voice-forms'
import '@speechly/react-voice-forms/css/theme/mui.css'

Place the form component somewhere inside your SpeechProvider block:

<SpeechProvider appId="YOUR_APP_ID_FROM_SPEECHLY_DASHBOARD">
  <VoiceToggle
    options={["my_one_way_id", "my_round_trip_id"]}
    displayNames={["One way", "Round trip"]}
    changeOnEntityType={["one_way", "round_trip"]}
  />
</SpeechProvider>

Properties

Name	Type	Description
`options`	`string`[]	Options presented by this widget. The selected option is returned by `onChange`.
`displayNames?`	`string`[]	Human-friendly display names for each option.
`value?`	`string`	The current option. Must match a `options` value. Provide an `onChange` handler to react to changes.
`defaultValue?`	`string`	Initially selected option. Has no effect if `value` is specified.
`changeOnIntent?`	`string` \| `string`[]	`string[]` (intents) changes this widget’s option based on the intent of the SpeechSegment. The order must match that of `options`. `string` (intent) filters out all but the specified intent. Use `changeOnEntityType` or `changeOnEntityValue` to change the option. `undefined` disables intent filtering.
`changeOnEntityType?`	`string` \| `string`[]	`string[]` (entity types) changes this widget’s option if a matched entity type is found in the SpeechSegment. The order must match that of `options`. `string` (intent) filters out all but the specified entity type. Use `changeOnEntityValue` to change the option. `undefined` disables entity type filtering.
`changeOnEntityValue?`	`string`[]	`string[]` (entity values) changes this widget’s option if a matched entity value is found in the SpeechSegment. The order must match that of `options`.
`onChange?`	(`value`: `string`) => `void`