Installing Popsee

Quick Start

Add this script tag to your website, just before the closing </body> tag:

<script src="https://popsee.com/popsee.js" data-api-key="YOUR_API_KEY"></script>

Replace YOUR_API_KEY with the API key from your survey's Embed tab.

Finding Your Embed Code

Each Popsee has its own unique API key. To find the embed code for a specific survey:

1. Log in to your Popsee dashboard
2. Click on the survey you want to embed
3. Go to the Embed tab
4. Copy the complete script tag with the API key included

Each API key starts with pk_ and is unique to that specific Popsee.

Custom Parameters

Pass user data to Popsee using data attributes. This data is stored with survey responses and can be used for filtering and analysis.

<script
  src="https://popsee.com/popsee.js"
  data-api-key="YOUR_API_KEY"
  data-user-id="user_12345"
  data-email="customer@example.com"
  data-plan="pro"
></script>

Dynamic Parameters

If your user data is dynamic (from your backend or JavaScript), you can set the attributes programmatically:

<script>
  (function() {
    var script = document.createElement('script');
    script.src = 'https://popsee.com/popsee.js';
    script.setAttribute('data-api-key', 'YOUR_API_KEY');

    // Set dynamic parameters
    script.setAttribute('data-user-id', currentUser.id);
    script.setAttribute('data-email', currentUser.email);
    script.setAttribute('data-plan', currentUser.plan);

    document.body.appendChild(script);
  })();
</script>

Framework Examples

// In your layout or _app.js
import Script from 'next/script';

export default function Layout({ children }) {
  const user = useUser(); // Your auth hook

  return (
    <>
      {children}
      <Script
        src="https://popsee.com/popsee.js"
        data-api-key="YOUR_API_KEY"
        data-user-id={user?.id}
        data-email={user?.email}
        strategy="lazyOnload"
      />
    </>
  );
}

// In nuxt.config.js
export default {
  head: {
    script: [
      {
        src: 'https://popsee.com/popsee.js',
        'data-api-key': 'YOUR_API_KEY',
        defer: true
      }
    ]
  }
}

// Or dynamically in a component
mounted() {
  const script = document.createElement('script');
  script.src = 'https://popsee.com/popsee.js';
  script.setAttribute('data-api-key', 'YOUR_API_KEY');
  script.setAttribute('data-user-id', this.user.id);
  document.body.appendChild(script);
}

// Add to functions.php
function add_popsee_script() {
  ?>
  <script
    src="https://popsee.com/popsee.js"
    data-api-key="YOUR_API_KEY"
  ></script>
  <?php
}
add_action('wp_footer', 'add_popsee_script');

Verify Installation

After adding the script, verify it's working:

1. Open your website in a browser
2. Open the browser's Developer Tools (F12 or right-click → Inspect)
3. Go to the Network tab and filter by "popsee"
4. Refresh the page - you should see the script loading
5. Check the Console tab for any errors

If your survey has targeting rules configured, the widget will only appear when those conditions are met.