BeMadison Demo Page

URL: https://frillyconcierge.com/demos/bemadison

This is a full-screen demo page with centered logo and Smart Chat widget.

Assets to Upload

Place these files in this directory (src/pages/demos/bemadison/):

1. background.jpg (or background.png)

• Full bleed background image
• Recommended size: 1920x1080 or larger
• Format: JPG or PNG
• Will cover entire viewport

2. logo.svg

• BeMadison logo in SVG format
• Will be centered vertically and horizontally
• Constrained to 80% viewport width and 60% viewport height
• SVG format recommended for crisp scaling

Configuration

Smart Chat Widget

In index.astro, update the Smart Chat embed ID:

<smart-chat
  embed-id="YOUR_EMBED_ID"  ← Replace with BeMadison's actual embed ID
  theme="dark"              ← Adjust: "light" or "dark"
  mode="floating"           ← Or "anchored-right" or "anchored-bottom"
></smart-chat>

To get the embed ID:

1. Go to https://frillyconcierge.com/app/admin
2. Find BeMadison’s Smart Chat configuration
3. Copy the embed ID

Theme Options

• theme="light" - Light mode widget
• theme="dark" - Dark mode widget (better for dark backgrounds)

Placement Options

• mode="floating" - Floating button in bottom center (default)
• mode="anchored-right" - Anchored to right edge with rotated button
• mode="anchored-bottom" - Anchored to bottom edge

Styling Adjustments

Background Image

If the background image needs different positioning:

.background {
  background-position: center; /* Options: top, bottom, left, right, center */
}

Logo Size

Adjust logo constraints in index.astro:

.logo-container {
  max-width: 80vw;  /* Adjust percentage */
  max-height: 60vh; /* Adjust percentage */
}

Optional Overlay

If the logo is hard to see against the background, uncomment the overlay:

<div class="overlay"></div>

Then adjust opacity in CSS:

.overlay {
  background: rgba(0, 0, 0, 0.3); /* 0.0 = transparent, 1.0 = solid black */
}

Deployment

After uploading assets and configuring:

cd frillyconcierge-marketing
npm run build

Then upload dist/demos/bemadison/* to VPS at /demos/bemadison/

File Structure

src/pages/demos/bemadison/
├── index.astro           ← Main page (already created)
├── background.jpg        ← Upload this
├── logo.svg              ← Upload this
└── README.md             ← This file

After build, becomes:

dist/demos/bemadison/
├── index.html            ← Generated from index.astro
├── background.jpg        ← Copied from src
└── logo.svg              ← Copied from src