Designing

How to design your assistant on Voiceflow.

Adding Actions

How to attach Actions to Steps

Introduction 

Traditionally, too many design projects & documents are incredibly hard to read at a glance. This may be due to overwhelming amount of logic and navigation actions being done on the canvas.

When all blocks sit at the same level of visual hierarchy, it can be difficult to understand the difference between a conversation structure vs. the backend logic powering the assistant experience.

Actions introduces a simplified way create and visualize non conversational steps- creating a cleaner canvas & designing experience, and a better piece of design documentation.

As a Conversation Designer, you can now:

  • visualize the conversation structure & corresponding backend logic
  • communicate the relationship between steps on the Canvas
  • analyze corresponding backend logic as part of the Step’s nested details

As a Developer collaborator, you are able to:

  • differentiate conversation structure & backend logic so I can easily glean context
  • analyze corresponding backend logic as part of the Step’s nested details

Visualizing Step Actions 

Actions create visual context between the Steps in a conversation flow and corresponding navigation and backend logic. On canvas, Actions are shown as chips linked to the Step:

Which Steps support Actions?

  • Talk - Carousel (Chat)
  • Listen - Choice (Voice), Button (Chat), Capture
  • Logic - Condition
  • Event - Intent

Adding Actions

To link an Action to a Step, open up the Step’s editor.

Under the ‘Actions’ section, hit the + icon and choose the action you want to add.

Once you've configured your Action's details, it'll be viewable as a chip on the canvas. Click the chip to preview the Action's contents at a glance.

Modifying Actions

You can modify a Step’s existing Actions in the corresponding or respective Step's editor or directly on the Action itself.

Simply click into the action you want to change, navigate to the preview window and hit the pencil icon to make your edits. Alternatively, you can also go to the parent block with the Actions linked, and navigate to the Action you wish to edit.

Navigation Actions

Go to Block - Goes to a specific block referenced within the project

Go to Intent - Goes to an existing intent contained in the project

End - Ends the conversation at its current state

Backend Actions

Set Variable - Allows you to set and change the value of variables

Open URL - Supported on Button Steps. Lets you add or connect a Go-to URL & link-out from your selected Step.

API - Allows you to set up, configure and execute API calls & functions

Custom Code - Allows you to set up and code custom Javascript functions & commands

Other docs in this section