<script type="module" src="https://cdn.jsdelivr.net/npm/pollcatch@latest"></script>

npm install pollcatch
# or
pnpm install pollcatch

<poll-catch
  type="stars"
  name="my-feedback"
  question="Rate our service"
  num-stars="5"
  star-color="#ffc107"
  show-stats="after-vote">
</poll-catch>

<poll-catch type="stars" widget-id="abc123xyz"></poll-catch>

<!-- Segment responses by page -->
<poll-catch type="stars" widget-id="abc123xyz" metadata="pricing-page"></poll-catch>

<!-- Star rating -->
<poll-catch type="stars" question="Rate our service" num-stars="5"></poll-catch>

<!-- NPS widget -->
<poll-catch type="nps" question="How likely are you to recommend us?"></poll-catch>

<!-- Poll widget -->
<poll-catch type="poll" question="Favorite color?" options="Red,Blue,Green"></poll-catch>

<!-- Reaction widget -->
<poll-catch type="reaction" question="Was this helpful?" options="👍,👎"></poll-catch>

<poll-catch
  type="stars"
  name="satisfaction"
  question="How satisfied are you?"
  num-stars="5"
  star-color="#ffc107"
  show-stats="after-vote">
</poll-catch>

<poll-catch
  type="reaction"
  name="article-reaction"
  question="React to this article"
  options="👍,❤️,😂,😮,😢,😡"
  show-counts="true"
  show-stats="always">
</poll-catch>

<poll-catch
  type="nps"
  name="nps-score"
  question="How likely are you to recommend us?"
  min-label="Not likely"
  max-label="Very likely"
  show-stats="after-vote">
</poll-catch>

<poll-catch
  type="poll"
  name="features-poll"
  question="Which features do you want?"
  options="Dark Mode,Mobile App,API Access,Integrations"
  multiple="true"
  show-stats="always"
  show-chart="true">
</poll-catch>

<poll-catch type="poll" name="work-location" question="Where do you prefer to work?">
  <poll-catch-option value="office" icon="🏢" tooltip="Work from office">Office</poll-catch-option>
  <poll-catch-option value="home" icon="🏠" tooltip="Work from home">From Home</poll-catch-option>
  <poll-catch-option value="hybrid" icon="🔄" tooltip="Mix of both">Hybrid</poll-catch-option>
</poll-catch>

<!-- Same widget, different metadata per page -->
<poll-catch type="stars" widget-id="abc123xyz" metadata="homepage"></poll-catch>

<!-- On another page -->
<poll-catch type="stars" widget-id="abc123xyz" metadata="pricing"></poll-catch>

<!-- A/B test variant -->
<poll-catch type="stars" widget-id="abc123xyz" metadata="checkout-v2"></poll-catch>

:root {
  --pc-primary-color: #2196f3;
  --pc-accent-color: #f2b200;
  --pc-text-color: buttontext;
  --pc-mute-color: #cccccc;
  --pc-background-color: transparent;
  --pc-border-color: #dee2e6;
  --pc-hover-color: rgba(0, 0, 0, 0.05);
}

:root {
  --pc-font-size-base: 1rem;
  --pc-font-size-small: clamp(0.6em, 0.7em, 0.8em);
  --pc-font-size-large: clamp(1em, 1.1em, 1.2em);
  --pc-line-height-base: 1.5;
}

/* Stars Widget */
poll-catch[type="stars"] {
  --pc-star-color: #ffc107;
  --pc-star-hover-color: /* falls back to star-color */;
  --pc-stars-star-size: clamp(1.2em, calc(1.2em + 0.3vw), 2em);
  --pc-stars-hover-scale: 1.15;
}

/* NPS Widget */
poll-catch[type="nps"] {
  --pc-nps-button-width: clamp(1.4em, calc(1.2em + 0.3vw), 2em);
  --pc-nps-button-height: clamp(1.6em, calc(1.5em + 0.5vw), 2.4em);
}

