# Cello Referral Landing Page **Last Updated:** 2026-04-02 ## Overview The Cello referral landing page at `/einladung` is a dedicated, conversion-optimized page for users who click a Cello referral link. It provides personalized copy, Cello Attribution integration, HubSpot form capture, and workspace redirect with full SEO/AEO/GEO optimization. ## URL and Routing - **Canonical path:** `/einladung` - **File:** `v2/pages/cello_einladung.php` - **Canonical URL:** `https://www.ordio.com/einladung` - **.htaccess:** `RewriteRule ^einladung\/?$ v2/pages/cello_einladung.php [L,QSA]` ## Cello Attribution ### Script - **Sandbox:** `https://assets.sandbox.cello.so/attribution/latest/cello-attribution.js` - **Production:** `https://assets.cello.so/attribution/latest/cello-attribution.js` (used in production) - **Cello JS SDK** (Referral Component): `https://assets.cello.so/app/latest/cello.js` - Loaded async in ``; no Product Secret or API keys required (client-side only). ### URL Parameters | Parameter | Description | | ----------- | ------------------------------ | | `productId` | Cello product ID (e.g. `www.ordio.com`) | | `ucc` | Cello Unique Contact Code (referrer) | | `celloN` | Base64-encoded referrer name | | `utm_medium`| Lead source (e.g. `cello kwk`) | ### Personalization The page uses `window.CelloAttribution('getReferrerName')` to personalize the hero headline: - **With name:** "[Name] hat dich zu Ordio eingeladen" - **Fallback:** "Jemand hat dich zu Ordio eingeladen" + subtext "Mit einer persönlichen Empfehlung – starte kostenlos." **Copy guideline:** Use "Jemand" / "Freund oder Bekannter" – not "Kollege" – for inclusive referral wording (friends, contacts, not just colleagues). Implementation uses a queue/poll pattern to handle async script load. ### Discount Display (getCampaignConfig) When a Cello campaign is configured with a discount, the page calls `window.CelloAttribution('getCampaignConfig')` to retrieve: - **discount** – Decimal format (e.g. 0.1 = 10%) - **duration** – Months for the referred user's discount If a valid discount exists, the hero trust line switches from "7 Tage kostenlos · Ohne Kreditkarte · Flexibel upgraden" to "7 Tage kostenlos + [X]% Rabatt · Ohne Kreditkarte". Requires Cello campaign configured in Portal. ## Form Integration ### Hero Email Form - **Component:** `v2/base/include_email_form.php` with `$emailFormCello = true` - **data-cello:** Form has `data-cello` attribute so Cello Attribution auto-attaches hidden referral field - **HubSpot:** Form submits to Cello form with `sign_up_type__c`, `cello_referral_ucc__c`, `cello_referral__c`, UTM fields, `ucc`, `celloN`. Contact name defaults to full email. - **Redirect:** Uses persisted `utmData` (from `getUTMDataForAPI()` / cookies) for `ucc`, `celloN`, `productId`, UTM params – survives UTM cleanup. Redirect URL: `https://workspace.ordio.com/join?ucc=...&celloN=...&productId=...&email=...#/create/email` – workspace should pre-fill email when `email` param present ### Lead Capture Popup - **Component:** `v2/components/lead-capture-popup.php` with Cello-specific copy from `lead_capture_copy.php` (pattern `cello_einladung`) - **Copy:** "Fragen zur Einladung? Wir rufen dich gerne an." / "Jemand hat dich eingeladen – wir helfen dir gerne beim Einstieg. Kostenlos und unverbindlich." - **Personalization:** When Cello `getReferrerName()` returns a name, subtitle updates to "Jemand hat dich eingeladen – [Name] empfiehlt dir Ordio. Wir helfen dir gerne beim Einstieg. Kostenlos und unverbindlich." - **Triggers:** Automatic triggers (time, scroll, exit intent) are **disabled** on /einladung. Only the manual "Rückruf anfordern" button in the footer opens the popup. - **API:** Submits to `v2/api/lead-capture.php`; extracts ucc, celloN from cookies/page_url and maps to HubSpot ## Page Structure 1. **Hero** – Badge pill ("Empfehlung"), personalized headline, subheadline, primary email form (emphasized with border/background), trust line (7 Tage kostenlos; discount badge when campaign configured) 2. **Value props** – 3 benefit-driven cards with icons (Dienstpläne, Zeiterfassung, Alles aus einer Hand) 3. **Feature cards grid** – Reusable component with "7 Tage kostenlos starten" scroll-to-hero CTA 4. **Mid-page email CTA** – "Ordio in Aktion erleben" section with video and inline email form (same Cello form as hero; primary conversion path) 5. **Demo section** – "Ordio in Aktion erleben" video-first; no demo booking (secondary path via footer callback) 6. **Social proof** – Aggregate rating (4,9/5, 55 Bewertungen; align with `v2/data/social-proof-trust-section.php`), testimonial quote, link to /testimonials 7. **FAQ** – 7 questions with FAQPage schema for AEO (includes referral-specific: "Was passiert mit der Empfehlung?", "Erhält die einladende Person etwas für die Empfehlung?") 8. **Lead capture popup** – Two-step form (name, phone) with Cello-tailored copy; **automatic triggers disabled** on /einladung; manual footer button only ## Styling Alignment The page aligns with product pages (`product_mobile_app.php`, `static_partner.php`) for brand consistency: | Element | Pattern | |---------|---------| | **Hero H1** | `font-gilroybold text-[42px] sm:text-[72px] text-[#333]` + `text-ordio-blue` accent | | **Hero badge** | `rounded-full px-4 py-1 bg-white bg-opacity-40 shadow-sm` pill | | **Value cards** | `rounded-2xl shadow-lg border border-[#EDEFF3]` + icon wrapper `w-12 h-12 bg-ordio-blue/10 rounded-lg` | | **Section H2** | `font-gilroybold text-3xl sm:text-4xl lg:text-5xl` + `text-ordio-blue` accent | | **Section pills** | `font-inter600 text-xs bg-white px-5 py-3 rounded-full uppercase shadow-sm` | | **Body** | `bg-[#fbfbfb]` | | **FAQ summary** | `font-inter600 text-lg` | ## Cello New User Banner Override The Cello attribution script injects a New User Banner (e.g. "Lukas loves Ordio... Sign up for free...") with `position: fixed`. **Vertical positioning** is controlled in **Cello Portal → Setup → New User Experience**; no custom spacing is applied on `/einladung`. A script in `cello_einladung.php` only applies a **line break** so the banner displays on two lines: first line (e.g. "Lukas loves Ordio and thought you'd love it too ❤️"), second line (e.g. "Sign up for free and get 50€ starting balance."). Supports both English and German copy (e.g. "Melde dich kostenlos an..."). **Banner copy and language:** The banner text (including German vs English) is configured in **Cello Portal → Setup → New User Experience → Personalization**. Change the copy there to use German (e.g. "Lukas liebt Ordio und dachte, dir gefällt es auch ❤️" / "Melde dich kostenlos an und erhalte 50€ Startguthaben."). The line-break logic supports both languages. ## Cello Best Practices - **Headline:** Personalized exclusivity ("[Name] hat dich zu Ordio eingeladen") - **Discount:** Use `getCampaignConfig()` to show discount when campaign exists - **Social proof:** Testimonial quote + link to /testimonials - **CTA:** Emphasize "7 Tage kostenlos" in trust line and secondary CTA **Feature cards component:** `v2/components/feature-cards-grid.php` – shared with homepage (start-v2.php). Requires AOS and animation scripts for scroll-based effects (Zeiterfassung timer, GPS pulsating circle, Lohn & Gehalt amount). ## SEO and Schema - **Meta:** title, description, canonical, OG tags - **Schema:** WebPage, SoftwareApplication, BreadcrumbList, FAQPage (JSON-LD) - **AEO/GEO:** Question-forward H2s, answer-first copy ## Cello Portal Configuration (Post-Deployment) **CRITICAL:** After deploying the landing page, configure Cello Portal: 1. Log into [Cello Portal](https://portal.cello.so) 2. Go to **Setup → New User Experience** 3. Set **Custom landing page URL** to: `https://www.ordio.com/einladung` 4. Save Until this is set, Cello referral links will not redirect to `/einladung`. ## Production Checklist - [x] Cello Attribution script uses production URL (`assets.cello.so`) - [ ] Use production Product ID (`www.ordio.com`) in Cello Portal - [ ] Configure Custom landing page URL in Cello Portal - [ ] Verify HubSpot contact properties for Cello fields (run `php v2/scripts/hubspot/verify-cello-form.php`) - [ ] Add `cello_referral__c` as hidden field to Cello form in HubSpot if verify script reports MISSING - [ ] Test with real Cello referral link - [ ] Browser test: submit form with `?ucc=test123&celloN=THVrYXM`, verify GTM dataLayer `form_submit` and HubSpot contact ## Testing ### Functional Test Land with: ``` https://www.ordio.com/einladung?productId=www.ordio.com&ucc=test123&celloN=THVrYXM&utm_medium=cello%20kwk ``` Verify: - Cello cookies set (`cello-referral`, `cello-product-id`) - Headline personalizes to "Lukas hat dich zu Ordio eingeladen" (THVrYXM = Lukas) or "Jemand hat dich zu Ordio eingeladen" if no name - Form submit → HubSpot contact has Cello Referrer Name, Cello Referrer UCC - Redirect URL includes `ucc`, `celloN`, `productId`, `email`, UTM params (built from persisted utmData; survives UTM cleanup) ### Schema Validation - Google Rich Results Test: `https://www.ordio.com/einladung` - Verify WebPage, SoftwareApplication, BreadcrumbList, FAQPage ### Performance - Lighthouse audit (mobile + desktop) - LCP < 2.5s, CLS < 0.1, PageSpeed > 90 ## Credentials The landing page does **not** require Cello Product Secret or API keys. For future JWT/API use: - Create `v2/config/cello-config.php` from `cello-config.example.php` - Add `v2/config/cello-config.php` to `.gitignore` (already done) - Never commit real credentials **Production credentials** (from Cello Portal): - **Product ID:** `www.ordio.com` - **API Base URL:** `https://api.cello.so/` - **CDN URLs:** See `v2/config/cello-config.example.php` for full list ## References - [CELLO_HUBSPOT_INTEGRATION.md](./CELLO_HUBSPOT_INTEGRATION.md) - [Cello Attribution docs](https://docs.cello.so/attribution/for-web) - [Cello Optimizing Referral Landing Page](https://docs.cello.so/guides/user-experience/optimizing-landing-pages)