# Support Pages Documentation

**Last Updated:** 2026-01-09

Complete documentation for support and utility pages on the Ordio website.

## Overview

The support pages section includes four pages that provide various support functions and utilities:
- **Demo** (Demo Booking)
- **HubSpot Integration** (HubSpot Testing)
- **Links** (Link Collection)
- **Banner** (Banner Generator)

---

## 1. Demo (Demo Booking)

### Basic Information

- **Page Name:** Individuelle Ordio Demo buchen und live erleben
- **Slug:** demo-vereinbaren
- **PHP File:** `v2/pages/static_demo.php`
- **URL:** `https://www.ordio.com/demo-vereinbaren`
- **Status:** Published

### Page Structure

#### Hero Section

- **Headline:** "Demo vereinbaren"
- **Description:** Information about booking a personalized demo

#### Demo Booking Form

**Form Elements:**
- Calendar/booking widget integration
- Contact form fields
- Date/time selection
- Meeting type selection

**Functionality:**
- Online demo booking system
- Calendar integration
- Email notifications
- Confirmation system

### Content Strategy

**Purpose:** Lead generation and product demonstration

**Key Messages:**
- Personalized demo experience
- Live product demonstration
- Expert consultation
- No-obligation trial

### Technical Implementation

- **PHP Includes:**
  - `../base/head.php` (with `$aosScript = "true"`)
  - `../base/header.php`
  - `../base/footer.php`
- **Schema Markup:**
  - `ContactPage` schema
  - `WebPage` schema
  - `BreadcrumbList` schema
- **Third-party Integration:**
  - Calendar booking system (likely Calendly or similar)
- **CSS/Styling:**
  - Form styling
  - Responsive layout
- **JavaScript:** AOS enabled

### SEO Focus

- **Primary Keywords:** ordio demo, demo vereinbaren, produktdemo, kostenlose demo
- **Meta Description:** "Buche eine persönliche Online-Demo mit unserem Team und entdecke wie Ordio deine Prozesse bei Schichtplanung Zeiterfassung und Aufgabenverwaltung erleichtert."
- **Schema:** ContactPage, WebPage, BreadcrumbList

---

## 2. HubSpot Integration (HubSpot Testing)

### Basic Information

- **Page Name:** Hubspot Test
- **Slug:** hubspot (internal/testing)
- **PHP File:** `v2/pages/static_hubspot.php`
- **URL:** Internal/testing page
- **Status:** Published (Testing/Development)

### Page Structure

#### Simple Header

- **Headline:** "Hubspot"
- **Purpose:** Testing page for HubSpot integration

#### HubSpot Script Integration

**HubSpot Embed Code:**
```html
<script type="text/javascript" id="hs-script-loader" async defer 
  src="https://js-eu1.hs-scripts.com/145133546.js" 
  crossorigin="anonymous" 
  onload="window.hubspotScriptLoaded = true;">
</script>
```

**Functionality:**
- HubSpot tracking script
- Form integration testing
- Analytics testing
- Lead capture testing

### Content Strategy

**Purpose:** Testing and development

**Key Elements:**
- HubSpot script loading verification
- Form integration testing
- Tracking validation

### Technical Implementation

- **PHP Includes:**
  - `../base/head.php` (with `$aosScript = "true"`)
  - `../base/header.php`
- **HubSpot Integration:**
  - HubSpot script loader
  - EU data center (`js-eu1.hs-scripts.com`)
  - Account ID: `145133546`
- **Schema Markup:** Minimal (testing page)
- **CSS/Styling:** Basic styling
- **JavaScript:** AOS enabled, HubSpot script

### SEO Focus

- **Meta Tags:** Basic (testing page)
- **Robots:** `index, follow` (but likely not indexed)
- **Purpose:** Internal testing, not SEO-focused

---

## 3. Links (Link Collection)

### Basic Information

- **Page Name:** Ordio Links – Podcast, Webinar, Whitepaper & Social Media
- **Slug:** links
- **PHP File:** `v2/pages/static_links.php`
- **URL:** `https://www.ordio.com/links`
- **Status:** Published
- **Robots:** `noindex, follow` (internal link collection)

### Page Structure

#### Header Section

- **Headline:** "Hier findest du alle wichtigen Links 👋"

#### Link Collection

**Links Included:**
- **Teste Ordio kostenlos** (Free Trial)
  - Opens modal (`modelOpen = true`)
  - Modal title: "Jetzt kostenlos testen"
  - Modal button: "Kostenlos und unverbindlich testen"
- **Ordio bei Linkedin**
  - URL: `https://de.linkedin.com/company/ordio`
- **Ordio bei Instagram**
  - URL: `https://www.instagram.com/ordiordio/`
