Embedding guide

Embed tools without making pages messy

Use responsive iframe code, clear attribution and sensible sizing so calculators and widgets feel like part of the page.

Useful firstAdd tools that support the visitor task.
Mobile readyKeep cards, links and embeds readable on a phone.
Clean attributionFree widgets keep a visible powered-by link.

Practical guide

A cleaner way to embed

Embeds work best when they behave like a natural part of the page. Give the frame enough height, avoid cramped internal scrollbars and test the result at phone width before publishing.

Place the embedded tool next to the explanation it supports. If the visitor has to scroll back and forth to use it, the embed is doing too much work in the wrong place.

What to check

  • Use width 100% so the frame follows the content column.
  • Set a height that fits the widget on mobile without tiny scroll areas.
  • Use lazy loading for non-critical embeds lower on the page.
  • Preview the published page on desktop and mobile.
  • Keep attribution visible unless an unbranded version has been arranged.

Widget catalogue

Useful starting points

These are the practical widgets most small sites should consider before adding heavier plugins.

Calculator

Unit converter

Convert length, weight, temperature and volume between common units.

Build unit converter