/* Reaction Widget */
poll-catch[type="reaction"] {
  --pc-reaction-size: 1em;
  --pc-button-radius: 990px;
}

<poll-catch
  type="stars"
  question="Custom styled stars"
  css=".stars { gap: 0.5em; } .star { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); }">
</poll-catch>

/* Automatic dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --pc-primary-color: #0d6efd;
    --pc-text-color: #ffffff;
    --pc-background-color: #212529;
    --pc-border-color: #495057;
    --pc-mute-color: #6c757d;
  }
}

/* Manual toggle */
[data-theme="dark"] {
  --pc-text-color: #ffffff;
  --pc-background-color: #212529;
}

:root {
  --pc-font-size-base: 0.875rem;
}

@media (min-width: 768px) {
  :root {
    --pc-font-size-base: 1rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --pc-font-size-base: 1.125rem;
  }
}

interface PollcatchEventDetail {
  widgetType: string;      // 'stars', 'reaction', 'nps', 'poll'
  widgetId?: string;       // The widget-id (account-managed widgets)
  widgetName: string;      // The name attribute
  sessionId?: string;      // Session identifier (on submit)
  timestamp: string;       // Unix timestamp (seconds)
  url: string;             // Current page URL
  numericValue?: number;   // For numeric widgets (stars, NPS)
  textValues?: string[];   // For selection widgets (poll, reaction)
  metadata?: string;       // Custom metadata
}

const widget = document.querySelector('poll-catch[type="stars"]');

// Listen for selection changes
widget.addEventListener('change', (e) => {
  const { numericValue, widgetName } = e.detail;
  console.log(`${widgetName} rated: ${numericValue} stars`);
});

// Listen for successful submission
widget.addEventListener('submit', (e) => {
  const { numericValue, widgetName } = e.detail;
  console.log(`${widgetName} submitted: ${numericValue} stars`);

  // Send to your own analytics
  fetch('/api/feedback', {
    method: 'POST',
    body: JSON.stringify(e.detail)
  });
});

// Listen for all widget events on the page
document.addEventListener('submit', (e) => {
  if (e.target.tagName === 'POLL-CATCH') {
    const { widgetType, widgetName, numericValue, textValues } = e.detail;
    console.log(`Widget: ${widgetName} (${widgetType})`, numericValue || textValues);
  }
});

<!-- Send data to your own API -->
<poll-catch
  type="stars"
  name="feedback"
  question="Rate us"
  data-endpoint="https://api.yoursite.com/feedback">
</poll-catch>

<script>
  window.myDataHandler = async (projectKey, widgetName, options) => {
    // Custom data fetching logic
    const response = await fetch(`/api/data/${widgetName}`);
    return await response.json();
  };
</script>

<poll-catch
  type="stars"
  name="custom-widget"
  question="Rate us"
  data-func="myDataHandler">
</poll-catch>

import { useEffect, useRef } from 'react';

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

  useEffect(() => {
    const widget = widgetRef.current;
    const handleChange = (e) => console.log('Changed:', e.detail);

    widget?.addEventListener('change', handleChange);
    return () => widget?.removeEventListener('change', handleChange);
  }, []);

  return (
    <poll-catch
      ref={widgetRef}
      type="nps"
      name="nps-score"
      question="How likely are you to recommend us?"
      show-stats="after-vote"
    />
  );
}

<template>
  <poll-catch
    type="poll"
    :name="widgetName"
    :question="pollQuestion"
    :options="pollOptions"
    @change="handleChange"
  />
</template>

<script>
export default {
  data() {
    return {
      widgetName: 'feature-poll',
      pollQuestion: 'Which feature would you like next?',
      pollOptions: 'Dark Mode,Mobile App,API Access',
    };
  },
  methods: {
    handleChange(e) {
      console.log('Poll changed:', e.detail);
    },
  },
};
</script>