@speechly/browser-ui
TypeScript icon, indicating that this package has built-in type declarations

6.0.6 • Public • Published

speechly-logo-duo-black

Website  ·  Docs  ·  Support  ·  Blog  ·  Login


Speechly Browser UI Components

build npm license

Ready-made UI components for building reactive voice interface using JavaScript and Speechly.

🚧 This project is no longer actively maintained and is looking for a maintainer. If you're interested, get in touch https://www.speechly.com/contact

image

Documentation

Getting started

You'll need a Speechly account and a Speechly application that's using a Conformer model. Follow our quick start guide to get started with Speechly.

Browser usage

Include the Web Components from a CDN that mirrors @speechly/browser-ui npm package. The script tags register push-to-talk-button, big-transcript and intro-popup with the browser's customElement registry so you can use them like regular tags.

<head>
  <script type="text/javascript" src="https://unpkg.com/@speechly/browser-ui/core/push-to-talk-button.js"></script>
  <script type="text/javascript" src="https://unpkg.com/@speechly/browser-ui/core/big-transcript.js"></script>
  <script type="text/javascript" src="https://unpkg.com/@speechly/browser-ui/core/intro-popup.js"></script>
</head>

<body>
  <big-transcript
    placement="top">
  </big-transcript>
  <push-to-talk-button
    placement="bottom"
    appid="YOUR-APP-ID">
  </push-to-talk-button>
  <intro-popup>
    <span slot="priming-body">You'll be able to control this web app faster with voice.</span>
  </intro-popup>
</body>

Node Usage

This example illustrates using browser-ui Web Components with a JS framework. For React development, react-client and react-ui libraries offer a better developer experience.

npm install @speechly/browser-ui

In App.js:

import "@speechly/browser-ui/core/push-to-talk-button";
import "@speechly/browser-ui/core/big-transcript";
import "@speechly/browser-ui/core/intro-popup";

// ...

<big-transcript placement="top"></big-transcript>
<push-to-talk-button placement="bottom" appid="YOUR-APP-ID"></push-to-talk-button>
<intro-popup></intro-popup>

Contributing

See contribution guide in CONTRIBUTING.md.

Readme

Keywords

none

Package Sidebar

Install

npm i @speechly/browser-ui

Weekly Downloads

510

Version

6.0.6

License

MIT

Unpacked Size

2.35 MB

Total Files

86

Last publish

Collaborators

  • aukkonen
  • thisismatu
  • speechlynpm
  • langma
  • hheikinh