Building Widgets

Conversations using Violet’s Conversation Flow Language consist of html-based elements. Applications can create a set of elements - called widgets - to add support for additional behavior.

Basic Widgets

Creating a basic widget is straightforward. For example, if you want to create a widget - called display - which checks the current request to find out the involved device and appropriately displays the content of the widget.

Implementing this can be as simple as adding:

FlowScriptCompiler.registerWidget({
  name: 'display',
  impl: (response, flowScriptDoc, elNode)=>{
    // check request by accessing `response`
    // access widget contents using: elNode.contents()
  }
});

Now a Voice designer can right a script as:

<!-- within a choice element -->
<expecting>How many requests came in</expecting>
<say>There were [[app.getRequestCount()]] requests</say>
<display><!-- send display contents --></display>

Some widgets that have been used in projects include pause and chart.

Leveraging attribute values

Widgets can customize their behavior based on attributes set of the element. As an example, the say widget supports the attributes quick (for not adding a pause automatically) and keepConversationRunning (to make sure that the system listens to what the user is going to say next).

Support for attributes can be implemented in the implementation of the widget by calling the hasAttrib method on the element’s node.

As an example, the say widget is implemented as:

FlowScriptCompiler.registerWidget({
  name: 'say',
  fNonNestable: true,
  impl: (response, flowScriptDoc, elNode)=>{
    response.say(elNode.contents(), elNode.hasAttrib('quick'));

    if (elNode.hasAttrib('endConversation')) response.endConversation();
    if (elNode.hasAttrib('keepConversationRunning')) response.keepConversationRunning();
});

Supporting nested CFL

Widgets can benefit from having other elements within their content. This is supported by having widget developers call the resolveElementChildrenForOutlet method within their implementation.

For more sophisticated use cases, widget developers can hook the init method, let the FlowScriptCompiler first load and then compile the contents.

Building templates

Widgets can be taken a step further and be used to create templates. Templates are widget factories, and using them allows developers to use the same same customizations in multiple locations in a conversational flow.

An example of a template is violetList which on instantiation is customized with the list type and how a user would want to interact with the list.