os-referral-tracker (Referral Tracker)

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

os-referral-tracker (Referral Tracker)

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.

This is a string attribute, not an HTML boolean

The components read attributes as raw strings, so the usual HTML boolean shorthand does not work here. Writing the attribute bare (hide-text) or empty (hide-text="") leaves it off, and hide-text="false" turns it on — any non-empty value is treated as on. Set hide-text="true" to enable it, and omit the attribute entirely to disable it.

Usage

HTML

layout.html

<os-referral-tracker hide-text="true"></os-referral-tracker>

Webflow

Embed block in site footer

<os-referral-tracker hide-text="true"></os-referral-tracker>

React

App.jsx

export default function App() {
    return <os-referral-tracker hide-text="true"></os-referral-tracker>;
}

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.

Related components

Cart Slideout Referrals carry through checkout in the slideout flow.

Product List Most referral traffic lands on a collection or product grid.