Configuration

Configure the widget using HTML attributes or the JavaScript API.

Configuration Methods

HTML Attributes

<pollarix-widget
  collector-id="YOUR_COLLECTOR_ID"
  api-key="YOUR_API_KEY"
  theme="dark"
  position="bottom-left"
  language="en"
></pollarix-widget>

JavaScript API

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

widget.configure({
  theme: 'dark',
  position: 'bottom-left',
  language: 'en',
});

---

Core Settings

Attribute	Type	Default	Description
collector-id	string	required	Your collector identifier
api-key	string	required	Your API key
theme	string	'light'	Preset theme: light, dark, glass, minimal
position	string	'bottom-right'	Widget position
language	string	'en'	Language code
show-powered-by	boolean	true	Show "Powered by Pollarix" footer

Position Options

---

Scale Configuration

Control the rating scale type and range.

widget.configure({
  scale: {
    type: 'nps',      // 'nps' | 'stars' | 'numeric'
    min: 0,           // Minimum value (optional)
    max: 10,          // Maximum value (optional)
  }
});

Scale Types

Type	Range	Thresholds
nps	0-10	Detractor: ≤6, Passive: 7-8, Promoter: 9-10
stars	1-5	Detractor: ≤2, Passive: 3, Promoter: 4-5
numeric	1-10	Detractor: ≤4, Passive: 5-7, Promoter: 8-10

---

Text Configuration

Customize all widget copy.

widget.configure({
  text: {
    question: 'How likely are you to recommend us?',
    lowLabel: 'Not likely',
    highLabel: 'Very likely',
    submitButton: 'Submit',
    thankYouMessage: 'Thank you for your feedback!',
    feedbackPlaceholder: 'Tell us more (optional)',
    closeLabel: 'Close survey',
  }
});

Category-Specific Thank You Messages

Show different messages based on the score:

widget.configure({
  text: {
    thankYouByCategory: {
      detractor: "We're sorry to hear that. We'll work to improve.",
      passive: "Thanks for your feedback!",
      promoter: "Awesome! We're glad you love us!",
    }
  }
});

---

Frequency Configuration

Control how often the widget appears to prevent survey fatigue.

widget.configure({
  frequency: {
    minDaysBetween: 90,    // Days between displays (default: 90)
    maxShowsPerUser: 3,     // Maximum times to show ever
    storageKey: 'myapp',    // Custom localStorage prefix
    forceShow: false,       // Bypass throttling (for testing)
  }
});

HTML Attributes

Attribute	Type	Description
min-days-between	number	Minimum days between displays
max-shows	number	Maximum shows per user
force-show	boolean	Bypass throttling for testing

---

Prefill Configuration

Pass user data to be submitted with responses.

widget.configure({
  prefill: {
    userId: 'user-123',
    email: 'user@example.com',
    name: 'John Doe',
    metadata: {
      plan: 'pro',
      country: 'US',
      signupDate: '2024-01-15',
    }
  }
});

HTML Attributes

Attribute	Type	Description
user-id	string	User identifier
user-email	string	User email
user-name	string	User name

---

Analytics Configuration

Integrate with your analytics platform.

widget.configure({
  analytics: {
    onImpression: () => {
      // Track widget shown
      analytics.track('NPS Widget Shown');
    },
    onInteraction: (type) => {
      // Track user interaction
      analytics.track('NPS Widget Interaction', { type });
    },
    exportResponse: true,  // Include response in submit event
  }
});

---

Configuration Methods

configure(config)

Update configuration with deep merging:

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

// Updates are merged, not replaced
widget.configure({
  text: { question: 'New question' }
});
// Other text settings preserved

getConfig()

Retrieve current configuration:

const config = widget.getConfig();
console.log(config.scale.type);  // 'nps'

updateConfig(partial)

Alias for configure():

widget.updateConfig({ theme: 'dark' });

---

HTML Attributes Reference

All available HTML attributes:

<pollarix-widget
  <!-- Core -->
  collector-id="YOUR_ID"
  api-key="YOUR_KEY"
  theme="light"
  position="bottom-right"
  language="en"
  show-powered-by="true"

  <!-- Triggers -->
  delay="5000"
  scroll-depth="50"
  page-views="3"
  exit-intent="true"
  on-event="my-custom-event"

  <!-- Frequency -->
  min-days-between="90"
  max-shows="3"
  force-show="false"

  <!-- Targeting -->
  url-match="/checkout/*"
  url-exclude="/admin/*"
  device="all"

  <!-- Prefill -->
  user-id="user-123"
  user-email="user@example.com"
  user-name="John Doe"

  <!-- Style -->
  accent-color="#5046E5"
  rating-shape="rounded"
  color-scheme="neutral"
  rating-size="compact"

  <!-- Theme (Advanced) -->
  theme-preset="light"
  theme-primary="#5046E5"
  theme-background="#FFFFFF"
  theme-text="#111827"
  theme-font-family="Inter, sans-serif"
  theme-border-radius="8px"
></pollarix-widget>

---

Next Steps

• Triggers & Targeting - Control when the widget appears
• Styling - Customize appearance with themes
• Events & API - JavaScript API and events