Speechly for Velo Part 2

In part 1 of our Speechly for Velo series, you used Speechly custom UI components to add a voice enabled search bar to your Velo site. In this post you will learn how to enhance the UX of your Wix Stores site by implementing a Velo package created in collaboration with Speechly’s team. By the end of this tutorial you will be able to create your own Speechly application connected to your Wix Stores product filters through a Velo package that includes the Big Transcript and Push to talk UI components.

How does Speechly work with WixStores?

The Velo team worked closely with Speechly to design a package that can easily be integrated into WixStores sites that are on a premium account plan with a connected domain. This package creates a basic Speechly configuration for you and takes much of the guesswork out of connecting the functionality to your site. Once integrated you will be able to give your users a voice enabled shopping experience powered by machine learning which allows the user to speak naturally and receive the results they expected.

Note: This integration can be complicated and is intended for the advanced user. If you prefer assistance, you may hire a trusted Velo developer.

To check out the Velo package on your own and get started right away, take a look at the package documentation. The basic steps are covered in the package readme and you can get started with the live example site.

Adding Voice Enabled Commerce

Prerequisites: A Velo enabled site with the WixStores App added with a product page and filters that is on a premium plan with a connected domain. Visit support for more information on setting up a new Wix Stores site. You may also use the example site in the package to follow along if you prefer. To see the site code, click edit now.

Relevant Documentation:

• Speechly Velo Package Example

• Speechly Documentation

• Secrets Manager

Setup your Speechly Account

Note: Speechly starts with a free plan that includes 100h/month of API usage, if your use case needs more please reference their pricing plans.

1. Sign up for a new Speechly account

2. Name your application and select Product Filtering or Empty as your template and click Create Application.

3. On the next page you will see a dashboard with a sample configuration. You may ignore this as it will be automatically generated for you in a later step.

4. At the upper left, click the dropdown and select Project Settings. If it asks you to save the project, you do not need to do so at this time.

5. In Project settings, click Create API Token. Copy this token and store it for use in the Velo Package shortly.

Install and Configure the Velo Package

• In your site dashboard click on Developer Tools > Secrets Manager

• Add the API token generated above and store it with the name velo-speechly-token.

• In the editor with dev mode turned on, click { } on the left side navigation to open the code files navigator.

• Under Packages, click Install Velo Package to open the package manager

• Search for Wix Stores Speechly and click Install

• In your backend code create a JavaScript file and name it init-speechly.js with the following code:

import {initSpeechly} from'@velo/wix-stores-speechly-backend';

export function init() {
    return initSpeechly();
}

• From the editor, run the code by clicking the small arrow to the left of the init function and then clicking Run.

• Running this function will return your App ID in a panel to the right. Place this id in the wix-stores-speechly-config.json file found in the Velo package folder.

• In the editor add a custom element and configure as follows to add the Push to Talk UI Component:

  1. Source > Server URL: https://unpkg.com/@speechly/browser-ui/core/push-to-talk-button.js

  2. Tag: push-to-talk-button

  3. Element ID: #pushtotalk

• Complete the same steps as above to configure the Big Transcript element. You won’t be able to see either of these components in your editor or preview. They will only be available after clicking Publish and navigating to your live site:

  1. Source > Server URL: https://unpkg.com/@speechly/browser-ui/core/transcript-drawer.js

  2. Tag: transcript-drawer

  3. Element ID: #bigTranscript

Note: For the rest of this example, I am going to use the default filters provided in the package. These are not required and the filters can be set to whatever the needs of your site are. To learn more about customizing the filters, see the readme in the Velo Package for guidance or hire a trusted Velo developer.

• Add the filters to your store page as seen in the Velo Package example site:

• Open your page code and add the following code:

import { buildPage, startVoice } from'@velo/wix-stores-speechly';

