About Welcome¶
What is about:welcome¶
A full-page multistep onboarding experience on about:welcome
that appears to all new Firefox users after Firefox has successfully been installed.
Onboarding experience on about:welcome
shows screens following below precedence order:
Has AMO attribution
Return to AMO custom onboarding screens
Experiments
Return
MR_ABOUT_WELCOME_DEFAULT
screens after applying dynamic rules inside prepareContentForReact method. Each screen can additionally be dynamically configured to show/hide via screen level targeting.
Spotlight messaging surface shows about:welcome
screens content with the appearance of a spotlight modal by using exposed window.AW* interfaces. This Unified Onboarding approach enables reusing about:welcome
as rendering engine for multiple messaging surfaces such as Spotlight and Feature Callout.
Testing about:welcome screens¶
Via Screens Pref:¶
Go to
about:config
, search forbrowser.aboutwelcome.screens
and set it to the array of screens value to be used in JSON recipeGo to about:welcome and you should see the about:welcome screen(s) Note: If you are enrolled in a nimbus experiment, about.welcome.screens will not show up
Via Experiments¶
You can test custom about:welcome
UI by creating an experiment. Messaging Journey captures creating and testing experiments via Nimbus.
Example JSON screens property¶
[
{
"id": "TEST_SCREEN_1",
"content": {
"position": "split",
"split_narrow_bkg_position": "-155px",
"progress_bar": "true",
"background": "url('chrome://activity-stream/content/data/content/assets/mr-pintaskbar.svg') var(--mr-secondary-position) no-repeat #F8F6F4",
"logo": {},
"title": "Welcome to Firefox",
"subtitle": "Launch a healthier internet from anywhere with a single click.",
"primary_button": {
"label": {
"string_id": "mr2022-onboarding-pin-primary-button-label"
},
"action": {
"navigate": true,
"type": "PIN_FIREFOX_TO_TASKBAR"
}
},
"checkbox": {
"label": "Also add private browsing",
"defaultValue": true,
"action": {
"type": "MULTI_ACTION",
"navigate": true,
"data": {
"actions": [
{
"type": "PIN_FIREFOX_TO_TASKBAR",
"data": {
"privatePin": true
}
},
{
"type": "PIN_FIREFOX_TO_TASKBAR"
}
]
}
}
},
"secondary_button": {
"label": "Next Screen",
"action": {
"navigate": true
},
"has_arrow_icon": true
}
}
},
{
"id": "TEST_SCREEN_2",
"content": {
"position": "split",
"progress_bar": "true",
"split_narrow_bkg_position": "-228px",
"background": "url('chrome://activity-stream/content/data/content/assets/mr-gratitude.svg') var(--mr-secondary-position) no-repeat #F8F6F4",
"logo": {},
"title": "You’re helping us build a better web",
"subtitle": "With your support, we’re working to make the internet more open, accessible, and better for everyone.",
"primary_button": {
"label": "Start browsing",
"action": {
"navigate": true
}
}
}
}
]
Example about:welcome screens¶
Browser View¶
Responsive View¶