What are Flows?
A Flow is an interactive walkthrough of a process that guides a user through a series of steps and/or clicks on their screen. Flows can be used to introduce new users to a process, introduce or update procedures, showcase new software, or reinforce a process. By guiding users through a function, you will be able to onboard users faster, drive tool adoption, and reduce training efforts around new and existing processes.
Note: If you do not see the Flows tab in your Spekit, please contact your CSA or email support@spekit.co
Prerequisites, Pre-Capture Tips, & Best Practices
Prerequisites
- Flows only have confirmed capability with Salesforce.
- Flows may be used on other websites, but Spekit does not support Flows on other applications.
Pre-Capture Tips
- Set the web browser window to Actual size
- Set the web browser window to the maximum
- Refresh the web browser page
- When creating a Flow, be sure to click on static items to capture
- If you do not plan to use the utility bar, go ahead and hide it so the entire screen is visible when capturing
- For the overlays, the best practice is to use the Info Step when capturing
- We recommend using the Info Step for text fields and date fields
- Best practice is to create a Flow of 8 steps or less on average based on end-user drop-off research
- Be sure to use Preview for a Flow so it does not impact analytics
- Before starting to Preview a Flow, hide the utility bar
- Instead of clicking the radio button as an element grab the bigger element as an info step
- When creating a flow that has required fields make sure to fill them out (as info steps) before continuing
Flows Best Practices
Set your Flows up for success with our best practices guide. It covers:
- When to use Flows
- Supporting internal initiatives with Flows
- 6 ways to set your Flows up for success
Where to find Flows?
1.) Open the Spekit Web App.
2.) Click Team Hub, and select Flows to view the list of available Flows.
Viewer experience for Flows
Viewers can search and click to launch a Flow from either the Spekit Web App or the Spekit Chrome Extension sidebar.
From the Spekit Chrome Extension
Click the Spekit icon or Dock to open the Spekit Chrome Extension.
1.) Click the Spekit Icon to launch the sidebar.
2.) Click on the search bar and Enter relevant keyword(s) to search for the Flow.
3.) Filter the search results by Flows.
4.) Find the Flow.
5.) Click the gray box ellipsis [...].
6.) Click Preview.
From the Spekit Web App
1.) From the Spekit Web App, click Team Hub.
2.) Click Flows, and locate the Flow you wish to view.
3.) Click the gray box ellipsis [...] to expose the drop-down.
4.) Click View Flow.
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 Team Hub, and select + Add new.
3.) Click Flow to start the recording.
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
- 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 Specific Element: This step type guides users on a specific path in your application.
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.
- To Edit a Step, click on Edit Step in the Flow preview. You will be able to update the step description.
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
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.
4.) Video: Upload a relevant video.
5.) Click the three dots for additional media edit options as shown in the image.
Publish the Flow
1.) Once you have made the necessary edits, click the Publish button.
NOTE: If more than one Flow is published on the same starting URL, they will show up one after the other in the order they were created.
How to Preview a Flow & Edit Steps after it has been saved
-
How to Preview a Flow & Edit Steps from the Spekit Chrome Extension
- How to Preview a Flow & Edit Steps from the Spekit Web App
From the Spekit Chrome Extension
1.) Open the Spekit Chrome Extension by either clicking on the Spekit Dock or the Spekit icon.
2.) Enter relevant keyword(s) to search for the Flow in the Search Box.
3.) Select the Flow.
4.) Click on the Flow.
5.) Click Edit Steps & Preview.
From the Spekit Web App
1.) Open the Spekit Web App.
2.) Enter relevant keyword(s) to search for the Flow in the Search Box.
3.) Click the Flows tab.
4.) Click on the Flow.
5.) Click Edit Steps & Preview.
How to edit a published Flow's settings
From Spekit Web App, locate the published Flow you want to Edit.
1.) Click the Flow you would like to edit.
2.) Click Edit.
3.) You will be prompted - Save as draft? Click Ok.
4.) Once you've completed the necessary edits, click Save Draft, and the status will show Draft saved.
5.) Click Edit.
6.) Click Publish.
How to share a Published Flow link
From the Spekit Web App or Extension Flows view, ensure the Flow status is Published.
1.) Click the gray box ellipsis [...].
2.) Click Share.
A screen will appear with the choice of a Collaborator preview link and a Published permalink.
Collaborator preview link: Will launch the Flow into Preview mode for the person you share the link with.
The Published permalink: will launch the Flow for the person you share the link with.
How to delete a Flow during the creation or preview process
1.) Click on the Delete icon at the bottom right of the page while recording or previewing a Flow.
2.) You are presented with the following options shown below. Click Yes, delete Flow.
How to delete a published Flow
From the Spekit Web App Flows view, ensure the Flow status is Published.
1.) Click the gray box ellipsis [...].
2.) Click Delete.
3.) A pop-up will appear confirming you want to delete the Flow, click Yes.
How to set up Flows to dynamically trigger to their user
1.) Create and Publish a Flow. Click here to learn how to create a Flow.
2.) In the Spekit Web App Team Hub, under the Flows tab, click the gray box ellipsis [...] next to the Flow you just created.
3.) Click Share.
4.) Copy the Published permalink.
5.) Now, create a Spotlight. Click here to learn how to create a Spotlight.
6.) In the Action section, set the Button's Links to drop-down to URL and paste the published permalink.
7.) If you would like the Flow Spotlight to show up whenever a user accesses a specific page, you can fill out the Appears section of the Spotlight. Let's walk through an example together:
Example: If you've changed the process around filling out an opportunity in Salesforce, you may want your users to see the new process before filling out an opportunity.
a.) Paste the URL of the Flow's 1st step to the URL Contains box, just the first part of the URL. For this example, I would input: https://mycompany.lightning.force.com/
b.) In the Path box, paste the specific section of the URL that you would like the Spotlight to appear on. For this example, I would input: /lightning/r/Opportunity/
c.) Decide if you would like this Spotlight to Expire or Never Expire.
8.) Publish the Spotlight.
What are some examples of when customers should use each step type?
-
To get users to click through a specific path (on a specific button, specific tab, or on a specific record/field)
- What element to select: Specific element you want them to click on
- Description: Example: Click on this button
- Next step trigger: Click on specific element
-
To point out an area of the page (Example: product tour)
- Select: Element that encompasses/is close to the area of the page you want to demo
- Description: Example: This area of the application is where you can do x,y,z… Click next to continue the tour.
- Next step trigger: Click on Next button
-
To get users to fill out a form field
- Select: The form field and/or field label
- Description: Example: Fill out the field (etc.etc.), then click Next
- Next step trigger: Click on next button
-
To get users to fill out multiple form fields
- Select: the entire form field, or an element towards to top of the section you want them to fill out
- Description: Example: Fill out the following fields (etc. etc.) then click Next
- Next step trigger: Click on next button
-
To get users to select a non-specific record from a list (Example: an account that is relevant to them from the overall accounts list page)
- Select: The list heading
- Description: Example: Select the (record) that you need to update from the list below
- Next step trigger: Click on any element
- Note: After creating this step, you will have 1 free click to navigate to the next location for step creation (Example: As the creator, you would use this opportunity to click on an account record to get to the account detail page)
-
To get users to search for a non-specific record (Example: an account that is relevant to them) from the global search
-
Step 1:
- Select: Search bar
- Description: Example: Click into the search bar to start your search for the (record)
- Next step trigger: Click specific element
-
Step 2:
- Select: Search bar
- Description: Example: Type in the name of the (record) then select the search result when it appears in the list below
- Next step trigger: Click on any element
-
Step 1:
-
To get users to Navigate a multi-layer menu with hover options
-
Step 1:
- Select: Menu Entry point
- Description: Example: Click on this menu to navigate
- Next step trigger: Click specific element
-
Step 2:
- Select: Menu entry point
- Description: Example: Hover on (menu selection 1), then (menu selection 2), then select (menu selection 3) to continue on
- Next step trigger: Click on any element
-
Step 1:
-
To get users to select a non-specific option from a dropdown menu (Example: Update the opportunity stage to the appropriate option)
-
Step 1:
- Select: Menu Entry point
- Description: Example: Click here to update the [field name]
- Next step trigger: Click specific element
-
Step 2:
- Select: Menu entry point
- Description: Example: Select the appropriate opportunity stage from this list
- Next step trigger: Click on any element
-
Step 1: