Skip to content
travel travel-blog widgets wordpress squarespace ghost embeddable-tools blogging

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

Step-by-step guide to embedding free travel widgets on WordPress, Squarespace, and Ghost. Carry-on checkers, bag fee calculators, and size tools in minutes.

· · 9 min read · Verified April 23, 2026
ShareXFBPinRedditHN
On this page
  1. The Three Widgets
  2. Embed Code
  3. Carry-On Size Widget
  4. Bag Fit Checker Widget
  5. Checked Bag Fee Calculator Widget
  6. WordPress
  7. Block Editor (Gutenberg)
  8. Classic Editor
  9. Elementor
  10. WordPress.com Limitations
  11. Squarespace
  12. Squarespace Plan Requirements
  13. Squarespace Tips
  14. Ghost
  15. Ghost Tips
  16. Other Platforms
  17. Customization Reference
  18. Widget-Specific Parameters
  19. Example: Dark Theme with Custom Color
  20. Example: Pre-Filled Bag Review
  21. Troubleshooting

Adding a travel widget to your blog takes about five minutes and a short HTML snippet. 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 short snippet format: an iframe, an attribution line, 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. If you already have an older embed without the attribution line, it will keep working, just swap in the new snippet whenever convenient.

Carry-On Size Widget

<div style="box-sizing:border-box !important;display:block !important;margin:16px auto !important;max-width:640px !important;width:100% !important;position:relative;text-align:left;line-height:normal;">
  <iframe
    src="https://vientapps.com/embed/carry-on/?theme=light&attribution=external"
    style="box-sizing:border-box !important;display:block !important;margin:0 !important;width:100% !important;max-width:100% !important;border:1px solid #e5e7eb;border-radius:12px 12px 0 0;overflow:hidden;background:#ffffff;"
    height="580"
    loading="lazy"
    title="Carry-on size checker by Vientapps">
  </iframe>
  <div style="box-sizing:border-box !important;display:flex !important;margin:0 !important;width:100% !important;max-width:100% !important;padding:8px 16px;border:1px solid #e5e7eb;border-top:0;border-radius:0 0 12px 12px;background:#ffffff;color:#6b7280;font-size:11px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;line-height:1.4;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 12px;">
    <span>Verify with airline before flying.</span>
    <span>
      <a href="https://vientapps.com/tools/carry-on-size/" target="_blank" rel="noopener" style="color:inherit;text-decoration:none;">Powered by Vientapps</a>
      <span style="margin:0 4px;opacity:0.5;">&middot;</span>
      <a href="https://vientapps.com/terms/" target="_blank" rel="noopener" style="color:inherit;text-decoration:none;">Terms</a>
    </span>
  </div>
</div>
<script src="https://vientapps.com/embed/resize.js" async></script>

Bag Fit Checker Widget

<div style="box-sizing:border-box !important;display:block !important;margin:16px auto !important;max-width:640px !important;width:100% !important;position:relative;text-align:left;line-height:normal;">
  <iframe
    src="https://vientapps.com/embed/bag-fit/?theme=light&attribution=external"
    style="box-sizing:border-box !important;display:block !important;margin:0 !important;width:100% !important;max-width:100% !important;border:1px solid #e5e7eb;border-radius:12px 12px 0 0;overflow:hidden;background:#ffffff;"
    height="540"
    loading="lazy"
    title="Bag fit checker by Vientapps">
  </iframe>
  <div style="box-sizing:border-box !important;display:flex !important;margin:0 !important;width:100% !important;max-width:100% !important;padding:8px 16px;border:1px solid #e5e7eb;border-top:0;border-radius:0 0 12px 12px;background:#ffffff;color:#6b7280;font-size:11px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;line-height:1.4;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 12px;">
    <span>Verify with airline before flying.</span>
    <span>
      <a href="https://vientapps.com/tools/carry-on-size/" target="_blank" rel="noopener" style="color:inherit;text-decoration:none;">Powered by Vientapps</a>
      <span style="margin:0 4px;opacity:0.5;">&middot;</span>
      <a href="https://vientapps.com/terms/" target="_blank" rel="noopener" style="color:inherit;text-decoration:none;">Terms</a>
    </span>
  </div>
</div>
<script src="https://vientapps.com/embed/resize.js" async></script>

