Skip to main content

Plan Evolution

This template shows a chart based on the user’s answers in previous steps.

KeyNotes
typeplanEvolution
stepIdUnique step id
titleThe title of the template
startValueAccepts a jexl string to get the user’s answer:
user.getOnboardingAnswer('body_measurements_current_weight')
goalValueAccepts a jexl string to get the user’s answer:
user.getOnboardingAnswer('body_measurements_goal_weight')
unitSupports showing the unit used in the step. It could be % or kg for example. NOTE: don’t add unit when the chart is used for goalWeight onboarding. Because the unit is determined based on the user’s choice of the previous steps it’s handled in the code to be kg or lbs in that case.
unit: "%" is valid to show % as the unit.
unit: "" omits the unit for the step.
"unit: "kg" not valid.
backgroundColorThe background color of the step
textColorThe text color of the step
subtitleColorThe subtitle text color
ctaTextThe CTA text
ctaTextColorThe CTA text color
ctaBackgroundColorThe CTA background color
bottomViewColorThe CTA button wrapper background color
bottomViewBoxShadowA shadow value that can be used if needed
useHTMLSupport using HTML for the title or subtitle in the step.
chartCheck below for the chart table
featuresListThe feature list below the chart:
"featuresList": {
  "title": "AND",
  "textColor": "#7A90A3",
  "items": [
      {
          "imageUrl": "https://c.thefab.co/web-onboarding/shape/plan-evolution/img_shape_plan_evolution_onboarding_icon_1.png",
          "title": "Watch your energy skyrocket!",
          "subtitle": "Boost your overall health and well-being.",
          "textColor": "#14191D",
          "subtitleColor": "#7A90A3"
      },
      {
          "imageUrl": "https://c.thefab.co/web-onboarding/shape/plan-evolution/img_shape_plan_evolution_onboarding_icon_2.png",
          "title": "Live a better life",
          "subtitle": "with healthy and satisfying food choices.",
          "textColor": "#14191D",
          "subtitleColor": "#7A90A3"
      }
  ]
} Screenshot 2024-11-20 at 6.43.23 PM.png
textWithBackgroundColorThe text is in the box in the screenshot below.
"textWithBackgroundColor": {
  "title": "Change for good",
  "subtitle": "Goal achieved? It's just the beginning! Discover more simple ways to strengthen the healthy habits that keep you thriving.",
  "backgroundColor": "#F1F5FF",
  "titleColor": "#000F96",
  "subtitleColor": "#3847CC"
} Screenshot 2024-11-20 at 6.43.08 PM.png
footerTextUsed to add the paragraphs at the bottom of the step:
"footerText": {
        "textColor": "#7A90A3",
        "paragraphs": [
            "<strong><span style='color:#14191D'>Great news!</span></strong> Your choices in Shape will prevent chronic disease, strengthen your immune system, and improve your mental performance."
        ]
    } Screenshot 2024-11-20 at 6.43.16 PM.png
countdownDaysNumberUsed for a countdown jump by day – set it to 20 to jump down to 20 days in the subtitle with a countdown.
Read the subtitle with a countdown below for more details.
countdownDayDurationThe time in milliseconds each jump by countdownDaysNumber should take – set to 500 to count down by 20 days every 500ms

[!IMPORTANT]

Supported placeholders

The title and subtitle support a few placeholders to show the user the data needed. These placeholders are:

  • {{GOAL_VALUE}}: is the goalValue for the chart – it’s based on the calculated jexl goalValue in the step.
  • {{VALUE_BY_MIDDLE_POINT}}: the difference between the start and middle point values. Example: If the user answers that the start value is 50% and the goal value is 80% and we have a middle point (the special occasion like a vacation):
    Your sleep schedule will improve {{VALUE_BY_MIDDLE_POINT}} by the vacation.
  • {{ANSWER|occasion}}: the user’s answer for the step with the id occasion.

An example of a subtitle using these placeholders:

