PWYW with a Discounted Offer
pwywWithDiscountedOffer is an onboarding step in the web onboarding to support checkout pages in the onboarding flow with the rest of the steps.
| Key | Notes |
|---|---|
type | pwywWithDiscountedOffer |
stepId | A unique step ID |
useClassicCheckout | Optional and it’s false by default. Set it to true to change the style of the checkout page to the classic one:  |
logoUrl | The current app logo |
discount | The discount percentage to show, e.g. 50. |
choices | The plan options to show in the price boxes. It currently supports 3 plan options. Each plan must have these keys: { "planCode": "fab-subs-quarterly-discount-intro-1-nineteen", "textColor": "#004585", "backgroundColor": "#E1F1FF", "borderColor": "#004585" } If you want to change the upsellFlowId according to the chosen choice then use upsellFlowId and the most popular plan must have extra keys for the title styles and must have mostPopular set to true: "titleColor": "white", "titleBackgroundColor": "#FF6A04", "upsellFlowId": "fabulous_upsell_bundle_5apps_49_skip_pdf_expert_pathahead1" "mostPopular": true  "choices": [ { "planCode": "fab-subs-quarterly-discount-intro-1-nineteen", "textColor": "#004585", "backgroundColor": "#E1F1FF", "borderColor": "#004585" }, { "planCode": "fab-subs-quarterly-discount-intro-5-nineteen", "textColor": "#004585", "backgroundColor": "#CEE8FF", "borderColor": "#004585" }, { "planCode": "fab-subs-quarterly-discount-intro-10-nineteen", "textColor": "#FF6A04", "backgroundColor": "#FFEBDF", "borderColor": "#FF6A04", "titleColor": "white", "titleBackgroundColor": "#FF6A04", "mostPopular": true } ] If you want to change the discountOfferPlanCode and/or discount according to the chosen choice then add discountOfferPlanCode and discount to the choice, if opted out the default values will used that’s added. |
discountOfferPlanCode | The discount offer plan, e.g. fab-subs-quarterly-19 |
paymentOrder | The order of the payment options tabs on the step. It’s optional but if it exists:
"paymentOrder": [ "paypal", "google-pay", "apple-pay", "cc" ] This order will show paypal as the first payment tab and cc as the last. |
profileIconColor | The profile icon color  |
textColor | The title text color |
subtitleColor | The subtitle text color |
paragraphColor | The paragraph color  |
ctaTextColor | The select-plan button text color |
ctaBackgroundColor | The select-plan button bg color |
ctaHoverBackgroundColor | The select-plan button bg color on hover |
textWithArrowColor | The text color of the text under the price boxes:  |
desktopBackground | The main image on desktop |
tabletBackground | The main image on tablet |
mobileBackground | The main image on mobile |
overlayColor | The form’s popup overlay color |
popupForm | The style of the popup form: "popupForm": { "backgroundColor": "white", "linkColor": "#3A44E6", "closeIconColor": "#7A90A3", "maxWidth": "680px", "timer": {}, "form": {}, "planDetails": { "strikeThroughPriceColor": "#4F6171", "strikeThroughColor": "#FE0063", "priceType": one of('normal', 'strikeThroughMonthly', 'strikeThroughDaily', 'strikeThroughMonthlyAndDaily') — defaults to "nomral" }, "tabs": {}, "terms":{}, "orderSummary":{}, "testimonials":{}, "features":{}, "letter":{}, "reminder":{ "text": string, "backgroundColor": string, "textColor": string, "iconBackgroundColor": string, "iconColor": string, "daysBeforeTrialEnd": number — min(1) }, "trialExplanation":{ "header": string, "logo": string (optional), "trial": { "primaryColor": string, "secondaryColor": string, "image": string, "steps": [{"title": string, "description": string}] — count (3) } } More details on the timer, form, planDetails, and tabs [Checkout](Onboarding Templates/Checkout). |
discountOffer | The styles of the discount offer pop-up (Checkout the section below for the supported types) "discountOffer": { "type":"default", "desktopBackground": "https://c.thefab.co/web-onboarding/fabulous/pwyw_popup_discount_bg_desktop.webp", "tabletBackground": "https://c.thefab.co/web-onboarding/fabulous/pwyw_popup_discount_tablet.webp", "mobileBackground": "https://c.thefab.co/web-onboarding/fabulous/pwyw_popup_discount_bg_mobile.webp", "ctaTextColor": "white", "ctaBackgroundColor": "#00CC9F", "ctaHoverBackgroundColor": "#00A87F", "textColor": "white", "titleColor": "#FF8762", "closeIconColor": "white", "discount": 70, "planDetails": { "borderColor": "#FF8762", "backgroundColor": "white", "primaryColor": "#343D45", "secondaryColor": "#7A90A3", "strikeThroughPriceColor": "#4F6171", "strikeThroughColor": "#FE0063" } } Note: the discounted offer config accepts an optional hideCloseIcon that can be set to true to hide the close icon: “hideCloseIcon":true  |
fullPricePlanCode | a plan code which is can be used to reflect the full price without any discount, related to strike through prices. |
paymentOptions | { header: { title: title string, titleColor: title color, subtitle: subtitle string, subtitleColor: subtitle color }), variant: can be ('default', 'emphasized'), separator: { text: Seperator string, textColor: Seperator color }), group: Joi.object({ text: group text string, textColor: text color, backgroundColor: group background color type: can ('accordion', 'tab') }) } Emphasized with separator  Emphasized with tab  Emphasized with accordion  |
Discount Offer Popup
The checkout pages currently supports two types of the discount offer popup:
The default discount offer
This is the classic pop-up component. It takes the type: "default" and here’s how it looks:
The default pop-up componant JSON
"discountOffer": {
"type":"default",
"desktopBackground": "https://c.thefab.co/web-onboarding/fabulous/pwyw_popup_discount_bg_desktop.webp",
"tabletBackground": "https://c.thefab.co/web-onboarding/fabulous/pwyw_popup_discount_tablet.webp",
"mobileBackground": "https://c.thefab.co/web-onboarding/fabulous/pwyw_popup_discount_bg_mobile.webp",
"ctaTextColor": "white",
"ctaBackgroundColor": "#00CC9F",
"ctaHoverBackgroundColor": "#00A87F",
"textColor": "white",
"titleColor": "#FF8762",
"closeIconColor": "white",
"discount": 50,
"planDetails": {
"borderColor": "#FF8762",
"backgroundColor": "white",
"primaryColor": "#343D45",
"secondaryColor": "#7A90A3"
}
}
The one with the type “split-screen”
Another supported type is split-screen. It takes the same key as the default one, plus some new keys for the timer:
"overlayColor": "rgba(0, 5, 118, 0.85)",
"backgroundColor": "white",
"discountImageUrl": "https://c.thefab.co/web-onboarding/fabulous/img_discount_shape.png",
"timerTextColor": "#FF7D4E",
"timerBackgroundColor": "white"
The split-screen pop-up componant JSON
"discountOffer": {
"type": "split-screen",
"desktopBackground": "https://c.thefab.co/web-onboarding/fabulous/img_discount_illustration_desktop.webp",
"tabletBackground": "https://c.thefab.co/web-onboarding/fabulous/img_discount_illustration_tablet.webp",
"mobileBackground": "https://c.thefab.co/web-onboarding/fabulous/img_discount_illustration_mobile.webp",
"ctaTextColor": "white",
"ctaBackgroundColor": "#FF7D4E",
"ctaHoverBackgroundColor": "#FF7D4E",
"textColor": "white",
"titleColor": "#FF8762",
"closeIconColor": "white",
"discount": 50,
"planDetails": {
"borderColor": "linear-gradient(90deg, #FFE5D6 0%, #D6E0FE 100%)",
"backgroundColor": "white",
"primaryColor": "#14191D",
"secondaryColor": "#7A90A3"
},
"overlayColor": "rgba(0, 5, 118, 0.85)",
"backgroundColor": "white",
"discountImageUrl": "https://c.thefab.co/web-onboarding/fabulous/img_discount_shape.png",
"timerTextColor": "#FF7D4E",
"timerBackgroundColor": "white"
}
You can read more on the supported post-purchase links and URL params [Checkout](Onboarding Templates/Checkout)
An example of a pwywWithDiscountedOffer step in Fabulous
{
"type": "pwywWithDiscountedOffer",
"stepId": "pwyw",
"backgroundColor": "white",
"logoUrl": "https://c.thefab.co/web-onboarding/fabulous/fabulous-logo.svg",
"profileIconColor": "#7A90A3",
"textColor": "#14191D",
"subtitleColor": "#4F6171",
"paragraphColor": "#7A90A3",
"ctaTextColor": "white",
"ctaBackgroundColor": "#FF6A04",
"ctaHoverBackgroundColor": "#E94F0D",
"textWithArrowColor": "#FF6A04",
"desktopBackground": "https://c.thefab.co/web-onboarding/fabulous/pwyw-bg-desktop.webp",
"tabletBackground": "https://c.thefab.co/web-onboarding/fabulous/pwyw-bg-tablet.webp",
"mobileBackground": "https://c.thefab.co/web-onboarding/fabulous/pwyw-bg-mobile.webp",
"discountOfferPlanCode": "fab-subs-quarterly-19",
"overlayColor": "#0006",
"discount": 30,
"paymentOrder": [
"google-pay",
"paypal",
"apple-pay",
"cc"
],
"choices": [
{
"planCode": "fab-subs-quarterly-discount-intro-1-nineteen",
"textColor": "#004585",
"backgroundColor": "#E1F1FF",
"borderColor": "#004585"
},
{
"planCode": "fab-subs-quarterly-discount-intro-5-nineteen",
"textColor": "#004585",
"backgroundColor": "#CEE8FF",
"borderColor": "#004585"
},
{
"planCode": "fab-subs-quarterly-discount-intro-10-nineteen",
"textColor": "#FF6A04",
"backgroundColor": "#FFEBDF",
"borderColor": "#FF6A04",
"titleColor": "white",
"titleBackgroundColor": "#FF6A04",
"mostPopular": true
}
],
"popupForm": {
"backgroundColor": "white",
"linkColor": "#3A44E6",
"secondaryColor": "#7A90A3",
"closeIconColor": "#7A90A3",
"timer": {
"textColor": "#7871E4",
"backgroundColor": "white",
"buttonBackgroundColor": "linear-gradient(to right, #574DFF, #BFBAFF)",
"buttonColor": "white",
"boxShadow": "0 0 20px #5a50ff26",
"circlePrimaryColor": "#6455FE",
"circleSecondaryColor": "#BFBAFF",
"circleBackgroundColor": "#EFF4FF"
},
"form": {
"placeholderColor": "#7A90A3",
"inputColor": "#14191d",
"inputBorderColor": "#E8EAED",
"ctaBackgroundColor": "linear-gradient(180deg, #00BAAF, #00BA82)",
"ctaTextColor": "white",
"noCommitmentsTextColor": "#4F6171"
},
"planDetails": {
"titleColor": "#4F6171",
"titleBackgroundColor": "#F1F3F5",
"textColor": "#14191D",
"subtitleColor": "#4F6171",
"hrColor": "#E8EAED",
"discountColor": "white",
"discountBackgroundColor": "linear-gradient(270deg,#88d16e,#07cb99)",
"cycleColor": "#A6B5C2"
},
"tabs": {
"activeTextColor": "white",
"textColor": "#4f6171",
"activeBackgroundColor": "#130a7e",
"backgroundColor": "#f1f3f5"
}
},
"discountOffer": {
"desktopBackground": "https://c.thefab.co/web-onboarding/fabulous/pwyw_popup_discount_bg_desktop.webp",
"tabletBackground": "https://c.thefab.co/web-onboarding/fabulous/pwyw_popup_discount_tablet.webp",
"mobileBackground": "https://c.thefab.co/web-onboarding/fabulous/pwyw_popup_discount_bg_mobile.webp",
"ctaTextColor": "white",
"ctaBackgroundColor": "#00CC9F",
"ctaHoverBackgroundColor": "#00A87F",
"textColor": "white",
"titleColor": "#FF8762",
"closeIconColor": "white",
"discount": 70,
"planDetails": {
"borderColor": "#FF8762",
"backgroundColor": "white",
"primaryColor": "#343D45",
"secondaryColor": "#7A90A3"
}
}
},
An example of a pwywWithDiscountedOffer step with orderSummary (screenshot below)
{
"id": "fab_app_id",
"appId": "co.thefabulous.app",
"language": "en",
"seo": {
"title": "Fabulous",
"favicon": "https://c.thefab.co/web-onboarding/elixir/elixir-favicon.png",
"description": "Unlock your true potential with Elixir: Your daily guide to a purpose-driven, authentic life. Find your focus, live with intention."
},
"steps": [
{
"type": "goalChoice",
"title": "Would you like to add a PDF purchase to your subscription?",
"stepId": "pdf_charge",
"subtitle": "",
"key": "pdf_charge",
"backgroundColor": "#ffffff",
"hideIcons": true,
"textColor": "#2F0191",
"shouldFadeIn": false,
"choices": [
{
"name": "Yes",
"locked": false,
"value": "yes",
"nameColor": "#2F0191",
"backgroundColor": "#f5f7ff",
"hideDarkOverlay": true,
"hoverBackgroundColor": "#E7EBFF"
},
{
"name": "No, thank you",
"locked": false,
"value": "no",
"nameColor": "#2F0191",
"backgroundColor": "#f5f7ff",
"hideDarkOverlay": true,
"hoverBackgroundColor": "#E7EBFF"
}
]
},
{
"type": "pwywWithDiscountedOffer",
"stepId": "pwyw",
"backgroundColor": "white",
"logoUrl": "https://c.thefab.co/web-onboarding/fabulous/fabulous-logo.svg",
"profileIconColor": "#7A90A3",
"textColor": "#14191D",
"subtitleColor": "#4F6171",
"paragraphColor": "#7A90A3",
"ctaTextColor": "white",
"ctaBackgroundColor": "#FF6A04",
"ctaHoverBackgroundColor": "#E94F0D",
"textWithArrowColor": "#FF6A04",
"desktopBackground": "https://c.thefab.co/web-onboarding/fabulous/pwyw-bg-desktop.webp",
"tabletBackground": "https://c.thefab.co/web-onboarding/fabulous/pwyw-bg-tablet.webp",
"mobileBackground": "https://c.thefab.co/web-onboarding/fabulous/pwyw-bg-mobile.webp",
"discountOfferPlanCode": "fab-subs-quarterly-19",
"overlayColor": "#0006",
"discount": 30,
"choices": [
{
"planCode": "fab-subs-quarterly-discount-intro-1-nineteen",
"textColor": "#004585",
"backgroundColor": "#E1F1FF",
"borderColor": "#004585"
},
{
"planCode": "fab-subs-quarterly-discount-intro-5-nineteen",
"textColor": "#004585",
"backgroundColor": "#CEE8FF",
"borderColor": "#004585"
},
{
"planCode": "fab-subs-quarterly-discount-intro-10-nineteen",
"textColor": "#FF6A04",
"backgroundColor": "#FFEBDF",
"borderColor": "#FF6A04",
"titleColor": "white",
"titleBackgroundColor": "#FF6A04",
"mostPopular": true
}
],
"popupForm": {
"backgroundColor": "white",
"secondaryColor": "#7A90A3",
"closeIconColor": "#7A90A3",
"maxWidth": "680px",
"orderSummary": {
"titleColor": "#14191D",
"primaryColor": "#000",
"secondaryColor": "#4F6171",
"addonTitle": "PDF Report",
"priceBackgroundColor": "#F5F7F8",
"priceTextColor": "#000",
"commentTextColor": "#007C6D",
"commentBackgroundColor": "#ECF8F6",
"removeIconColor": "#7A90A3"
},
"terms": {
"type": "with-plan-details",
"linkColor": "#2C5FFF",
"backgroundColor": "#F5F7F8",
"textColor": "#4F6171"
},
"timer": {
"textColor": "#7871E4",
"backgroundColor": "white",
"buttonBackgroundColor": "linear-gradient(to right, #574DFF, #BFBAFF)",
"buttonColor": "white",
"boxShadow": "0 0 20px #5a50ff26",
"circlePrimaryColor": "#6455FE",
"circleSecondaryColor": "#BFBAFF",
"circleBackgroundColor": "#EFF4FF"
},
"form": {
"placeholderColor": "#7A90A3",
"inputColor": "#14191d",
"inputBorderColor": "#E8EAED",
"ctaBackgroundColor": "linear-gradient(180deg, #00BAAF, #00BA82)",
"ctaTextColor": "white",
"noCommitmentsTextColor": "#4F6171"
},
"planDetails": {
"titleColor": "#4F6171",
"titleBackgroundColor": "#F1F3F5",
"textColor": "#14191D",
"subtitleColor": "#4F6171",
"hrColor": "#E8EAED",
"discountColor": "white",
"discountBackgroundColor": "linear-gradient(270deg,#88d16e,#07cb99)",
"cycleColor": "#A6B5C2"
},
"tabs": {
"activeTextColor": "white",
"textColor": "#4f6171",
"activeBackgroundColor": "#130a7e",
"backgroundColor": "#f1f3f5"
}
},
"discountOffer": {
"desktopBackground": "https://c.thefab.co/web-onboarding/fabulous/pwyw_popup_discount_bg_desktop.webp",
"tabletBackground": "https://c.thefab.co/web-onboarding/fabulous/pwyw_popup_discount_tablet.webp",
"mobileBackground": "https://c.thefab.co/web-onboarding/fabulous/pwyw_popup_discount_bg_mobile.webp",
"ctaTextColor": "white",
"ctaBackgroundColor": "#00CC9F",
"ctaHoverBackgroundColor": "#00A87F",
"textColor": "white",
"titleColor": "#FF8762",
"closeIconColor": "white",
"discount": 70,
"planDetails": {
"borderColor": "#FF8762",
"backgroundColor": "white",
"primaryColor": "#343D45",
"secondaryColor": "#7A90A3"
}
}
},
{
"type": "checkout",
"stepId": "discount-offer",
"backgroundColor": "white",
"planCode": "fab-subs-quarterly-19",
"logoUrl": "https://c.thefab.co/web-onboarding/fabulous/fabulous-logo.svg",
"textColor": "#14191D",
"linkColor": "#3A44E6",
"secondaryColor": "#7A90A3",
"discount": 70,
"maxWidth": "680px",
"orderSummary": {
"titleColor": "#14191D",
"primaryColor": "#000",
"secondaryColor": "#4F6171",
"addonTitle": "PDF Report",
"priceBackgroundColor": "#F5F7F8",
"priceTextColor": "#000",
"commentTextColor": "#007C6D",
"commentBackgroundColor": "#ECF8F6",
"removeIconColor": "#7A90A3"
},
"terms": {
"type": "with-plan-details",
"linkColor": "#2C5FFF",
"backgroundColor": "#F5F7F8",
"textColor": "#4F6171"
},
"timer": {
"textColor": "#7871E4",
"backgroundColor": "white",
"buttonBackgroundColor": "linear-gradient(to right, #574DFF, #BFBAFF)",
"buttonColor": "white",
"boxShadow": "0 0 20px #5a50ff26",
"circlePrimaryColor": "#6455FE",
"circleSecondaryColor": "#BFBAFF",
"circleBackgroundColor": "#EFF4FF"
},
"form": {
"placeholderColor": "#7A90A3",
"inputColor": "#14191d",
"inputBorderColor": "#E8EAED",
"ctaBackgroundColor": "linear-gradient(180deg, #00BAAF, #00BA82)",
"ctaTextColor": "white",
"noCommitmentsTextColor": "#4F6171"
},
"planDetails": {
"titleColor": "#4F6171",
"titleBackgroundColor": "#F1F3F5",
"textColor": "#14191D",
"subtitleColor": "#4F6171",
"hrColor": "#E8EAED",
"discountColor": "white",
"discountBackgroundColor": "linear-gradient(270deg,#88d16e,#07cb99)",
"cycleColor": "#A6B5C2"
},
"tabs": {
"activeTextColor": "white",
"textColor": "#4f6171",
"activeBackgroundColor": "#130a7e",
"backgroundColor": "#f1f3f5"
}
}
],
"logic": [
{
"stepId": "pdf_charge",
"actions": [
{
"type": "script",
"condition": "user.getOnboardingAnswerValue('pdf_charge') == 'yes'",
"script": "setChargeId('fab-item-coaching-plan')"
}
]
}
]
}
[!NOTE] Note: The flow of the PDF plan is similar to how it’s handled for normal upsell:
- The user will receive an email to submit a Typeform questionnaire.
- They will receive their PDF plan 48 hours later.
