Examples

Common implementation patterns for the Pollarix Widget.

Basic NPS Survey

The simplest implementation:

<script src="https://cdn.pollarix.com/widget/v2/widget.min.js"></script>
<pollarix-widget
  collector-id="YOUR_COLLECTOR_ID"
  api-key="YOUR_API_KEY"
  delay="5000"
></pollarix-widget>

Star Rating Survey

Use a 5-star rating scale:

<pollarix-widget
  collector-id="YOUR_COLLECTOR_ID"
  api-key="YOUR_API_KEY"
></pollarix-widget>

<script>
  const widget = document.querySelector('pollarix-widget');
  widget.configure({
    scale: { type: 'stars' },
    text: {
      question: 'How would you rate your experience?',
      lowLabel: 'Poor',
      highLabel: 'Excellent',
    }
  });
</script>

Post-Purchase Survey

Show after checkout completion:

<pollarix-widget
  collector-id="YOUR_COLLECTOR_ID"
  api-key="YOUR_API_KEY"
  on-event="purchase-complete"
></pollarix-widget>

<script>
  const widget = document.querySelector('pollarix-widget');

  widget.configure({
    text: {
      question: 'How likely are you to shop with us again?',
      thankYouByCategory: {
        detractor: "We're sorry your experience wasn't great. We'll do better.",
        passive: "Thank you for shopping with us!",
        promoter: "We're thrilled you loved it! Thanks for shopping with us!",
      }
    }
  });

  // Trigger after successful purchase
  function onPurchaseComplete(order) {
    widget.configure({
      prefill: {
        userId: order.customerId,
        email: order.email,
        metadata: {
          orderId: order.id,
          orderTotal: order.total,
        }
      }
    });

    document.dispatchEvent(new CustomEvent('purchase-complete'));
  }
</script>

Exit Intent Survey

Capture feedback before users leave:

<pollarix-widget
  collector-id="YOUR_COLLECTOR_ID"
  api-key="YOUR_API_KEY"
  exit-intent="true"
  position="center"
></pollarix-widget>

<script>
  const widget = document.querySelector('pollarix-widget');

  widget.configure({
    text: {
      question: 'Before you go, how was your experience?',
    }
  });
</script>

Mobile-Only Survey

Target mobile users specifically:

<pollarix-widget
  collector-id="YOUR_COLLECTOR_ID"
  api-key="YOUR_API_KEY"
  device="mobile"
  position="bottom-right"
></pollarix-widget>

<script>
  const widget = document.querySelector('pollarix-widget');

  widget.configure({
    style: {
      ratingSize: 'large',  // Bigger touch targets
      ratingShape: 'circle',
    }
  });
</script>

URL-Targeted Survey

Show only on specific pages:

<pollarix-widget
  collector-id="YOUR_COLLECTOR_ID"
  api-key="YOUR_API_KEY"
  url-match="/products/**,/checkout/success"
  url-exclude="/admin/**"
></pollarix-widget>

Custom Branded Theme

Match your brand identity:

<pollarix-widget
  collector-id="YOUR_COLLECTOR_ID"
  api-key="YOUR_API_KEY"
></pollarix-widget>

<script>
  const widget = document.querySelector('pollarix-widget');

  widget.configure({
    customTheme: {
      preset: 'light',
      variables: {
        // Brand colors
        colorPrimary: '#0066FF',
        colorPrimaryHover: '#0052CC',
        colorPrimaryLight: '#E6F0FF',

        // Typography
        fontFamily: "'Poppins', 'Helvetica', sans-serif",
        fontSizeBase: '16px',

        // Modern rounded design
        borderRadius: '16px',
        borderRadiusSmall: '12px',

        // Soft shadow
        shadowContainer: '0 16px 48px rgba(0, 0, 0, 0.12)',
      },
      rules: {
        '.submit-button': {
          borderRadius: '999px',
          fontWeight: '600',
        },
        '.rating-item': {
          borderWidth: '2px',
        },
      }
    }
  });
</script>

Dark Mode Theme

For dark-themed websites:

<pollarix-widget
  collector-id="YOUR_COLLECTOR_ID"
  api-key="YOUR_API_KEY"
  theme-preset="dark"
  theme-primary="#818CF8"
></pollarix-widget>

<script>
  // Or dynamically based on system preference
  const widget = document.querySelector('pollarix-widget');
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

  widget.configure({
    customTheme: {
      preset: prefersDark ? 'dark' : 'light'
    }
  });

  // Listen for system theme changes
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
    widget.configure({
      customTheme: {
        preset: e.matches ? 'dark' : 'light'
      }
    });
  });
</script>

Analytics Integration

Track all widget interactions:

React
HTML / Vanilla JS

import { useEffect, useRef, useCallback } from 'react';

declare global {
  function gtag(...args: unknown[]): void;
  namespace JSX {
    interface IntrinsicElements {
      'pollarix-widget': React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLElement> & {
          'collector-id': string;
          'api-key': string;
        },
        HTMLElement
      >;
    }
  }
}

export function TrackedSurvey({ collectorId, apiKey }: {
  collectorId: string;
  apiKey: string;
}) {
  const widgetRef = useRef<HTMLElement | null>(null);

  const handleSubmit = useCallback((e: CustomEvent) => {
    gtag('event', 'nps_survey_submitted', {
      event_category: 'engagement',
      value: e.detail.score,
    });

    fetch('/api/nps-callback', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        score: e.detail.score,
        responseId: e.detail.responseId,
      }),
    });
  }, []);

  useEffect(() => {
    const el = widgetRef.current;
    if (!el) return;

    el.addEventListener('pollarix:submit', handleSubmit as EventListener);
    return () => el.removeEventListener('pollarix:submit', handleSubmit as EventListener);
  }, [handleSubmit]);

  return (
    <pollarix-widget
      ref={widgetRef}
      collector-id={collectorId}
      api-key={apiKey}
    />
  );
}

<pollarix-widget
  collector-id="YOUR_COLLECTOR_ID"
  api-key="YOUR_API_KEY"
></pollarix-widget>

<script>
  const widget = document.querySelector('pollarix-widget');

  // Using analytics callbacks
  widget.configure({
    analytics: {
      onImpression: () => {
        gtag('event', 'nps_survey_shown', {
          event_category: 'engagement',
        });
      },
      onInteraction: (type) => {
        gtag('event', 'nps_survey_interaction', {
          event_category: 'engagement',
          event_label: type,
        });
      },
    }
  });

  // Or using events
  widget.addEventListener('pollarix:submit', (e) => {
    gtag('event', 'nps_survey_submitted', {
      event_category: 'engagement',
      value: e.detail.score,
    });

    fetch('/api/nps-callback', {
      method: 'POST',
      body: JSON.stringify({
        score: e.detail.score,
        responseId: e.detail.responseId,
      }),
    });
  });
</script>

User Identification

Pass user data with responses:

React
HTML / Vanilla JS

import { useEffect, useRef } from 'react';

interface User {
  id: string;
  email: string;
  displayName: string;
  subscription: { plan: string };
  createdAt: string;
  country: string;
  preferredLanguage: string;
}

export function IdentifiedSurvey({ collectorId, apiKey, user }: {
  collectorId: string;
  apiKey: string;
  user: User | null;
}) {
  const widgetRef = useRef<HTMLElement | null>(null);

  useEffect(() => {
    const el = widgetRef.current;
    if (!el) return;

    if (user) {
      (el as any).configure({
        prefill: {
          userId: user.id,
          email: user.email,
          name: user.displayName,
          metadata: {
            plan: user.subscription.plan,
            accountAge: user.createdAt,
            country: user.country,
            language: user.preferredLanguage,
          },
        },
      });
    } else {
      (el as any).configure({ prefill: {} });
    }
  }, [user]);

  return (
    <pollarix-widget
      ref={widgetRef}
      collector-id={collectorId}
      api-key={apiKey}
    />
  );
}

<pollarix-widget
  collector-id="YOUR_COLLECTOR_ID"
  api-key="YOUR_API_KEY"
></pollarix-widget>

<script>
  const widget = document.querySelector('pollarix-widget');

  // When user logs in
  function onUserLogin(user) {
    widget.configure({
      prefill: {
        userId: user.id,
        email: user.email,
        name: user.displayName,
        metadata: {
          plan: user.subscription.plan,
          accountAge: user.createdAt,
          country: user.country,
          language: user.preferredLanguage,
        }
      }
    });
  }

  // Clear when user logs out
  function onUserLogout() {
    widget.configure({
      prefill: {}
    });
  }
</script>

Conditional Display Logic

Advanced display logic:

<pollarix-widget
  collector-id="YOUR_COLLECTOR_ID"
  api-key="YOUR_API_KEY"
></pollarix-widget>

<script>
  const widget = document.querySelector('pollarix-widget');

  // Don't show to new users
  const userAge = Date.now() - new Date(user.createdAt).getTime();
  const daysOld = userAge / (1000 * 60 * 60 * 24);

  if (daysOld < 7) {
    widget.destroy();  // Remove widget for new users
  }

  // Show only after 3 successful actions
  let successfulActions = 0;

  function onSuccessfulAction() {
    successfulActions++;
    if (successfulActions >= 3) {
      widget.show();
    }
  }
