# Detailed Analysis: "Book a Call" Support UX Integration

## 1. Executive Summary
The goal is to integrate a "Book a Free Setup Call" CTA across the FlexStock setup journey. Analysis shows that technical friction often occurs at two key stages: initial onboarding and the middle steps of the configuration (Step 2-3). Providing a visible, trustworthy support option at these moments will decrease abandonment rates and increase user confidence.

## 2. Interface Structure
- **Framework:** Alpine.js for state management (`x-data="setup"`).
- **Core Strategy:** Pure Design & Hardcoded Link Integration.

## 3. UX Strategy & Placement

### A. Phase 1: Zero State (Trust Building)
- **Location:** `templates/setup/welcome.php`
- **Visibility:** Visible *before* the setup starts (`!state.setupStarted`).
- **Placement:** A secondary button next to "Start Setup" or a help block below the main card.
- **Aesthetic:** Clean, minimalist, using `ssgs-btn border` to distinguish from the primary activation CTA.

### B. Phase 2: Configuration Stepper (Problem Solving)
- **Location:** `templates/setup/base.php` (The shared shell).
- **Visibility:** Visible during active steps (`state.setupStarted && state.currentStep < 5`).
- **Placement:** A dedicated side-column (Right side) in a 2-column layout.
- **Why Sidebar?** Anchoring help to the side keeps the main configuration flow focused while providing a constant "safety net."

## 4. Navigation & URL Structure
The Calendly URL will be a hardcoded link available throughout the setup.
- **Action URL:** `https://calendly.com/flexstock/30min`
- **Method:** Static `href` attribute in HTML/PHP templates.

## 5. Visual Hierarchy & Components
- **The "Support Block":** Contains a friendly icon (e.g., chat/calendar icon), a prompt ("Need Help?"), and a clear button.
- **Responsiveness:** On mobile, the sidebar should either stack at the bottom or be replaced by a floating "Help" icon to prevent clutter.

## 6. Recommendations
- **Template Reusability:** Create a single `support-block.php` file to avoid code duplication.
- **Consistency:** Ensure the "Book a Call" button matches the plugin's primary design tokens (colors, border-radius).
