Designing

How to design your assistant on Voiceflow.

Response Steps

An overview of the Steps used to design your assistant's responses.

Overview

The Response Steps are the fundamental building blocks in designing and creating the ideal user experience in your conversational experiences.

They are available on each project type can be used to have your assistant interact with a user, whether that is through Speech, Text, Audio or Visuals. This will be the primary form of content used to design within your projects.

Note: Depending on project-type (Chat or Voice) your primary form available for Response Steps will change. For Voice Assistants, you will be utilizing Speak Steps and for Chat Assistants you will be using Text Steps.

Speak Step

The Speak Step is used to make any voice-based project type speak using text-to-speech. This is what your user hears or sees as a response from the conversation experience. To configure your Speak Step, you can type what you want your assistant to say in the text input field.

Tip: Once you inputted the speak response content desired, you can add audio and SSML (Speech Synthesis Markup Language) effects.

Previewing your Speak Step

You can preview how your Speak Step will sound by clicking the Play button in the bottom-left corner of the text input field.

You can stop the playback at any time by navigating and clicking your cursor to the previous area as the Play button that has now changed as a Stop button during Speak step preview playback.

Selecting a Text to Speech (TTS) Voice

You can select and configure which TTS (Text to Speech) voice you want to use (Alexa, Google and Microsoft TTS voices are currently supported).

Tip: You can set the default voice for your project by clicking the Star (★) icon next to that voice, or by selecting it on your Projects Settings page.

Setting a default voice will not retroactively change selected voices, only change the default setting for future Speak steps. You can have multiple voices within a project alongside a default voice.

Applying Speech Effects or SSML (Speech Synthesis Markup Language)

In Conversation Design, SSML (Speech Synthesis Markup Language) is commonly referenced as ways to alter speech and speech synthesis. There are many components of SSML and properties you can add to your speech as effects such as Break, Volume, Speed/Rate, Emphasis and even Whispers!

You can apply and add the SSML effects available on your desired Speech step(s) by typing in text (in appropriate SSML Syntax) by typing it in-line, or highlighting text and applying it using the Add Effect dropdown.

Adding Variants

Often, designers want to add a pleasant and user experience, and may want to use Variants. Variants are variations of the greeting/response steps that the user expects to receive in the specific section of your conversation experience.

Tip: If you have variants added to your Speak Step, one of the variants will be played at random when the step is hit in your project.

You can add a variant to the Speak Step by clicking the Add Variant button in the editor's footer. This way, you can enable and have your assistant randomly select and say one of your created Variants within the Speak step.

To display all the variants you have created on your project's canvas, you can change your Canvas Visibility setting under the '...' menu. To do this, click on the 3-dots options button at the bottom of the Speak step.

Text Step

Conceptually, you can think of this as it is the replacement of the Speak step for all Chat Assistant projects, found in the Response section of the Steps Menu.

To configure your Text Step, you can type what you want your assistant to write in the text input field.

Tip: For Chat Assistant projects, you can design formatted Text responses using the Text Step.

Adding Markdown

You can style your text formatting using the Bold, Italics, Underline and Strikethrough options provided. Additionally you can embed a hyperlink in your text!

Tip: Hyperlinking allows your assistant to have functionality such as opening a URL, calendar link, mailto, phone call and many more!

Adding Variants

Similar to Voice Assistants, adding variations in your response steps allow for a unique and interactive conversation. Variants are variations of the greeting/response steps that the user expects to receive in the specific section of your conversation experience.

Tip: If you have variants added to your Text Step, one of the variants will be displayed at random when the step is hit in your project.

You can add a variant to the Text Step by clicking the Add Variant button in the editor's footer. If you have variants added to your Text Step, one of the variants will be played at random when the step is hit in your project.

To display all the variants you have created on your project's canvas, you can change your Canvas Visibility (3) setting under the '...' menu.

Audio Step

The Audio Step allows you to add short audio files that are less than 240 seconds in length to your voice projects.

Adding Audio

Audio can be added either by directly uploading to Voiceflow, or by entering the stream URL that hosts the audio file.

You can also use a variable to host the stream link to make your audio feeds more dynamic.

To stream audio by URL, ensure the URL is working properly and allows for streaming. Then click on the link button in the top right of the "add audio" section of the Audio Step Editor.

Adding Variants

Similar to Text and Speak steps, you can also add variation to your Audio Steps to add sophistications to your conversation design.

To add a variant to the Audio Step by clicking the Add Variant button in the editor's footer. If you have variants added to your Audio Step, one of the variants will be played at random when the step is hit in your project.

To display all the variants you have created on your project's canvas, you can change your Canvas Visibility setting under the '...' menu.

Visuals Step

The Visuals Step allows you to include Images and/or GIFs in your voice and chat projects.

  • For chat-based projects, your visuals will show up as in-line visuals within the chat dialog.
  • For voice-based projects, your visuals will appear on your devices screen, in parallel with the voice-based interactions.
