Overview

FindMine's Matching Sets Widget is a lightweight JavaScript web component that renders coordinated product sets (e.g., matching top and bottom in the same fabric and color) on your Product Detail Page (PDP). Unlike the Complete the Look widget — which displays full multi-category outfits — Matching Sets focuses on curated product pairings within the same material or collection, helping customers find the coordinating piece to what they're already viewing.

This implementation guide provides the steps required for a successful Matching Sets Widget integration.

Please note that the Application ID and Configuration ID mentioned in this guide are prerequisite identifiers used throughout the integration. They will be provided by your Customer Experience (CX) Manager during the onboarding process.

There are two primary steps in a Matching Sets Widget implementation:

1. Adding the required <script> tag to the head of your PDP's HTML page
2. Adding the <findmine-widget> web component to your PDP's HTML wherever you want FindMine's Matching Sets UI to render

We'll expand on each of these steps in the following sections.

1. Add the required <script> tag to the head of your PDP's HTML

This is a boilerplate example of the script to be included in your HTML and will return a generic widget. Your implementation may require a custom widget, and the actual script URL will be provided by your CX Manager:

<script
  type="module"
  src="<https://jsv4.fmv3.findmine.com/_base/module.js>" // This may vary
></script>

Note: The Matching Sets widget uses a separate build from the Complete the Look widget. The script URL provided by your CX Manager will point to the matching-sets-specific module.

2. Add the <findmine-widget> web component to your PDP's HTML

The target web component specifies the location on the PDP where the Matching Sets Widget will render. The web component will be inserted in your HTML like this:

<findmine-widget
    config_id="{INSERT_WIDGET_CONFIG_ID}" // Provided by your CX manager
    application="{INSERT_YOUR_APP_ID}"    // Provided by your CX manager
    product_id="{INSERT_PRODUCT_ID}"
    product_color_id="{INSERT_PRODUCT_COLOR_ID}"
    region="{INSERT_REGION}"
    language="{INSERT_LANGUAGE}"
></findmine-widget>

Make sure to include both the opening tag (<findmine-widget>) and the closing tag (</findmine-widget>). A self-closing tag (<findmine-widget />) is invalid:

<!-- Invalid -->
<findmine-widget
    config_id="{INSERT_WIDGET_CONFIG_ID}"
    application="{INSERT_YOUR_APP_ID}"
    product_id="{INSERT_PRODUCT_ID}"
/>

<!-- Valid -->
<findmine-widget
    config_id="{INSERT_WIDGET_CONFIG_ID}"
    application="{INSERT_YOUR_APP_ID}"
    product_id="{INSERT_PRODUCT_ID}"
></findmine-widget>

Supported Attributes

Here is the list of supported attributes: