Installation

Add the Pollarix Widget to your website with a simple script tag.

Basic Setup

Add these two lines to your HTML, just before the closing </body> tag:

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

Getting Your Credentials

Go to your Pollarix Dashboard
Navigate to Collectors and select your collector
Click Embed Widget
Copy the collector-id and api-key values

Keep Your API Key Safe

Your API key identifies your account. While it's safe to use in client-side code (it only allows submitting responses), avoid sharing it publicly or committing it to public repositories.

Async Loading

For better page performance, load the widget script asynchronously:

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

The widget will initialize automatically when the script loads.

Framework Integration

HTML/Vanilla JS
React
Vue
Next.js

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

  <!-- Pollarix Widget -->
  <script src="https://cdn.pollarix.com/widget/v2/widget.min.js"></script>
  <pollarix-widget
    collector-id="YOUR_COLLECTOR_ID"
    api-key="YOUR_API_KEY"
    position="bottom-right"
  ></pollarix-widget>
</body>
</html>

import { useEffect, useRef } from 'react';

function App() {
  const widgetRef = useRef(null);

  useEffect(() => {
    // Load the widget script
    const script = document.createElement('script');
    script.src = 'https://cdn.pollarix.com/widget/v2/widget.min.js';
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    <div>
      {/* Your app content */}

      <pollarix-widget
        ref={widgetRef}
        collector-id="YOUR_COLLECTOR_ID"
        api-key="YOUR_API_KEY"
      />
    </div>
  );
}

<template>
  <div>
    <!-- Your app content -->

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

<script>
export default {
  mounted() {
    // Load the widget script
    const script = document.createElement('script');
    script.src = 'https://cdn.pollarix.com/widget/v2/widget.min.js';
    script.async = true;
    document.body.appendChild(script);
  }
}
</script>

'use client';

import { useEffect } from 'react';
import Script from 'next/script';

export default function PollarixWidget() {
  return (
    <>
      <Script
        src="https://cdn.pollarix.com/widget/v2/widget.min.js"
        strategy="lazyOnload"
      />
      <pollarix-widget
        collector-id="YOUR_COLLECTOR_ID"
        api-key="YOUR_API_KEY"
      />
    </>
  );
}

Single Page Applications (SPA)

For SPAs where routes change without page reload, use the JavaScript API to control the widget:

// Get widget reference
const widget = document.querySelector('pollarix-widget');

// Show widget on specific route
if (window.location.pathname === '/checkout/success') {
  widget.show();
}

// Update user data when they log in
widget.configure({
  prefill: {
    userId: user.id,
    email: user.email,
  }
});

TypeScript Support

The widget exports TypeScript definitions. Add type support with:

// Extend HTMLElement for the widget
interface PollarixWidgetElement extends HTMLElement {
  show(): void;
  hide(): void;
  toggle(): void;
  reset(): void;
  destroy(): void;
  configure(config: Partial<WidgetConfig>): void;
  getConfig(): WidgetConfig;
  setScore(score: number): void;
  isThrottled(): boolean;
  clearThrottle(): void;

  readonly score: number | null;
  readonly isVisible: boolean;
  readonly isSubmitting: boolean;
}

// Use with type assertion
const widget = document.querySelector('pollarix-widget') as PollarixWidgetElement;

Verify Installation

Once installed, you can verify the widget is working:

Open your browser's developer console
Run: window.Pollarix.getWidget()
If it returns the widget element, installation is successful

Testing Mode

Add force-show="true" to bypass frequency capping during testing:

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

Next Steps

Configuration - Customize widget behavior
Triggers & Targeting - Control when and where the widget appears
Styling - Match the widget to your brand

Was this page helpful?

Basic Setup​

Getting Your Credentials​

Async Loading​

Framework Integration​

Single Page Applications (SPA)​

TypeScript Support​

Verify Installation​

Next Steps​