Book tickets faster using voice To use voice input, press Allow to give TravelCompany access to your microphone.

Web Components Extras

Contents

Quick installation from CDN

Include the resources in your <head> block: <head> <script defer type="text/javascript" src="https://unpkg.com/@speechly/browser-ui/core/transcript-drawer.js"></script> <script defer type="text/javascript" src="https://unpkg.com/@speechly/browser-ui/core/intro-popup.js"></script> </head>

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

<transcript-drawer></transcript-drawer>

Attributes

Properties

Window messages listened

Intro Popup

Intro popup introduces the application and voice usage.

Usage

Include the following lines in your <body>:

<intro-popup> <span slot="priming-body">You will be able to book faster with voice.</span> </intro-popup>

Attributes

Child nodes

<span slot="priming-title">Allow booking with voice</span> <span slot="priming-body">You will be able to book faster with voice.</span>

Events emitted

Window messages emitted (postMessage)

Window messages listened

Video Guide

Overlay voice usage video.

Include the following lines in your <body>:

<video-guide> video="https://mysite.com/usage.mp4"> </video-guide>

Attributes

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

<script type="module"> import {startDemo, stopDemo} from './demomode.js' let demoStrings = [ "*book book a flight from london(from) to [new york](to)", "*book in [business class](class)", ]; const transcriptEl = document.getElementsByTagName("transcript-drawer")[0]; document.querySelector('#start-demo').addEventListener('click', ()=>{ startDemo(demoStrings) transcriptEl.setAttribute("demomode", "true"); }); document.querySelector('#stop-demo').addEventListener('click', ()=>{ stopDemo() transcriptEl.setAttribute("demomode", "false"); }); </script>

Methods