DEV Community

Cover image for Drop-in travel widgets — add visa rules, budgets & passport scores to any page with one line
Mathis Higuinen
Mathis Higuinen

Posted on

Drop-in travel widgets — add visa rules, budgets & passport scores to any page with one line

#javascript #api #webdev #showdev

A suite of embeddable widgets that pull live visa requirements, travel budgets, passport scores and country comparisons — no API wiring, no keys, one script tag. With a built-in affiliate parameter so your travel content can earn.

If you've ever run a travel blog, a nomad resource site, or a "moving abroad" landing page, you've hit the same wall I did: travel data is annoying to build. Visa rules change per passport/destination pair, budgets vary by city, and passport rankings shift constantly. You either scrape it, maintain it by hand, or wire up against an API and babysit the integration.

I got tired of that, so I built embed.orizn.app — a set of copy-paste widgets that render live travel data on any page. No backend, no API keys, no build step. You drop a <div> and a <script>, and you get an interactive component fed by the Orizn dataset (199 countries, 32 data points per passport/destination pair, 15 languages).

Here's how each one works.

1. Visa requirements

Shows entry requirements for a destination, adapting to the visitor's passport. Point it at a destination country and it does the rest.

<div id="orizn-visa"
     data-destination="VNM"
     data-affiliate="aff_e23154b8"></div>
<script src="https://visa.orizn.app/embed/visa.js" async></script>
Enter fullscreen mode Exit fullscreen mode
  • data-destination — ISO 3166-1 alpha-3 code of where they're going (VNM = Vietnam)
  • data-affiliate — your affiliate ID (more on that below)

2. Travel budget

A quick cost-of-travel snapshot for a destination — the kind of "can I afford this?" widget that keeps readers on the page instead of bouncing to a search engine.

<div id="orizn-budget"
     data-destination="VNM"
     data-affiliate="aff_e23154b8"></div>
<script src="https://visa.orizn.app/embed/budget.js" async></script>
Enter fullscreen mode Exit fullscreen mode

3. Passport score

Rank and reach of a given passport. Great for a "how powerful is your passport?" section, or as a hook on a citizenship/relocation page.

<div id="orizn-score"
     data-passport="FRA"></div>
<script src="https://visa.orizn.app/embed/score.js" async></script>
Enter fullscreen mode Exit fullscreen mode
  • data-passport — ISO alpha-3 of the passport (FRA = France)

4. Country comparison

Side-by-side of two destinations for a single passport — visa treatment, and the differences that actually matter when someone's deciding between two places.

<div id="orizn-compare"
     data-country1="VNM"
     data-country2="THA"
     data-passport="FRA"
     data-affiliate="aff_e23154b8"></div>
<script src="https://visa.orizn.app/embed/compare.js" async></script>
Enter fullscreen mode Exit fullscreen mode
  • data-country1 / data-country2 — the two destinations to compare
  • data-passport — the passport to evaluate them against

5. Trip checklist

A ready-to-go checklist tailored to a specific passport/destination pair — what to prepare before departure (documents, entry conditions, and the things travelers forget). This is the "actionable" widget: it turns your page from information into a to-do list readers can actually follow.

<div id="orizn-checklist"
     data-destination="VNM"
     data-passport="FRA"
     data-affiliate="aff_e23154b8"></div>
<script src="https://visa.orizn.app/embed/checklist.js" async></script>
Enter fullscreen mode Exit fullscreen mode
  • data-destination — where they're going
  • data-passport — the passport they're traveling on
  • data-affiliate — your affiliate ID

The affiliate angle

Notice the data-affiliate attribute on most of these. That's the part I'm most excited about for content creators.

Every widget carries your affiliate ID, so the traffic you send through it is attributed to you. If you run a travel blog, a relocation newsletter, or a nomad community, you can embed genuinely useful tools and earn from the referrals they generate — instead of the widget being a pure cost center on your site. Grab your ID from embed.orizn.app and swap aff_e23154b8 for your own.

Try them live

Since this article is being read on a platform that (rightly) strips arbitrary <script> tags for security, the snippets above render as code, not as live components. To see the widgets actually running — and to configure your own with your affiliate ID — head to the live playground:

👉 embed.orizn.app

Everything is ISO-code driven, loads async so it won't block your page, and works with plain HTML — no framework required. Drop it into WordPress, a static site, Webflow, a landing page, whatever you've got.

If you build something with it, I'd love to see it — drop a link in the comments.

Top comments (0)