═══════════════════════════════════════════════════════════════
  MULTI-BRAND PRINTER CHAT WIDGET — INSTALLATION GUIDE
═══════════════════════════════════════════════════════════════

SUPPORTED BRANDS
────────────────
  hp       → Blue theme  | Agent: Sarah  | HP Certified Technician
  canon    → Red theme   | Agent: James  | Canon Certified Technician
  epson    → Navy theme  | Agent: Maya   | Epson Certified Technician
  brother  → Green theme | Agent: Chris  | Brother Certified Technician
  (none)   → Default dark blue (universal / fallback)


══════════════════════════════════════
  METHOD 1 — Set brand via variable
  (recommended — works on any URL)
══════════════════════════════════════

Paste this into the <head> or just before </body> on each page.
Change the brand value to match the page.

<!-- HP page -->
<script>
  window.phConfig = {
    brand:    'hp',
    apiUrl:   'https://yourdomain.com/leads.php',
  };
</script>
<script src="chat-widget.js"></script>

<!-- Canon page -->
<script>
  window.phConfig = {
    brand:    'canon',
    apiUrl:   'https://yourdomain.com/leads.php',
  };
</script>
<script src="chat-widget.js"></script>

<!-- Epson page -->
<script>
  window.phConfig = {
    brand:    'epson',
    apiUrl:   'https://yourdomain.com/leads.php',
  };
</script>
<script src="chat-widget.js"></script>

<!-- Brother page -->
<script>
  window.phConfig = {
    brand:    'brother',
    apiUrl:   'https://yourdomain.com/leads.php',
  };
</script>
<script src="chat-widget.js"></script>


══════════════════════════════════════
  METHOD 2 — Auto-detect from URL
  (zero config — widget reads the URL)
══════════════════════════════════════

If your page URLs already contain the brand name, you don't need
to set anything. The widget will detect the brand automatically.

  https://yourdomain.com/hp/setup       → HP (blue)
  https://yourdomain.com/canon/support  → Canon (red)
  https://yourdomain.com/epson/help     → Epson (navy)
  https://yourdomain.com/brother/wifi   → Brother (green)
  https://hp.yourdomain.com/            → HP (detected from hostname)

Just include the script with your apiUrl and no brand needed:

<script>
  window.phConfig = { apiUrl: 'https://yourdomain.com/leads.php' };
</script>
<script src="chat-widget.js"></script>


══════════════════════════════════════
  OPTIONAL OVERRIDES
  (override agent name / brand text)
══════════════════════════════════════

You can override any field even after brand detection:

<script>
  window.phConfig = {
    brand:     'hp',
    apiUrl:    'https://yourdomain.com/leads.php',
    agentName: 'David',               // override agent name
    agentRole: 'HP Senior Technician', // override role text
    brandName: 'HP Expert Support',   // override header badge
  };
</script>
<script src="chat-widget.js"></script>


══════════════════════════════════════
  WHAT CHANGES PER BRAND
══════════════════════════════════════

  ✅ Widget header gradient color
  ✅ FAB button color + pulse glow
  ✅ Agent avatar color
  ✅ Agent name and role text
  ✅ Brand badge in top-left of widget
  ✅ Quick-reply button border/hover color
  ✅ User message bubble color
  ✅ Typing dots color
  ✅ Input focus ring color
  ✅ "brand" field saved to lead in dashboard

  ✗ Chat flow (same across all brands — shared backend)
  ✗ leads.php (one shared file handles all brands)


══════════════════════════════════════
  DASHBOARD
══════════════════════════════════════

Leads from all brand pages go to the same dashboard.
Each lead now includes a "brand" field so you can see
which brand page the customer came from.

No changes to leads.php or dashboard are needed.


══════════════════════════════════════
  FILES
══════════════════════════════════════

  chat-widget.js   ← drop this one file on your server
                     (replaces the old chat-widget.js)
  leads.php        ← unchanged, use your existing file
  dashboard/       ← unchanged, use your existing folder

═══════════════════════════════════════════════════════════════
