Javascript Voice Plugin for Websites

You can download the Javascript voice plugin from my Github page:

Download Voice User Interface Plugin

 

Website Wake Words

Vooi has two modes - asleep and awake. When asleep, Vooi is listening for the website visitor to say a Wake Word (customisable on a per-site basis). Once the wake word is spoken, Vooi wakes up and listens for commands. To stop Vooi listening, simply say the Sleep Word and Vooi goes back to sleep.

 

Vooi Voice Commands

The following are inbuilt Vooi commands and will work on every web page:-

• Scroll Down
• Scroll Up
• Go To Bottom
• Go To Top
• Go Back (same as clicking the back button in the web browser)
• Search For XYZ (enters XYZ in the site's search box and initiates a search)
• Go To XYZ / Click XYZ (XYZ being the text of a link visible on the page)
• Click XYZ (XYZ being the text of a button visible on the page)

Out of the box, Vooi is configured to automatically create voice commands based on page content. Vooi can also be customised with user defined phrases that are linked to website actions e.g. the phrase 'what are your prices?' can be configured to click a link in the site nav that directs the user to your prices page.

 

Automatic Creation of Voice Commands

If you set the autoEnabled parameter to true when you initiate the plugin, Vooi will automatically look at all the links and buttons on a page, grab their text, and then create an action to click on the element when the text is spoken. Quite often you might have links or buttons that contain an image with no text. For these instances you can add a data-vui-text tag to the html element that contains a pipe delimited list of phrases you want to use to control the element with Vooi. For example you could add the following data tag to a burger menu button / link:  data-vui-phrases="menu|click menu|click on the menu" .

 

Custom Voice Commands - Phrase Matching

You can easily add your own commands to Vooi through the addition of actions. An action consists of:-

• A type - This can be 'redirect' or 'click'. A Redirect is used to redirect the user to a new url or bookmark. A Click is used to have Vooi click on a page element i.e. a button or link.
• Phrases - These are the phrases used to trigger the action.
• Accuracy - Can be set for an individual action or for the entire app depending on the level of voice recognition accuracy you want to acheieve. The default is 90% accuracy and this seems to work quite well for most cases.

 

"actions": [
{
  "type": "redirect",
  "phrases": [
    "home",
    "home page",
    "go to home",
    "go to home page"
  ],
  "intent": "/"
 },
 {
  "type": "redirect",
  "phrases": [
    "pricing",
    "I want prices",
    "how much does 360jungle cost",
    "show me prices"
  ],
  "intent": "/#howmuchdoes360junglecost",
  "accuracypercentage": 90
 }
]

 

Other Voice Control Plugin Parameters

Vooi has the following configurable plugin parameters:-

• Brand - The name of your personal / company brand for use in the Vooi Call to Action pop-up shown to website visitors.
• Theme - There are 4 inbuilt theme colour options - red, blue, green, grey.
• Desktop Only - Gives you the option to enable / disable voice recognition on mobile devices.
• Wakeword - Define what word / phrase users have to say to wake up Vooi (i.e. to start listening for commands)
• Sleepword - The word / phrase users have to say to send Vooi to sleep (i.e. to stop listening for commands)
• AccuracyPercentage - The overall accuracy percentage you want to work to (max 100).
• VuiDismissalPeriodInDays - Should your website visitors click the 'not now' link in the Vui call to action pop-up, then they wont be prompted again on subsequent visits for this period of days.
• AutoEnabled - Set this option to true if you want Vooi to scrape your screens for voice commands.
• SiteSearchFieldId - If your website has a site search field that you want to voice enable using this plugin, add the HTML ID of your search field to this parameter and Vooi will do the rest.

 

A typical set of parameters is outline below:

"brand": "360Jungle",
 "theme": "green",
 "desktoponly": false,
 "wakeword": "ok",
 "sleepword": "goodbye",
 "accuracypercentage": 90,
 "vuictadismissalperiodindays": 30,
 "autoEnabled": true,
 "siteSearchFieldId": "siteSearch"

 

The following is a typical, complete set of parameters for this Javascript / Jquery voice plugin:

{
  "brand": "360Jungle",
  "theme": "green",
  "desktoponly": false,
  "wakeword": "ok",
  "sleepword": "goodbye",
  "accuracypercentage": 90,
  "vuictadismissalperiodindays": 30,
  "autoEnabled": true,
  "siteSearchFieldId": "siteSearch",
  "actions": [
  {
    "type": "redirect",
    "phrases": [
    "home",
    "home page",
    "go to home",
    "go to home page"
  ],
  "intent": "/"
  },
  {
  "type": "redirect",
  "phrases": [
  "pricing",
  "I want prices",
  "how much does 360jungle cost",
  "show me prices"
  ],
  "intent": "/#howmuchdoes360junglecost",
  "accuracypercentage": 90
  },
  {
  "type": "redirect",
  "phrases": [
  "show me a demonstration",
  "can I see a demo",
  "show me how your virtual tours work"
  ],
  "intent": "/virtual-tour/25",
  "accuracypercentage": 90
  },
  {
  "type": "scrolldown",
  "phrases": [
  "scroll down",
  "move down",
  "go down",
  "down"
  ],
  "intent": "scroll",
  "accuracypercentage": 100
  },
  {
  "type": "scrollup",
  "phrases": [
  "scroll up",
  "move up",
  "go up",
  "up"
  ],
  "intent": "scroll",
  "accuracypercentage": 100
  },
  {
  "type": "back",
  "phrases": [
  "go back",
  "back",
  "move back"
  ],
  "intent": "back",
  "accuracypercentage": 100
  },
  {
  "type": "pagetop",
  "phrases": [
  "go to top",
  "goto top",
  "top"
  ],
  "intent": "pagetop",
  "accuracypercentage": 100
  },
  {
  "type": "pagebottom",
  "phrases": [
  "go to bottom",
  "goto bottom",
  "bottom"
  ],
  "intent": "pagebottom",
  "accuracypercentage": 100
  }
  ]
}

 

Get Vooi to Dial Your Number

If Vooi is used by your website visitors on their mobile phone then you can easily have Vooi use the phone to give your business a call.  To do this you just need to add a hidden link to all your website pages as follows:-

<a style="display:none;" href="tel:+1422345678" data-vui-phrases="call 360jungle|dial 360jungle|call 360 jungle|dial 360 jungle">call 360 jungle</a>

 

How to Implement this Free Voice Control Plugin on Your Website

You can implement Vooi onto your website in 4 easy steps:

• Copy the files in the Production folder in Git into a folder called 'vui' at the top level of your website.
• Add a link to the <head> tag of your website to the vooi.min.css file i.e. <link rel="stylesheet" href="/vui/vooi.min.css">
• Add a link at the bottom of your <body> tag to the vooi.min.js javascript file i.e. <script src="/vui/vooi.min.js"></script>
• Underneath the link to the javascript file, initiate Vooi on every page of you site as outlined below, passing in your custom parameters + actions to control the basic scroll and paging functions:

 

<script>
 vooi.Init({"theme":"green","desktoponly":false,"wakeword":"ok","sleepword":"goodbye","accuracypercentage":90,"vuictadismissalperiodindays":30,"autoEnabled":true,"siteSearchFieldId":"siteSearch","actions":[{"type":"redirect","phrases":["home","home page","go to home","go to home page"],"intent":"/"},{"type":"scrolldown","phrases":["scroll down","move down","go down","down"],"intent":"scroll","accuracypercentage":100},{"type":"scrollup","phrases":["scroll up","move up","go up","up"],"intent":"scroll","accuracypercentage":100},{"type":"back","phrases":["go back","back","move back"],"intent":"back","accuracypercentage":100},{"type":"pagetop","phrases":["go to top","goto top","top"],"intent":"pagetop","accuracypercentage":100},{"type":"pagebottom","phrases":["go to bottom","goto bottom","bottom"],"intent":"pagebottom","accuracypercentage":100}]}); 
</script>

 

Download Vooi

You can download this free javascript voice user interface from Github by clicking the link below.

Download Free Voice User Interface Plugin