Voice Websites Rock

Getting Started # back to top

CDN Link for library : https://cdn.jsdelivr.net/npm/active-intent@latest/activeintent.js

How to install # back to top

• How to integrate library on any web page.

1. Add the library before any other code. Make sure to include your activation key.

<script
            id="ActiveIntent"
            activationKey="YOUR_ACTIVATION_KEY"
            src="https://cdn.jsdelivr.net/npm/active-intent@latest/activeintent.js">
</script>

2. Define the intents and initialize the library.

<script>
            //Define the Intents
            let intents = [
                {
                    name: "HelloWorldIntent",
                    phrases: ["hello", "say hello", "say hello world"],
                },
                {
                    name: "AboutIntent",
                    phrases: ["what this is about", "about", "say about", "what is this"],
                    type: "speak",
                },
                {
                    name: "ClickIntent",
                    phrases: ["click on", "click", "go to"],
                    type: "action",
                {
                    name: "ArticleIntent",
                    phrases: ["what are the stories", "stories", "articles"],
                },
            ]
            //Intialize the Active Intent with the intents
            new window.ActiveIntent.default(intents);
</script>

How to use # back to top

• Manage Intents

Create a list of intents with different expected phrases which user may use as voice command.

There are two types on intents,

1. Speak – with this type of intent, user can make specific content speak able when the intent matches with the intent specified in HTML content tag. 2. Action – with this type of intent, user can navigate to different pages of the application using voice enabled commands.

2. Action – with this type of intent, user can navigate to different pages of the application using voice enabled commands.

Here’s the sample of intents data written in json format.

<script>
            //Define the Intents
            let intents = [
                {
                    name: "HelloWorldIntent",
                    phrases: ["hello", "say hello", "say hello world"],
                },
                {
                    name: "AboutIntent",
                    phrases: ["what this is about", "about", "say about", "what is this"],
                    type: "speak",
                },
                {
                    name: "ClickIntent",
                    phrases: ["click on", "click", "go to"],
                    type: "action",
                {
                    name: "ArticleIntent",
                    phrases: ["what are the stories", "stories", "articles"],
                },
            ]
            //Intialize the Active Intent with the intents
            new window.ActiveIntent.default(intents);
</script>

• To make content voice enabled, add magic=”speakable” property in respective tag.

  <p magic="speakable">
        Like most entrepreneurs, I struggled through my first year of building business.
  </p>

After adding the property, this is how it’ll look on the webpage.

Like most

• To make content clickable through voice commands, add og-intent='ClickIntent' property in respective link tag.

  <ul>
          <li>
                <a href="/products.html" og-intent="ClickIntent"> Products </a>
          </li>
          <li>
                <a href="/devices.html" og-intent="ClickIntent"> Devices </a>
          </li>
  </ul>

For the click intent, phrases can be modified in intents.json

{
      name: "ClickIntent",
      phrases: ["click on", "click", "go to"],
      type: "action",
}

• To make the website respond to certain phrases define the intent with the expected phrases and link the content with the intent with “og-intent” property.

{
      name: "AboutIntent",
      phrases: ["what this is about", "about", "say about", "what is this"],
      type: "speak",
}

<div og-intent="AboutIntent" hidden>This is voice enabled website.</div>