Intro Popup

Intro Popup is a full screen overlay-style popup that is automatically displayed when the user first interacts with Push-To-Talk Button. It displays a customizable introduction text that briefly explains voice features microphone permissions are needed for.

The user will have a choice between allowing the microphone permissions or do that later. Allowing will display the system permission prompt.

Intro Popup also automatically appears to help recover from a common problems.

Show preview in CodePen

Usage

  <script type="text/javascript" src="https://unpkg.com/@speechly/browser-ui/core/intro-popup.js"></script>

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

Attributes

hide - Optional “auto” | “false” | “true”. Auto setting displays the popup upon mic button interaction or in case a problem is detected. False and true allow manual visibility control. Default: “auto”
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

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

Events emitted

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.

Place <IntroPopup> component inside your <SpeechProvider>. Please see Basic usage for a full app example.

  import { IntroPopup } from "@speechly/react-ui";

  ...
  <SpeechProvider appId="YOUR_APP_ID_FROM_SPEECHLY_DASHBOARD">
    <IntroPopup>
      <span slot="priming-body">You will be able to book faster with voice.</span>
    </IntroPopup>
  </SpeechProvider>
  ...

Name	Type
`appId?`	`string`
`children?`	`React.ReactNode`

Error Messages

Failed to connect Speechly
- Cause: Either the Speechly application id is invalid or the configuration has not been deployed successfully.
- Proposed fix: Check that the Speechly application id is spelled exactly as shown in the Dashboard. If this is the first time you use the app id, check in the Dashboard that the speech model has finished training and try again once it has been deployed. Training usually takes some 5-10 minutes.
No microphone permission
- Cause: The user has denied the use of microphone
- Proposed fix: To use the voice interface, please allow your web browser access the microphone and reload.
Unsupported browser
- Cause: Required browser APIs for voice functions are not available
- Proposed fix: To use the voice interface, please visit this site using a supported browser.
Page accessed without HTTPS
- Cause: The site that contains voice functions is accessed with file:// or http:// protocol causing the browser to prevent access to required browser APIs.
- Proposed fix: To use the voice interface, please visit this site using the secure https:// protocol.