Getting started with Speechly Web Components

The video below will in five minutes teach you the basics of using the Speechly Dashboard and Playground, as well as guide you through the three steps of

1. Setting up the Speechly microphone UI component,
2. Configuring an Appid, and
3. Binding the events returned by our API to UI functions.

The Codepen example used in the video can be accessed here.

System Overview

Adding voice functionalities to a website (or mobile application) with Speechly is similar to traditional event driven UI programming. In “non-voice” UIs callbacks are triggered by the user interacting with some UI component on the website / application. In Speechly powered UIs this event triggering happens via the user talking.

When developing a Speechly Voice UI you can focus on defining what happens when the user says something. The difficult part of turning speech to events is taken care of by our Client Libraries and the Speechly API. The figure below illustrates this.

What next

1. Check out Example Configurations for the Web and try them out in CodePen.
2. Have a look at Speechly’s Client Libraries to discover the best way to introduce voice input to your app. For example, the above CodePens use the Web Components.
3. The above video is the fifth part of a five-part series where we introduce our technology, introduce some basic concepts and briefly explain how things work under the hood.
4. Read about how to Configure Speechly for the needs of your Application.
5. Take a look at our Development tool offering.
6. Browse our public GitHub repositories.

Need help?

Please post a question at our Github discussions page or for a more concrete technical problem, please file an issue.

Try to be as specific as you can. Describe what you are trying to do, how you do it, and what errors (if any) you are getting. We are happy to help!