|
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
Step 1: Recording 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.
4.) Click Start, and the 3-second countdown will initiate. You'll find yourself in the recorder and be able to hover over any element on the page.
Note: The Spekit Dock and the Spekit Chrome Extension sidebar are unavailable when a Flow recording starts. You must finish your current Flow recording to access it.
5.) Capture the series of steps in the process you are trying to record for your Users. You can use either one of these options when capturing steps; (a) interactive steps or (b) info steps.
a.) Interactive Step: allows users to click through each action of the process.
Example: You want to make a ‘How to create a new opportunity process that requires your users to click into different buttons.
Note: All clicks will be recorded as a step in the flow.
To capture an Interactive Step:
- Hover over the area to be captured. A green box will appear as the mouse moves around the page. Inside the box is what will be highlighted during the flow. The rest of the page will be grayed out.
💡 Pro Tip: Try to capture a larger area to ensure viewers see the intended area. Below is an example of this:
Recommended capture:
Not recommended:
- When ready, click on the element on the page. Once selected, a notification will appear confirming the step has been added. Move on to capturing the next step in the flow until the process is complete.
Note: Once the interactive step is captured, allow 3 seconds for the step to save before recording the next step or when the hover appears again on your mouse cursor.
b) Info Step: is used as a tour of a page to highlight different areas and components. It is significant to call out multiple form inputs in one step.
Example: You want to make a ‘How to Navigate Salesforce Lightning’ flow and explain different components within the Sales homepage.
To capture an Info Step:
- Hover over an element and wait for the hover to appear, then move your cursor to the info step checkbox and click on it.
- Once selected, a notification will appear confirming the step has been added.
- Click the OK, Continue button to continue to capture the next step in the process.
Note: Once you save the Flow and preview, you will be able to type the necessary procedure(s) or details for the Info step in the dialogue box.
6.) Once you have finished recording all the steps, Click Save and Continue. This will take you to Preview mode.
Step 2: Preview a Flow
1.) The screen will reload into the Flow preview. Here you can edit the Flow and add necessary details to the steps.
Note: To save as a Draft, click Save and Continue again. Click the Delete icon to delete the Flow and create a new one.
2.) Click Start.
3.) Click through the steps of the Flow to make edits. Edit options available include:
a.) Editing text for info step:
- On the step text box, click the edit icon (✎)
- Click on the text box and enter the text. There is a limit of 140 characters
- This will automatically save.
- Click Next to move to the next step in the Flow.
b.) Editing text for interactive step
- On the step text box, click the edit icon (✎)
- Click on the text box and enter the text. There is a limit of 140 characters
- This will automatically save.
- Click on the element to move to the next step in the Flow.
c.) Adding a new step to the flow:
- Click on the blue ➕ button on the left control panel
- Make sure you add the step in the correct order of the process.
- Record the step and add the details in the text box.
- Click the x button in the left control panel to cancel.
d.) Deleting a step
- Click on the 3 dots under the text box.
- Select Delete this step.
- Be careful as you will not get a confirmation message and cannot undo this.
e.) Repositioning the step box
- Click on the 3 dots under the text box.
- Select reposition tooltip
- Select the position where you want the text box to pop up.
- Click the blue Save button on the text box.
4.) Once you have made all edits, click Finish on the pop-up (as shown below) or click Save and Continue on the bottom right of the page.
- This will redirect you to the Spekit Web App Flow page, where you will be able to edit who can see the flow and where the flow will launch.
Step 3: Edit Flow details
1.) On the Flow edit modal, Click on the Edit button.
2.) Here you can make edits to the following sections:
Launcher Step: You can make the following edits here:
1.) Heading: Update the heading. This is the title of the Flow your viewers will see. For example, in the image below ‘A flow for you’.
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: You can make the following edits here:
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 users. 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. Otherwise, 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 (see option 2 above).
Next steps after Flow (Finisher): You can make the following edits here:
This is what your users will see when they complete a Flow.
- Heading: For example, in the image below ‘Great job!’.
- Message: Add more details here.
- Image: Upload a relevant image.
- Video: Upload a relevant video.
- Click the three dots for additional media edit options as shown in the image.
Step 4: Publish the Flow
- Once you have made the necessary edits, click the Publish button.
Note: If more than one Flow is published to a URL, they will show up one after the other in the order they were created.
Navigating the Flow Creation Page
When recording a Flow, you will have multiple elements and options to adjust:
- Capture Controls
- Hide and Show Utility Bar
- Pause or Stop recording a Flow
- Delete
- Save and Continue
- Feedback Loop
Capture Controls
- This is essentially the remote controller during recording.
- You can pause, stop, hide the utility bar, save, or discard a Flow at any time.
Hide and Show Utility Bar
The utility bar serves as the remote controller and provides information while recording, but there are cases where it 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.
Note: If you choose to hide the utility bar while recording, the utility bar will appear again if there is a fresh page load.
Pause or Stop recording a Flow
Pause State
- When the Flow creator clicks on the Pause button, they are presented with the following options below.
Stop State
- When the Flow creator clicks on the Stop button, the screen transitions to black, and they are presented with the following options as shown below.
Delete
- Click on the Delete icon at the bottom right of the page while recording a Flow.
- You are presented with the following options shown below.
Save and Continue
- The Flow creator can click on Save and continue on the bottom right of the screen.
- The page will reload and take you to Preview mode where you can edit the flow and add necessary details to the steps.
- Alternatively, click Save and Continue again to save it as a draft. This will redirect you to the Spekit Web App Flows page.
Feedback Loop
- The feedback loop is visible immediately after recording each step.
- Its purpose is to confirm that the step recorded is successfully added to the current Flow creation.
- Once the feedback loop appears, you can either click OK and continue (for info steps) to capture the next step or wait 3 seconds before it disappears. (for interactive steps).
💡 Pro Tip: For drop downs and pick lists, if you click on OK and continue, it can potentially force close the picklist that you need to record for your next step. For this scenario, we recommend waiting for the 3-second timer to elapse before you record your next step.
Example Flow
The Right Way ✅
The Wrong Way ❌ You should never start a Flow from a modal. Models don’t have unique URLs and may not appear when starting a Flow.