Skip to main content

Installation

Add the Pollarix Widget to your website with a script tag and a custom element. This guide covers HTML, React, WordPress, and Shopify installation. You need a Pro or Enterprise plan, a Widget collector, and permission to add scripts to your website.

Basic Setup​

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

<script src="https://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​

  1. Go to your Pollarix Dashboard
  2. Open your survey's Collectors
  3. Create a Widget collector and open its embed code; Basic and Advance do not include widgets
  4. 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://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​

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

  <!-- Pollarix Widget -->
  <script src="https://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>

Add the widget to WordPress​

If your WordPress site permits custom JavaScript, use the same HTML snippet from Basic setup:

  1. Open the page editor and add a Custom HTML block.

  2. Add the pollarix-widget element in the HTML panel and load the widget script once through your site's script insertion tool. On versions with a JavaScript panel, use this loader there:

    const script = document.createElement('script');
    script.src = 'https://pollarix.com/widget/v2/widget.min.js';
    script.async = true;
    document.head.appendChild(script);

  3. Preview the published page and verify the widget before adding it to more pages.

WordPress can remove scripts for users without unfiltered_html permission. If the script disappears, ask your site administrator to install it through an approved script insertion tool. See WordPress Custom HTML documentation for version and permission details.

Add the widget to Shopify​

If you can edit your storefront theme code:

  1. Duplicate your theme so you can preview the change first.
  2. In the duplicate theme's code editor, open layout/theme.liquid and add the Basic setup snippet before </body>.
  3. Preview the storefront and verify the widget before publishing the theme.

This uses a theme code snippet. Keep a copy when updating or replacing your theme. See Shopify theme code documentation for access requirements and preview steps.

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:

  1. Open your browser's developer console
  2. Run: window.Pollarix.getWidget()
  3. 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​

Was this page helpful?