Designing

How to design your assistant on Voiceflow.

Talk Steps

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

Overview

The Talk 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 voice-based 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. The audio will play from your default audio output device. On first play, it may take a few seconds to render.

You can stop the playback at any time by navigating and clicking your cursor to the previous area as the Play button, which will now have 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.

Note: Depending on your project-type (ie. if you are using One-Click Publish projects) you may have a limited selection of TTS voices available for that project.

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.

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 icon & dropdown.

There are many components of SSML & properties you can add to your speech as effects such as Break, Volume, Speed/Rate, Emphasis and even Whispers! You can use the 'Search effects' bar in this menu to find your desired speech effect.

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.

Visual-View of Variants on Canvas

Once your variants are confirmed, you will notice that you can also visually preview them from the Canvas-level. By default, your variants will nest under a preview modal with the dice icon appearing in the Speak step. In this modal, you can quickly edit or copy those responses.

To instead display all the variants (as opposed to the preview view), you can change your Canvas Visibility setting under the settings icon located to the left of the Add Variant section in the Speak Step menu. You can toggle between Show preview and Show all variants, while also setting which option you desire as the default for all your speak steps on Canvas.

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 Talk section of the Steps Menu.

To configure your Text Step, you can type what you want your assistant to respond/display to your user in the text input field.

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

Adding Markdown & Message Delay

You can style your text formatting using the Bold, Italics, Underline and Strikethrough options provided. Additionally you can embed a hyperlink in your text! These options are all available in the editor options under the Text editor.

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

You can also configure Message Delay (measured in MS) by clicking the icon at the right-most of the Text editor menu.

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 (1) in the editor's footer. If you have variants added to your Text Step, one of the variants will be sent/played at random when the step is hit in your project.

Visual-View of Variants on Canvas

Once your variants are confirmed, you will notice that you can also visually preview them from the Canvas-level. By default, your variants will nest under a preview modal with the dice icon appearing in the Text step. In this modal, you can quickly edit or copy those responses.

To instead display all the variants (as opposed to the preview view), you can change your Canvas Visibility setting under the settings icon (3) located to the left of the Add Variant section in the Speak Step menu. You can toggle (4) between Show preview and Show all variants, while also setting which option you desire as the default for all your text steps on Canvas.

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 by directly uploading to Voiceflow on the 'Upload' tab, via drag & dropping the audio or browse upload.

Alternatively you can also add audio by entering the stream URL that hosts the audio file.

To stream audio by URL, ensure the URL is functioning correctly and allows for streaming. You can then navigate to the 'Link' tab in the respective Audio variant in the Audio step. You can also use a variable (using '{' ) to host the stream link to make your audio feeds more dynamic.

Previewing Audio

Once your audio uploads successfully into your Audio step, you can press play by the audio file to preview and listen to the audio.

Adding Variants

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

Visual-View of Audio Variants on Canvas

At the Canvas-level, you can actually also preview your audio directly from the step. Just navigate & hover over to the note icon by the uploaded audio, and press Play.

Once your variants are confirmed, you will notice that you can also visually preview them from the Canvas-level. By default, your variants will nest under a preview modal with the dice icon appearing in the Audio step.

In this modal, you can quickly edit the audio file sources or copy those hosted audio links, generated by Voiceflow.

To instead display all the variants (as opposed to the preview view), you can change your Canvas Visibility setting under the settings icon (3) located to the left of the Add Variant section in the Audio Step menu. You can toggle between Show preview and Show all variants, while also setting which option you desire as the default for all your Audio steps on Canvas.

Image Step

The Image 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 Image 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 Image Step, ensure you navigate inside an Image 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. You will also notice that your uploaded file has an auto-generated hosted image link by Voiceflow.

Once your image is uploaded, you will notice that the preview modal on the Canvas-view updates and resizes to the image properties. You can also hover over the image to preview the image in full-sized view.

You can also use a link directly with the image hosted and paste it directly on the 'Link' tab. You can also use a variable (using '{' ) to host the image link to make your image feeds more dynamic.

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.

Tip: You can also use the Card step as a visual prompt to present users with Buttons to guide the conversation.

Chat Assistant Projects

To get started with the Card Step for chat assistant projects, ensure you navigate inside a Card 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. You will also notice that your uploaded file has an auto-generated hosted image link by Voiceflow.

Once your Card Image is uploaded, you will notice that the icon on the Card step canvas-view will update to your Card image preview.

You can also use a link directly with the image hosted and paste it directly on the 'Link' tab. You can also use a variable (using '{' ) to host the image link to make your card image feeds more dynamic.

Card Title & Card Description

You can also give your Card a Title and an associated Description. In each of these fields, you can also use variable(s) (using '{' ) to make your card text fields more dynamic and personalized. And similar to Text steps, descriptions support markup styling. 

Adding Buttons to Cards

You can configure & add paths to your Cards and present the end-user with Buttons. You can click the (+) by the Buttons section to add Buttons and configure the Button label (with text or variables).

Cards support an unlimited number of buttons (though we recommend max 3-5). For now, card buttons can only be connected to conversation paths.

Unlike the Button Step, Card buttons persist after the user’s initial interaction. This means they will remain active, and the user may return to the Card during their session and make another selection. 

Alexa/Google Projects

For Amazon Alexa or Google Assistant projects, 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.

Carousel Step

The Carousel Step lets you display a selection or gallery of cards to your end users via a carousel or list.

Cards support multiple modalities and can be configured with any combination of image, title, description and buttons. You can access the Carousel Step under the ‘Talk’ bucket in all custom Chat projects. 

Configuring a Card

Once you’ve added a Carousel Step, add the elements you want displayed in your card. This process is similar to the Card step.

For Visuals, you can upload or link an image or GIF. Upon upload, a preview of your file will show in the editor and canvas. Variables can be added to the Title and Description for personalization. And similar to Text steps, descriptions support markup styling. 

Adding Buttons

You can configure & add paths/call-to-actions to your Cards and present the end-user with Buttons. You can click the (+) by the Buttons section to add Buttons and configure the Button label (with text or variables).

Cards support an unlimited number of buttons (though we recommend max 3-5). For now, card buttons can only be connected to conversation paths.

Unlike the Button Step, Carousel buttons persist after the user’s initial interaction. This means they will remain active, and the user may return to the Carousel during their session and make another selection. 

Tip: You can use persistent Carousel buttons to ensure important information like disclaimers or privacy policies is always accessible to your users. 

Adding Multiple Cards

To add more cards and to provide a gallery/carousel view to your end users, hit ‘Add Card’. You’ll see a new template under your current card.

Display Options

Cards can be displayed as horizontal carousels (default) or vertical lists. To change the orientation, open the step’s settings menu. Under ‘Buttons layout’, choose your desired option: Carousel or List.

Note: Choosing ‘Set as Default’ will apply your selected option to net new Carousel Steps you add to canvas.

No Match/No Reply

You can also configure No Match or No Reply to handle scenarios where your user does not behave with your carousel as expected. To do so, open the step’s settings menu and select your desired No Match and/or No Reply.

Tip: You can configure the No Match/No Reply variant responses and/or add an error handling path.

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.

Stream Step (Google & Alexa)

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 (Dialogflow)

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 Talk section in the sidebar for Dialogflow projects.

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