Integrate WatchFitTool

Bring our interactive 2D & 3D watch fit experience to your own audience. It's free to use - we simply ask for a small credit link back to help others find the tool.

Learn more about license & attribution requirements

Quick Start Guide

Basic Integration Code

Copy and paste this code into your HTML to integrate a watch visualization:

<iframe
  src="https://watchfittool.com/embed?w=42&h=48&t=10&title=Apple%20Watch&theme=dark"
  width="100%"
  height="650"
  frameborder="0"
  style="border-radius: 12px; max-width: 800px;"
  title="Watch Fit Visualization"
></iframe>

📋 Live Example

Here's how it looks integrated on your page:

API Reference

Configure your integration using these URL query parameters.

Parameter	Type	Required	Description
w	number	YES	Watch case width in millimeters (mm). Example: w=42
h	number	YES	Lug-to-Lug height in millimeters (mm). Example: h=48.5
t	number	—	Watch thickness in millimeters (mm). Example: t=12.2
shape	enum	—	Watch case shape: `circular` or `rectangle`. Default: "circular"
title	string	—	Encoded name to display in the tool header. Default: "Watch Fit Tool"
theme	enum	—	Interface color mode: `dark` or `light`. Default: "dark"

wRequired

Case width in millimeters (mm).

Example: w=42

hRequired

Lug-to-Lug height in millimeters (mm).

Example: h=48.5

tOptional

Case thickness in millimeters (mm).

Example: t=12.2

shapeOptional

Watch case shape: circular or rectangle.

Default: "circular"

titleOptional

Display name (URL encoded).

Default: "Watch Fit Tool"

Example: title=Rolex%20Sub

themeOptional

Color mode: dark or light.

Default: "dark"

Implementation Examples

Common configurations for various watch types and website styles.

01. Minimal Config

Required Params Only

Use this for the fastest integration with minimal visual noise. Perfect for product list pages.

<iframe
  src="https://watchfittool.com/embed?w=40&h=47"
  width="100%"
  height="650"
  frameborder="0"
></iframe>

02. Detailed Breakdown

Full Metadata

Recommended for individual product pages. Includes thickness and a specific watch title for context.

<iframe
  src="https://watchfittool.com/embed?w=45&h=53&t=12&title=Rolex%20Submariner"
  width="100%"
  height="650"
  frameborder="0"
></iframe>

03. Light Interface

Light Theme

Switch to the light theme to blend seamlessly with traditional white background e-commerce websites.

<iframe
  src="https://watchfittool.com/embed?w=44&h=51&theme=light"
  width="100%"
  height="650"
  frameborder="0"
></iframe>

04. Rectangular Watch

Shape Parameter

Use the shape parameter for rectangular or square watches like the Apple Watch or Cartier Tank.

<iframe
  src="https://watchfittool.com/embed?w=42&h=48&t=10&shape=rectangle&title=Apple%20Watch"
  width="100%"
  height="650"
  frameborder="0"
></iframe>

📜 License & Attribution Requirements

⚠️

Attribution Required

If you integrate WatchFitTool on your website, you must provide credit by including a link back to our homepage.

Required Attribution Code

Place this link near your widget:

<p>
  Powered by <a 
    href="https://watchfittool.com" 
    rel="follow" 
    target="_blank"
  >WatchFitTool</a>
</p>

✓

Follow Attribute Required

The link must include rel="follow" attribute to pass SEO value and support our project.

✓

Visible Placement

The attribution link must be clearly visible to users, preferably directly below or above the integrated widget. A website footer or contribution page is also fine.

✓

No Modifications

Do not modify, obscure, or remove the attribution link while using our integration tool.

Note: By integrating WatchFitTool, you agree to these attribution requirements. Failure to provide proper attribution may result in access restrictions.

Best Practices

🎯

Accurate Measurements

Always use accurate watch dimensions from manufacturer specifications for the best user experience.

🎨

Match Your Theme

Use the theme parameter to match your website's color scheme (light or dark).

📱

Mobile Optimization

Ensure your iframe is responsive and works well on mobile devices using the responsive techniques above. Our tool is optimized for mobile devices.

⚡

Performance

Consider lazy loading iframes on pages with multiple integrations to improve page load performance.

Need Help?

If you have questions about integrating WatchFitTool or need assistance, we're here to help. Connect with me on LinkedIn for direct support or collaboration.

Connect on LinkedIn Email Support

Ready to Get Started?

Start integrating WatchFitTool on your website today and provide your visitors with an amazing watch fit visualization experience.

Explore WatchFitTool →