You must create an Embed Configuration and whitelist the domain(s) where the widget will appear.
You can choose your widget layout (Grid, List, Calendar) and select a preset theme.
Whitelisting Domains
What is Domain Whitelisting?
Domain whitelisting is a security feature that controls which websites can display your events. Think of it like a guest list for your events.
How to Add Domains
1. In the "Whitelisted Domains" section, you'll see existing domains (default: `localhost:3000` for testing)
2. To add a new domain:
- Click the "+" button
- Enter your domain **without** `http://`, `https://`, or `www`
**Examples:**
✅ **Correct:**
- `myeventsite.com`
- `events.mycompany.org`
- `subdomain.example.com`
❌ **Incorrect:**
- `https://myeventsite.com` (don't include protocol)
- `www.myeventsite.com` (don't include www)
- `myeventsite.com/events` (don't include paths)
Getting and Installing Your Embed Code
Once your configuration is saved, Hyprr will generate an embed code like this:
<!-- Hyprr Events Embed -->
<div id="hyprr-events-widget">
</div>
<script src="https://gohyprr.live/embed/v1/hyprr-embed.min.js"></script> <script>
HyprrEmbed.initEventsPage({ container: '#hyprr-events-widget', tenantId: 'your-tenant-id',
embedConfigId: 'your-config-id'
});
</script>
<!-- End Hyprr Events Embed -->
To install:
Copy your code
Paste it into your site’s HTML where you want events to appear
Save and refresh your page
Most modern site builders (like WordPress, Wix, and Squarespace) have an “HTML” or “Custom Code” block where you can paste this directly.
Installing on Your Website
For WordPress, Wix, Squarespace, etc.
1. Find the right page
- Go to the page where you want events to appear
- Often an "Events" or "Calendar" page
2. Add an HTML/Code block
- Most website builders have a "Custom HTML" or "Code" block
- Add this block where you want events to show
3. Paste the code
- Paste your entire embed code into the HTML block
- Save the page
4. Preview and publish
- Preview your page to see events
- If everything looks good, publish the page
For Custom HTML Websites
1. Open your HTML file
- Find the page file (e.g., `events.html`)
2. Paste the code
- Paste the embed code where you want events to appear
- Typically inside a `<div>` or `<section>` in the page body
3. Upload to your server
- Upload the updated file to your web server
WordPress Specific Instructions
Using the Block Editor (Gutenberg):
1. Edit the page where you want events
2. Click the "+" button to add a new block
3. Search for "Custom HTML" or "HTML"
4. Select the "Custom HTML" block
5. Paste your embed code
6. Preview and publish
Using the Classic Editor:
1. Edit the page in "Text" mode (not "Visual")
2. Paste your embed code where you want it
3. Save and preview
---
Understanding the Embed Code
What each part does:
1. Container div (`<div id="hyprr-events-widget"></div>`)
- Where your events will appear
- You can change the ID if needed
2. SDK Script (`<script src="...hyprr-embed.min.js"></script>`)
- Loads the Hyprr embed functionality
- Must be included before the initialization
3. Initialization Script (`HyprrEmbed.initEventsPage({...})`)
- Configures and displays your events
- Contains your unique tenant and configuration IDs
---
Troubleshooting
1. My embed doesn’t show up
Ensure your domain is whitelisted
Remove
https://orwwwfrom the whitelist entriesCheck browser console for “Domain not authorized” messages
2. My events look broken
Make sure your container is wide enough (minimum 300px)
Check for conflicting CSS on your site
3. My events are not updating
Clear cache or perform a hard refresh (Cmd + Shift + R)
Wait a few minutes — embeds sync automatically
Ensure your configuration is still active
Best Practices
✅ DO
Whitelist only trusted domains
Test embeds in a staging environment
Keep configuration names descriptive
Check responsiveness on mobile
❌ DON’T
Share your tenant ID publicly
Leave test domains active in production
Modify the embed code directly