SOP: Edit and Link Modals in BeliefCode/EmotionCode

Objective

This SOP explains how to locate, edit, and link modal pop-ups used throughout the BeliefCode and EmotionCode systems. It ensures updates are made consistently in the source modal so changes appear everywhere the modal is used.

Link to Loom

https://loom.com/share/8624d0ed214346f4a9dd04f62cff6d4b
 

Key Steps

1. In the App Web Version Editor View, Locate the modal source in Systems 0:00

• Open the Language area as needed.
• Navigate to Systems > Modals.
• Review the available modal categories:
  • Belief Code modals
  • Emotion Code definitions
• Use this area as the central source for all modal content.

2. Edit an existing modal at the source 0:54

• In Systems > Modals, find the modal that needs updating.
• Open the modal and edit the following as needed:
  • Title
  • Description/content
• Save the changes in the modal source.
• Remember that updating the source modal updates every page that uses it.

3. Add or replace a modal link in page content 1:51

• Open the page where the modal link should appear.
• Click Edit on the relevant content section.
• Select the text you want to turn into a modal link.
• If the text is missing, type the new text first; if it already exists, highlight the existing text to replace it.

4. Insert the modal using the modal icon 2:11

• Click the modal icon (the pop-up/link icon with the small arrow).
• Choose the correct modal category from the available options.
• Select the modal you want to link.
• Confirm the text now displays as a modal link in the editor.

5. Verify and correct modal content if needed 2:45

• Review the linked modal text to confirm it matches the intended wording.
• If the modal content needs correction, update the source modal in Systems > Modals rather than changing it only on one page.
• Use this approach to keep translations and definitions consistent across the app.
• If you are unsure about language accuracy, have someone familiar with the language review it. 

6. Save and publish the updated page 3:54

• After linking all required modals, click Save.
• Confirm the modal pop-up appears correctly in the page content.
• Submit the update for publishing.
• Once published by Becky, or another publisher, the changes will go live across the app.

Cautionary Notes

• Editing modal text does not only on one page, if the same modal is used elsewhere it will also be updated.
• Be careful with translations: some modal text may need language review before publishing.
• Publishing is required for changes to appear live; saving alone is not enough.
• If a modal link is missing, verify you selected the correct text and inserted the correct modal category.

Tips for Efficiency

• Make edits at the source modal level first to avoid repeating work across multiple pages.
• Use the modal library in Systems > Modals to quickly find the correct definition before linking it.
• When replacing existing text, highlight the exact phrase first to reduce formatting errors.
• Have a language-aware reviewer check modal wording before final save when translations are involved.