> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mention-me.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Tag Integration Guide
> Merchant-specific integration instructions for implementing Mention Me JavaScript tags
export const MerchantContext = () => {
const PARTNER_STORAGE_KEY = "mm-docs-partner";
const escapeHtml = str => str.replace(/&/g, "&").replace(//g, ">").replace(/"/g, """);
const getStoredPartner = () => {
try {
const raw = localStorage.getItem(PARTNER_STORAGE_KEY);
if (!raw) return null;
const data = JSON.parse(raw);
if (data && data.partnerCode) return data;
} catch (e) {}
return null;
};
const setStoredPartner = data => {
try {
localStorage.setItem(PARTNER_STORAGE_KEY, JSON.stringify(data));
} catch (e) {}
};
const clearStoredPartner = () => {
try {
localStorage.removeItem(PARTNER_STORAGE_KEY);
} catch (e) {}
};
const captureQueryParams = () => {
const params = new URLSearchParams(window.location.search);
const partner = params.get("partner");
const name = params.get("name");
if (partner) {
const data = {
partnerCode: partner
};
if (name) data.displayName = name;
setStoredPartner(data);
params.delete("partner");
params.delete("name");
const qs = params.toString();
const clean = window.location.pathname + (qs ? "?" + qs : "") + window.location.hash;
window.history.replaceState(null, "", clean);
return data;
}
return getStoredPartner();
};
const isLocal = typeof window !== "undefined" && window.location.hostname === "localhost";
const API_BASE = isLocal ? "http://localhost:3001" : "https://app.mention-me.com";
const SIGN_IN_BASE = isLocal ? "http://localhost:3001/sign-in" : "https://app.mention-me.com/sign-in";
const MERCHANT_WINDOW_KEY = "__mmMerchantContext";
const publishMerchant = data => {
window[MERCHANT_WINDOW_KEY] = data;
window.dispatchEvent(new CustomEvent("mm-merchant-ready", {
detail: data
}));
};
const clearMerchant = () => {
delete window[MERCHANT_WINDOW_KEY];
};
const BADGE_ID = "mm-partner-badge";
const showPartnerBadge = (partnerData, source) => {
if (document.getElementById(BADGE_ID)) return;
const nav = document.getElementById("navigation-items");
if (!nav || !nav.parentNode) return;
const badge = document.createElement("div");
badge.id = BADGE_ID;
badge.className = "mm-partner-badge";
const hasName = partnerData.displayName && partnerData.displayName !== partnerData.partnerCode;
const heading = hasName ? escapeHtml(partnerData.displayName) : escapeHtml(partnerData.partnerCode);
const code = hasName ? escapeHtml(partnerData.partnerCode) : "";
const codeStr = code ? ' ' + code + '' : '';
const resetTitle = source === "clerk" ? "Sign out and switch account" : "Clear personalisation";
badge.innerHTML = '' + '' + 'Personalised for ' + '' + heading + '' + codeStr + '' + '' + '
';
nav.parentNode.insertBefore(badge, nav);
badge.querySelector(".mm-partner-badge-reset").addEventListener("click", e => {
e.preventDefault();
e.stopPropagation();
if (source === "clerk" && window.Clerk && window.Clerk.signOut) {
clearMerchant();
const redirect = SIGN_IN_BASE + "?redirect_url=" + encodeURIComponent(window.location.href);
window.Clerk.signOut().then(() => {
window.location.href = redirect;
}).catch(() => {
window.location.reload();
});
return;
}
clearStoredPartner();
window.location.reload();
});
};
const removePartnerBadge = () => {
const el = document.getElementById(BADGE_ID);
if (el) el.remove();
};
const showNotices = () => {
document.querySelectorAll("[data-mm-sign-in]").forEach(el => {
el.style.display = "";
});
const redirect = SIGN_IN_BASE + "?redirect_url=" + encodeURIComponent(window.location.href);
document.querySelectorAll("[data-mm-sign-in-link]").forEach(a => {
a.href = redirect;
});
};
const hideNotices = () => {
document.querySelectorAll("[data-mm-sign-in]").forEach(el => {
el.style.display = "none";
});
};
const walkCodeBlocks = replacements => {
document.querySelectorAll("pre code").forEach(codeEl => {
let html = codeEl.innerHTML;
if (replacements) {
for (const [from, to] of replacements) {
html = html.split(from).join(escapeHtml(to));
}
}
const paramStyle = "color:inherit;filter:brightness(110%);font-weight:bold;text-decoration:underline;cursor:pointer";
html = html.replace(/(\?|&)([a-z_]+)=/g, (match, prefix, name) => {
const slug = name.replace(/_/g, "-");
const target = document.getElementById("param-" + slug);
if (!target) return match;
return prefix + '' + name + "=";
});
codeEl.innerHTML = html;
});
};
const observeTabSwitches = callback => {
let processing = false;
const observer = new MutationObserver(() => {
if (processing) return;
processing = true;
setTimeout(() => {
callback();
processing = false;
}, 50);
});
setTimeout(() => {
const tabs = document.querySelector("[role='tablist']");
if (tabs && tabs.parentElement) {
observer.observe(tabs.parentElement, {
attributes: true,
subtree: true,
childList: true
});
}
}, 500);
};
const pollForClerk = (onReady, onTimeout) => {
let n = 0;
const tick = () => {
if (window.Clerk && window.Clerk.loaded) {
return onReady(window.Clerk);
}
if (++n < 40) {
setTimeout(tick, 250);
} else {
onTimeout();
}
};
setTimeout(tick, 100);
};
const fetchMerchantFromAPI = () => {
return fetch(API_BASE + "/api/docs/context", {
credentials: "include",
cache: "no-store"
}).then(res => res.ok ? res.json() : null);
};
useEffect(() => {
let cancelled = false;
const urlPartner = captureQueryParams();
const onPersonalised = (merchant, source) => {
if (cancelled) return;
const replacements = [["YOUR_PARTNER_CODE", merchant.partnerCode]];
if (merchant.displayName) {
replacements.push(["YOUR_TRADING_NAME", merchant.displayName]);
}
hideNotices();
showPartnerBadge(merchant, source);
walkCodeBlocks(replacements);
observeTabSwitches(() => walkCodeBlocks(replacements));
};
const onUnauth = () => {
if (cancelled) return;
clearMerchant();
removePartnerBadge();
showNotices();
walkCodeBlocks(null);
observeTabSwitches(() => walkCodeBlocks(null));
};
const tryUrlFallback = () => {
if (cancelled) return;
if (urlPartner) {
onPersonalised(urlPartner, "url");
} else {
onUnauth();
}
};
if (!document.cookie.includes("__client_uat")) {
tryUrlFallback();
return;
}
pollForClerk(clerk => {
if (cancelled) return;
if (!clerk.session) {
tryUrlFallback();
return;
}
fetchMerchantFromAPI().then(data => {
if (data) {
publishMerchant(data);
onPersonalised(data, "clerk");
} else {
tryUrlFallback();
}
}).catch(() => tryUrlFallback());
}, () => {
if (!cancelled) tryUrlFallback();
});
return () => {
cancelled = true;
};
}, []);
return null;
};
## Welcome
Welcome to our product integration instructions.
**Mention Me** seamlessly integrates into brands' websites to incentivise, track and reward referrals throughout the customer journey, as well as further enhance the customer experience to turn even more shoppers into brand advocates.
## Select your referral flow
## Overview
We require a set of JavaScript tags to be installed on your website. The tags have some optional parameters which allow you to pass us the data we need such as order details and customer email and name.
An overlay shown on the order confirmation page to promote the referral programme to existing customers or deliver retention messages.
A link on the checkout page where referred friends can enter their friend's name to claim their introductory reward.
A tag on product pages that tracks product-level sharing, identifies top advocates, and attributes revenue back to referrals.
A landing page for existing customers to register into the referral programme and share with friends.
## Where to get help
If you need help at any time while integrating our tags, contact our [support team](https://help.mention-me.com/hc/en-gb/requests/new).