> ## 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. # Referrer Tag > Integrate the referrer tag on your order confirmation page to promote referrals and track conversions export const SignInNotice = ({message = "To see code snippets pre-filled with your partner code"}) => { return
{message}, sign in.
; }; 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; }; ## Why the Referrer Tag Matters Mention Me offers referral and influencer solutions. This essential tag allows us to show promotional offers and track customer activity. ### What Does the Referrer Tag Do? Personalised messages encouraging customers to refer. Tracks when referred friends buy so referrers get rewarded. Logs follower transactions so influencers are rewarded accurately. Follow-up content like discounts or NPS surveys. ## How to Integrate the Referrer Tag Include the following JavaScript snippet at the bottom of the `` tag on the order confirmation page (and optionally on other pages too). The request includes your unique partner code and mandatory customer and order parameters. ```html Demo theme={null} ``` ```html Live theme={null} ``` The JavaScript runs after the rest of the page has loaded, populates the div above with the content. Customise any passed parameters to pass the real data. Don't forget to URL encode your data. Include the following `
` into your page where you want the iframe to appear. ```html theme={null}
``` This is just a placeholder which is populated via the JavaScript tag. You can optionally apply a class or style to the div, via the Mention Me dashboard, if you wish to control the way the contents are styled. If you need to change the id on the wrapper (for example if you need two tags on one page), you can customise from within the Mention Me dashboard. Include the following JavaScript snippet at the bottom of the `` tag on the order confirmation page (and optionally on other pages too). The request includes your unique partner code and mandatory customer and order parameters. ```html Demo theme={null} ``` ```html Live theme={null} ``` The JavaScript runs after the rest of the page has loaded, populates the div above with the content. Customise any passed parameters to pass the real data. Don't forget to URL encode your data. Include the following `
` into your page where you want the link to appear. ```html theme={null}
``` This is just a placeholder which is populated via the JavaScript tag. You can optionally apply a class or style to the div, via the Mention Me dashboard, if you wish to control the way the contents are styled. If you need to change the id on the wrapper (for example if you need two tags on one page), you can customise from within the Mention Me dashboard. Include the following JavaScript snippet at the bottom of the `` tag on the order confirmation page (and optionally on other pages too). The request includes your unique partner code and mandatory customer and order parameters. ```html Demo theme={null} ``` ```html Live theme={null} ``` The JavaScript runs after the rest of the page has loaded, populates the div above with the content. Customise any passed parameters to pass the real data. Don't forget to URL encode your data. ## Verb Aliases in the URL The verb in the URL path (`referreroffer`) can be replaced with `offer` or `conversion` - all three behave identically. Pick whichever reads best in your codebase, for example `/api/v2/conversion/YOUR_PARTNER_CODE?...`. ## Mandatory Data Parameters These are required to ensure that your referral programme runs correctly. The customer's firstname. Please URL encode. Example: `Franklin` The customer's surname. Please URL encode. Example: `McFly` The customer's email address. Please URL encode. Example: `franklinmcfly559@mention-me.com` The unique order identifier from your system. Has a maximum of 50 characters. Example: `8494024521` The order subtotal (excluding VAT/taxes and shipping) in the currency indicated by the `order_currency` parameter. If you can't remove VAT, let us know. Example: `106.75` The three character (ISO 4217) currency code that the order total is in. Example: `GBP` String indicator of where you are including this tag within your site (for example: `checkout`, `postpurchase`, `landingpage`). Used for reporting. Has a maximum of 50 characters. Example: `postpurchase` String representing the required locale for the campaign. Used to show the right locale (language, currency) for the user. The format should be ISO 639-1 language code, an underscore (`_`), then the ISO 3166-1 alpha-2 country code (e.g. `fr_FR` for French/France). Default is empty (which will result in a locale of `en_GB` being assumed). When launching your first referral programme, we recommend targeting your main regions/locales first, based on volume. You can also group together and target certain regions with the same campaign if using the same language and currency (e.g. `en_EU` for all countries that have English as their language and Euro as their currency). If your referral programme offers third-party vouchers (e.g. Amazon gift card), check if they can support the locales you're promoting to. Example: `en_GB` The coupon code used by the customer (if any). Example: `ABC4577` ## Extra Parameters to Drive Referral Optimisation Add these data parameters to significantly improve performance. The discount amount - our assumption is this has already been taken off the order subtotal provided. This allows us to calculate the Cost Per Acquisition for referral. Example: `23.49` The number of items in the basket (if applicable). This helps us understand the type of purchase and can be a signal of advocacy. Example: `1` Whether this order is for a subscription (recurring). This helps us qualify and categorise the revenue. Example: `false` Whether this order is a gift (being bought for someone else). Gifts can be signals of advocacy. Example: `false` The unique customer identifier from your system. Example: `MI1404024521` ## Extra Parameters for Product Referral If you are using [Product Referral](/developer-docs/integration/entry-points/product-referral), add these parameters to your referrer tag to enable product-level conversion tracking. See the [product referral instructions](/developer-docs/integration/entry-points/product-referral) for full details. Comma-separated list of product IDs included in the order. Comma-separated list of product SKUs included in the order. Comma-separated list of product names included in the order. Comma-separated list of product prices included in the order. Comma-separated list of product quantities included in the order. The customer's phone number(s). Pass as many phone numbers as you have as a comma-separated list. If you are passing any data which is not a digit (e.g. spaces, +'s), these need to be URL encoded. The customer's title. This allows you to have more formal messaging in your flow. Has a maximum of 20 characters. The customer's full name. Please URL encode. The customer's username. Your account is set up for referrers to share using their username not full name. Please URL encode. String representing a customer segment (for example one of: men, women) used to pass segmentation data about your customer to us. Has a maximum of 50 characters. Any piece of custom data you wish to pass to us. The customer's address line 1 (if known). The customer's address line 2 (if known). The customer's address city (if known). The customer's address county (if known). The customer's address postcode (if known). The customer's address country (if known). A piece of text you can use to pass into sharing widgets, such as what the user bought or how much they saved. The date and time the order was placed. The format must be in ISO 8601 format and URL encoded. If not provided or invalid, we will use the date and time at the point we received the tag. In some cases it may be desirable to ensure that email addresses and other information is not in clear text. See [encrypted parameters](/developer-docs/integration/encrypted-parameters). Optionally override the way the flow is implemented (one of: `link`, `form`, `embed`). Default can also be set in the merchant dashboard. If in doubt, leave out. Integer representing the index of an offer within an experiment. Used to override the dynamic allocation of offers to customers so that, for example, email creative can be set up to show a specific variation. Default is null. ## Example with All Mandatory Parameters Populated ```html Demo theme={null} ``` ```html Live theme={null} ``` ## Things to Watch Out For Check the browser developer console for errors from the Mention Me tag. Most integration issues come down to a missing mandatory parameter, an un-encoded value, or the demo host being left in the live snippet. See the [common tag integration errors](/developer-docs/integration/reference/faqs#common-tag-integration-errors) and [error codes](/developer-docs/integration/reference/error-codes) for the full checklist. The most common reasons are that `firstname` and `surname` are not being rendered into the tag URL (the snippet still contains `` / ``), or the values are not URL encoded. Customer names with accented characters or spaces must be URL encoded before being written into the URL. `order_subtotal` must be the order subtotal **excluding VAT/taxes and shipping** - this is the figure the referral reward is calculated against. If you cannot remove VAT on your side, let your Client Success Manager know and we can handle the adjustment. The referrer tag personalises the sharing experience using the customer's real name (for example, "Franklin recommends…"). Without a name we cannot build that sharing message, which dramatically reduces referral performance. If your account is configured to share by username instead, use the `username` parameter - but the referral programme still needs a name for display in some flows.