Spotlight¶
This is a window or tab level modal, the user is given a primary and a secondary button to interact with the modal.
Spotlights by default are “window modal”
preventing access to the rest of the browser including opening and switching tabs. “Tab modal”
grays out page content and allows interacting with tabs and the rest of the browser.
More examples of templates supported in Spotlight
Example of Spotlight page¶
Testing Spotlight¶
Go to
about:config
, set prefbrowser.newtabpage.activity-stream.asrouter.devtoolsEnabled
totrue
Open a new tab and go to
about:asrouter
in the url barIn devtools
Messages
section, select and show messages fromonboarding
as providerYou should see example JSON messages with
"template": "spotlight"
. ClickingShow
next to spotlight template message should show respective message UIFor quick testing, you can directly modify the message in the text area with your changes or by pasting your custom screen message JSON. Clicking
Modify
shows your new updated spotlight message.Ensure that all required properties are covered according to the Spotlight Schema
Clicking
Share
, copies link to clipboard that can be pasted in the url bar to preview spotlight custom screen(s) in browser and can be shared to get feedback from your team.
Note: Spotlight can be either window or tab level, with the
"modal": "tab"
or"modal": "window"
property in the recipe
Via the Experiments:¶
You can test the spotlight by creating an experiment or landing a message in tree. Messaging Journey captures creating and testing experiments via Nimbus and landing messages in Firefox.
Example JSON recipe for Spotlight¶
{
"template": "spotlight",
"targeting": "firefoxVersion >= 114",
"frequency": {
"lifetime": 1
},
"trigger": {
"id": "defaultBrowserCheck"
},
"content": {
"template": "multistage",
"id": "Spotlight_MESSAGE_ID",
"transitions": true,
"modal": "tab",
"screens": [
{
"id": "Screen_ID",
"content": {
"logo": {
"imageURL": "chrome://activity-stream/content/data/content/assets/heart.webp",
"height": "73px"
},
"title": {
"fontSize": "36px",
"raw": "Say hello to Firefox"
},
"title_style": "fancy shine",
"subtitle": {
"lineHeight": "1.4",
"marginBlock": "8px 16px",
"raw": "Here’s a quick reminder that you can keep your favorite browser just one click away."
},
"primary_button": {
"label": {
"string_id": "onboarding-start-browsing-button-label"
},
"action": {
"type": "OPEN_URL",
"data": {
"args": "https://www.mozilla.org",
"where": "tab"
}
}
},
"secondary_button": {
"action": {
"navigate": true
},
"label": {
"marginBlock": "0 -20px",
"raw": "Not now"
}
},
"dismiss_button": {
"action": {
"navigate": true
}
}
}
}
]
}
}