Bullets Letter

The bulletsLetter step is two screens step that presents users with an engaging animation. This step offers users dynamic feedback based on user inputs from a [Questions](Onboarding Templates/Questions) or a manually entered value, enhancing the overall user experience.

Step Config

Key	Description	Is Optional?
`type`	Should be `bulletsLetter` to differs from other steps	Required
`stepId`	Unique step identifier.	Required
`backgroundColor`	The background color of the page.	Required
`shouldFadeIn`	Whether the step should fadeIn animation on enter.	Optional
`shouldFadeOut`	Whether the step should fadeOut animation on leave.	Optional
`title`	Header text to show on top of the step.	Required
`subtitle`	Text to show below the header.	Required
`textColor`	Color of text in the whole step	Optional
`backgroundImage`	Background image of the screen for mobile.	Required
`desktopBackground`	Background image of the screen for desktop.	Required
`useHTML`	Whether the entered content will be contain `HTML` tags like `<strong/>` or plain text.	Required
`bulletsTitle`	The text right above the bullets animation.	Required
`ctaText`	Text used in call to action button.	Required
`ctaColor`	Text color in call to action button.	Required
`ctaBackgroundColor`	Background color of call to action button.	Required
`showButtonsDelay`	Delay before viewing the call to action button measured in `milliseconds`	Required
`questionStepId`	Step ID from which the answer should represent the number of full bullets.	Required if `bulletsNumber` is not added.
`bulletsNumber`	Number of full bullets	Required if `questionStepId` is not added.
`bulletsUnit`	Text representing what a single bullet means. (ex. 1 bullet = 1 year).	Required
`bulletsLastName`	Text below the animation.	Required
`bulletsDelay`	Delay before viewing the bullets measured in `milliseconds` (1sec = 1000ms).	Required
`bulletsGroups`	Array of bullet groups	Required
`bulletsAnimationIncrement`	The delay before the next bullet starts to display measured in `milliseconds`	Required
`bulletsFullFlash`	boolean value to determine whether full bullets should flash after reveal or not.	Optional
`bulletsEmptyFlash`	boolean value to determine whether empty bullets should flash after reveal or not.	Optional
`bulletsFullReveal`	boolean value to determine whether full bullets show in an animated way or not.	Optional
`bulletsEmptyReveal`	boolean value to determine whether empty bullets show in an animated way or not.	Optional
`paragraph`	The text viewed in the second screen.	Required
`hideProgressBar`	Boolean supports hiding the default progress bar. `"hideProgressBar": true`

Bullet Group Config

Name	Description	Is Optional?
`name`	Text that will added to the left side of the bullets to represent the bullets group.	Required
`color`	Color that represent the bullets group name underline + glowing color.	Required
`number`	Number of bullet in group.	Required
`empty`	URL of the asset representing empty bullet.	Required
`full`	URL of the asset representing full bullet.	Required

Example

Bullets Letter (Last step before webview)

{
  "id": "mind_app_id",
  "journeyId": "SaDJUYAjRv",
  "language": "en",
  "appId": "co.thefab.mind",
  "seo": {
    "title": "Lumiere",
    "favicon": "https://c.thefab.co/web-onboarding/mind/mind-favicon.png",
    "description": "Manage stress and anxiety through self-care practices and empowering affirmations. Embark on a journey of self-love."
  },
  "steps": [
    {
      "type": "questions",
      "stepId": "questions",
      "backgroundColor": "#F8F8F8",
      "questions": [
        {
          "type": "name",
          "title": "What's your name?",
          "bottomBarColor": "#D6E0FF",
          "ctaColor": "#183BC6",
          "backgroundColor": "#FFFFFF",
          "ctaTextColor": "#FFFFFF",
          "textColor": "#15191D",
          "ctaText": "Continue",
          "placeholder": "My name is ...",
          "placeholderColor": "#808080"
        },
        {
          "type": "age",
          "title": "What's your age?",
          "bottomBarColor": "#D6E0FF",
          "ctaColor": "#183BC6",
          "backgroundColor": "#FFFFFF",
          "ctaTextColor": "#FFFFFF",
          "textColor": "#15191D",
          "ctaText": "Continue",
          "placeholder": "My age is ...",
          "placeholderColor": "#808080"
        }
      ]
    },
    {
      "stepId": "bullet_letter",
      "backgroundColor": "#F8F8F8",
      "type": "bulletsLetter",
      "title": "Do you copy <span class='capitalize'>{{NAME}}</span>?",
      "subtitle": "<p>It’s me, future <span class='capitalize'>{{NAME}}</span>. I’m calling from {{TODAY|year+1}} to celebrate us.</p><p><br><strong>I still remember this day: {{TODAY}}.</strong></p><p><br>We sat down and calculated how many years we have left to live, based on our age. One dot for each year…</p>",
      "bulletsTitle": "{{NAME}}’s Life in Years",
      "bulletsUnit": "years",
      "bulletsAnimationIncrement": 50,
      "useHTML": true,
      "backgroundImage": "/bg.jpg",
      "ctaText": "Continue",
      "ctaColor": "#FFFFFF",
      "ctaBackgroundColor": "#5ECCE0",
      "bulletsDelay": 1500,
      "showButtonsDelay": 1000,

      "desktopBackground": "https://c.thefab.co/web-onboarding/mind/bg.jpg",
      "paragraph": "<p>That day hit us hard! Are we really going to let anxiety and its companions define the rest of our days?</p><p><br><strong>Absolutely not.</strong></p><br><p>We decided instead to embrace acceptance, nurture compassion, and strengthen our emotional resilience.</p><br><p><strong>You’re on the right track, {{NAME}}. Trust your decisions.</strong></p><br><p>See you soon!<br>Future {{NAME}}</p>",
      "bulletsLastName": "Turning 90",
      "questionStepId": "questions_age",
      "bulletsGroups": [
        {
          "name": "Birth",
          "color": "#3B82F6",
          "empty": "https://c.thefab.co/web-onboarding/mind/blue_dot_empty.png",
          "full": "https://c.thefab.co/web-onboarding/mind/blue_dot_full.png",
          "number": 30
        },
        {
          "name": "30th Birthday",
          "color": "#A855F7",
          "empty": "https://c.thefab.co/web-onboarding/mind/violet_dot_empty.png",
          "full": "https://c.thefab.co/web-onboarding/mind/violet_dot_full.png",
          "number": 30
        },
        {
          "name": "60th Birthday",
          "color": "#FBBF24",
          "empty": "https://c.thefab.co/web-onboarding/mind/yellow_dot_empty.png",
          "full": "https://c.thefab.co/web-onboarding/mind/yellow_dot_full.png",
          "number": 30
        }
      ]
    },
    {
      "type": "webview",
      "stepId": "pwyw_page",
      "redirectTo": "https://mind.thefabulous.co/payment/pwyw/generic-pwyw?appId=co.thefab.mind&upsellPath=/journey/time/clarify-upsell-var1",
      "engine": "premium",
      "hideCloseButton": true,
      "subprintText": "",
      "subprintColor": "",
      "buttonColor": "#0B3887",
      "isOffer": false,
      "topSubprintText": "",
      "deepLink": "{{APPLICATION_ID}}://skip",
      "showWebfloatingButtonDelay": 10000,
      "backgroundColor": "#241D82"
    }
  ],
  "logic": []
}

Step Config

Bullet Group Config

Example​

Example