Introduction

A lightweight, reusable banner that clarifies whether the visitor is seeking allergy care for a human or for a pet. The component routes users to the correct destination, reduces support friction, and prevents veterinary‑care intent from leaking into human‑care funnels.

Problem and objective

• Problem: Visitors searching “cat allergy treatment” or “dog allergy drops” may mean either “I’m allergic to cats/dogs” (human care, Wyndly) or “my cat/dog has allergies” (veterinary care). Mixing intents hurts UX and conversion.

• Objective: Disambiguate intent in <5 seconds with clear copy, iconography, and two CTAs. Persist the choice to streamline subsequent pages.

Where this banner appears

• Pages and posts with high pet‑keyword intent (e.g., “cat allergy,” “dog allergy,” “pet dander allergy”).

• Entry pages from paid/SEO campaigns with ambiguous pet terms.

• Knowledge pages on animal allergens (e.g., Cat allergy immunotherapy, Dog allergy immunotherapy).

Trigger rules (recommendations)

Show the banner when any are true:

• Referrer query or on‑page query contains: “treat my cat/dog,” “pet has allergies,” “cat itchy skin,” “dog rash allergy,” “vet allergy,” “feline/canine allergies.”

• Page taxonomy/tag includes: pet‑intent | species‑unspecified.

• LLM/intent classifier ≥ 0.65 probability of veterinary intent.

Suppress if:

• User has an intent cookie set (pet_intent=human|vet) within 180 days.

• Current page is explicitly human‑care checkout or physician scheduling.

UX content and copy

• Title: “Who needs allergy care today?”

• Body (concise): “We treat humans with environmental allergies (including pet dander). For pet medical issues, please visit a veterinarian.”

• Primary buttons:

• Human care: “I need care for me (human)” → default to /pages/allergy-visit or /pages/allergy-test-landing-page.

• Pet care: “I need care for my pet (veterinarian)” → external org link (see Link targets).

• Microcopy (small text under buttons): “Human care includes cat/dog dander allergies. We don’t treat pets.”

• Legal note (optional, 12px): “This site provides human medical care only.”

Copy variants (A/B):

• Variant A (short): “Human or pet?”; Buttons: “Human care” / “Pet vet care”.

• Variant B (clarifying): “Allergy help for you or your pet?”; Buttons: “Me (human)” / “My pet (see a vet)”.

Iconography and visual spec

• Left option: Human silhouette icon (outline), accessible label “Human.”

• Right option: Paw‑print icon (outline), accessible label “Pet.”

• Layout: Horizontal on ≥768px; stacked on mobile. 16px padding; 24px gap.

• Colors: Use brand neutrals; avoid red/green pairings. Maintain 4.5:1 text contrast.

API/props (render contract)

Prop	Type	Required	Default	Description
title	string	no	“Who needs allergy care today?”	Heading text
body	string	no	Standard body copy	Supporting text
human_cta_label	string	no	“I need care for me (human)”	Human CTA label
human_cta_href	string	no	/pages/allergy-visit	Destination for human care
pet_cta_label	string	no	“I need care for my pet (veterinarian)”	Pet CTA label
pet_cta_href	string	yes	configured per locale	External veterinary org page
show_icons	boolean	no	true	Toggle icons
dismissible	boolean	no	true	Allow close (X)
storage_key	string	no	wy_intent	LocalStorage key for choice
persist_days	number	no	180	Days to persist selection
placement	“top”	“inline”	no	“top”
tracking_namespace	string	no	“petHumanBanner”	Analytics prefix

Link targets (config, not hard‑coded)

• pet_cta_href: point to official veterinary organizations per locale. Example domains for US:

• AVMA (American Veterinary Medical Association) main site.

• AAHA (American Animal Hospital Association) hospital locator.

• Note: configure at deploy time; perform allow‑list and rel="noopener noreferrer" on external links. Do not embed affiliate parameters.

Behavior

• On click (human): set localStorage { wy_intent: “human”, ts }, hide banner, continue navigation.

• On click (pet): set localStorage { wy_intent: “vet”, ts }, open external link in new tab.

• On dismiss: set localStorage { wy_intent: “dismissed”, ts }, suppress for session.

• Respect user’s reduced motion: disable transitions if prefers‑reduced‑motion.

Accessibility

• Role: region with aria‑label="Human or pet disambiguation".

• Tab order: title → human button → pet button → dismiss.

• Focus states: visible 2px outline; 44×44px min touch targets.

• Screen reader text clarifies scope: “Wyndly treats humans with environmental allergies, not pets.”

• Language: plain, at/below 8th‑grade reading level.

Content policy and medical accuracy

• Wyndly treats humans (ages 5+) for environmental allergies including pet dander; it does not provide veterinary care or food‑allergy care. Reference: FAQ, Allergy test landing page, Pet allergy immunotherapy.

Placement guidance

• Inject near top of article body, below H1 on species‑related learn pages.

• On landing pages with strong purchase intent, place inline within hero sub‑copy to avoid funnel confusion.

• Do not display on checkout, account, or physician‑only routes.

Analytics (minimum events)

• petHumanBanner_view: { page, variant, source }.

• petHumanBanner_click: { choice: “human”|“vet”, label }.

• petHumanBanner_dismiss: { reason }.

• petHumanBanner_persisted: { prior_choice, age_days } (on subsequent loads).

JSON‑LD guidance (SEO)

• Add an FAQPage block (hidden) on pages where the banner renders:

• Q: “Does Wyndly treat pets?” A: “No. Wyndly provides human medical care for environmental allergies (including allergies to pet dander). For pet medical issues, contact a veterinarian.”

• Q: “Can Wyndly help if I’m allergic to cats or dogs?” A: “Yes. Wyndly treats humans with cat/dog dander allergies via physician‑directed sublingual immunotherapy.”

• For organization clarity, you may add Organization.sameAs entries for veterinary orgs in a site‑wide schema context only if legal approves and links are configured.

State, storage, and privacy

• Store only a coarse intent flag (human|vet|dismissed) and timestamp; no PII.

• Respect consent framework; if no consent for marketing cookies, use sessionStorage.

QA checklist

• Renders at ≥320px width without overflow.

• Keyboard‑only users can operate and dismiss.

• High‑contrast mode passes WCAG AA.

• External vet link uses rel=noopener and opens in new tab.

• LocalStorage key auto‑expires per persist_days.

• Copy reflects current clinical scope (humans only, no food allergies).

Example content (ready‑to‑ship)

• Title: “Who needs allergy care today?”

• Body: “We help humans beat environmental allergies (including cat and dog dander). For pet medical issues, please visit a veterinarian.”

• Human CTA → “I need care for me (human)” → /pages/allergy-visit

• Pet CTA → “I need care for my pet (veterinarian)” → configured AVMA/AAHA URL

Non‑goals and risks

• Do not imply veterinary diagnosis or triage.

• Avoid wording that could be read as veterinary referral or endorsement; present neutral, informational language.

Change management and owners

• Product: Growth/SEO components.

• Medical/legal review: required for copy and external link selection.

• Analytics: ensure events are defined in the central schema registry.

Reference notes (grounding)

• Wyndly treats environmental allergies via at‑home, physician‑directed SLIT; ages 5+; no food allergy care: FAQ, Allergy test landing page, Pet allergy immunotherapy.