Speech-enable your app

Speech-enabling your app means that when you initialize the Dragon Copilot SDK, your app responds to voice commands, users can dictate into edit controls using Dragon Copilot's dictation functionality, and/or users can start ambient recording.

You'll need to add the Dragon Copilot script to your page and define the set of speech-enabled edit controls.

Add the Dragon Copilot SDK to your page

Location of the CDN script: https://download.microsoft.com/download/9618a2a2-0d23-4587-aab6-2474fd8dd210/dragon-copilot-sdk-mainline.js

The mainline script is the current, officially supported version.

<script src="https://download.microsoft.com/download/9618a2a2-0d23-4587-aab6-2474fd8dd210/dragon-copilot-sdk-mainline.js"></script>

When you add the Dragon Copilot script to the page, the dragon object is available on the window reference.

Define the set of speech-enabled edit controls

By default, the following elements on your web page are speech-enabled:

  • <input> controls with type="text" (the default value).
  • <textarea> controls.
  • <div> elements with the HTML5 contenteditable attribute.

For instructions on how to speech-enable non-native controls, see: Speech-enable custom controls.

HTML data attributes

Add the following data attributes to elements on the page to enable/disable speech recognition, enable named field navigation, and support the custom control API:

  • data-dragon-container - apply to a container element to speech-enable the elements within it.

    <div data-dragon-container="my-container"> <input type="text" /> <!-- speech-enabled --> </div>

    To speech-enable or disable a container during application runtime, add the data-dragon-enabled attribute with an identifier for the container. The Dragon Copilot SDK will detect the change.

    You can add multiple containers with different IDs, and also use give multiple container elements the same ID to split a single container between multiple places on the page.

    The example below shows container-one with two text controls (input and textarea) and container-two with one text control (input).

    <div data-dragon-container="container-one">
   <input type="text" /> 
</div> 
<div data-dragon-container="container-two"> 
   <input type="text" /> 
</div>
<div data-dragon-container="container-one"> 
   <textarea></textarea> 
</div>

    Important

    Don't nest containers. This can cause unexpected results.

  • data-dragon-enabled="false" - exclude specific elements (controls and containers) from speech recognition.

    <div data-dragon-container="my-container">
   <!-- NOT speech-enabled --> 
   <input type="text" data-dragon-enabled="false" /> 
</div> 
<div data-dragon-container="other-container" data-dragon-enabled="false"> 
   <!-- NOT speech-enabled --> 
   <input type="text" /> 
</div>

  • data-dragon-enabled="true" - speech-enable specific elements that would otherwise be excluded by default. This includes:

    <input> elements with type="search" and type="number". This isn't needed for <input> elements with type="text", as these are already speech-enabled by default.

    Controls with the disabled attribute or the CSS properties visibility:hidden or display:none.

  • data-dragon-concept-name - identify a control for named field navigation.

    This enables a user to navigate to a specific control using the go to voice command. Add data-dragon-concept-name to the control and set its value to the field name that the user should say. For example, if you name a control using data-dragon-concept-name="medical history", the user can say go to medical history to move the text cursor there.

    <div data-dragon-container="my-container">
   <input type="text" data-dragon-concept-name="medical history"/>
</div>

  • data-dragon-custom-control-type - used for the custom control API.

  • Last updated on