# Customer Reviews, Floating Chat Assist & Social Sharing Plan **Project:** Bangladesh Saree E-Commerce Website **Features Covered:** 1. Customer Reviews & Photo Testimonials (PDP Review Section + Homepage Customer Drape Stories) 2. Floating WhatsApp / Messenger Assist Button (Mobile-Safe Stacking & Pre-Filled Context Messages) 3. Facebook, Messenger & WhatsApp Share Previews (Open Graph Meta Tags + PDP Share Bar) **Design System Reference:** Strictly uses the 12 global variables from `global_color_typography_design_plan.md` (`--bg-main`, `--bg-surface`, `--brand-primary`, `--brand-accent`, `--text-primary`, `--text-muted`, `--text-light`, `--border-subtle`, `--state-success`, `--state-error`, `--font-heading`, `--font-body`) and shared layering rules from `global_ui_components_and_content_standards.md`. **Zero hardcoded hex codes or font names.** --- ## 1. Customer Reviews & Photo Testimonials System In the Bangladesh saree market, seeing **real customer photos** (how the *Aanchal* drapes in natural light and whether the fabric matches the studio photo) is one of the strongest conversion drivers. ### A. Star Rating Visual Standard * **Filled Stars (`★★★★★`):** Rendered in `--brand-primary` (never harsh bright yellow that clashes with the luxury palette). * **Empty / Unfilled Stars (`☆☆☆☆☆`):** Rendered in `--border-subtle`. * **Rating Text:** e.g., `4.9 out of 5 (28 Reviews)` in `--font-body` (Medium `500`, `14px`, `--text-primary`). --- ### B. Placement #1: Product Details Page (PDP) Reviews Section Positioned on the PDP below the Specifications & Care Accordions and above the "Similar Sarees You May Like" slider: #### 1. Top Rating Summary Header (Inside `--text-primary` / `--brand-primary` Row onPDP) * **Above-the-Fold Quick Rating Link (Right Column under Saree Title):** * Displays `★★★★★ 4.9 (18 Reviews)` in `--brand-primary` stars and `--text-muted` count. Clicking smoothly scrolls down to the Reviews section. *(If a new saree has `0` reviews, this top summary link is hidden so the title area stays clean).* #### 2. Reviews Section Header & Summary Box (`--bg-surface` Card with `1px` `--border-subtle` Border) * **Left Side:** * Section Heading (H2): `"Customer Reviews & Photos"` in `--font-heading` (Semi-Bold `600`, `32px` Desktop / `24px` Mobile, `--brand-primary`). * Overall Score: **`4.9 / 5.0`** (`--font-heading`, Bold `700`, `36px`, `--brand-primary`) + `★★★★★` + `"Based on 18 verified reviews"` (`--text-muted`). * **Middle Side (Customer Photo Strip — Conditional):** * If customers have uploaded drape photos for this saree, displays a horizontal scrollable row of `4:5` customer thumbnails (`72px × 90px`, `1px` `--border-subtle` border). Clicking any thumbnail opens the photo in the full-screen Lightbox with that customer's review text below. * **Right Side:** * Outlined Secondary Button: **`WRITE A REVIEW`** (`48px` height, `1.5px` `--brand-primary` border and `--brand-primary` text on `--bg-main` background; hover fills with `--bg-surface`). #### 3. Individual Customer Review Cards Grid * **Layout:** 2 columns on Desktop (`gap: 20px`) / 1 column stack on Mobile (`gap: 16px`). Shows **4 reviews initially**, with a centered **`SHOW MORE REVIEWS`** secondary outlined button below if more exist. * **Review Card Anatomy (`--bg-surface` background, `1px` `--border-subtle` border, `20px` Desktop / `16px` Mobile padding):** * **Top Row:** * Left: `★★★★★` in `--brand-primary`. * Right: Review Date (e.g., `12 Oct 2026` in `--text-muted`, `12px`). * **Reviewer Row:** * Reviewer Name (e.g., `Farhana Rahman — Dhaka`) in `--font-body` (Semi-Bold `600`, `14px`, `--text-primary`) + **`✓ Verified Buyer`** badge (`✓` in `--state-success`, label in `--text-muted`, `12px`). * **Review Text:** 1–3 sentences in `--font-body` (Regular `400`, `15px`, `--text-primary`). * **Attached Customer Photo (Optional):** Vertical `4:5` thumbnail (`80px × 100px`) on the right or bottom of the card; tapping opens full view. * **Zero-Review State (For Brand New Sarees):** * Displays a compact, welcoming `--bg-surface` box: *"Be the first to review this saree and share your drape experience."* + **`WRITE A REVIEW`** button. #### 4. "Write a Review" Popup Modal (No Account Login Required) Triggered when clicking **`WRITE A REVIEW`**: * Centered modal (`max-width: 520px` on Desktop / Slide-Up Bottom Sheet on Mobile) using `--bg-main` background and `1px` `--border-subtle` border over the dimmed backdrop: 1. **Tap-to-Rate Stars (`*` Required):** 5 large interactive stars (`36px × 36px` tap targets) in `--brand-primary`. 2. **Your Name (`*` Required):** Input (`48px` height, e.g., *"Nusrat Jahan"*). 3. **City / District (`Optional`):** Input (e.g., *"Dhaka"* or *"Chattogram"*). 4. **Mobile Number or Order ID (`*` Required — Private, Never Shown Publicly):** Used to verify the purchase and mark the review as `✓ Verified Buyer`. 5. **Your Review (`*` Required):** Textarea (`3 rows`, placeholder: *"How was the fabric quality, color, and drape?"*). 6. **Upload Photo (`Optional`):** Clean upload button (`"+ Add Saree Photo (Optional)"` in `--bg-surface` with `1px` dashed `--border-subtle` border). 7. **Submit Button:** **`SUBMIT REVIEW`** (Primary button: `--brand-accent` fill with `--text-primary` bold text; flips to `--brand-primary` with `--text-light` on hover). Shows toast `"Thank you! Your review has been submitted ✓"` (`--state-success`). --- ### C. Placement #2: Homepage "Customer Drape Stories" Section Placed on the Homepage (`homepage_layout_and_section_flow_plan.md`) to give first-time visitors immediate social proof from real Bangladeshi women: * **Section Header:** * Title (H2): `"Loved by Women Across Bangladesh"` in `--font-heading` (`32px` Desktop / `24px` Mobile, `--brand-primary`). * Subtitle: *"Real drape moments and verified reviews from our customers"* (`--text-muted`). * **Layout (Reuses Responsive Slider Standard):** * **Desktop:** 3 or 4 Testimonial Cards in a horizontal row + pagination dots. * **Mobile:** Horizontal touch-swipe row showing `1.2` cards per screen width + slim progress bar underneath (`--border-subtle` track, `--brand-primary` thumb). * **Testimonial Card Anatomy (`--bg-surface` Frame, `1px` `--border-subtle` Border):** * **Left / Top:** Customer photo (`4:5` portrait ratio) or the saree thumbnail she purchased. * **Right / Bottom Content (`16px` padding):** * `★★★★★` in `--brand-primary`. * Short quote (`"The Jamdani weave is even softer in person and delivery inside Dhaka took just 2 days!"` in `--font-body`, `14px`, `--text-primary`). * Customer Name + City (`"Sadia Islam, Dhanmondi"` in Semi-Bold `--text-primary`) + `✓ Verified Buyer` (`--state-success` check). * Bottom mini-link: **`Viewed: Crimson Dhakai Jamdani →`** (`12px`, `--brand-primary`) linking directly to that saree's PDP! --- ## 2. Floating WhatsApp / Messenger Assist Widget Many Bangladeshi saree shoppers like to ask a quick question (*"Can I see a natural light video of this saree?"* or *"Will it reach Sylhet before Friday?"*) before clicking `ORDER NOW`. ### A. Brand-Harmonized Visual Design Instead of a neon green circle that clashes with the **80-15-5 color system**, the floating button is styled in the brand's own variables: * **Floating Trigger Button:** * **Desktop:** Compact pill button (`height: 46px`, `padding: 0 18px`, rounded pill) displaying `[ 💬 Chat / Help ]`. * **Mobile:** Circular button (`48px × 48px`) displaying the chat/WhatsApp icon (`💬`). * **Default Colors:** Solid `--brand-primary` background, `--text-light` icon/text, and a `1.5px` `--brand-accent` border ring. * **Hover / Tap State:** Flips to `--brand-accent` background with `--text-primary` icon/text. ### B. Smart Popover Card (On Click / Tap) Tapping the floating button opens a compact popover card (`width: 300px`, `--bg-main` background, `1px` `--border-subtle` border) right above the button: * **Popover Header (`--brand-primary` background, `--text-light` text):** * Left: `"Need Help Choosing a Saree?"` (`--font-heading`, Semi-Bold `600`, `18px`). * Right: Close (`✕`) button. * **Popover Body (`16px` padding):** * Helper note: *"Chat with our Dhaka team for fabric details or phone ordering (10 AM – 10 PM)."* (`13px`, `--text-muted`). * **Option 1 — Primary Action (`CHAT ON WHATSAPP →`):** * Solid `--brand-accent` button with `--text-primary` bold text (`44px` height). * **Context-Aware Pre-Filled Message:** * *If clicked on a Product Details Page (PDP):* Automatically pre-fills WhatsApp with: `"Hello! I have a question about [Saree Title] (SKU: [SKU], Price: BDT [Price]) — [Page URL]"` * *If clicked on Homepage / Category Page:* Pre-fills: `"Hello! I would like some help browsing your saree collection."` * **Option 2 — Secondary Action (`MESSAGE ON FACEBOOK MESSENGER`):** * Outlined `1.5px` `--brand-primary` button (`44px` height) opening the brand's Facebook Page Messenger link. ### C. Strict Mobile Stacking & Auto-Hide Rules (Zero Overlap Guarantee) Follows Section 11 of `global_ui_components_and_content_standards.md`: 1. **Base Position:** Bottom-right corner (`bottom: 16px; right: 16px` on Mobile / `bottom: 24px; right: 24px` on Desktop). 2. **When PDP Mobile Sticky Bottom Order Bar (`64px` tall) Appears:** The floating chat button smoothly shifts upward to `bottom: 76px` so it **never** covers the `ORDER NOW` button. 3. **When Back-to-Top (`↑`) Button Appears on Category Pages:** The Back-to-Top button stacks `12px` directly **above** the floating chat button (`bottom: 76px` on Mobile). 4. **Hidden States:** Automatically hides whenever the **Quick View Modal**, **Cart Drawer**, **Mobile Menu Drawer**, **Filter Sheet**, or **Lightbox** is open, and stays hidden on the **`/checkout`** and **`/order-received`** pages so shoppers stay 100% focused on completing their order. --- ## 3. Facebook, Messenger & WhatsApp Share Previews (Open Graph & Share Bar) Over 80% of social traffic in Bangladesh comes from **Facebook, Messenger, and WhatsApp**. Every page and product must generate a rich visual preview card when a link is pasted into a chat or post. ### A. Automated Open Graph (`og:`) Meta Tags Per Page | Meta Tag | Homepage / Category Page | Product Details Page (PDP) | | :--- | :--- | :--- | | `og:site_name` | `storeConfig.brandName` | `storeConfig.brandName` | | `og:type` | `website` | `product` | | `og:title` | `"[Page Title] | [Brand Name]"` | `"[Saree Title] — BDT [4,500] | [Brand Name]"` | | `og:description` | *"Authentic handwoven Jamdani, Muslin, Katan & Cotton sarees in Bangladesh. Cash on Delivery nationwide."* | `"[Fabric] • [Length: 12 Haat] • [Blouse Piece Status] • Cash on Delivery across Bangladesh."` | | `og:image` | Brand Share Banner (`1200 × 630px`) | Saree Primary Image (`1200 × 630px` auto-framed on `--bg-surface` canvas or `1200 × 1600px` portrait) | | `product:price:amount` | — | `4500` | | `product:price:currency`| — | `BDT` | ### B. Compact "Share This Saree" Row on the PDP Positioned neatly at the bottom of the PDP Right Column (just below the Bangladesh Delivery & Trust Assurance Box): * **Label:** `Share this saree:` in `--font-body` (`13px`, `--text-muted`). * **3 Action Buttons (`36px × 36px` circular icon buttons in `--bg-surface` with `1px` `--border-subtle` border and `--text-primary` icon; flips to `--brand-primary` background with `--text-light` icon on hover/tap):** 1. **WhatsApp Share:** Shares the saree title, BDT price, and URL directly into a WhatsApp chat (`https://wa.me/?text=...`). 2. **Facebook / Messenger Share:** Opens the native share sheet on mobile (`navigator.share` API) or Facebook share dialog on desktop. 3. **Copy Link (`🔗`):** Copies the PDP URL to the clipboard and triggers the toast notification: **`"Product link copied ✓"`** (`3px` `--state-success` left border). --- ## 4. Visual Wireframe Blueprint (PDP Reviews + Floating Chat Stack) ```text ============================================================================================= [PDP CUSTOMER REVIEWS & PHOTOS SECTION (Below Accordions, Above Similar Sarees Slider)] ============================================================================================= +-------------------------------------------------------------------------------------------+ | Customer Reviews & Photos (H2 --brand-primary) | | | | 4.9 / 5.0 ★★★★★ (--brand-primary) Customer Photos: | | Based on 18 verified reviews [Photo1] [Photo2] [Photo3] [ WRITE A REVIEW ] | +-------------------------------------------------------------------------------------------+ | +-----------------------------------------+ +-----------------------------------------+ | | | ★★★★★ (--brand-primary) 12 Oct 2026 | | ★★★★★ (--brand-primary) 08 Oct 2026 | | | | Farhana Rahman — Dhaka ✓ Verified Buyer| | Sadia Islam — Sylhet ✓ Verified Buyer| | | | "The crimson Jamdani weave looks even | | "Very soft cotton and the unstitched | | | | more gorgeous in natural light!" [Img]| | blouse piece matched perfectly." | | | +-----------------------------------------+ +-----------------------------------------+ | | [ SHOW MORE REVIEWS ] | +-------------------------------------------------------------------------------------------+ [MOBILE BOTTOM-RIGHT STACKING WHEN PDP STICKY BAR IS VISIBLE] +--------+ | 💬 | <-- Floating Chat +--------+ (shifts up to +=======================================================================================+ bottom: 76px) | [Thumb] BDT 4,500 | [ ADD TO CART ] [ ORDER NOW ] | <-- Sticky Order Bar +=======================================================================================+ (height: 64px) ```