JavaScript SDK
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.
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 | ✅ |