WatchFit · Lindroos integration

Add WatchFit once. Use it on every product.

Add one reusable button to the product template. WatchFit reads the current product URL and opens the matching watch automatically.

See one product page in context ↗ · Privacy and measurement policy ↗

  1. 1

    Add the button to the product template

    Replace {{ product.slug }} with your shop’s product-slug variable. On Lindroos product pages this produces a direct, product-specific WatchFit URL.

    <a class="watchfit-try-on"
   href="https://watchfit-try-it-on.fizzy-acorn-1349.chatgpt.site/tuote/{{ product.slug }}/"
   target="_blank"
   rel="noopener">
  Try it on
</a>
  2. 4

    Connect consent-aware analytics

    After your consent banner grants watchfit-analytics-consent=granted, WatchFit emits watchfit:analytics events. Forward those events to your existing analytics system without sending hand images or measurements.

  3. 2

    Or use the one-time auto-detect script

    Add this script once to the site footer, then place data-watchfit-try-on on any product-page link or button. It uses the current product URL, so new watches work without another integration change.

    <script>
  document.addEventListener('click', function (event) {
    const button = event.target.closest('[data-watchfit-try-on]');
    if (!button) return;

    const parts = window.location.pathname.split('/').filter(Boolean);
    const slug = parts[0] === 'tuote' ? parts[1] : parts.at(-1);
    if (!slug) return;

    event.preventDefault();
    window.open(
      'https://watchfit-try-it-on.fizzy-acorn-1349.chatgpt.site/tuote/' + slug + '/',
      '_blank',
      'noopener',
    );
  });
</script>

<a href="#" data-watchfit-try-on>Try it on</a>
  4. 3

    Keep product pages in control

    The customer stays on the Lindroos product page and opens the matching WatchFit preview in a new tab. Closing the preview returns to the complete catalogue.

Open the catalogueTest a product preview ↗