Wizard, short for Wizard of Oz, is when you want a human operator to trigger certain actions instead of have automatic triggers like user speech and engagement. This is extremely useful in the early stages of building a skill, when you haven't yet invested in testing the skill with users to make sure your NLU model is solid. Wizarding also comes in handy for skills when you for other reasons want to manually move a skill forward, for example a stage presentation where you want something more robust than voice activation.

Wizarding is easiest done by defining a button/button handler in the flow. The buttons will then appear in the dashboard page in the web interface.

Note: In some scenarios you might need more customization than offered with this built-in wizarding tool. For these cases, we recommend creating a custom wizarding GUI (see GUI docs).

Adding buttons

Buttons and button-handlers are added simultaneously through the onButton handler available in any state. Buttons have a few important properties:

  • They are state-dependent similar to other handlers. I.e, a button will only show if you are in the state where you defined the button, or in any state inheriting this state.
  • They can be overridden by providing the optional id parameter to both buttons. A child state's button will always override a parent state's button if they have the same id. An button that overrides another button will stay in place of the overridden button for operator convenience.
  • They can be defined explicitly by creating a button and adding it to an onButton handler or implicitly by directly defining an onButton handler.

Buttons can be defined implicitly through the onButton handler as in the following example (also showing how to override a button):

val ParentState = state {
    onButton("myOverriddenButton", id="123") {
    // will be overridden when in MyState since the buttons have the same id

val MyState = state(ParentState) {
    onButton("My New Button", id="123") {
      // This will override the previous MyButton when we are in this state

    onButton("My Other Button", Color.Red, size = Size.Small){
      /* Creates a new small red button with the label "My Label".
      *  All fields are optional, and you may optional use the tags
      *  label = , color = , and size = .

The below example shows how to explicitly define a button and then add it to the onButton handler, as well as how to reuse the same button formatting by assigning new buttons as copies of an existing button. When doing this, the copy will always get a new id unless the id is set.

val myButton = Button("My First Button", Colour.Red, Size.Mini)
val myOtherButton = myButton.copy(label="My Other Button")

val parentState = state {
  onButton(myButton) {
    // ...

  onButton(myOtherButton) {
    // will get the same properties but a new label and a new id

  onButton(myButton.copy(label="My Third Button", color=Color.Blue)) {
    // will get the same properties but a new label, color and id