WooCommerce Integration

WooCommerce gives you two honest destinations for a zone click: a product category archive, or the shop page with a filter applied. Which one you pick decides how much work this is.

Prerequisites

• You can edit page/template code in WooCommerce.
• You have category, tag, or collection pages ready for target redirects.
• You can test in a published or preview storefront.

Where a zone click should land in WooCommerce

WooCommerce category archives live at /product-category/<slug>/, and that is the simplest target. Map lower-back to /product-category/lower-back-supports/ and you are done, with no plugin and no query strings.

The other option is the shop page with a filter: /shop/?filter_body_area=knee. This needs an attribute called body_area on your products and a filter widget that understands it. It is more setup, and it pays off when one product belongs to several body areas, because an attribute is many-to-many and a category is not.

A practical rule: if a product only ever belongs to one body area, use categories. If your knee sleeve is also a shin product, use an attribute.

1. Prepare Zone Mapping

1. Start with grouped zone IDs (head, neck, lower-back, and so on).
2. Map each zone key to one destination URL or slug.
3. Define a fallback destination for unmapped zones.

2. Embed And Listen

Add this code and update mapping values for your store:

<!-- Wrap the iframe in a div to control its dimensions.
     To fill an entire section, set both the div and iframe height to 100% instead. -->
<div style="height:650px;width:100%;">
<iframe
  id="persoscan-widget"
  src="https://widget.persoscan.com?license=your-license-key"
  style="width:100%;height:650px;border:none;border-radius:8px;color-scheme:light dark;"
  allow="fullscreen"
  title="PersoScan"
></iframe>
</div>

<script>
  var WIDGET_ORIGIN = new URL("https://widget.persoscan.com").origin;

  // Map zone keys to WooCommerce product category slugs
  // Change these to match your actual category slugs
  var zoneToTag = {
    "head":           "head",
    "neck":           "neck",
    "chest":          "chest",
    "upper-back":     "upper-back",
    "lower-back":     "lower-back",
    "left-shoulder":  "shoulder",
    "right-shoulder": "shoulder",
    "left-arm":       "arm",
    "right-arm":      "arm",
    "left-hand":      "hand",
    "right-hand":     "hand",
    "abdomen":        "abdominal",
    "pelvis":         "pelvis",
    "buttocks":       "buttocks",
    "left-leg":       "leg",
    "right-leg":      "leg",
    "left-foot":      "foot",
    "right-foot":     "foot"
  };

  window.addEventListener("message", function(event) {
    if (event.origin !== WIDGET_ORIGIN) return;
    if (!event.data || event.data.source !== "persoscan-widget") return;
    if (event.data.type !== "zone-selected") return;

    var zoneId = event.data.data.zoneId;
    var tag = zoneToTag[zoneId];

    if (tag) {
      window.location.href = "/product-category/" + tag + "/"; // change to /product-tag/ if using tags instead of categories
    } else {
      window.location.href = "/shop/";
    }
  });
</script>

3. Validate End-To-End

1. Open the integration page.
2. Click at least five mapped zones.
3. Confirm each click redirects to the expected destination.
4. Confirm unmapped zones use fallback destination.

Common Mistakes

The snippet runs before the iframe exists

Problem: Zone clicks do nothing on the first page load, then work after a refresh.

Cause: The Custom HTML block was placed above the block holding the iframe, so document.getElementById returned null.

Solution:

1. Keep the iframe and the listener in the same Custom HTML block.
2. Or attach the listener to window rather than the iframe, which is what the snippet above does.

Origin mismatch blocks events

Problem: Clicks produce no redirects.

Cause: Event origin check does not match actual widget origin.

Solution:

1. Derive origin from widget URL (new URL(WIDGET_URL).origin).
2. Compare against event.origin.
3. Keep strict source check (persoscan-widget).

Zone mapping keys do not match runtime keys

Problem: Some body parts never redirect.

Cause: Mapping object uses wrong key format.

Solution:

1. Use exact zoneId values from Zone Reference.
2. Keep keys lowercase with hyphen separators.

Next Steps

• Integrations Overview
• PostMessage API
• Zone Reference
• Quick Start