Checked Bag Fee Calculator Widget

<div style="box-sizing:border-box !important;display:block !important;margin:16px auto !important;max-width:640px !important;width:100% !important;position:relative;text-align:left;line-height:normal;">
  <iframe
    src="https://vientapps.com/embed/checked-bag-fees/?theme=light&attribution=external"
    style="box-sizing:border-box !important;display:block !important;margin:0 !important;width:100% !important;max-width:100% !important;border:1px solid #e5e7eb;border-radius:12px 12px 0 0;overflow:hidden;background:#ffffff;"
    height="640"
    loading="lazy"
    title="Checked bag fee calculator by Vientapps">
  </iframe>
  <div style="box-sizing:border-box !important;display:flex !important;margin:0 !important;width:100% !important;max-width:100% !important;padding:8px 16px;border:1px solid #e5e7eb;border-top:0;border-radius:0 0 12px 12px;background:#ffffff;color:#6b7280;font-size:11px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;line-height:1.4;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 12px;">
    <span>Verify with airline before flying.</span>
    <span>
      <a href="https://vientapps.com/tools/checked-bag-fees/" target="_blank" rel="noopener" style="color:inherit;text-decoration:none;">Powered by Vientapps</a>
      <span style="margin:0 4px;opacity:0.5;">&middot;</span>
      <a href="https://vientapps.com/terms/" target="_blank" rel="noopener" style="color:inherit;text-decoration:none;">Terms</a>
    </span>
  </div>
</div>
<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 embed snippet 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 embed snippet 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 embed snippet
  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.

