WhatsApp Theme

Component: components/whatsapp/WhatsAppTheme.js Activated when: category.questionnaireType === "whatsapp"

User flow

What the user sees

1. Chat header — profile picture, contact name, online status
2. Chat background — WhatsApp-style wallpaper
3. Message bubbles — appear sequentially with typing dots (...)
4. Display ads — shown between message groups
5. Option buttons — in the last bubble, styled as chat replies
6. No separate CTA — option buttons ARE the CTA (implicit)
7. Rewarded ad — plays after tapping the final option

Chat bubble types

Configuration (per category)

Stored in WhatsAppTheme MongoDB document:

{
  categorySlug: "jobs",
  profilePicture: "url",
  name: "HR Assistant",
  onlineStatus: true,
  steps: [
    {
      stepNumber: 1,
      bubbles: [
        { type: "text", text: "Hello!" },
        { type: "textWithOptions", text: "What are you looking for?",
          options: [{ label: "Full-time", value: "fulltime" }] }
      ]
    }
  ]
}

Component architecture

Hooks

WhatsApp Ad Logic Details

1. Display Ad Flow (Inline Banner)

The display ad is styled to look like an inline chat bubble.

• Triggering the Ad: The system monitors the chat bubble stream. As soon as the first message bubble is shown (isFirstMessageAppearing becomes true), the ad is scheduled to render.
• Insertion Index: The component inserts the display ad at a specific index in the messages array (adInsertionIndex), splitting the messages before and after it.
• Immediate Load: For the WhatsApp theme (themeType === 'whatsapp'), the ad loads immediately upon rendering so it's ready when the user scrolls down.
• Hidden Backup Container: If the user closes the WhatsApp theme before they scroll to see the ad, the ad component mounts in an off-screen 1x1 pixel container to ensure the impression is counted.
• KV Cycling (30s): If enableKvCycling is enabled, a 30-second refresh timer updates the ad targeting with the next price point KV waterfall string.

2. Rewarded Ad Flow (Implicit CTA & Hijack)

Unlike other themes, the WhatsApp theme does not show a prominent "Watch Ad" button. Instead, options inside the final message bubble serve as the trigger.

• Click Hijacking: Option buttons (like "Yes", "No", "View Results") in the final chat step are decorated with the .whatsapp-rewarded-ad-trigger class. An invisible RewardedAdManager intercepts any clicks on this class.
• Interruption: Once clicked, the options callback is paused and the Rewarded Ad is played.
• Persistence Loop:
  • If a user attempts to bypass the ad by closing it early, the system waits 500ms and automatically re-triggers the ad.
  • State counters like retryCount track premature closures to force re-render/re-initialization.
  • The wasRewarded flag ensures that once the ad is fully viewed and the reward is successfully granted, the loop terminates and the user is redirected to the target content.
• Auto-Show on Retry: While the initial trigger requires a click, retries are forced automatically (autoShow={true}).