Framer integration
Step-by-step guide to add visa, budget, and travel widgets to your Framer site in under 2 minutes.
Framer Sites supports raw HTML embeds through the Embed layer, which renders as an inline iframe by default. The Orizn widget runs inside it cleanly — you just need to set the right responsive sizing so it doesn't get clipped.
What you'll get
Wrap the Embed in a Stack and the widget participates in your scroll choreography.
Framer's Fit Width + auto height keeps the widget responsive without manual media queries.
Framer's edge CDN serves the page; visa.orizn.app handles the widget — no caching collisions.
Setup
Five concrete steps from opening the editor to hitting publish.
Open the page in Framer. From the Insert menu (top toolbar) choose Embed, or press the Layers panel + button → Embed. A new Embed layer drops onto the canvas with a placeholder.
With the Embed layer selected, the right inspector shows an HTML code field. Paste the two-line Orizn snippet. Framer wraps the markup in an iframe automatically so styles stay isolated.
In the inspector, set Width to Fill (100%) and Height to Fit. Toggle 'Auto Resize' if available — Framer reads the iframe's content height and resizes the layer on the fly. Without this, you'll get a fixed 300px embed.
Click the play icon (top right) for live preview, or open the share link. The widget should load within a second. Mobile preview: switch breakpoints in the canvas header to verify the iframe scales.
Click Publish → Update Site. Framer pushes the page to its edge network in seconds. Custom domains propagate immediately.
Code
Copy the variant that matches your setup. Switch tabs to see the affiliate or iframe versions.
<div id="orizn-visa"></div>
<script src="https://visa.orizn.app/embed/visa.js" async></script>Watch out
The things that catch first-timers — fix in advance.
Framer's Embed defaults to 300px. Always switch the height mode to Fit or Auto, otherwise dropdowns inside the widget get clipped.
Unlike Webflow, Framer wraps your HTML inside an iframe. The widget still works but pop-overs cannot escape the iframe's boundaries.
Affiliate tracking on the preview domain still works, but conversions on the temporary preview URL might not match production analytics. Test with the published custom domain.
If you need destination to bind to a CMS field, you'll need to create a Framer Code Component instead — see our docs for a TypeScript example.
FAQ
No. The widget is iframe-isolated, so your scroll animations on the parent don't affect its internals.
Yes, via a Code Component (TypeScript). The plain Embed layer cannot bind CMS fields into HTML attributes directly.
Yes — Embed layers are available on all plans. Free sites publish to framer.website subdomains.
The iframe respects parent width. Ensure the parent Frame uses Fill (100%) on the mobile breakpoint, not a fixed pixel width.
Other platforms
Ready?
Grab the snippet, paste it where the steps above describe, and ship in two minutes.