JavaScript SDK
SDK Configuration
Configure the UserHero SDK behavior
SDK Configuration
Configure the UserHero SDK using either script attributes or a global configuration object.
Configuration Methods
Method 1: Script Attributes
The simplest approach—add attributes directly to the script tag:
<script
async
src="https://userhero.co/widget.js"
data-key="pk_live_your_public_key">
</script>Method 2: Global Config Object
For more options, define a config object before the script loads:
<script>
window.UserHeroConfig = {
publicKey: 'pk_live_your_public_key',
apiBase: 'https://userhero.co',
};
</script>
<script async src="https://userhero.co/widget.js"></script>Configuration Options
| Option | Type | Default | Description |
|---|---|---|---|
publicKey | string | — | Your project's public key (required) |
apiBase | string | https://userhero.co | API endpoint (for proxying) |
Environment Keys
UserHero supports different keys for different environments:
| Key Prefix | Environment | Usage |
|---|---|---|
pk_live_ | Production | Live production traffic |
pk_test_ | Development | Testing and development |
Test keys have higher rate limits for development but feedback doesn't count toward your usage quota.
Auto-Detection
The SDK automatically detects:
- API Base: Inferred from the script's source URL
- Environment: Based on key prefix (
pk_live_vspk_test_)
Initialization State
The SDK sets a global flag when initialized:
// Check if already loaded
if (window.UserHeroLoaded) {
console.log('Widget already initialized');
}This prevents duplicate initializations when the script is accidentally included multiple times.
Conditional Loading
Load the widget conditionally based on environment or user state:
// Only load in production
if (process.env.NODE_ENV === 'production') {
const script = document.createElement('script');
script.src = 'https://userhero.co/widget.js';
script.dataset.key = 'pk_live_your_public_key';
script.async = true;
document.body.appendChild(script);
}// Only load for logged-in users
if (currentUser) {
const script = document.createElement('script');
script.src = 'https://userhero.co/widget.js';
script.dataset.key = 'pk_live_your_public_key';
document.body.appendChild(script);
}