"subtitle": "<strong><span style='color: #6455FE'>{'{{'}GOAL_VALUE{'}}'}</span></strong> by {'{{'}TODAY|month|+6{'}}'} and <strong><span style='color: #FFA01C'>lose {'{{'}VALUE_BY_MIDDLE_POINT{'}}'}</span></strong> by the {'{{'}ANSWER|occasion{'}}'}",

[!NOTE] NOTE: If the chart doesn’t support middlePointDate, we shouldn't use the {{VALUE_BY_MIDDLE_POINT}}

[!IMPORTANT]

Subtitle with a countdown

The step supports a countdown date to the subtitle. To count down to the date placeholder {{TODAY|month|+6}} in the example above, using the keys countdownDaysNumber and countdownDayDuration.

For the code to recognize the countdown, you must wrap your date placeholder with a span that has the class name count-down: <span class='count-down'>{'{{'}TODAY|month|+6{'}}'}</span>

 "subtitle": "<strong><span style='color: #6455FE'>{'{{'}GOAL_VALUE{'}}'}</span></strong> by <span class='count-down'>{'{{'}TODAY|month|+4{'}}'}</span>, and <strong><span style='color: #6455FE'>increase {'{{'}VALUE_BY_MIDDLE_POINT{'}}'}</span></strong> by your <br><strong><span style='color: #FFA01C'>{'{{'}ANSWER|occasion{'}}'}</span></strong>",

Chart

KeyNotes
optionsSome options to be passed change the chart:
"options": {
    "span": 0.5,
    "band": 0.8,
    "degree": 1,
    "variation": 7.5,
    "extremes": 6
  } span: number band: number, // 0 to 1, default 0 degree: [0, 1, 2]  variation: set it to 0 for a linear chart extremes: the number of the peak points in the chart
dotColorThe color of the last dot on the line chart
dotBorderColorThe dotColor border color
goalValueLabelColorThe text color of the goalValue
goalValueTextThe label text on the line in the cart (Goal in the screenshot below)
gridColorThe color of the grid line
lineColorThe line chart color (if it’s a solid color not gradient)
goalValueLineColorThe dashed-line color in the chart.
lineGradientThe gradient of the line chart. It’s passed like this:
  "lineGradient": {
      "from": "#B899FF",
      "to": "#7F6BFE"
  },
