Install

One line in your theme

No app, no review queue, no theme rewrite, and one attribute to fill in. The widget finds your product and places its own button.

Get a key See how it works

The tag

This is the whole install

<script
  async
  src="https://flatlay.in/api/widget/v1.js"
  data-silai-key="pk_live_your_key_here"></script>

Why the key is public

It is a publishable key and it is meant to be readable in your theme source. What protects you is the domain allowlist, the per visitor limit and your daily cap, not secrecy. A copied key on somebody else's domain does nothing at all.

In order

Five steps, and the second one matters

01
Register your domains
In settings, add every origin the widget will run on. Both the apex and the www form if you serve both, plus your staging domain if you want to test there. The server checks the request origin, so a key used anywhere else is refused.
02
Set the daily cap first
Before you make it live, not after. The cap is the ceiling on what a single day can cost you, and each visitor is limited underneath it.
03
Choose the label and colour
Both live in your settings rather than in the tag, so changing the button's words or its accent does not mean editing your theme again.
04
Paste the tag
Anywhere in your product template. It is async and it self-mounts, so it does not matter whether it sits in the head or above the closing body tag.
05
Run one on yourself
On a real product, from a phone. The first try-on of a product derives the garment flat lay and caches it, so the second is faster than the first.

Detection

How it finds the product

Four sources, most reliable first, read off the page rather than configured by you. If the button appears but the garment is wrong, the fix is almost always to give the page a proper Product block.

Product structured data

A schema.org Product block with an image is the most reliable source, and it is what the widget looks for first. Name and SKU come from the same block.

Open Graph

Failing that, og:image and og:title. Most themes emit these already, which is why most storefronts need no configuration at all.

The largest product image

Then a scan of the usual gallery containers and the main content, taking the biggest image that reads as a product shot.

The URL

The product handle out of a /product/ or /products/ path, used as the id the derived garment is cached against.

Placement

Where the button goes

It attaches to the first visible buy control it finds, and renders isolated. Your theme's CSS cannot reach into it, and its CSS cannot leak out into your product page.

Beside Add to cart

It looks for the buy control, trying the Shopify form submit, then Woo's add to cart button, then the usual class and id patterns, and places itself next to the first visible match.

In a shadow root

Everything renders isolated. Your CSS cannot reach in and its CSS cannot reach out, which is why it looks the same on a theme it has never seen.

Once per page

A second copy of the tag is a no-op rather than a second button, so a duplicated snippet in a theme does not double anything.

Quietly, if it cannot

No anchor and no product means no button. It fails silent rather than dropping a broken control into your storefront.

From settings, not from the tag

What you control without touching the theme

Button label

The words on the control. "See it on you" tends to outperform "Virtual try-on".

Accent colour

The button and the panel take your colour, so it reads as part of your storefront rather than as an embed.

Ask for an email

Optional. Off by default, because a form in front of a try-on is a form in front of a sale.