os-referral-tracker (Referral Tracker)
What it is
Section titled “What it is”os-referral-tracker reads the current referral code from URL/query state, syncs referral cookie state, and optionally renders referral attribution text.
Tag name
Section titled “Tag name”os-referral-tracker (Referral Tracker)
Attributes / parameters
Section titled “Attributes / parameters”| name | type | required | default | description |
|---|---|---|---|---|
hide-text | string | No | None (off) | hide-text="true" — Hides the rendered “Shopping With” referral label, so the component tracks the referral invisibly. See the note below on how this attribute is read. |
<os-referral-tracker hide-text="true"></os-referral-tracker><os-referral-tracker hide-text="true"></os-referral-tracker>export default function App() { return <os-referral-tracker hide-text="true"></os-referral-tracker>;}Reading the resolved enroller
Section titled “Reading the resolved enroller”Once this component resolves attribution, the enroller is also published on the JavaScript API at OpenShop.referral.current — handle, firstName, lastName, and source — and a referral:change event fires. That is the supported way to build your own “Shopping With” treatment instead of using this component’s built-in text.
OpenShop.on('referral:change', (referral) => { console.log('shopping with', referral?.firstName ?? 'nobody');});For display-only cases there is no need for a script at all — set hide-text="true" here and put data-os-text="referral.firstName" on your own element:
<os-referral-tracker hide-text="true"></os-referral-tracker>
<span data-os-show="referral">Shopping with <span data-os-text="referral.firstName"></span></span>Keep this component on the page either way — it is what resolves the referral in the first place.
Styling (CSS variables)
Section titled “Styling (CSS variables)”os-referral-tracker is a behavior-only component (it captures and persists referral codes) and exposes no --os-* CSS variables. If it renders any visible UI on your page, style it with plain selectors against the element — see Overriding styles.