How to Add Free Travel Widgets to Your Blog in 2026 (WordPress, Squarespace, Ghost)

Adding a travel widget to your blog takes about five minutes and two lines of HTML. No plugin, no account, no API key. You pick a widget, copy the embed code, paste it into a Custom HTML block (WordPress), Code Block (Squarespace), or HTML card (Ghost), and publish. The widget handles everything else: auto-resizing, theme matching, and keeping airline data current without you touching it again.

This guide covers three free embeddable airline widgets and shows you exactly how to add them on the three most popular blogging platforms. Every widget is under 50 KB, sets zero cookies, and auto-updates when airline policies change.

The Three Widgets

Each widget serves a different reader question. You can embed one, two, or all three depending on what your content covers.

Carry-On Size Widget shows verified carry-on and personal item dimensions, weight limits, gate-check risk, and fees for 75 airlines. Best for airline review posts, packing guides, and “which airline should I fly” content. Readers pick an airline from a dropdown and see everything they need to know about that carrier’s bag rules.

Bag Fit Checker Widget lets readers enter their bag dimensions (or click a preset like “standard roller 22x14x9”) and see which airlines accept it. Best for luggage review posts, “does this bag fit” content, and carry-on packing guides. You can pre-configure the dimensions via URL parameters so the widget loads with results already showing.

Checked Bag Fee Widget compares first bag, second bag, overweight (51-70 lb, 71-100 lb), and oversize (63-80 in) fees across 50+ airlines in a sortable table. Best for budget travel posts, “how to avoid bag fees” content, and airline comparison articles.

Embed Code

Every widget uses the same two-line format: an iframe and a resize script. Copy the code below, or use the live customizer on each widget’s page to configure colors, themes, and sizing visually before copying.

Carry-On Size Widget

<iframe
  src="https://vientapps.com/embed/carry-on/?theme=light"
  style="width:100%;max-width:640px;border:0;border-radius:12px;overflow:hidden;"
  height="580"
  loading="lazy"
  title="Carry-on size checker by Vientapps">
</iframe>
<script src="https://vientapps.com/embed/resize.js" async></script>

Bag Fit Checker Widget

<iframe
  src="https://vientapps.com/embed/bag-fit/?theme=light"
  style="width:100%;max-width:640px;border:0;border-radius:12px;overflow:hidden;"
  height="540"
  loading="lazy"
  title="Bag fit checker by Vientapps">
</iframe>
<script src="https://vientapps.com/embed/resize.js" async></script>

Checked Bag Fee Calculator Widget

<iframe
  src="https://vientapps.com/embed/checked-bag-fees/?theme=light"
  style="width:100%;max-width:640px;border:0;border-radius:12px;overflow:hidden;"
  height="640"
  loading="lazy"
  title="Checked bag fee calculator by Vientapps">
</iframe>
<script src="https://vientapps.com/embed/resize.js" async></script>

You only need the resize.js script once per page, even if you embed multiple widgets.

WordPress

WordPress is the most common platform for travel blogs, and embedding works the same whether you’re on self-hosted WordPress.org or WordPress.com Business plan.

Block Editor (Gutenberg)

1. Open the post or page where you want the widget
2. Click the + button to add a new block
3. Search for Custom HTML and select it
4. Paste the two-line embed code into the block
5. Click Preview to confirm the widget renders in the editor
6. Publish or update the page

The widget appears immediately in the preview. If you see raw HTML instead of the widget, make sure you selected “Custom HTML” and not “Paragraph” or “Code.”

Classic Editor

1. Switch to the Text tab (not Visual) in the editor
2. Place your cursor where you want the widget
3. Paste the embed code
4. Switch back to Visual to confirm the iframe placeholder appears
5. Publish or update

The Classic Editor’s Visual mode may show a gray placeholder instead of a live preview. This is normal. The widget renders correctly on the published page.

Elementor

1. Drag an HTML widget onto your page layout
2. Paste the embed code into the HTML content field
3. The widget preview appears in the Elementor canvas
4. Save and publish

WordPress.com Limitations

WordPress.com Personal and Premium plans do not allow custom HTML blocks with iframes. You need a Business plan or higher to embed these widgets. Self-hosted WordPress.org has no restrictions.

Squarespace

Squarespace supports custom HTML through Code Blocks, but only on Business plan and above.

1. Open the page editor and click + to add a new content block
2. Select Code from the block menu (under “More”)
3. Paste the two-line embed code into the code editor
4. Uncheck “Display Source” if it’s checked (you want the rendered widget, not raw code)
5. Click outside the block to close the editor
6. Save and publish

Squarespace Plan Requirements

• Personal plan: No Code Block support. You cannot embed custom HTML widgets.
• Business plan: Code Blocks are available. This is the minimum plan for widget embedding.
• Commerce plans: Code Blocks are available.

Squarespace Tips

• If the widget appears too narrow, remove the max-width from the iframe’s style attribute so it fills the full content width
• Squarespace’s editor may not show a live preview of the widget. Check the published page to confirm it renders
• For sidebar placement, add compact=true to the iframe URL and reduce max-width to 360px

