Tily
Sign in
For developers

Embed options

Every way to put the widgets on a shop's site, each one working: the Room Visualiser in our demo shop, then the Tile Planner from one line with no settings to SKU, pricing, box counts and the basket. Draw a room in any of them.

Running a tile shop? This page is for your developer. See both widgets at work in our demo shop instead:See it in a live shop (opens in a new tab)
Room Visualiser · Tile PlannerBoth widgets on a real product page

Hearth & Grain Tiles is a made-up shop running Tily from the CDN, the way yours would: open a tile, see it in a room, count the boxes and add them to the basket.

See it in a live shop (opens in a new tab)
1Getting started

Zero config — mount and go

What your customers get if you paste the two lines and change nothing.

Mount with no configuration and the planner renders the simple, customer-facing view — tile sizes, patterns, one-tap auto-fit, and a live tile count.

→Common tile sizes + custom→Stack, brick bond, diagonal, herringbone→One-tap auto-fit optimiser→Live stats: area + tile count
Loading planner…
2Professional mode

Engineering mode — full control

The full toolkit, for trade counters and fitters who want every setting.

Switch to professional mode for the complete toolkit: every tile size, all patterns, grid-offset fine-tuning, auto-fit optimisation, chess colouring, and a detailed cut breakdown. Built for trade and installers.

→5 tile sizes + custom→Straight, brick bond, diagonal, herringbone→Grid offset sliders + auto-fit optimiser→Chess colouring + detailed cut stats
Loading planner…
3Multiple materials

Tile + Laminate — material picker appears

One planner for a shop that sells more than tile.

With more than one material, a Material toggle appears. Each material has its own sizes, patterns, and settings — switching updates everything.

→Material selector: Tiles / Laminate→Per-material sizes and patterns→Laminate: brick bond default, own board sizes→Compact panel shows material picker in slide-up
Loading planner…
4White-label

Any colour palette

The planner in your shop's colours instead of ours.

Every colour token can be overridden to match a shop's brand — applied before first paint, and re-themeable live without a remount. Works in both full and compact modes.

→Every colour token overridable→Applied before first paint — no flash→Live re-theme without remounting→Works in both full and compact modes
Loading planner…
5Product page

Locked to one product — SKU, pricing, box count

The planner on one product page: that tile's boxes and price, nothing to pick.

Lock the planner to a single product — no material or size pickers. Draw a room and the stats show tile count, boxes, and estimated cost for that SKU.

→Sidebar shows product name — no material/size pickers→Box count auto-calculated from tiles per box→Estimated cost from price × tiles (+ waste)→SKU, boxes and cost available for your basket
Loading planner…
Draw a room on the canvas above — the live result shows here
6E-commerce

Built-in ‘Add to basket’ button

From a drawn room to the right number of boxes in the basket.

The planner can render its own 'Add to basket' button inside the stats card (full) or slide-up panel (compact) — no extra UI on your side. It carries tiles, boxes, SKU and cost.

→Built-in basket button — no extra UI needed→Carries tiles, boxes, SKU and estimated cost→Custom button label→Works in both full sidebar and compact mode
Loading planner…
Draw a room → tap 'Add to basket' — the basket payload shows here

Like what you see?

Free for 30 days on one product page. We set up your account and import your catalogue with you; you paste two lines.