A Webflow Designer Extension App that allows for managing and creating custom DOM <iframe>
elements on a Webflow page in the Designer. This is useful for when you need to manage 3rd party embed products on a page. This app uses the v2 Designer APIs below.
This app is built with SvelteKit (Svelte+Vite)
Want to run this extension on your own Webflow site? Follow the steps below for registering a Webflow app on your site.
http://localhost:1337/
Want to run the app locally to try out the app yourself, or maybe experiment with changing the code?
git clone https://github.com/Webflow-Examples/iframe-manager-extension.git
cd iframe-manager-extension
Run npm i
at the root of this project to install dependencies
Run npm run dev
to start up the Vite build and serve it at http://localhost:1337
(this port is default)
Now you can open this Designer Extension app in Webflow to test, or you can make code changes
.svelte
files, you'll need to "refresh" the Designer Extension within Webflow to see any changes reflectThis project is a small-scale example, but see below to learn more about what logic lives in what files:
src/
- Where all the app logic livesroutes/
- Where all pages live, but there's only one page in this app+page.svelte
- Top level JS + HTML that make up the app UICreateModal.svelte
- Component for creating and injecting an iframe into the pageEditAttributesModal.svelte
- Component for editing existing iframe attributes and saving it back to the element on the pageIFrameTypes.d.ts
- Centralized file for some custom Typescript typesstyles.css
- Where all the styles live for this appapp.html
- The entry HTML file when the app gets loaded. This loads all the markup in +page.svelte
package.json
- Lists all dependencies for the appwebflow.json
- Configuration for Designer Extension app, including which version of APIs to use, the name of the extension, and the initial size the app should take up on the Designer UI