middlePointDateA jext value to get the date of a special event/occasion for the user.
"user.getOnboardingAnswer('occasion_when')",
middlePointColorThe background color of the middle point.
middlePointBorderColorThe border color of the middle point.
middlePointLabelThe label should show on the middle point. If it’s based on the user’s answer from a previous step, it should be like this `"{{ANSWER
lineMethodplanEvolution accepts an optional lineMethod to control the shape of the created curve:
static: we can set lineMethod to static if we want to keep the curve the same wavy shape for all users (it’s predictable)
loess: uses loess algorithms to determine the shape of the curve – it will change based on the user’s answers to startValue and goalValue questions.

[!IMPORTANT] NOTE: ThemiddlePointDateshould be based on the user’s answer on the [Question Date Picker](Question Date Picker) step. However, the onboarding has the option to omit that point if the user answers that they don’t have any events, we should handle the onboarding using [Supported Logic](../Supported Logic) to jump the user to a different step – check out the JSON file below for an example.

Screenshot 2024-11-20 at 6.39.19 PM.png

JSON file example
 {
"id": "shape_app_id",
"journeyId": "6Gr4B9SkA3",
"bold": true,
"appId": "co.thefab.shape",
"language": "en",
"seo": {
"title": "Shape",
"favicon": "https://c.thefab.co/web-onboarding/shape/shape-favicon.png",
"description": "The company that created Shape was incubated at Duke University at the Center for Advanced Hindsight. The approach is not one of self-discipline, it is one of awareness."
},
"steps": [
{
"type": "bodyMeasurementsWeb",
"stepId": "body_measurements_current_weight",
"currentWeightKey": "current_weight",
"backgroundColor": "#ECEAFF",
"textColor": "#251C93",
"ctaText": "Continue",
"ctaColor": "#FFF",
"ctaBackgroundColor": "#251C93",
"ctaHoverBackgroundColor": "#3425B8",
"title": "Your current weight",
"inputPlaceholderColor": "#BBB4FF",
"inputTextColor": "#251C93",
"tabs": {
"kg": [
{
"placeholder": "Current weight",
"inputSuffix": "kg",
"toggleKey": "kg",
"isMetricSystem": true
}
],
"lbs": [
{
"placeholder": "Current weight",
"inputSuffix": "lbs",
"toggleKey": "lbs",
"isMetricSystem": false
}
]
},
"toggle": {
"activeTextColor": "#251C93",
"activeBackgroundColor": "#FFF",
"backgroundColor": "#251C93",
"textColor": "#fff",
"metric": "kg",
"imperial": "lbs"
}
},
{
"type": "bodyMeasurementsWeb",
"stepId": "body_measurements_goal_weight",
"currentWeightKey": "goal_weight",
"backgroundColor": "#ECEAFF",
"textColor": "#251C93",
"ctaText": "Continue",
"ctaColor": "#FFF",
"ctaBackgroundColor": "#251C93",
"ctaHoverBackgroundColor": "#3425B8",
"title": "Your goal weight",
"inputPlaceholderColor": "#BBB4FF",
"inputTextColor": "#251C93",
"errorMessage": "Your goal weight is higher than your current weight. Please make sure to enter these correctly.",
"tabs": {
"kg": [
{
"placeholder": "Goal weight",
"inputSuffix": "kg",
"toggleKey": "kg",
"isMetricSystem": true
}
],
"lbs": [
{
"placeholder": "Goal weight",
"inputSuffix": "lbs",
"toggleKey": "lbs",
"isMetricSystem": false
}
]
},
"toggle": {
"activeTextColor": "#251C93",
"activeBackgroundColor": "#FFF",
"metric": "kg",
"imperial": "lbs",
"backgroundColor": "#251C93",
"textColor": "#fff"
}
},
{
"type": "goalChoice",
"title": "Having something to look forward to can be a big motivator to stick to your plan.",
"stepId": "occasion",
"subtitle": "Do you have an important event coming up?",
"key": "occasion",
"backgroundColor": "#ECEAFF",
"textColor": "#251C93",
"subtitleTextColor": "#3425B8",
"choices": [
{
"name": "Vacation",
"value": "vacation",
"nameColor": "#3425B8",
"backgroundColor": "#f5f7ff",
"hoverBackgroundColor": "#F6F5FF"
},
{
"name": "Wedding",
"value": "wedding",
"nameColor": "#3425B8",
"backgroundColor": "#f5f7ff",
"hoverBackgroundColor": "#F6F5FF"
},
{
"name": "Birthday",
"value": "birthday",
"nameColor": "#3425B8",
"backgroundColor": "#f5f7ff",
"hoverBackgroundColor": "#F6F5FF"
},
{
"name": "Important event",
"value": "event",
"nameColor": "#3425B8",
"backgroundColor": "#f5f7ff",
"hoverBackgroundColor": "#F6F5FF"
},
{
"name": "No, I don't have an event",
"value": "no_event",
"nameColor": "#3425B8",
"backgroundColor": "#f5f7ff",
"hoverBackgroundColor": "#F6F5FF"
}
]
},
{
"type": "questionDatePicker",
"title": "Exciting! We'll keep your event in mind as we create your plan.",
"stepId": "occasion_when",
"subtitle": "When is your {{ANSWER|occasion}}?",
"key": "occasion_when",
"ctaText": "Continue",
"ctaTextColor": "#FFF",
"ctaBackgroundColor": "#251C93",
"label": "Pick a date",
"iconColor": "#6455FE",
"inputTextColor": "#2F0191",
"inputBackgroundColor": "#f5f7ff",
"labelTextColor": "#6455FE",
"defaultDateOffsetDays": 90,
"backgroundColor": "#ECEAFF",
"textColor": "#251C93",
"subtitleTextColor": "#3425B8",
"minDateOffsetDays": 80,
"inputBackgroundHoverColor": "#f5f7ff"
},
{
"type": "planEvolution",
"stepId": "evolution_6_months",
"title": "We predict you'll be",
"subtitle": "<strong><span style='color: #6455FE'>{{GOAL_VALUE}}</span></strong> by {{TODAY|month|+6}} and <strong><span style='color: #FFA01C'>lose {{VALUE_BY_MIDDLE_POINT}}</span></strong> by the {{ANSWER|occasion}}",
"startValue": "user.getOnboardingAnswer('body_measurements_current_weight')",
"goalValue": "user.getOnboardingAnswer('body_measurements_goal_weight')",
"backgroundColor": "#FFF",
"textColor": "#14191D",
"subtitleColor": "#7A90A3",
"useHTML": true,
"ctaText": "Continue",
"ctaTextColor": "#FFF",
"ctaBackgroundColor": "#251C93",
"bottomViewColor": "#FFF",
"bottomViewBoxShadow": "-1px 0px 8px 2px rgba(74,74,74,0.05)",
"chart": {
"trendDirection": "down",
"dotBorderColor": "white",
"dotColor": "#6455FE",
"gridColor": "#D8DCFF",
"goalValueLabelColor": "white",
"axisTextColor": "#A298FF",
"goalValueText": "Goal",
"middlePointLabel": "{{ANSWER|occasion}}",
"goalValueLineColor": "#FF9945",
"monthsCount": 6,
"middlePointDate": "user.getOnboardingAnswer('occasion_when')",
"middlePointColor": "#FF9945",
"middlePointBorderColor": "#FFF",
"lineGradient": {
"from": "#B899FF",
"to": "#7F6BFE"
},
"options": {
"span": 0.5,
"band": 0.8,
"degree": 2,
"variation": 4,
"extremes": 4
}
},
"textWithBackgroundColor": {
"title": "Change for good",
"subtitle": "Goal achieved? It's just the beginning! Discover more simple ways to strengthen the healthy habits that keep you thriving.",
"backgroundColor": "#F1F5FF",
"titleColor": "#000F96",
"subtitleColor": "#3847CC"
},
"featuresList": {
"title": "AND",
"textColor": "#7A90A3",
"items": [
{
"imageUrl": "https://c.thefab.co/web-onboarding/shape/plan-evolution/img_shape_plan_evolution_onboarding_icon_1.png",
"title": "Watch your energy skyrocket!",
"subtitle": "Boost your overall health and well-being.",
"textColor": "#14191D",
"subtitleColor": "#7A90A3"
},
{
"imageUrl": "https://c.thefab.co/web-onboarding/shape/plan-evolution/img_shape_plan_evolution_onboarding_icon_2.png",
"title": "Live a better life",
"subtitle": "with healthy and satisfying food choices.",
"textColor": "#14191D",
"subtitleColor": "#7A90A3"
}
]
},
"footerText": {
"textColor": "#7A90A3",
"paragraphs": [
"<strong><span style='color:#14191D'>Great news!</span></strong> Your choices in Shape will prevent chronic disease, strengthen your immune system, and improve your mental performance."
]
}
},
{
"type": "planEvolution",
"stepId": "evolution_4_months",
"trendDirection": "down",
"title": "We predict you'll be",
"subtitle": "<strong><span style='color: #6455FE'>{{GOAL_VALUE}}</span></strong> by {{TODAY|month|+4}} and <strong><span style='color: #FFA01C'>lose {{VALUE_BY_MIDDLE_POINT}}</span></strong> by the {{ANSWER|occasion}}",
"startValue": "user.getOnboardingAnswer('body_measurements_current_weight')",
"goalValue": "user.getOnboardingAnswer('body_measurements_goal_weight')",
"backgroundColor": "#FFF",
"textColor": "#14191D",
"subtitleColor": "#7A90A3",
"useHTML": true,
"ctaText": "Continue",
"ctaTextColor": "#FFF",
"ctaBackgroundColor": "#251C93",
"ctaHoverBackgroundColor": "#3425B8",
"bottomViewColor": "#FFF",
"bottomViewBoxShadow": "-1px 0px 8px 2px rgba(74,74,74,0.05)",
"chart": {
"middlePointDate": "user.getOnboardingAnswer('occasion_when')",
"middlePointColor": "#FF9945",
"middlePointBorderColor": "#FFF",
"trendDirection": "down",
"dotBorderColor": "white",
"dotColor": "#6455FE",
"gridColor": "#D8DCFF",
"goalValueLabelColor": "white",
"axisTextColor": "#A298FF",
"goalValueText": "Goal",
"middlePointLabel": "{{ANSWER|occasion}}",
"goalValueLineColor": "#FF9945",
"monthsCount": 4,
"lineGradient": {
"from": "#B899FF",
"to": "#7F6BFE"
},
"options": {
"span": 0.5,
"band": 0.8,
"degree": 1,
"variation": 2,
"extremes": 3
}
},
"textWithBackgroundColor": {
"title": "Change for good",
"subtitle": "Goal achieved? It's just the beginning! Discover more simple ways to strengthen the healthy habits that keep you thriving.",
"backgroundColor": "#F1F5FF",
"titleColor": "#000F96",
"subtitleColor": "#3847CC"
},
"featuresList": {
"title": "AND",
"textColor": "#7A90A3",
"items": [
{
"imageUrl": "https://c.thefab.co/web-onboarding/shape/plan-evolution/img_shape_plan_evolution_onboarding_icon_1.png",
"title": "Watch your energy skyrocket!",
"subtitle": "Boost your overall health and well-being.",
"textColor": "#14191D",
"subtitleColor": "#7A90A3"
},
{
"imageUrl": "https://c.thefab.co/web-onboarding/shape/plan-evolution/img_shape_plan_evolution_onboarding_icon_2.png",
"title": "Live a better life",
"subtitle": "with healthy and satisfying food choices.",
"textColor": "#14191D",
"subtitleColor": "#7A90A3"
}
]
},
"footerText": {
"textColor": "#7A90A3",
"paragraphs": [
"<strong><span style='color:#14191D'>Great news!</span></strong> Your choices in Shape will prevent chronic disease, strengthen your immune system, and improve your mental performance."
]
}
},
{
"type": "planEvolution",
"stepId": "evolution_6_months_no_middle_point",
"title": "We predict you'll be",
"subtitle": "<strong><span style='color: #6455FE'>{{GOAL_VALUE}}</span></strong> by {{TODAY|month|+6}}.",
"startValue": "user.getOnboardingAnswer('body_measurements_current_weight')",
"goalValue": "user.getOnboardingAnswer('body_measurements_goal_weight')",
"backgroundColor": "#FFF",
"textColor": "#14191D",
"subtitleColor": "#7A90A3",
"useHTML": true,
"ctaText": "Continue",
"ctaTextColor": "#FFF",
"ctaBackgroundColor": "#251C93",
"ctaHoverBackgroundColor": "#3425B8",
"bottomViewColor": "#FFF",
"bottomViewBoxShadow": "-1px 0px 8px 2px rgba(74,74,74,0.05)",
"chart": {
"trendDirection": "down",
"dotBorderColor": "white",
"dotColor": "#6455FE",
"gridColor": "#D8DCFF",
"goalValueLabelColor": "white",
"axisTextColor": "#A298FF",
"goalValueText": "Goal",
"monthsCount": 6,
"goalValueLineColor": "#FF9945",
"lineGradient": {
"from": "#B899FF",
"to": "#7F6BFE"
},
"options": {
"span": 0.5,
"band": 0.8,
"degree": 1,
"variation": 5,
"extremes": 3
}
},
"textWithBackgroundColor": {
"title": "Change for good",
"subtitle": "Goal achieved? It's just the beginning! Discover more simple ways to strengthen the healthy habits that keep you thriving.",
"backgroundColor": "#F1F5FF",
"titleColor": "#000F96",
"subtitleColor": "#3847CC"
},
"featuresList": {
"title": "AND",
"textColor": "#7A90A3",
"items": [
{
"imageUrl": "https://c.thefab.co/web-onboarding/shape/plan-evolution/img_shape_plan_evolution_onboarding_icon_1.png",
"title": "Watch your energy skyrocket!",
"subtitle": "Boost your overall health and well-being.",
"textColor": "#14191D",
"subtitleColor": "#7A90A3"
},
{
"imageUrl": "https://c.thefab.co/web-onboarding/shape/plan-evolution/img_shape_plan_evolution_onboarding_icon_2.png",
"title": "Live a better life",
"subtitle": "with healthy and satisfying food choices.",
"textColor": "#14191D",
"subtitleColor": "#7A90A3"
}
]
},
"footerText": {
"textColor": "#7A90A3",
"paragraphs": [
"<strong><span style='color:#14191D'>Great news!</span></strong> Your choices in Shape will prevent chronic disease, strengthen your immune system, and improve your mental performance."
]
}
},
{
"type": "planEvolution",
"stepId": "evolution_4_months_no_middle_point",
"trendDirection": "down",
"title": "We predict you'll be",
"subtitle": "<strong><span style='color: #6455FE'>{{GOAL_VALUE}}</span></strong> by {{TODAY|month|+4}}",
"startValue": "user.getOnboardingAnswer('body_measurements_current_weight')",
"goalValue": "user.getOnboardingAnswer('body_measurements_goal_weight')",
"backgroundColor": "#FFF",
"textColor": "#14191D",
"subtitleColor": "#7A90A3",
"useHTML": true,
"ctaText": "Continue",
"ctaTextColor": "#FFF",
"ctaBackgroundColor": "#251C93",
"ctaHoverBackgroundColor": "#3425B8",
"bottomViewColor": "#FFF",
"bottomViewBoxShadow": "-1px 0px 8px 2px rgba(74,74,74,0.05)",
"chart": {
"trendDirection": "down",
"dotBorderColor": "white",
"dotColor": "#6455FE",
"gridColor": "#D8DCFF",
"goalValueLabelColor": "white",
"axisTextColor": "#A298FF",
"goalValueText": "Goal",
"goalValueLineColor": "#FF9945",
"monthsCount": 4,
"lineGradient": {
"from": "#B899FF",
"to": "#7F6BFE"
},
"options": {
"span": 0.5,
"band": 0.8,
"degree": 0,
"variation": 4,
"extremes": 3
}
},
"textWithBackgroundColor": {
"title": "Change for good",
"subtitle": "Goal achieved? It's just the beginning! Discover more simple ways to strengthen the healthy habits that keep you thriving.",
"backgroundColor": "#F1F5FF",
"titleColor": "#000F96",
"subtitleColor": "#3847CC"
},
"featuresList": {
"title": "AND",
"textColor": "#7A90A3",
"items": [
{
"imageUrl": "https://c.thefab.co/web-onboarding/shape/plan-evolution/img_shape_plan_evolution_onboarding_icon_1.png",
"title": "Watch your energy skyrocket!",
"subtitle": "Boost your overall health and well-being.",
"textColor": "#14191D",
"subtitleColor": "#7A90A3"
},
{
"imageUrl": "https://c.thefab.co/web-onboarding/shape/plan-evolution/img_shape_plan_evolution_onboarding_icon_2.png",
"title": "Live a better life",
"subtitle": "with healthy and satisfying food choices.",
"textColor": "#14191D",
"subtitleColor": "#7A90A3"
}
]
},
"footerText": {
"textColor": "#7A90A3",
"paragraphs": [
"<strong><span style='color:#14191D'>Great news!</span></strong> Your choices in Shape will prevent chronic disease, strengthen your immune system, and improve your mental performance."
]
}
},
{
"type": "webview",
"stepId": "last_step",
"backgroundColor": "#FFF",
"redirectTo": "https://shape.thefabulous.co/purchase/shape/checkout"
}
],
"logic": [
{
"stepId": "occasion",
"actions": [
{
"type": "jump",
"to": "evolution_6_months_no_middle_point",
"condition": "user.getOnboardingAnswerValue('occasion') == 'no_event'"
}
]
},
{
"stepId": "evolution_4_months",
"actions": [
{
"type": "jump",
"to": "last_step",
"condition": "true"
}
]
}
]
}