Script Tag Setup

Add the Feedhog widget to any website using a simple script tag. No build step required.

Script Tag Setup

The script tag method works with any website regardless of framework. It's the fastest way to add feedback collection.

Basic Setup

Add these two script blocks before the closing </body> tag:

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

  <!-- Feedhog Widget -->
  <script>
    window.feedhogSettings = {
      apiKey: 'fhpk_your_public_key'
    };
  </script>
  <script async src="https://cdn.feedhog.com/widget.js"></script>
</body>
</html>

Configuration

Configure the widget by setting window.feedhogSettings before loading the script:

<script>
  window.feedhogSettings = {
    // Required
    apiKey: 'fhpk_your_public_key',

    // Optional - appearance
    position: 'bottom-right',     // bottom-right, bottom-left, top-right, top-left
    primaryColor: '#3b82f6',      // Your brand color
    triggerText: 'Feedback',       // Button text
    showTrigger: true,             // Show/hide button

    // Optional - modal text
    title: 'Send us feedback',
    subtitle: 'We\'d love to hear from you',

    // Optional - pre-identify user
    user: {
      externalId: 'user-123',
      email: 'user@example.com',
      name: 'John Doe'
    }
  };
</script>
<script async src="https://cdn.feedhog.com/widget.js"></script>

User Identification

Static Identification

If you know the user when the page loads, include them in settings:

<script>
  window.feedhogSettings = {
    apiKey: 'fhpk_your_public_key',
    user: {
      externalId: '<%= currentUser.id %>',
      email: '<%= currentUser.email %>',
      name: '<%= currentUser.name %>'
    }
  };
</script>
<script async src="https://cdn.feedhog.com/widget.js"></script>

Dynamic Identification

Identify users after the widget loads (e.g., after login):

<script>
  window.feedhogSettings = {
    apiKey: 'fhpk_your_public_key'
  };
</script>
<script async src="https://cdn.feedhog.com/widget.js"></script>

<script>
  // After user logs in
  function onUserLogin(user) {
    if (window.FeedhogWidget) {
      window.FeedhogWidget.identify({
        externalId: user.id,
        email: user.email,
        name: user.displayName
      });
    }
  }

  // When user logs out
  function onUserLogout() {
    if (window.FeedhogWidget) {
      window.FeedhogWidget.reset();
    }
  }
</script>

JavaScript API

The widget exposes window.FeedhogWidget with these methods:

open()

Open the feedback modal programmatically:

window.FeedhogWidget.open();

close()

Close the feedback modal:

window.FeedhogWidget.close();

identify(user)

Identify a user:

window.FeedhogWidget.identify({
  externalId: 'user-123',
  email: 'user@example.com',
  name: 'John Doe',
  avatarUrl: 'https://example.com/avatar.jpg',
  metadata: {
    plan: 'pro'
  }
});

reset()

Clear user data:

window.FeedhogWidget.reset();

Custom Trigger Button

Hide the default button and use your own:

<script>
  window.feedhogSettings = {
    apiKey: 'fhpk_your_public_key',
    showTrigger: false
  };
</script>
<script async src="https://cdn.feedhog.com/widget.js"></script>

<!-- Custom button in your navigation -->
<nav>
  <a href="/">Home</a>
  <a href="/pricing">Pricing</a>
  <button onclick="window.FeedhogWidget.open()">
    Give Feedback
  </button>
</nav>

Multiple Triggers

Add feedback buttons in multiple places:

<script>
  window.feedhogSettings = {
    apiKey: 'fhpk_your_public_key',
    showTrigger: false
  };
</script>
<script async src="https://cdn.feedhog.com/widget.js"></script>

<!-- In header -->
<header>
  <button onclick="window.FeedhogWidget.open()">
    Share Feedback
  </button>
</header>

<!-- In footer -->
<footer>
  <a href="#" onclick="window.FeedhogWidget.open(); return false;">
    Send us your thoughts
  </a>
</footer>

<!-- Floating button -->
<button
  onclick="window.FeedhogWidget.open()"
  style="position: fixed; bottom: 20px; right: 20px;"
>
  💡 Ideas?
</button>

Framework Examples

WordPress

Add to your theme's footer.php or use a plugin to inject scripts:

<?php if (is_user_logged_in()): ?>
<script>
  window.feedhogSettings = {
    apiKey: 'fhpk_your_public_key',
    user: {
      externalId: '<?php echo get_current_user_id(); ?>',
      email: '<?php echo wp_get_current_user()->user_email; ?>',
      name: '<?php echo wp_get_current_user()->display_name; ?>'
    }
  };
</script>
<?php else: ?>
<script>
  window.feedhogSettings = {
    apiKey: 'fhpk_your_public_key'
  };
</script>
<?php endif; ?>
<script async src="https://cdn.feedhog.com/widget.js"></script>

Django

In your base template:

{% load static %}

<script>
  window.feedhogSettings = {
    apiKey: 'fhpk_your_public_key',
    {% if user.is_authenticated %}
    user: {
      externalId: '{{ user.id }}',
      email: '{{ user.email }}',
      name: '{{ user.get_full_name }}'
    }
    {% endif %}
  };
</script>
<script async src="https://cdn.feedhog.com/widget.js"></script>

Ruby on Rails

In app/views/layouts/application.html.erb:

<script>
  window.feedhogSettings = {
    apiKey: 'fhpk_your_public_key',
    <% if current_user %>
    user: {
      externalId: '<%= current_user.id %>',
      email: '<%= current_user.email %>',
      name: '<%= current_user.name %>'
    }
    <% end %>
  };
</script>
<script async src="https://cdn.feedhog.com/widget.js"></script>

PHP

<script>
  window.feedhogSettings = {
    apiKey: 'fhpk_your_public_key',
    <?php if (isset($_SESSION['user'])): ?>
    user: {
      externalId: '<?php echo htmlspecialchars($_SESSION['user']['id']); ?>',
      email: '<?php echo htmlspecialchars($_SESSION['user']['email']); ?>',
      name: '<?php echo htmlspecialchars($_SESSION['user']['name']); ?>'
    }
    <?php endif; ?>
  };
</script>
<script async src="https://cdn.feedhog.com/widget.js"></script>

Loading States

Wait for the widget to load before using the API:

// Option 1: Check if ready
function openFeedback() {
  if (window.FeedhogWidget) {
    window.FeedhogWidget.open();
  } else {
    console.log('Widget not loaded yet');
  }
}

// Option 2: Wait for load
function waitForWidget() {
  return new Promise((resolve) => {
    if (window.FeedhogWidget) {
      resolve();
    } else {
      const interval = setInterval(() => {
        if (window.FeedhogWidget) {
          clearInterval(interval);
          resolve();
        }
      }, 100);
    }
  });
}

// Usage
waitForWidget().then(() => {
  window.FeedhogWidget.identify({
    externalId: 'user-123'
  });
});

Troubleshooting

Widget not appearing

  1. Check that your API key is valid (starts with fhpk_)
  2. Verify the script is loaded (check Network tab in DevTools)
  3. Check for JavaScript errors in the Console

User not identified

  1. Ensure externalId is provided (required field)
  2. Check that identify() is called after widget loads
  3. Verify the user object has valid data

Styling issues

The widget uses Shadow DOM for isolation. If you're seeing unexpected styles:

  1. The widget should not be affected by your site's CSS
  2. Use primaryColor for brand customization
  3. See Customization for more options