Ghost

Ghost supports custom HTML natively on all plans, including the free tier.

1. Open the post editor
2. Click the + button on a new line (or type /html to jump directly to the HTML card)
3. Select HTML from the card menu
4. Paste the two-line embed code
5. Click outside the card to close the editor. You’ll see a gray “HTML” placeholder in the editor.
6. Preview or publish the post to see the rendered widget

Ghost Tips

• Ghost’s editor does not render iframes inline. The gray “HTML” placeholder is normal. The widget renders on the published page.
• Ghost supports HTML cards on all plans (Free, Creator, Team, Business). No plan upgrade needed.
• For best results, place the HTML card between text paragraphs rather than at the very top of the post
• If you embed all three widgets in one post, you only need the resize.js script tag once. Include it after the last iframe.

Other Platforms

The embed code is standard HTML that works on any platform supporting iframes.

Webflow: Add a Custom Code Embed element to your page. Paste the iframe and script. Publish.

Wix: From the editor, click Add (+), select Embed Code, choose “Embed a Widget.” Paste the iframe code. Wix may require you to adjust the iframe height manually since it doesn’t always auto-resize.

Jekyll / Hugo / Astro / Next.js: Paste the iframe directly into your markdown or template file. Most static site generators pass raw HTML through to the output.

Plain HTML: Paste the code anywhere in your <body>. No build step, no framework needed.

Customization Reference

All customization is done through URL parameters in the iframe src. Update the URL to change settings without re-copying the embed code.

Parameter	Values	Default	What it does
theme	light, dark, auto	light	Sets the widget’s color scheme. auto follows the reader’s system preference.
color	Any hex code (without #)	f59e0b	Sets the accent color for buttons, highlights, and interactive elements.
radius	0 to 24	12	Sets the corner radius in pixels. 0 is sharp, 24 is fully rounded.
compact	true	false	Reduces the widget height for sidebar or narrow-column placement.

Widget-Specific Parameters

Carry-On Size Widget:

Parameter	Example	What it does
airline	southwest-airlines	Pre-selects a specific airline when the widget loads. Uses the airline’s URL slug.

Bag Fit Checker Widget:

Parameter	Example	What it does
l, w, h	l=22&w=14&h=9	Pre-fills bag dimensions so results show immediately on load.
unit	in or cm	Sets the measurement unit.

Checked Bag Fee Widget:

Parameter	Example	What it does
bags	1, 2, or 3	Sets the default number of checked bags for the calculator.
trip	domestic or international	Sets the default trip type.

Example: Dark Theme with Custom Color

<iframe
  src="https://vientapps.com/embed/bag-fit/?theme=dark&color=3b82f6&radius=8&compact=true"
  style="width:100%;max-width:400px;border:0;border-radius:8px;overflow:hidden;"
  height="420"
  loading="lazy"
  title="Bag fit checker by Vientapps">
</iframe>
<script src="https://vientapps.com/embed/resize.js" async></script>

Example: Pre-Filled Bag Review

If you’re reviewing a specific bag (say, the Away Carry-On at 21.7 x 13.7 x 9 inches), pre-fill the dimensions so the widget loads with results:

<iframe
  src="https://vientapps.com/embed/bag-fit/?l=21.7&w=13.7&h=9&unit=in&theme=light"
  style="width:100%;max-width:640px;border:0;border-radius:12px;overflow:hidden;"
  height="540"
  loading="lazy"
  title="Bag fit checker by Vientapps">
</iframe>
<script src="https://vientapps.com/embed/resize.js" async></script>

Troubleshooting

Widget shows raw HTML instead of rendering. You pasted the code into a text or paragraph block instead of an HTML block. In WordPress, use “Custom HTML.” In Squarespace, use “Code.” In Ghost, use the “HTML” card.

Widget doesn’t resize properly. Make sure the resize.js script tag is included after the iframe. If you removed it or it’s blocked by a content security policy, the iframe will stay at its default height.

Widget is too wide or too narrow. Adjust the max-width value in the iframe’s style attribute. Remove it entirely to let the widget fill the full container width. For sidebar placement, try max-width:360px with compact=true in the URL.

Widget doesn’t appear on Squarespace. You’re likely on a Personal plan. Code Blocks require a Business plan or higher.

Widget doesn’t appear on WordPress.com. You need a Business plan or higher. WordPress.com Personal and Premium plans block custom HTML with iframes.

Multiple widgets on one page. Include the resize.js script only once, after the last iframe. All widgets on the page will auto-resize correctly.

Widget looks different from my blog’s theme. Use the theme=auto parameter so the widget follows the reader’s system preference (light or dark). Set the color parameter to your blog’s primary brand color hex code for visual consistency.

For the full list of available widgets and a side-by-side comparison with affiliate alternatives, see our guide to the best embeddable travel widgets for bloggers. If you’re interested in how these widgets were built, the carry-on widget build log covers the technical architecture.