Web Components Extras
Contents
Quick installation from CDN
Include the resources in your<head> block:
Transcript Drawer
Transcript Drawer is an drawer-style component for displaying real-time speech-to-text transcript and hint texts.
It's an alternative to big-transcript (actually a wrapper). It is displayed at the top of the screen. It is momentarily displayed and automatically hidden after the end of voice input.
Usage
Include the following lines in your <body>:
Attributes
hint- Hint text to be shown when the app is listening for speech. Hint is hidden upon user speech is received. String or a JSON.stringify'ed string array, e.g.hint='["Try: 1st hint", "Try: 2nd hint"]'. Pay attention to use double quotes in JSON. If an array is provided, the next tip is automatically shown after an utterance. After all tips are shown, they will be shown again in random order. Default: ""height- Optional minimum height as CSS string. Default: "8rem"color- Optional string (CSS color) for text. Default: "#ffffff"smalltextcolor- Optional string (CSS color) for hint text. Default: "#ffffff70"highlightcolor- Optional string (CSS color) for entity highlighting, vu meter and acknowledged icon. Default: "#15e8b5"backgroundcolor- Optional string (CSS color) for hint text background. Default: "#202020"fontsize- Optional CSS string for text size. Default: "1.5rem"hintfontsize- Optional CSS string for hint text size. Default: "0.9rem"formattext- Optional "true" | "false". If true, transcript is formatted with detected entities, e.g. numbers. Default: "true"demomode- Optional "true" | "false". If true, transitions are slowed down for better readablility. Default: "false"customtypography- Optional "true" | "false". True inherits css typography settings. Default: "false"customcssurl- Optional string (url to .css file). Allows for further customization of component's shadow root.
Properties
speechsegment(segment: Segment)- Function. Call whenever a new segment update is availablespeechstate(state: ClientState)- Function. Call whenever ClientState changes. Needed to show/hide element.speechhandled(success: boolean)- Function. Optionally call on segment.isFinal to show confirmation that speech was processed. An indication will be shown with big-transcript.sethint(message: string)- Optionally update hint text.
Window messages listened
{type: "speechsegment", segment: Segment}- Expects an update whenever a new segment update is available. This is usually sent by push-to-talk-button{type: "speechstate", state: ClientState}- Needed to show/hide element{type: "speechhandled", success: boolean}- Optionally send a confirmation on segment.isFinal that speech was processed. An indication will be shown with big-transcript.{type: "hint", hint: text}- Optionally update hint text.
Intro Popup
Intro popup introduces the application and voice usage.
Usage
Include the following lines in your <body>:
Attributes
video- Url for intro video in mp4 format. 640x400px 10fps recommended.hide- Optional "false" | "true". Default: "true"remsize- Optional rem override. "16px" recommended for Wix. Default: "1rem"customtypography- Optional "true" | "false". True inherits css typography settings. Default: "false"customcssurl- Optional string (url to .css file). Allows for further customization of component's shadow root.
Child nodes
Events emitted
requeststartmicrophone- CustomEvent emitted on allow microphone click.speechlyintroclosed- CustomEvent emitted on closed by user.
Window messages emitted (postMessage)
{type: "speechlyintroready"}- Broadcasted upon mount{type: "speechlyintroclosed", firstrun: undefined|true}- Broadcasted when popup is closed by user
Window messages listened
{type: "speechlypoweron"}- Displays the intro popup's welcome screen. This message is automatically emitted by push-to-talk-button when poweron="true"|"auto".{type: "speechstate", state: ClientState}- Displays the intro popup's connecting and error screens. This message is automatically emitted by push-to-talk-button.
Video Guide
Overlay voice usage video.
Include the following lines in your <body>:
Attributes
video- Url for intro video in mp4 format. 640x400px 10fps recommended.hide- Optional "false" | "true". Default: "true"remsize- Optional rem override. "16px" recommended for Wix. Default: "1rem"
Demomode
Demomode utility can display instructions for the end user. It sends segmentupdate messages (postMessage) in a sequence and drives Big Transcript or Transcript Drawer components.
Additionally, if your application is set up to listen to these messages, it will react to those as if they
were input from a real user. You may need to reset your altered app state after exiting the demo mode.
Usage
Include the following lines in your <body>:
Methods
startDemo(utterances[])- Starts the demo mode. Utterances is an array of strings in simplified SAL format. Each utterance must start with an*intent, followed by any number of transcript words and entities coded like this:[entity_value](entity_type).stopDemo()- Stops the demo mode.