Journey Storyboard: Configure and Use
Published on November 13, 2026 User Journey Map Builder
Journey Storyboard: Configure and Use
| Audience: Admins who set it up, and Business Analysts and users who build and read journey maps. Component name in App Builder: Journey Storyboard |
1. What It Is
The Journey Storyboard is the tool for building and editing journey maps. It has two modes:
- Read mode is a guided walkthrough of the journey, one phase at a time.
- Edit mode lets you add, edit, reorder, duplicate and delete phases, and update the map's details, without leaving the page.
| Good to know: The Journey Map Table is read-only, so use the Storyboard to make changes. Everything saves directly in Salesforce. No extra setup or code is needed beyond the permissions in the Permissions Guide. |
2. Add It to a Journey Map Page
- Open any Journey Map record.
- Click the gear icon, then Edit Page.
- Drag Journey Storyboard onto the page. A full-width region works best.
- Optionally set Hide experience summary (see section 3).
- Click Save, then Activate if prompted.
3. Settings
| Property | What It Does | Default |
| Hide experience summary | Hides the four summary tiles at the top in Read mode. | Unchecked, so the summary shows |
4. Read Mode
What users see
- Header: the map name, with Persona and Goal (the Scenario/Objective field).
- Experience summary (four tiles):
- Overall experience: Positive, Mixed or Needs attention.
- Phases: how many there are and how many have pain points.
- Improvement ideas: how many phases have possible solutions.
- Biggest friction: the phases marked as frustrated.
- Journey rail: a connected path of phase nodes. Each has a mood emoji with a green, amber or red ring. The line fills in as you move through the journey.
- Phase panel: the selected phase, with a banner colored by mood and four cards:
- What the user does (User Actions)
- Where it happens (Touchpoints)
- What gets in the way (Pain Points)
- How we can improve it (Possible Solutions)
- Footer: Previous and Next buttons with a "Step 2 of 5" progress bar.
How to move around
- Click any phase on the rail.
- Use Previous and Next.
- Use the arrow keys when the rail has focus.
- Empty cards show "Nothing captured yet", so gaps are easy to see.
How "Overall experience" is worked out
Each phase scores 3 for Delighted, 2 for Neutral and 1 for Frustrated. The average decides the label:
| Label | Average Score |
| Positive | 2.4 or higher |
| Mixed | From 1.7 up to 2.4 |
| Needs attention | Below 1.7 |
5. Edit Mode
Turn it on
Click Edit journey at the top right. The button only appears for users who can create or edit. Click Done editing to go back to Read mode.
| Unsaved changes: If you have unsaved changes when you switch phases or leave Edit mode, you're asked whether to discard them. |
Edit the map details
Click Edit map details to change the Name, Persona and Scenario/Objective. Persona is required. Click Save details to save, or Cancel.
Add a phase
- Click the + Add phase node at the end of the rail.
- Pick a stage, which you can rename later: Awareness, Consideration, Decision, Onboarding, Adoption, Support or Renewal. Or choose Blank phase.
- The phase is created at the end of the journey, set to Neutral, and opens ready for editing.
| An empty map shows this picker straight away. |
Edit a phase
Select the phase on the rail, then fill in:
- Phase name (up to 80 characters).
- How does the user feel? Choose Delighted, Neutral or Frustrated.
- Four rich-text boxes, each with a short example under the heading:
- What the user does
- Where it happens
- What gets in the way
- How we can improve it
Click Save phase to save, or Discard to go back to the last saved version. Each phase saves on its own.
Helpful reminders you may see
- A phase has pain points but no improvement ideas.
- A phase is marked Frustrated, but nothing is written under "What gets in the way".
- "What the user does" is empty.
| These are suggestions only and never block a save. |
Reorder phases
Use Earlier or Later at the top of the phase panel. The phase order updates right away, and the Order numbers are renumbered as 1, 2, 3 and so on.
Duplicate a phase
Click Duplicate to copy the current phase, including its text, to the end of the journey, named "(copy)". Rename it and adjust.
| Duplicate saves the version you are currently editing, so save or discard first if you want the saved version copied. |
Delete a phase
Click Delete and confirm. The remaining phases are renumbered automatically.
Completeness bar
In Edit mode, a bar shows "x of y phases complete". A phase counts as complete when it has a name and all four text sections are filled in.
6. What Each User Can Do
The buttons depend on the user's access. Details are in the Permissions Guide.
| Action | Needs |
| View the Storyboard | Read on both objects |
| See "Edit journey" | Create or Edit on either object |
| Edit map details | Edit on Journey Map |
| Add / duplicate a phase | Create on Journey Map Phase |
| Save a phase / reorder | Edit on Journey Map Phase |
| Delete a phase | Delete on Journey Map Phase |
7. Responsive Behavior
The Storyboard adjusts to the width of the page region where you place it.
| Region Width | What Users See |
| Wide | Summary in a row, a horizontal rail, and a two-column grid of cards |
| Medium (about 900px and under) | Two summary columns, a smaller rail, and editor cards in one column |
| Narrow (about 640px and under) | A vertical phase list, single-column cards, and full-width buttons |
It supports keyboard navigation, visible focus outlines, and reduced-motion settings.
8. Requirements
- Users need the permissions in the Permissions Guide, including field access to every phase field.
- The three emoji static resources must be installed:
happypng,neutralpngandsadpng. - The component works only on a Journey Map record page.
- Phases are saved with the Order field, so Order must not be hidden from users.
- The Emotion field needs the values Happy, Neutral and Sad.
9. Tips for Good Journey Maps
| 1. Name phases after what the customer is doing, like "Onboarding" or "Support", not what your team is doing. 2. Keep each entry to one idea per bullet. Short bullets read best in the cards. 3. Write pain points from the user's point of view, and pair every pain point with at least one improvement idea. 4. Set Emotion honestly. The summary and the line in the Table both rely on it. 5. Aim for 4 to 7 phases. Split or merge phases if the map is much longer or shorter. |
10. Troubleshooting
| Symptom | Likely Cause | Fix |
| No "Edit journey" button | The user can't create or edit | Assign the editor or admin permission set |
| No "Add phase" node | No Create on Journey Map Phase | Grant Create |
| "Save phase" is disabled | Nothing has changed yet, or the user lacks Edit | Make a change, or grant Edit |
| Save fails with an error toast | A required value is missing, or field access is missing | Read the toast message, then check field permissions |
| "Edit map details" save fails | Persona is empty | Fill in Persona |
| Phases show in the wrong order | Order values were edited elsewhere | Use Earlier / Later to renumber |
| A deleted phase can't be recovered here | Deleting is a normal record delete | Check with your Salesforce admin |
| Emoji circles are blank | Static resources missing | Reinstall or restore them |
| Summary tiles missing | "Hide experience summary" is on | Untick the property in App Builder |
| An older page still shows a different setting | The page was saved before the property changed | Remove and re-add the component, then save the page |
Knowledge Article Number: KA-00504