- **Whitepaper (SV-Prüfung)**
  - URL: `https://www.ordio.com/download/optimal-vorbereitet-sozialversicherung`

**Commented Out Links:**
- Podcast (Küchenherde) - Spotify link
- Webinar (SV-Prüfung) - Webinar page link

### Content Strategy

**Purpose:** Central link hub for marketing resources

**Key Elements:**
- Quick access to key resources
- Social media links
- Content downloads
- Trial signup

### Technical Implementation

- **PHP Includes:**
  - `../base/head.php` (with `$aosScript = "true"`)
  - `../base/header.php`
  - `../base/footer.php`
- **Schema Markup:**
  - `CollectionPage` schema
  - `WebPage` schema
  - `BreadcrumbList` schema
- **Alpine.js Integration:**
  - Modal handling (`x-data`)
  - Event tracking (`data-event-type`, `data-event-name`)
- **CSS/Styling:**
  - Link card styling
  - Hover effects
  - Border and background colors
- **JavaScript:** AOS enabled, Alpine.js for modals

### SEO Focus

- **Robots:** `noindex, follow` (internal page, not for SEO)
- **Purpose:** Internal link collection, not search-optimized
- **Schema:** CollectionPage, WebPage, BreadcrumbList

---

## 4. Banner (Banner Generator)

### Basic Information

- **Page Name:** Ordio Banner Generator
- **Slug:** banner (internal utility)
- **PHP File:** `v2/pages/static_banner.php`
- **URL:** Internal utility page
- **Status:** Published
- **Robots:** `noindex, nofollow` (utility page)

### Page Structure

#### LinkedIn Banner Section

**Banner Dimensions:**
- Width: 1584px
- Height: 396px
- Format: LinkedIn banner size

**Banner Content:**
- **Logo:** Ordio SVG logo (blue)
- **Headline:** Dynamic text from URL parameters
  - Parameter `?1=` for first line
  - Parameter `?2=` for second line (blue)
  - Default: "Die Super App" / "für Schichtbetriebe"
- **Background:** Gradient blur effect
- **Bottom Wave:** SVG wave graphic in Ordio blue

#### Download Functionality

**Download Button:**
- "Download as Image" button
- Uses html2canvas library
- Converts HTML to PNG image
- Download filename: `ordio_linkedinbanner.png`
- Image quality: 0.92 (92%)

**Technical Details:**
- html2canvas configuration:
  - `useCORS: true`
  - `allowTaint: true`
  - `width: 1584`
  - `height: 396`
  - `foreignObjectRendering: true`

### Content Strategy

**Purpose:** Internal utility for generating social media banners

**Key Elements:**
- Customizable headline text
- Brand-consistent design
- LinkedIn-optimized dimensions
- Easy download functionality

### Technical Implementation

- **PHP Includes:**
  - `../base/head.php` (with `$aosScript = "true"`)
- **External Libraries:**
  - html2canvas (CDN): `https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js`
- **URL Parameters:**
  - `?1=` - First headline line
  - `?2=` - Second headline line (blue)
- **CSS/Styling:**
  - Fixed banner dimensions
  - Gradient backgrounds
  - SVG graphics
- **JavaScript:**
  - html2canvas integration
  - Download functionality
  - Canvas to image conversion

### SEO Focus

- **Robots:** `noindex, nofollow` (utility page, not for SEO)
- **Purpose:** Internal tool, not search-optimized
- **Schema:** None (utility page)

---

## Common Patterns Across Support Pages

### Form Integration

- **Demo Page:** Calendar booking system
- **Partner Page:** Contact form with email sending
- **HubSpot Page:** HubSpot script integration

### Utility Pages

- **Links Page:** Central link collection (`noindex`)
- **Banner Page:** Image generation tool (`noindex, nofollow`)

### Maintenance Requirements

- **Update Frequency:** As needed
- **Dependencies:** 
  - Third-party services (HubSpot, calendar booking)
  - External libraries (html2canvas)
- **Validation Checklist:**
  - [ ] Verify demo booking form works
  - [ ] Test HubSpot script loading
  - [ ] Check all links on links page
  - [ ] Test banner generator download
  - [ ] Verify URL parameters work (banner generator)
  - [ ] Check mobile responsiveness
  - [ ] Verify robots meta tags are correct

---

## Related Documentation

- **[Static Pages Inventory](STATIC_PAGES_INVENTORY.md)** - Complete list of all static pages
- **[Company Pages Documentation](company-pages-documentation.md)** - Company pages documentation
- **[Legal Pages Documentation](legal-pages-documentation.md)** - Legal pages documentation
- **[Cursor Rules](../../../../.cursor/rules/static-pages.mdc)** - Cursor AI rules for static pages