Speechly Integration

We installed the Velo package on our site, and followed the steps described in the Setup section of the package’s readme file.

Page Elements

In our site we added 2 custom elements:

• Push-to-talk button - Set the Server URL to `https://speechly.github.io/browser-ui/v3/push-to-talk-button.js`, and the Tag Name to `push-to-talk-button`

• Big transcript - Set the Server URL to `https://speechly.github.io/browser-ui/v3/transcript-drawer.js`, and the Tag Name to `transcript-drawer`

See the Setup section of the package readme for more information on how to set up these custom elements.

We also added the following elements to our site:

• 5 dropdown input elements as the product filters

• 1 slider input element as a product filter

• 1 product repeater to display our store products

• 1 button for clearing the filters

Code

1. We made an account with Speechly and created a new project. We retrieved our API token, and stored it as a new secret in the Secrets Manager with the name velo-speechly-token.

2. We created a new .js file in our backend code, init-speechly.js to initialize the connection from our site to Speechly.

3. From there, we ran the init() function on the backend, and got a return with our speechlyAppId. We set this value in the package’s wix-stores-speechly-config.json file.

4. On our store products page, we declared all the input elements (components) we wanted to use for filtering products in the $w.onReady() function. We then called the startVoice() and buildPage() functions with the components.

5. The startVoice() function initializes the speech recognition and speech-to-text functionalities when a site visitor presses the push-to-talk button and starts talking. The event listener on the button triggers and returns an object containing the site visitor’s intent and entity (voice input detected). If any of the terms in the return object match one or more terms in the UI filters, the speech recognition is able to filter the store products.

6. The buildPage() function displays the filtered products set by the site visitor’s voice input in the product repeater.

For any questions or assistance, email speechly directly at hello@speechly.com.