スピーチリー・インテグレーション

wix-stores-speechly Veloパッケージを使って、サイト訪問者が音声認識で商品を絞り込めるようにしましょう。

中級

出版された：

September 1, 2021

によって

アンカー 1

開発者を雇う

説明例

In this example we used the Speechly Integration Velo package to allow your site visitors to filter store products using speech recognition. When a site visitor holds down the push-to-talk button and says a term that matches a filter in the UI, the product page displays the filtered products set by the site visitor’s speech input. We also added a speech-to-text transcript for displaying the speech input detected.

Note: To use this example, you must have a Wix Premium account with a connected domain, and add a Wix Store to your site.

For more information about this Velo Package, please see the Readme in the package folder located in the Code Files section of your site.

コード例

タブ1

タブ2

タブ3

このコードによる解決は複雑になる可能性がある。

信頼できるベロ開発者を雇う

どのように構築したか

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

ページ要素

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

コード

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.
We created a new .js file in our backend code, init-speechly.js to initialize the connection from our site to Speechly.
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.
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.
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.
The buildPage() function displays the filtered products set by the site visitor’s voice input in the product repeater.