How do I create Flows? – Spekit Help Center

SKIP AHEAD TO:

Learn how to create a Flow. Make sure you have the Chrome Extension installed and are logged into Spekit to begin. You must have Account Admin, Team Admin, or Expert permissions to create Flows.

How to create a Flow

1.) Navigate to the site and page you’d like a Flow to appear, and click the Spekit Dock or the Spekit icon to open the Spekit sidebar.

2.) Click the Create button.

3.) Click Flow to start the recording.

Screenshot 2023-11-06 at 8.44.54 AM.png

4.) A pop-up screen with instructions will appear on the page. Click Create Flow, and the 3-second countdown will initiate.

Navigating the Flow Creation Options

When recording a Flow, you will have a couple of

Utility Bar
Pause a Flow Recording
Delete

Utility Bar

The utility bar serves as the remote controller and provides information while recording. You can pause, stop, preview, save, or discard a Flow at any time. The utility bar will also show you many steps you've created and provide you quick access to Spekit's Help Center.
There are cases where the utility bar can obstruct the view of an element on the page. If this occurs, simply hide the utility bar from the capture controls.
- Click on the Hide tab to collapse the utility bar, and click Show to unhide.

Pause a Flow Recording

Click on the Pause icon at the bottom right of the page while recording a Flow.
Example: You want your users to update a required field in a form. You may need to pause the Flow to fill in the field before continuing to the next step.

When the Flow creator clicks on the Pause button, the Flow will pause. You will be able to interact with the page normally until you click Resume Step Creation.

Delete

You can delete a Flow by clicking the Delete icon at the bottom right of the page while recording a Flow. Click to learn more about deleting a Flow.

Creating Flow Steps

1.) You can now hover over elements on the page. A green box will encompass an element on the page that you can make a Flow step. When you are ready to create the first Flow step, click on the element.

2.) The Step Creator will pop up, this will help you create the Flow step. Fill in the following information:

Description: What is happening in this step? Add guidance on what you want your users to do or understand at this step.
Next Step Trigger: What do your end users need to do to trigger the next step?
- Click Specific Element: This step type guides users on a specific path in your application.
  - When to use: Use this when you want your end users to click on a specific button, tab, or record in the experience.
  - Example: You want your users to click on the Opportunities tab in Salesforce.
- Click 'Next' Button: This step type allows your users to learn about or engage with areas of the web application.
  - When to use: Use this when you want your end users to get familiar with parts of a page (product tour), or fill out form field(s).
  - Example: You want your users to read and update Salesforce fields. Use the Click 'Next' Button Trigger and in the description add guidance on what you would like users to do during this step, aka reading and updating Salesforce fields.
  - NOTE: Optionally, you can choose to highlight the selected element which will grey out the rest of the page for the end user.
- Click Any Element: This step type allows you some flexibility in how you guide users through the application.
  - When to use: Use this step type for more complex scenarios, like when you want your users to navigate to non-specific records (ex, the account that they actually need to update rather than a generic demo account), navigate multi-level hover menus or use a search bar to navigate through an application.
  - Example: You want your users to open one of their Salesforce opportunities in the Flow. Use the Click Any Element Trigger and in the description add guidance on where the user should click, aka their Salesforce opportunity.

Click here to see some examples of when customers should use each step type

💡 Pro Tip: You can move the position if it is blocking any important information that your end users may need to reference. Click the four arrows button in the left-hand corner to see the available locations for the step around the selected element and adjust the position. To learn more, click here.

3.) When all of the information is filled out, click Save Step. It is important to note that depending on the Next Step Trigger your creation process may vary:

Click Specific Element:
- If the element you selected was a link, you will be directed to the link destination. If you selected a form field or the entry point for a menu - the menu or form field will open. Continue creating the Flow by following steps 1 through 3.
Click 'Next' Button:
- You will NOT be directed to a new page, even if you clicked on a link or navigation item. You will now be able to create steps again on the same page. Continue creating the Flow by following steps 1 through 3.
Click Any Element:
- After saving the step, you will have one 'free click' to navigate to where you want to continue creating steps. Navigate to where you want to go, then continue creating the Flow by following steps 1 through 3.

Previewing a Flow

1.) Now that you have finished creating the steps for your Flow, let's preview the Flow. Click the Save and preview button to preview your Flow.

2.) A preview of the Flow will appear. From here, you will be able to walk through the Flow you have created to see what end users will experience. As you go through the flow steps, you are also able to make edits to the step description and step position by selecting 'Edit step' from the step preview.

While previewing the Flow, you will be able to Edit a Step, Add a Step (After the Current Step), Restart the Flow, Delete the Flow, or Go to the Help Center.
- To Edit a Step, click on Edit Step in the Flow preview. You will be able to update the step description.
- 1.) To Add a Step (after the current step), click the Plus sign in the bottom right-hand corner.
- 2.) To Restart the Flow, click the Restart Flow button in the bottom right-hand corner.
- 3.) To Delete the Flow, click the Delete button in the bottom right-hand corner
- 4.) Need help? Click the Question Mark to access the Help Center.

3.) Once you are done previewing and editing the Flow, click Save and Continue. This will redirect you to the Spekit Web App Flows page to configure the rest of your Flow settings and publish.

Configuring the Flow

1.) In the Spekit Web App, an editing pop-up will appear. Click Edit.

2.) Here you can configure the following sections:

Overview
Launcher
Publish & Share Settings
Flow Finisher

Overview

You will be able to make the following edits:

1.) Title: Update the title of the Flow. This is what your users will search for, see in the Flows list or toolbar, and when they're viewing a Flow.

Launcher

You will be able to make the following edits:

1.) Headline: Update the heading.

2.) Message: Add a message to give your users more insights into what the Flow is about.

3.) Image: Upload a relevant image.

4.) Video: Upload a relevant video.

5.) Click the three dots for additional media edit options as shown in the image.

Publish & Share Settings

You will be able to make the following configurations:

1.) Audience: You can change the audience for a Flow so it only appears for selected teams. Example:

2.)Appears: Choose whether the Flow should automatically launch to your selected audience.

If this setting is turned on, the Flow launcher will appear when end users visit the starting URL. The user will have the option to snooze the Flow for 24 hours and will be shown the Flow again when they visit that page until they complete the Flow.
If this setting is off, end users will be able to access the Flow through a share link that can be embedded in a Spek or as the CTA for a Spotlight, or they can find it at any time using the search functionality.

💡 Pro Tip: If you want to automatically direct users to a flow from a different URL than the starting URL, create a Spotlight, and set the Spotlight button action to the Flow share link (available after publishing).

Flow Finisher

This is what your target audience will see when they complete a Flow. You will be able to make the following edits:

1.) Heading: For example, in the image below ‘Great job!’.

2.) Message: Add more details here.

3.) Image: Upload a relevant image.