Cafe24 Integration

Cafe24 keeps its category pages behind a numeric parameter, so the mapping is a lookup table of IDs rather than readable slugs.

Prerequisites

• You can edit page/template code in Cafe24.
• 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 Cafe24

Cafe24 category pages are /product/list.html?cate_no=24. The number is the category, and there is no slug form, so the mapping table is zone key to category number and there is no way around that.

Write the numbers down somewhere a human can read, with the category name beside each one. Six months later, cate_no=24 tells nobody anything, and that is how a body map quietly starts pointing at the wrong collection.

Use /product/list.html with no parameter as the fallback, which lists everything.

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;

  var zoneToCategory = {
    "head":           "10",
    "neck":           "11",
    "upper-back":     "12",
    "lower-back":     "13",
    "left-shoulder":  "14",
    "right-shoulder": "14",
    "left-arm":       "15",
    "right-arm":      "15",
    "left-hand":      "16",
    "right-hand":     "16",
    "left-leg":       "17",
    "right-leg":      "17",
    "left-foot":      "18",
    "right-foot":     "18"
  };

  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 category = zoneToCategory[zoneId];

    if (category) {
      window.location.href = "/product/list.html?cate_no=" + category;
    } else {
      window.location.href = "/product/list.html";
    }
  });
</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

Smart Design skin edited, wrong skin published

Problem: The widget appears in preview but not on the live storefront.

Cause: Cafe24 keeps multiple skins, and the edit landed in one that is not published.

Solution:

1. Confirm which skin is live under Design, then Manage Design.
2. Edit that skin, or copy the change across before publishing.

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