I wanted a calculator that a stranger could drop into their blog with one paste. What I ended up learning was mostly about what not to put inside an iframe.

The constraints, in the order they bit me.

1. The widget cannot carry your site chrome

The first version embedded the whole page: header nav, footer, cookie banner, ad slots. On my site that reads as a finished product. Inside someone else's article it reads as a website crammed into a letterbox, and the first thing the host does is delete it.

So the embed route has to render only the tool . In Vue that meant one flag on the route and one v-if in the app shell:

<!-- App.vue --> <header v-if= "!bare" > … </header> <PrivacyBanner v-if= "!bare" variant= "bar" /> <main> <div :class= "bare ? 'px-3 py-3' : 'mx-auto max-w-5xl px-4 py-8'" > <RouterView /> </div> </main> <footer v-if= "!bare" > … </footer>

Enter fullscreen mode

Exit fullscreen mode

const bare = computed (() => route . meta .…