Embed Your Project: Add HeyBoss to Any Website
Embed your HeyBoss project into any existing website using a simple iframe code. Perfect for integrating your HeyBoss app into WordPress blogs, company websites, or anywhere you need it.
Perfect for: Adding apps to existing websites, embedding tools in WordPress, showcasing projects on portfolio sites, integrating into company intranets.
What is Project Embedding?
Project Embedding lets you display your HeyBoss project inside any other website using an iframe tag. This means you can build with HeyBoss but display it anywhere on the web.
Common Use Cases
WordPress integration - Add your HeyBoss app to WordPress blog
Company website - Embed tools into your existing corporate site
Portfolio - Showcase your HeyBoss projects on your portfolio
Landing pages - Embed interactive demos in marketing pages
Internal tools - Add HeyBoss tools to company intranet
Client presentations - Show projects within presentation slides
How to Embed Your Project
Step 1: Get Your Embed Code
Open your project in HeyBoss
Click the "Publish" button
Click "Embed" tab
Copy the embed code provided
Step 2: Add to Your Website
Paste the embed code into your website's HTML where you want the project to appear.
The embed code is a simple HTML iframe that you copy and paste into your website.
Platform-Specific Instructions
WordPress
Edit your WordPress page or post
Add a "Custom HTML" block
Paste your HeyBoss embed code
Update/Publish your page
Wix
Open your Wix site editor
Click "+" to add an element
Select "Embed" → "Embed Code"
Paste your iframe code
Adjust size and position
Squarespace
Edit your Squarespace page
Add a "Code" block
Paste your embed code
Save your changes
Webflow
Open your Webflow page
Add an "Embed" element
Paste your iframe code
Publish your site
Any HTML Website
Simply paste the embed code directly into your HTML file where you want the project to appear.
Customizing Your Embed
Changing Size
Adjust the size by modifying the iframe style:
Widescreen (16:9) - Default aspect ratio
Standard (4:3) - Traditional screen ratio
Square (1:1) - Equal width and height
Fixed height - Set a specific pixel height
Making it Responsive
The default embed code is already responsive (width: 100%). It automatically adjusts to container width.
Adding Border or Shadow
Add visual styling to your embed:
Add visual styling like borders, shadows, or rounded corners through the iframe's style attribute.
Best Practices
Test on mobile - Ensure your embed looks good on all screen sizes
Use HTTPS - Make sure your HeyBoss project URL uses https://
Set appropriate size - Choose dimensions that fit your content
Consider loading time - Complex projects may take a moment to load
Test scrolling - Ensure embedded content scrolls properly if needed
Check responsiveness - Verify the embed adapts to different screen widths
Advanced Embedding Options
Lazy Loading
Add the loading="lazy" attribute to load the embed only when it's visible (improves page speed).
Full Screen Support
Add the allowfullscreen attribute to let users view your embed in full screen.
Specific Page Embedding
You can embed a specific page by adding the page path to your project URL in the iframe src attribute.
Troubleshooting
Embed Not Showing
Check that your project is published (not draft)
Verify the iframe code was pasted correctly
Ensure no browser extensions are blocking iframes
Check browser console for error messages
Embed Shows Blank
Wait a few seconds - it may still be loading
Check your project URL is correct and accessible
Verify your website allows iframe embeds
Try opening the project URL directly in a new tab
Embed Size Issues
Remove any fixed height constraints
Adjust aspect-ratio to fit your content
Check parent container width isn't restricting the iframe
Test on different screen sizes
Security Considerations
Only embed your own projects - Don't embed untrusted external content
Use HTTPS - Secure connection protects user data
Review permissions - Embedded iframes have limited access to parent page
Keep projects updated - Maintain security of embedded content
Common Questions
Can I embed on any website?
Yes! As long as you can add custom HTML/iframe code to your website, you can embed your HeyBoss project.
Does embedding affect my project's performance?
No! Embedded projects load independently and don't slow down your main website.
Can I embed multiple projects on one page?
Yes! You can add as many iframe embeds as you need on a single page.
Will the embed update when I update my project?
Yes! The embed always shows the latest published version of your project. No need to update the embed code.
Can users interact with embedded projects?
Absolutely! Embedded projects are fully interactive - users can click, scroll, fill forms, etc.
How is this different from embedding plugins?
Embedding your entire project shows your full website/app. Embedding plugins (covered in this article) shows specific features like forms or chatbots.
Get Started
Ready to embed your project? Open your project, click "Publish", then "Embed" to get your code!
See also: How to Embed Plugins | How to Publish Your Project
Need help? Contact Support for assistance.