$w.onReady(function () {

   const components = {
   // repeater and load more button components (required)
      'productRepeater': $w('#productRepeater'),
      'priceText': $w('#priceText'),
      'productNameText': $w('#productNameText'),
      'productImage': $w('#productImage'),
      'loadMoreButton': $w('#loadMoreButton'),

   // filter components (optional)
      'collectionsDropdown': $w('#collectionsDropdown'),
      'freeSearchInput': $w('#freeSearchInput'),
      'priceSlider': $w('#priceSlider'),
      'sizeDropdown': $w('#sizeDropdown'),
      'colorsDropdown': $w('#colorsDropdown'),
      'brandsDropdown': $w('#brandsDropdown'),
      'filtersBox': $w('#filtersBox'),
      'loadingFiltersText': $w('#loadingFiltersText'),
      'clearFilterButton': $w('#clearFilterButton'),
   };

   buildPage(components);
   startVoice(components);
});

In the above block of code, the buildPage and startVoice functions are being called from the public files in the Velo package. The buildPage function is in set-filters.js and contains the logic for displaying the filtered results. The startVoice function is in speech-to-text.js and initiates the voice to text functionality when a user holds the Push to Talk Button.

The Speechly Dashboard

In the Speechly Dashboard you should see a new configuration that was generated when you ran the init function in Step 7 above. While you can use this configuration as-is, you may find through testing or feedback from your users that the configuration needs to be fine tuned. In this section you will learn the basic parts of a Speechly configuration and how to update your application from the dashboard. For more information or help with your configuration, please refer to Speechly configuration documentation.

What does the configuration do?

The configuration is the training data for machine learning models that will interpret your users speech into meaningful results to filter the product data in your site. To create a configuration you provide sample data based on your site filters. As an example, I will review the configuration created from the Velo package.

• Open your Speechly dashboard and navigate to your application. It will look something like this:

• Lines 1-3 are some of your entities or details. In this example, the entities correspond to the filters on your site.

• An entity configuration contains a name and some training data. For example: color = [Black | White | Grey | Brown]. To add more training values to an existing entity you may add values within the brackets separated by a pipe symbol. If you want to add a new entity you must also create the new filter and processing code in your site. Refer to the package readme for more information on custom implementations.

• Line 4 on the dashboard code shows phrases that could start an utterance. This training is provided to help the configuration learn possible ways a user may start a search.

carrier_phrases = {0.1: now} [let's say|i'm interested in|i'm looking for|{[can you|will you]} show me|select|search {for}|display|filter by|find {me}|give me| [i want to | i'd like to | can i] [see|view|browse] | i want {to buy} | i need {to buy}]

• Lines 5 and 6 are setting the maximum price phrases

price_carrier = [[that have | with | having] a {highest} price {of} | not costing more than | [that cost | for] at most | {with {a}} maximum price {of}]
max_price = [1..9999](max_price) [dollars | euros | pounds]

• Line 7 is creating arrangements of the filter phrases.

filter_first_part = ![{in} ![{color} | $color(color)] | $category(category) | {in} ![{size} | $size(size)] | $price_carrier $max_price]

• The last lines set the intents. In this case you have 2 potential user intents or actions. They are either filtering the products or clearing the search. You can set the importance of the intent by giving it a weight. In this case, the intent to filter is set to 10 and has more weight than the intent to clear. These intents define a template that generates possible phrases based on all the filters created in the configuration.

intents = [
    10: *filter {0.1: $carrier_phrases {[a | some |new]}} $filter_first_part
    1: *clear [[clear | reset] {[all | filters]}]
    1: *clear [go back | take me to the [beginning | start] | new search]
]
$intents

• When you are happy with your configuration, click Deploy.

If you have not done so already, click Publish on your site and navigate to the live URL. Now that your Velo package is installed and Speechly configured, you can test the functionality from the front end of your site and make adjustments as needed.

The Speechly for Wix Stores Velo package is available now. For more information on Speechly and to get ideas of what else is possible check out their demos. To share what you are building with Speechly, start a conversation with other Velo devs in the forum.