</script>

SPA Route-Based Display

For single-page applications:

React
HTML / Vanilla JS
Vue

import { useEffect, useRef } from 'react';
import { useLocation } from 'react-router-dom';

const SURVEY_PATHS = ['/dashboard', '/checkout/success', '/onboarding/complete'];

export function PollarixSurvey({ collectorId, apiKey }: {
  collectorId: string;
  apiKey: string;
}) {
  const location = useLocation();
  const widgetRef = useRef<HTMLElement | null>(null);

  useEffect(() => {
    const el = widgetRef.current;
    if (!el) return;

    if (SURVEY_PATHS.includes(location.pathname)) {
      (el as any).show();
    } else {
      (el as any).hide();
    }
  }, [location.pathname]);

  return (
    <pollarix-widget
      ref={widgetRef}
      collector-id={collectorId}
      api-key={apiKey}
    />
  );
}

<pollarix-widget
  collector-id="YOUR_COLLECTOR_ID"
  api-key="YOUR_API_KEY"
></pollarix-widget>

<script>
  const widget = document.querySelector('pollarix-widget');
  const surveyPaths = ['/dashboard', '/checkout/success', '/onboarding/complete'];

  // Listen for navigation changes
  window.addEventListener('popstate', () => {
    if (surveyPaths.includes(location.pathname)) {
      widget.show();
    } else {
      widget.hide();
    }
  });
</script>

<script>
  const widget = document.querySelector('pollarix-widget');

  router.afterEach((to) => {
    const surveyPaths = ['/dashboard', '/checkout/success'];

    if (surveyPaths.includes(to.path)) {
      widget.show();
    } else {
      widget.hide();
    }
  });
</script>

Glass Effect Theme

Frosted glass design:

<pollarix-widget
  collector-id="YOUR_COLLECTOR_ID"
  api-key="YOUR_API_KEY"
></pollarix-widget>

<script>
  const widget = document.querySelector('pollarix-widget');

  widget.configure({
    customTheme: {
      preset: 'glass',
      variables: {
        colorPrimary: '#6366F1',
        colorBackground: 'rgba(255, 255, 255, 0.85)',
        shadowContainer: '0 8px 32px rgba(0, 0, 0, 0.1)',
      },
      rules: {
        '.widget-container': {
          backdropFilter: 'blur(12px)',
          border: '1px solid rgba(255, 255, 255, 0.3)',
        },
      }
    }
  });
</script>

Testing & Development

Force widget display during development:

<!-- Add force-show for testing -->
<pollarix-widget
  collector-id="YOUR_COLLECTOR_ID"
  api-key="YOUR_API_KEY"
  force-show="true"
></pollarix-widget>

<script>
  // Clear throttle via console
  window.Pollarix.clearThrottle();

  // Or add ?pollarix=test to URL to bypass throttling
  // https://yoursite.com/page?pollarix=test
</script>

Complete Production Setup

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
</head>
<body>
  <!-- Your app content -->

  <!-- Pollarix Widget -->
  <script async src="https://cdn.pollarix.com/widget/v2/widget.min.js"></script>
  <pollarix-widget
    id="nps-widget"
    collector-id="YOUR_COLLECTOR_ID"
    api-key="YOUR_API_KEY"
    position="bottom-right"
    delay="10000"
    min-days-between="90"
  ></pollarix-widget>

  <script>
    // Wait for both DOM and widget script
    document.addEventListener('DOMContentLoaded', () => {
      customElements.whenDefined('pollarix-widget').then(() => {
        const widget = document.getElementById('nps-widget');

        // Configure with user data
        if (window.currentUser) {
          widget.configure({
            prefill: {
              userId: currentUser.id,
              email: currentUser.email,
              metadata: {
                plan: currentUser.plan,
              }
            }
          });
        }

        // Track submissions
        widget.addEventListener('pollarix:submit', (e) => {
          console.log('NPS submitted:', e.detail.score);
        });
      });
    });
  </script>
</body>
</html>

Need Help?

Check the Configuration reference
Review Events & API for programmatic control
Visit our support page for assistance

Was this page helpful?

Basic NPS Survey​

Star Rating Survey​

Post-Purchase Survey​

Exit Intent Survey​

Mobile-Only Survey​

URL-Targeted Survey​

Custom Branded Theme​

Dark Mode Theme​

Analytics Integration​

User Identification​

Conditional Display Logic​

SPA Route-Based Display​

Glass Effect Theme​

Testing & Development​

Complete Production Setup​

Need Help?​