Creating a how-to guide with the Tango plugin in Chrome
Make how-to guides like this one in a snap.
CS

Colin Simpson

Created Feb 04, 2022

Creating a how-to guide with the Tango plugin in Chrome

387
    d

Google

1 Step
1

Getting Tango

Tango is a free plugin for Google Chrome that lets you create how-to guides by recording each step as you work through a process in the browser. You can install it from https://chrome.google.com/webstore/detail/tango-screenshots-trainin/lggdbpblkekjjbobadliahffoaobaknh

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
    l

Monash

10 Steps
2

Start your Tango session with the toolbar button

Click the Capture Workflow button to begin recording

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
3

Start the normal steps of the process that you want to create a guide for

Note the Tango icon in the top left corner and the green tick in the bottom left

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
4

Click on MEI3001 - Advanced MEIing

Tango will now take a screenshot every time you interact with the page and create a basic text description of what you have done

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
5

Click on Turn editing on

It will also highlight any buttons that you press

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
6

Click on …

Tango can't always describe what you have done, so there is some editing required afterwards. 

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
7

When you have finished the process, click the green arrow in the bottom left

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
8

This will take you to the editing screen for your guide

Here you can edit the auto-generated descriptions for each step and edit or change the screenshots if needed. 

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
9

You can also insert additional steps as required by click the + button

This is particularly useful for capturing instructions about using non-browser software. It requires manual creation and editing of screenshots though. 

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
10

You can then drag and drop next steps around in the table of contents

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
11

Like so

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
    d

Google

2 Steps
12

When the guide is complete, you can either share it as an interactive webpage

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
13

Or Download a PDF version

Please note that there is a watermark on each image if using the free version

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
Well done!
Create how-to guides like this in a snap. Get Tango now.