How to embed a window tint simulator on your website

Getting started

Six steps, about ten minutes, on any platform:

1. Create an account (or log in) and activate a plan on your dashboard. Your widget is live the moment the plan is.
2. Brand your widget on the Configure tab — your logo, brand color, light or dark background, and the default car and tint your customers land on.
3. Add your website to the widget's allow-list (e.g. yourtintshop.com). This locks the widget to your site — see Security & domain allow-list.
4. Copy the embed code from the dashboard. It looks like this:
5. Paste it into your site using the platform guide in the sidebar (WordPress, Wix, Squarespace, Shopify…).
6. Publish and load your page — your branded 3D visualizer is live.

Don't want to do this yourself?

We'll place the widget on your site, size it for desktop and mobile, test it, and send you the link when it's live. Any platform, one payment, most installs take under an hour.

WordPress

In the block editor, add a Custom HTML block and paste your Rova Tint iframe into it, then update the page. In the classic editor, switch to the Text tab and paste it there. In Elementor, drag in an HTML widget and paste it. No plugin is required.

Wix

Add → Embed & Social → Embed HTML, choose Code, and paste the iframe into the box. Stretch the element to the width you want and publish.

Squarespace

Add a Code block to the section, set it to HTML, and paste the iframe in. Because Rova Tint is a plain iframe and not a script, it works on plans and builders that strip JavaScript.

GoDaddy Website Builder

Add a section, pick HTML, and paste the iframe into the custom code field. Set the section height to match, then publish.

Shopify

Either paste the iframe into a page in the editor with Show HTML turned on, or add a Custom Liquid section to any page in your theme and paste it there.

Webflow

Drop an Embed element onto the canvas and paste the iframe into it. Embeds only render on the published site, so publish before you test.

Weebly

Drag an Embed Code element onto the page, click Edit Custom HTML, and paste the iframe in.

Plain HTML, React & Vue

Paste the iframe straight into your markup. In React and Vue it is an ordinary element — no wrapper component, no package to install. Use allowfullscreen so the widget's own full-screen control works, and loading="lazy" if it sits below the fold.

Sizing & responsiveness

Two options. A responsive aspect-ratio wrapper is recommended: give the wrapper an aspect ratio and let the iframe fill it, so the simulator keeps its shape on every screen. Otherwise set a fixed height — around 620px on desktop and 520px on phones reads well. The widget itself is fully responsive and touch-friendly inside whatever box you give it.

Security & domain allow-list

Your embed code is locked to the domains on your account. The widget checks the referring domain in the browser and again on our servers, so copying your embed code onto another site does not work. Add or change allowed domains from your dashboard; www and non-www are different strings, so list the one you actually serve.

Troubleshooting

A blank iframe usually means the page was loaded from a preview or staging URL rather than your live domain. A "this widget isn't licensed for this domain" panel means the domain serving the page doesn't match the domain on your account — check for a www versus non-www mismatch or a typo. If your editor deleted the iframe when you saved, you pasted into a rich-text block instead of an HTML or embed block.

FAQ

Will it slow my website down?

No. The embed adds zero JavaScript to your page — it's one lazy-loaded iframe, so the 3D engine loads inside the frame (and only when the widget is near the viewport). Your page's own speed scores are unaffected.

Can I use one widget on multiple websites?

No — Starter and Pro each license a single website, so the allow-list holds one domain (subdomains of it included). To move the widget to a different site, swap the domain on the Configure tab. If you need it live on more than one site at once — a second location, a separate brand — that's Enterprise.

If I change my logo or colors, do I have to re-embed?

No. The snippet only carries your widget key; branding and settings load fresh from Rova Tint, so dashboard changes show up on your site immediately.

Can I remove the “Powered by Rova Tint” tag?

Not currently — a small “Powered by Rova Tint” link stays in the corner on every plan. Everything else (logo, colors, background) is yours to brand on Pro.

Why is there a small model credit in the corner?

Many of our 3D vehicles are licensed under Creative Commons Attribution, which legally requires crediting the artist. We keep it minimal and out of the way, but it can't be hidden.

Does it work on phones and tablets?

Yes — the studio is fully touch-enabled and the controls collapse into a bottom sheet on small screens. Many shops also run it full-screen on an in-shop tablet as a kiosk: just open your embed URL (https://rovatint.com/embed/YOUR-WIDGET-KEY) directly in the tablet's browser.

Do you support car models you don't have yet?

The catalog has 500+ real vehicles with factory paint colors and grows continuously. Missing something your customers ask for? Tell us and we'll prioritize it.