ParameterValuesDefaultWhat it does
themelight, dark, autolightSets the widget’s color scheme. auto follows the reader’s system preference.
colorAny hex code (without #)f59e0bSets the accent color for buttons, highlights, and interactive elements.
radius0 to 2412Sets the corner radius in pixels. 0 is sharp, 24 is fully rounded.
compacttruefalseReduces the widget height for sidebar or narrow-column placement.

Widget-Specific Parameters

Carry-On Size Widget:

ParameterExampleWhat it does
airlinesouthwest-airlinesPre-selects a specific airline when the widget loads. Uses the airline’s URL slug.

Bag Fit Checker Widget:

ParameterExampleWhat it does
l, w, hl=22&w=14&h=9Pre-fills bag dimensions so results show immediately on load.
unitin or cmSets the measurement unit.

Checked Bag Fee Widget:

ParameterExampleWhat it does
bags1, 2, or 3Sets the default number of checked bags for the calculator.
tripdomestic or internationalSets the default trip type.

Example: Dark Theme with Custom Color

<div style="box-sizing:border-box !important;display:block !important;margin:16px auto !important;max-width:400px !important;width:100% !important;position:relative;text-align:left;line-height:normal;">
  <iframe
    src="https://vientapps.com/embed/bag-fit/?theme=dark&color=3b82f6&radius=8&compact=true&attribution=external"
    style="box-sizing:border-box !important;display:block !important;margin:0 !important;width:100% !important;max-width:100% !important;border:1px solid #e5e7eb;border-radius:8px 8px 0 0;overflow:hidden;background:#ffffff;"
    height="420"
    loading="lazy"
    title="Bag fit checker by Vientapps">
  </iframe>
  <div style="box-sizing:border-box !important;display:flex !important;margin:0 !important;width:100% !important;max-width:100% !important;padding:8px 16px;border:1px solid #e5e7eb;border-top:0;border-radius:0 0 8px 8px;background:#ffffff;color:#6b7280;font-size:11px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;line-height:1.4;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 12px;">
    <span>Verify with airline before flying.</span>
    <span>
      <a href="https://vientapps.com/tools/carry-on-size/" target="_blank" rel="noopener" style="color:inherit;text-decoration:none;">Powered by Vientapps</a>
      <span style="margin:0 4px;opacity:0.5;">&middot;</span>
      <a href="https://vientapps.com/terms/" target="_blank" rel="noopener" style="color:inherit;text-decoration:none;">Terms</a>
    </span>
  </div>
</div>
<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:

<div style="box-sizing:border-box !important;display:block !important;margin:16px auto !important;max-width:640px !important;width:100% !important;position:relative;text-align:left;line-height:normal;">
  <iframe
    src="https://vientapps.com/embed/bag-fit/?l=21.7&w=13.7&h=9&unit=in&theme=light&attribution=external"
    style="box-sizing:border-box !important;display:block !important;margin:0 !important;width:100% !important;max-width:100% !important;border:1px solid #e5e7eb;border-radius:12px 12px 0 0;overflow:hidden;background:#ffffff;"
    height="540"
    loading="lazy"
    title="Bag fit checker by Vientapps">
  </iframe>
  <div style="box-sizing:border-box !important;display:flex !important;margin:0 !important;width:100% !important;max-width:100% !important;padding:8px 16px;border:1px solid #e5e7eb;border-top:0;border-radius:0 0 12px 12px;background:#ffffff;color:#6b7280;font-size:11px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;line-height:1.4;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 12px;">
    <span>Verify with airline before flying.</span>
    <span>
      <a href="https://vientapps.com/tools/carry-on-size/" target="_blank" rel="noopener" style="color:inherit;text-decoration:none;">Powered by Vientapps</a>
      <span style="margin:0 4px;opacity:0.5;">&middot;</span>
      <a href="https://vientapps.com/terms/" target="_blank" rel="noopener" style="color:inherit;text-decoration:none;">Terms</a>
    </span>
  </div>
</div>
<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.

Quick Comparison

#1 Carry-On Size Widget ★★★★½

Free embeddable carry-on size reference card showing verified dimensions, weight limits, and gate-check risk for 75+ airlines.

Visit site
#2 Bag Fit Checker Widget ★★★★½

Free embeddable bag fit checker where readers enter dimensions and see which of 75+ airlines accept their bag.

Visit site
#3 Checked Bag Fee Widget ★★★★½

Free embeddable checked bag fee calculator comparing first bag, second bag, overweight, and oversize fees across 50+ airlines.

Visit site

Frequently Asked Questions

Will travel widgets slow down my blog?
No. These widgets load inside lazy-loaded iframes that total under 50 KB each. They make no external requests during page load, and optional usage beacons on user interaction are non-blocking, so they will not affect your Core Web Vitals, Lighthouse score, or page speed. Place the widget below the fold for the best performance.
Do I need a WordPress plugin to add travel widgets?
No. You embed these with a Custom HTML block in the WordPress block editor (Gutenberg). No plugin installation required. Just paste the embed snippet and publish. The same code works in the Classic Editor's Text/HTML view.
Can I embed travel widgets on Squarespace free plan?
No. Squarespace requires a Business plan or higher to use Code Blocks, which is how you embed custom HTML like iframe widgets. Personal and Basic Commerce plans do not support code injection.
Do these widgets work on Wix, Webflow, and other platforms?
Yes. Any platform that supports HTML embeds works. On Wix, use the HTML Embed widget from the Add menu. On Webflow, use a Custom Code Embed element. On Jekyll, Hugo, Astro, Next.js, or any static site generator, paste the iframe directly into your template or markdown.
Can I change the widget colors after embedding it?
Yes. All customization is controlled by URL parameters in the iframe src. To change the theme from light to dark, update theme=light to theme=dark in the URL. To change the accent color, update the color parameter. No re-embedding needed, just edit the URL in your existing code block.
Do these widgets set cookies or track my readers?
No. These widgets set zero cookies, collect no personal data, and make no third-party requests. The only data logged is the domain name where the widget is embedded, used to measure reach. No GDPR consent banner is required for these widgets.
Will the airline data in the widgets stay up to date?
Yes. The widgets pull from a centralized database of 75+ airlines that is updated regularly. Each airline record has a last verified date and a direct link to the official source. When data updates, every embedded widget reflects the change automatically with no action needed from you.
C
Caden Sorenson

Travel research publisher and senior staff engineer

Caden Sorenson runs Vientapps, an independent travel research and tools site covering airline carry-on policies, packing lists, and head-to-head airline, cruise, and destination comparisons, with everything cited to primary sources. He's a senior staff engineer with 15+ years of experience building iOS apps, web platforms, and developer tools, and a Computer Science graduate from Utah State University. Based in Logan, Utah.

GitHub LinkedIn How we verify data

Related guides

Stay in the loop

Get notified when I publish new posts. No spam, unsubscribe anytime.