Because Framer is web-based, you can embed your prototypes anywhere online. You can do this two ways:
1. Copying the embed code on your preview window and pasting it in an iFrame
2. Export an HTML prototype and upload it to your server
Embed Code from Preview
The first option is the easiest as you would just need to copy embed code right from the Framer preview and paste an iFrame in the website of your choice. Simply preview your prototype, click on Embed in the top toolbar, and copy the code.
This is currently only possible for prototypes that are publically shared. We will be adding support for private prototypes soon.
Embedding public prototypes
Upload Exported HTML Prototype
Note: This step refers to the legacy desktop app which will soon be deprecated. Learn more about the new desktop app for Windows and Mac
If you'd like to upload an exported HTML prototype you need to:
- Open your project in Framer’s desktop app (blue icon - only available on macOS)
- Export a html prototype
- Upload the exported folder to your own server or a service like Netlify Drop
Upload the exported folder to a service like Netlify Drop
You should now have a URL where your project is hosted. You can copy and paste the URL of your project into the src attribute:
<iframe src="[your-project-url]" width="500" height="950" frameborder="0" />
Don't forget to adjust the width and height to the size of your device Frame.