LLM:Storyly.md

Please read this documentation entirely before working on anything Storyly related in LLM or LLD.

Terminology

The core concepts of Storyly are defined here, please read this before working on anything Storyly related. It is crucial to understand the terminology:

• stories
• story groups
• storyly instances

🛠 The Storyly debug screen

This screen is essential for testing the integration of Storyly instances in Ledger Live mobile:

• To test new story instances without modifying any source code or Firebase remote configuration
• To test the localization of story instances
• To enable "test mode" for a given story instance and see "in testing" story groups in their Ledger Live context before you push them to production.

Access to the Storyly debug screen:

1. open LLM
2. go to settings
3. press "Powered by Ledger" (at the bottom), 7 times quickly
4. go to debug settings > mock and test > debug storyly

➕ Implementing a new story in Ledger Live

1. Create a new story instance on the Storyly dashboard
2. In the defaultFeatures.ts file, add an entry for this new story in storyly.params.stories.yourStoryIdentifier, containing the token of the instance in storyly.params.stories.yourStoryIdentifier.token

   

3. Add yourStoryIdentifier in the enum StorylyInstanceID
4. Use the StorylyStories component, use "yourStoryIdentifier" for the instanceID prop, this ID will be used to retrieve the story instance token from the remote configuration (from the feature flag).

🔧🧑‍🔬 Modifying an existing story & visualising the changes in LL without impacting production

⚠️⚠️⚠️ If you need to modify a story that is already live, proceed with care as all changes on a story instance will go live right away if they are not done in a story group that is disabled or that is a "testing" group. ⚠️⚠️⚠️

So it's actually not possible for now to modify an existing story group in staging and then push to prod. Instead, the strategy is to create a new story group, test it, and then archive the one you are replacing.

These will be the steps to follow:

1. Duplicate the story group you want to modify, or create a new one, and click "Save as test mode" (if you duplicate, it will first be a deactivated group)
2. Make the changes on the story group
3. Open the Storyly debug menu
4. There you see all the story instances integrated in LLM, and you can toggle testing mode for each, which will make "testing groups" visible
5. If you are happy with the changes, you can disable the "testing" mode of this story group on the Storyly dashboard and it will become instantly visible to users.
6. Archive the story group that you are replacing.

👀 Visualizing in Ledger Live a story instance that is not integrated yet

In the Storyly debug screen of LLM, you have the ability to change the token of any story that is already integrated in LL and visualize it directly. If copy pasting is too difficult (:trollface:), you can also tap the QR button and scan the QR code that will be displayed next to the story instance in dashboard.storyly.io/settings/apps

• TODO: video of the storyly debug screen + show the QR feature to easily test any storyly story
• TODO: explain how to create a "testing" story group and how to activate the testing flag in LL to see how the story will be

🌎 Localization of stories

In order to have localized stories, we are using the segmentation feature of Storyly, for lack of a better solution.

How does it work?

Each story group on Storyly has segments. When Ledger Live loads a story instance, it specifies the segments to target.

• If LL is in English, when loading a given story instance, it will only show the story groups of that instance that have the lang_en segment.
• If LL is in French or another language (other than English), it will first try to load the story groups of that instance that have the lang_fr segment.
  • If there are no story groups with the lang_fr, it will fallback to loading the story instance with the lang_en segment.
  • If there is at least one story group with the segment lang_fr, it will display it, and not display the lang_en story groups.
• ⚠️ Story groups that have no lang_xysegment will never be displayed.

Steps to localize a story group

1. create your story group in English, with the original content, and add the segment lang_en
2. duplicate that story group (or create a new one), in the same story instance. Add the localized content, and add the segment lang_xy, where xy is one of the locales specified here