Portal Embedding
Embed your public portal on your website using iframe or widget
Portal Embedding
Display your Public Portal directly on your website without redirecting users to an external page.
Embedding Options
Option 1: Direct Link
Simply link to your portal URL:
<a href="https://userhero.co/portal/your-slug">
View our feedback portal
</a>Option 2: Iframe Embed
Embed the portal in an iframe for a seamless experience:
<iframe
src="https://userhero.co/embed/your-slug"
width="100%"
height="600"
frameborder="0"
title="Feedback Portal"
></iframe>The /embed/ route provides a minimal version optimized for iframe embedding (no header/footer chrome).
Option 3: Portal Widget Script
For more control, use the portal widget script:
<div data-userhero-portal="your-slug"></div>
<script async src="https://userhero.co/portal-widget.js"></script>The widget script automatically:
- Finds elements with
data-userhero-portalattribute - Creates an iframe with the embedded portal
- Handles responsive sizing
Widget Script Options
Basic Usage
<div data-userhero-portal="your-slug"></div>
<script async src="https://userhero.co/portal-widget.js"></script>Custom Height
<div
data-userhero-portal="your-slug"
data-height="800"
></div>Manual Initialization
If you need more control over when the portal loads:
<div id="my-portal"></div>
<script src="https://userhero.co/portal-widget.js"></script>
<script>
// Initialize manually
UserHeroPortal.init({
container: '#my-portal',
slug: 'your-slug',
height: 700
});
</script>Responsive Design
Iframe Approach
Make the iframe responsive with CSS:
<div style="position: relative; padding-bottom: 75%; height: 0; overflow: hidden;">
<iframe
src="https://userhero.co/embed/your-slug"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
frameborder="0"
title="Feedback Portal"
></iframe>
</div>Widget Script
The portal widget handles responsive sizing automatically based on its container width.
Embedding in Frameworks
React
function FeedbackPortal() {
return (
<iframe
src="https://userhero.co/embed/your-slug"
width="100%"
height="600"
frameBorder="0"
title="Feedback Portal"
/>
);
}Vue
<template>
<iframe
src="https://userhero.co/embed/your-slug"
width="100%"
height="600"
frameborder="0"
title="Feedback Portal"
/>
</template>Next.js
export default function PortalPage() {
return (
<div className="container mx-auto py-8">
<h1>Community Feedback</h1>
<iframe
src="https://userhero.co/embed/your-slug"
className="w-full h-[600px] border-0"
title="Feedback Portal"
/>
</div>
);
}Dedicated Page vs. Inline
Dedicated Page
Best for:
- Feature request portals
- Public roadmaps
- Community feedback hubs
Create a dedicated /feedback or /ideas page on your site.
Inline Section
Best for:
- Help centers
- Documentation sites
- Product pages
Embed as a section within existing pages.
Security Considerations
CORS
The embed routes include appropriate CORS headers to allow cross-origin iframe embedding.
Content Security Policy
If your site uses CSP, ensure you allow framing from userhero.co:
Content-Security-Policy: frame-src https://userhero.co;Troubleshooting
Portal Not Loading
- Check that your portal is enabled in project settings
- Verify the slug is correct
- Check browser console for CSP errors
Styling Issues
The embedded portal uses its own styles and shouldn't conflict with your site. If you see issues:
- Ensure the iframe has explicit dimensions
- Check for CSS that might affect iframes globally
Authentication
Portal visitors don't need to authenticate. They provide their email and name when voting or commenting, which is stored in their browser's localStorage.
Copy Embed Code
The easiest way to get your embed code:
- Go to Project Settings → Public Portal
- Click "Copy Embed Code"
- Paste into your website