SDK Installation
Install the UserHero JavaScript SDK
SDK Installation
The UserHero widget is delivered as a lightweight JavaScript SDK that you embed on your website.
Quick Install
Add this script tag to your website:
<script
async
src="https://userhero.co/widget.js"
data-key="pk_live_your_public_key">
</script>The data-key attribute is your project's public key, which you can find in your dashboard under Project Settings → Widget Code.
The feedback widget renders in an isolated frame, so your site's CSS and JavaScript can't change how it looks or capture what visitors type into it — and the widget won't affect your page either. The one exception is inline forms set to the Naked style, which intentionally inherit your page's fonts and colors to blend in (see Customization).
Script Attributes
| Attribute | Required | Description |
|---|---|---|
src | Yes | Widget script URL |
data-key | Yes | Your public key (pk_live_... or pk_test_...) |
async | Recommended | Load without blocking page render |
defer | Alternative | Load after HTML parsing |
Advanced Configuration
For more control, use a configuration object:
<script>
window.UserHeroConfig = {
publicKey: 'pk_live_your_public_key',
apiBase: 'https://userhero.co', // Optional: custom API endpoint
};
</script>
<script async src="https://userhero.co/widget.js"></script>Global Object
After loading, the SDK exposes a global UserHero object:
// Check if SDK is loaded
if (window.UserHero) {
console.log('UserHero SDK is ready');
}
// Or wait for it
window.addEventListener('userhero:ready', () => {
console.log('UserHero SDK is ready');
});Bundle Size
The UserHero widget is optimized for performance:
| Metric | Value |
|---|---|
| Script size | ~25KB gzipped |
| Load time | < 100ms |
| No dependencies | ✅ |