Quick Start

Get UserHero running on your website in just a few steps.

Step 1: Create an Account

Go to userhero.co and sign up
A workspace will be created automatically on your first login
Create your first project by entering your website domain

Navigate to your project in the dashboard
Click "Create Widget"
Choose a template:
- Floating Feedback - A floating button that opens a modal
- Bug Report - Focused on bug reports with optional screenshots
- Rating (CSAT) - Quick rating with optional comments

Copy your widget embed code from the dashboard and add it to your website:

<script 
  async 
  src="https://userhero.co/widget.js" 
  data-key="pk_live_your_public_key">
</script>

Add this script just before the closing </body> tag for best performance.

Installation Methods

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
</head>
<body>
  <!-- Your content -->
  
  <!-- UserHero Widget -->
  <script 
    async 
    src="https://userhero.co/widget.js" 
    data-key="pk_live_your_public_key">
  </script>
</body>
</html>

// In your App.tsx or layout component
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://userhero.co/widget.js';
    script.async = true;
    script.dataset.key = 'pk_live_your_public_key';
    document.body.appendChild(script);
    
    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return <div>Your app content</div>;
}

// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script 
          src="https://userhero.co/widget.js"
          data-key="pk_live_your_public_key"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}

<!-- App.vue -->
<script setup>
import { onMounted, onUnmounted } from 'vue';

let script;

onMounted(() => {
  script = document.createElement('script');
  script.src = 'https://userhero.co/widget.js';
  script.async = true;
  script.dataset.key = 'pk_live_your_public_key';
  document.body.appendChild(script);
});

onUnmounted(() => {
  if (script) {
    document.body.removeChild(script);
  }
});
</script>