Note: The Visuals Step allows for the display of visuals both in the prototyping view on the Custom Assistant channel, and on actual devices (ie. when designing for Amazon Alexa and Google Assistant channels).

Adding an Image

To get started with the Visual Step, ensure you navigate inside a Visual Step and have an intended Image or GIF to upload into your design.

Tip: You can add your desired Image or GIF by dragging-and-dropping it into the editor, or click Browse and select one from your computer.

Setting the Size

You can select one of three sizes options for your visual's frame:

  • Auto - will match the dimensions of any file you upload
  • Custom - you can input custom height and width
  • Device - select from a list of popular devices' dimensions

Canvas Visibility

Finally, you can select & configure how the visuals will appear on your projects canvas:

  • Actual Size - will render the full image
  • Small - will just show a cropped preview of the image
  • Hidden - will not show the image at all
Note: There is a difference between SizeCanvas Visibility appearance, as one is how your end user sees the image sizing and the other is around canvas organization, visibility and internal design, respectively.

Display Step (Alexa-Only)

The Display Step will allow you to create or upload visuals formatted in APL (Alexa Presentation Language), a visual design framework designed specifically for use on Alexa skills.

The Display Step allows you to build interactive voice and visual experiences across the Alexa-supported/enabled device landscape. This added experience can make skills more delightful and engaging to your end-user.

Note: For more information on Alexa Presentation Language (APL) navigate to the official APL Documentation from Amazon Alexa found here.

Display Type

There are two options available for adding APL visuals to your project:

  • Splash - allows you to quickly create text and visual assets
  • Advanced - allows you to upload and APL .json file that can contain visuals, animations and interactions

Creating a Splash Display

A Splash Display is the conversation designers' most seamless and quickest method to deploy APL on Voiceflow.

By inputting text, you can add a title or use a variable to display dynamic content. You can also drag-and-drop an image into the editor, upload an image from your computer!

Tip: You can also or provide a link/URL to an image to add the intended visual element by clicking the icon on the top-right corner. You can also use a variable to manipulate functionality by using '{'.

To preview the Splash Display, click the Create Preview button in the footer.

Adding an Advanced Display

The advanced function the Display Step for APL allows you to upload or use an APL template in your skill. This can allow you to leverage powerful functionality such as dynamically updating your project, in the APL setting.

You can use drag-and-drop to import an APL (.json file) into the editor to add it to your project. You can also create and export these APL .json files from Alexa's Authoring Tool.

Tip: Any data sources or commands that are outlined in your APL file will be shown in the editor. You can edit that information to include variables if you want to include dynamic data in your APL.

To preview the APL Display, click the Create Preview button in the footer.

For more advanced technical documentation on Alexa Presentation Language (APL) and to leverage Advanced Display, reference Voiceflow developer documentation on this topic here.

Card Step

The Card Step will allow you to provide some on-screen information in-line with the conversational experience & interface, either on a screen-based device or on mobile.

Note: The Card Step is currently available on Alexa, Dialogflow Chat & Google Assistant-type projects only

There are two type of cards you can create:

  • Simple - display plain text for the card Title and subsequent content (Card Text)
  • Standard - displays plain text, but also includes functionality to attach & display an image
Note: For Standard-type Cards, you can add the image to the display by dragging-and-dropping, selecting from your computer, on providing a URL for the intended image

Stream Step

The Stream Step allows you to unlock functionality of streaming longer-form audio on your voice project (over 240 seconds and/or live streams).

Note: The Stream Step is currently only available on Alexa & Google Assistant-type projects only.

The Stream step intakes long-form audio stream URLs or hosted audio URLs/assets. You can optionally set your audio asset to play on loop.

Using the Stream vs Audio Step

The Audio step should be used in the majority of cases versus the Stream step. The Stream step should be used for long-form audio content such as livestreams, podcasts and any other content over 2 minutes in length.

Note: On the back-end, The Stream Step is considered external to your voice app (Skill or Action) and configuration of the content or in-app actions are limited to the Approved Stream Actions.

Approved Stream Actions

As the Stream Step is considered external to the experience, only certain Intents are able to be invoked whilst playing and/or streaming. The approved Intents are Play, Pause, Next and Previous.

Note: On Alexa, if any other Intents are invoked while the Stream is active, the Skill will end. This is a restriction defined and set by Amazon Alexa, across all skill developers.

You are able to connect Next and Previous to other components of your project to guide the audio experience.

Setting Visuals for the Stream

Optionally, when your stream begins playing, you can define and set the visual elements that will be displayed on screen-based devices. This includes a stream Title, Description, Icon and Background Image.

Custom Response Step

The Custom Response Step will allow you to send customized JSON response to Dialogflow (DF) on all DF-type projects (ChatIVR/Voice). This step is found under Integrations section in the Sidebar.

Tip: The Custom Response Step allows you to implement response types that are not supported in Voiceflow, including the responses expected by any integrations configured on Dialogflow.

Any valid JSON will be included in the custom response array in the response sent back to Dialogflow.

Please visit the Dialogflow documentation for further information on the custom response formats they accept.

Other docs in this section