Skip to main content

​
Overview

The DeepdotsPopups class is the core interface for the MagicFeedback Popup SDK. It manages the lifecycle of survey popups, from initialization and trigger configuration to rendering and event handling.

​
Constructor

const popups = new DeepdotsPopups();
Creates a new instance of the DeepdotsPopups class. The instance must be initialized with the init() method before use.

​
Basic Usage Pattern

Fetches popup definitions from the Deepdots API at runtime: 
import { DeepdotsPopups } from '@magicfeedback/popup-sdk';

const popups = new DeepdotsPopups();

popups.init({
  mode: 'server',
  nodeEnv: 'production',
  apiKey: 'YOUR_PUBLIC_API_KEY',
  userId: 'customer-123',
  debug: false,
});

popups.on('popup_shown', (event) => {
  console.log('Popup shown', event);
});

popups.on('survey_completed', (event) => {
  console.log('Survey completed', event);
});

popups.autoLaunch();

​
Client Mode

Uses preloaded popup definitions for local demos, testing, or hardcoded flows: 
import { DeepdotsPopups } from '@magicfeedback/popup-sdk';

const popupDefinitions = [
  {
    id: 'popup-home-5s',
    title: 'Help us improve',
    message: '<p>Thanks for visiting our homepage.</p>',
    triggers: {
      type: 'time_on_page',
      value: 5,
      condition: [{ answered: false, cooldownDays: 7 }],
    },
    actions: {
      accept: {
        label: 'Open survey',
        surveyId: 'survey-home-001',
      },
    },
    surveyId: 'survey-home-001',
    productId: 'product-main',
    segments: {
      path: ['/', '/pricing'],
    },
  },
];

const popups = new DeepdotsPopups();

popups.init({
  mode: 'client',
  debug: true,
  popups: popupDefinitions,
});

popups.autoLaunch();

​
Key Features

Multiple Trigger Types

Support for time-based, scroll-based, click-based, exit-intent, and custom event triggers

Event Lifecycle

Emit events for popup_shown, popup_clicked, and survey_completed

Route Targeting

Show popups only on specific paths using segments.path configuration

Flexible Rendering

Support for custom renderers via setRenderer() method

​
Architecture

The DeepdotsPopups class maintains:
  • Configuration state: API keys, mode, debug settings
  • Popup definitions: Loaded from server or provided inline
  • Trigger management: Automatically derived from popup definitions
  • Event listeners: For popup lifecycle events
  • Answer tracking: Prevents repeated displays based on conditions
  • Deferred exit queue: Manages exit-intent popups across navigation

​
Next Steps

Methods

Explore all available methods and their signatures

Configuration

Learn about configuration options and interfaces

Build docs developers (and LLMs) love

Get started for freeTalk to us