Webflow integration
Step-by-step guide to add visa, budget, and travel widgets to your Webflow site in under 2 minutes.
Webflow's Designer ships an Embed component that runs arbitrary HTML and scripts on publish. The Orizn widget drops in as-is, and you can resize and align it like any native element.
What you'll get
The Embed block is treated like any other div — set padding, margin, breakpoints, and combo classes.
Our widget is fluid. Constrain the parent div in Webflow's Designer and it adapts on mobile.
Embed is available on every paid plan including Starter — no Business tier required.
Setup
Five concrete steps from opening the editor to hitting publish.
From Webflow Dashboard, hover the project and click Open Designer. Navigate to the page that should host the widget via the Pages panel (top-left).
Open the Add panel (top-left + icon or shortcut A). Scroll to Components → Embed (HTML icon). Drag it into the canvas at the position you want the widget. A modal opens with a code editor.
Paste the two-line Orizn snippet into the modal. Webflow shows a syntax-highlighted preview. Click Save & Close — the embed shows a generic Custom Code placeholder in the Designer (live render only on publish/preview).
Click the eye icon (top right) → Preview, or press Cmd/Ctrl+Shift+P. The widget mounts immediately. If you don't see it, check that you are not previewing inside the Designer canvas itself (custom code only runs in Preview mode).
Click Publish (top right) → Publish to selected domains → Publish. The widget is now live on your custom domain or .webflow.io subdomain. Custom code respects your project's published GDPR cookie banner if you have one configured.
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.
By design — Webflow shows a placeholder block in editing mode. Always check via Preview or the published URL.
Webflow Free sites publish only to .webflow.io. Custom code still runs there. Custom domains require any paid plan.
Don't paste the script tag in Project Settings → Custom Code → Footer unless you actually want the widget container available on every page. Use the Embed component for page-scoped widgets.
If a client uses the Editor (not Designer) to update content, the Embed block is locked from edits. They cannot break the widget by accident.
FAQ
Yes. Pass data-color matching your accent and the widget inherits your site's vibe. It uses its own scoped styles so your global CSS won't bleed in.
Yes. Drop multiple Embed components, each with a different widget script (visa, budget, score). The runtime is shared, so there's no duplicate download.
Yes. Add an Embed inside the Collection Item template and use bound fields (e.g. data-destination={{country-iso3}}) — Webflow swaps the field at publish.
No. The widget loads from visa.orizn.app, not from your Webflow CDN. Only the initial HTML payload counts.
Other platforms
Ready?
Grab the snippet, paste it where the steps above describe, and ship in two minutes.