Skip to main content

Graph Results

graphResults is a WEB only step. It’s not supported in-app and it’s part of an onboarding flow where at least two bodyMeasurementsWeb steps must come before it (current_weight and goal_weight).

The template depends on the user’s answers in current_weight and goal_weight steps to show when they’d likely achieve their goal.

KeyNotes
typegraphResults
stepIdThe unique step id.
graphResultsIdIt accepts two values: initial_results and updated_results .
Note: initial_results should be the step that comes first in the onboarding (updated_results is usually a couple steps after it).
titleText
subtitleText
desiredResultsPlaceholdersText that includes the goal weight place holder in the subtitle.
Note: This accept HTML span code to change the color of the placeholder text. It’s red in this example:
"<span style=\"color:#FA573F; font-weight:800;\">{{goalWeight}}</span> in <span style=\"color:#FA573F; font-weight:800;\">{{goalReachDate}} weeks</span>
goalResultsPlaceholdersText that includes the text on the red circle in the graph above.
Note: as desiredResultsPlaceholders, it also accept html.
backgroundColorBackground color of the page.
textColorText color of the page
ctaTextText of the main button.
ctaColorMain button text color.
ctaBackgroundColorMain button background color.
graphImageThe main graph image
graphCircleImageThe cirlc image
bottomViewColorThe floating button on small devices.
testimonialIs an object that displays the testimonial is the screenshots above.
   "testimonial": {
        "backgroundColor": "#FFF",
        "textColor": "#7A90A3",
        "header": {
            "title": "Chantelle",
            "subtitle": "Lost 30 lb in 12 weeks",
            "titleTextColor": "#14191D",
            "subtitleTextColor": "#FA573F"
        },
        "paragraphs": [
            "“I would strongly recommend this app for anyone struggling with developing healthy habits. I've struggled with the most basic habits over the years: exercising, eating healthy, and struggling to manage a full time job whilst studying at uni.",
            "Over the past couple of months using this app, I have gradually transformed my personal life from complete chaos to stability. It is not immediate, but is very effective and I look forward to my continual progression.“"
        ]
} Note: The header in that object is optional, when it’s missing the tesimonal will be only the number of paragraphs added to paragraphs.
Example of graphResults - initial_results
{
    "type": "graphResults",
    "stepId": "graph_results_initialResults",
    "graphResultsId": "initial_results",
    "title": "Based on your answers",
    "subtitle": "We predict you’ll be",
    "desiredResultsPlaceholders": "<span style=\"color:#FA573F; font-weight:800;\">{{goalWeight}}</span> in <span style=\"color:#FA573F; font-weight:800;\">{{goalReachDate}} weeks</span>",
    "goalResultsPlaceholders": "Goal <span class='text-[16px] md:text-[20px]'>{{goalWeight}}</span>",
    "backgroundColor": "#ECEAFF",
    "textColor": "#14191D",
    "ctaText": "Continue",
    "ctaColor": "#FFF",
    "ctaBackgroundColor": "#251C93",
    "graphImage": "https://c.thefab.co/web-onboarding/shape/graph-results-no-red-circle.svg",
    "graphCircleImage": "https://assets-global.website-files.com/5fe1ccf36044ef201da18f93/62ff6c0a68f74d10560a2771_goal%20blob.svg",
    "bottomViewColor": "#BBB4FF",
    "shouldFadeIn": false,
    "testimonial": {
        "backgroundColor": "#FFF",
        "textColor": "#7A90A3",
        "paragraphs": [
            "Good news! According to Shape users like yourself, it seems likely that you will successfully achieve your weight loss goal.",
            "Now tell us about your eating habits in order to determine if you can achieve your goal even sooner."
        ]
    }
},
Example of graphResults - updated_results
{
      "type": "graphResults",
      "stepId": "graph_results_updatedResults",
      "graphResultsId": "updated_results",
      "title": "Now that we know you better,",
      "subtitle": "We predict you’ll be",
      "desiredResultsPlaceholders": "<span style=\"color:#FA573F; font-weight:800;\">{{goalWeight}}</span> in <span style=\"color:#FA573F; font-weight:800;\">{{goalReachDate}} weeks</span>",
      "goalResultsPlaceholders": "Goal <span class='text-[16px] md:text-[20px]'>{{goalWeight}}</span>",
      "backgroundColor": "#ECEAFF",
      "textColor": "#14191D",
      "ctaText": "Continue",
      "ctaColor": "#FFF",
      "ctaBackgroundColor": "#251C93",
      "graphImage": "https://c.thefab.co/web-onboarding/shape/graph-results-no-red-circle.svg",
      "graphCircleImage": "https://assets-global.website-files.com/5fe1ccf36044ef201da18f93/62ff6c0a68f74d10560a2771_goal%20blob.svg",
      "bottomViewColor": "#BBB4FF",
      "testimonial": {
          "backgroundColor": "#FFF",
          "textColor": "#7A90A3",
          "header": {
              "title": "Chantelle",
              "subtitle": "Lost 30 lb in 12 weeks",
              "titleTextColor": "#14191D",
              "subtitleTextColor": "#FA573F"
          },
          "paragraphs": [
              "“I would strongly recommend this app for anyone struggling with developing healthy habits. I've struggled with the most basic habits over the years: exercising, eating healthy, and struggling to manage a full time job whilst studying at uni.",
              "Over the past couple of months using this app, I have gradually transformed my personal life from complete chaos to stability. It is not immediate, but is very effective and I look forward to my continual progression.“"
          ]
      }
  },