Theme System
themeConfig.js constants, ad timing rules, and theme selection logic.
Theme System
Source of truth: components/utils/themeConfig.js
Each category has a questionnaireType field that selects the interactive overlay theme. The theme controls user experience, ad timing, and CTA behavior.
Theme types
| Type | Component | Overlay | Rewarded trigger |
|---|---|---|---|
questionnaire | QuestionnaireModal | Popup modal | CTA on final step |
questionnaire-page | QuestionnaireModal | Full-page flow | CTA on final step |
whatsapp | WhatsAppTheme | Chat UI | Last bubble option click |
guide | GuideTheme | Questions → popup | Popup CTA after blur |
guide2 | GuideTheme | Same as guide | Popup CTA (ads wait for theme close) |
nothing | null | No overlay | CTA (content immediate) |
Key constants
// When ads start loading
AD_START_WHEN = {
THEME_VISIBLE, // As soon as theme overlay appears
THEME_CLOSED, // After theme overlay closes
CONTENT_VISIBLE, // When content phase is visible
ALWAYS, // Immediately on page mount
REWARDED_AD_CTA_CLICK, // When user clicks rewarded CTA
}
// What triggers the rewarded ad
REWARDED_TRIGGER = {
CTA, // User clicks a CTA button
PAGE_MOUNT, // Auto-trigger after questions complete
LAST_QUESTION, // Auto-trigger on last question
}Theme selection flow
Ad timing per theme
The shouldStartAd() and shouldEnableAd() functions gate ad rendering based on theme state:
| State variable | Meaning |
|---|---|
themeClosed | User finished theme overlay |
contentVisible | Content phase is showing (post-questions) |
rewardedAdTriggered | User clicked rewarded CTA |
Hook: components/hooks/useAdThemeTiming.js wraps these checks for components.
Questionnaire-page flow
A two-phase flow where the questionnaire renders as a full page, then navigates to ?unlocked=1 for content. Currently disabled (QUESTIONNAIRE_PAGE_FLOW_ENABLED = false).
showContentBehind
Some themes keep content rendered behind the overlay (not display:none) so ad SDKs can measure containers:
questionnaire— yeswhatsapp— yesguide— nonothing— no
See Theme Ad Timing for the full matrix.