Documenting

Features and functionality that allows you to turn your design into a communication tool for your team.

Canvas Markup

An overview on how to add additional context to your projects using image and text markup.

Overview

There can be a lot of moving parts and layers of communication involved when building out conversational experiences.

As with many conversation designers, you will quickly realise the importance of leaving markup or additional context to a section in your design, as you're collaborating with fellow designers, stakeholders or even returning to a design with yourself.

The flexibility is on your hands, Designer! Let Canvas Markup be the perfect companion in your conversation design process to make your workflow easier & smoother. 

Note: this would be more interactive engagement across designer(s) and more involved, rather than simply communicating with stakeholders using Commenting features on Voiceflow.

This means on Voiceflow, Canvas Markup lets you annotate project designs so your team has all the necessary context, in the way that works best for your team. This could include additional information on technical requirements, visual aids to illustrate the conversation flow and more!

A big win for when you’re jumping into complex projects for the first time. By streamlining this feedback process, fellow editors/designer or stakeholders can now spend less time flipping between documents and more time pushing your experience from build to publish.  

And for individual users, Canvas Markup provides the freedom and flexibility to brainstorm ideas, create mind maps, build user personas and contextualize your projects. A perfect way to use creative expression to support your vision.

Canvas Markup

Leveraging Canvas Markup on Voiceflow is the easiest way to leave visual elements or notes, signals/symbols or feedback on your Voiceflow design.

Canvas Markup helps you consolidate a great deal of contextual information directly on the Canvas. You can use Canvas Markup to communicate user interactions, indicate revisions, link to key documents, and provide the context stakeholders need to flesh out your voice experience from a bird’s-eye view.

Note: Canvas Markup is purely for communication purposes across designers, editors & stakeholders on-canvas, on-tool.  You should note that any Canvas Markup does not relate to or impact the conversation flow or actions, and it's purely visual.

Broadly speaking, markup comprises a set of symbols, or a language, that can be used to provide instructions. In the context of Voiceflow:

• Import images and resize, rotate and move them anywhere on the canvas
• Add text using custom fonts, weights, decorations or color
• Hyperlink to important documents and resources

Text and Links

You can add, modify and hyperlink Text markup on Voiceflow.

Adding Text MARKUP

To add a simple text message on the canvas, access Text mode (or keyboard shortcut T) in the project’s top menu.

You will notice you are in Text mode when you navigate to a blank area in the canvas and notice your cursor icon changes into an I-cursor or typing symbol icon.

Once you’re in Text mode, click the area of the canvas where you want to add text and you can type your text markup as you desire.

MODIFYING Text MARKUP

To modify existing text, click into the desired text field on Canvas; you can modify your text markup with keyboard-input, edit, re-format or delete as desired.

You can also style your text using the options available in the Text Markup Editor, on the right-hand side of the tool.

ADDING LINKS TO Text MARKUP

Similar to other text editors, you can add links by selecting the text you want to display as the hyperlink. You can then hitting the link icon in Text Markup Editor (or keyboard shortcut CMD/Ctrl + K). Input your desired link and hit enter.

Images

You are also able to add images in your Canvas Markup on Voiceflow; anything from images, visual elements, graphics, screenshots and much more.

To add images to the canvas, click the Image icon (or keyboard shortcut-I) in the project’s top menu. Choose the image you wish to add to the canvas and hit Open in your system dialog.

You can drag and resize images as necessary. Hover and click over a desired image to trigger resizing controls.

To remove an image, simply hit [Del] on your keyboard. You can also right click on the desired Image markup, and Delete, Duplicate or Copy.

Other docs in this section