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

NameTypeDescription
optionsstring[]Options presented by this widget. The selected option is returned by onChange.
displayNames?string[]Human-friendly display names for each option.
value?stringThe current option. Must match a options value. Provide an onChange handler to react to changes.
defaultValue?stringInitially 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

Last updated by Mathias Lindholm on January 26, 2022 at 11:48 +0200

Found an error on our documentation? Please file an issue or make a pull request