5. Website Integration — How MangaAssist Lives on Amazon.com

Placement & UI

graph TD
    subgraph "Amazon.com JP Manga Store Page"
        A[Header / Nav Bar]
        B[Hero Banner - Featured Manga]
        C[Category Browsing Grid]
        D[Product Cards / Carousels]
        E[Footer]
        F[🟠 Chat Widget FAB<br>Bottom-right corner]
    end

    F -->|Click| G[Chat Panel<br>Slides up / overlays]
    G --> H[Welcome Message<br>+ Quick Action Chips]

Where It Appears

Page	Chatbot Behavior
JP Manga Store Home	Widget visible as floating action button (FAB). Welcome message: "Looking for your next manga? I can help!"
Category Pages (Shōnen, Seinen, etc.)	Contextually aware: "Browsing shōnen manga? Want recommendations?"
Product Detail Page	Pre-loaded with current ASIN context. Quick chips: "Is this in English?", "When will it arrive?", "Similar titles"
Search Results	Available but less prominent. Activates if user seems stuck (no clicks after 30 seconds).
Cart Page	Proactive: "You have Demon Slayer Vol 3 — Vol 4 is on sale. Add it?"
Order History	Deep-linked for order questions. Quick chips: "Track this order", "Return this item"

Trigger Mechanisms

User-initiated: Click the chat FAB button.
Proactive (opt-in): After 30 seconds of inactivity on a product page, show a subtle tooltip: "Need help choosing? Ask me!" (only shown once per session, dismissible).
Deep-link triggered: URLs like amazon.com/manga?chat=track-order open the chatbot pre-filled with an intent.
Error recovery: If search returns zero results, show: "Can't find what you're looking for? I might be able to help."

Context Injection

When the chatbot opens, the frontend sends a PageContext object with every message:

{
  "page_context": {
    "current_url": "/dp/B09XYZ123",
    "current_asin": "B09XYZ123",
    "store_section": "manga-seinen",
    "cart_asins": ["B08ABC", "B07DEF"],
    "recent_browsing": ["B01GHI", "B02JKL", "B03MNO"],
    "search_query": "dark fantasy manga",
    "user_locale": "en-US",
    "is_prime": true
  }
}

This context allows the chatbot to answer questions like "Is this available for Prime delivery?" without the user specifying which product.

Account & Data Access

graph LR
    subgraph "What Chatbot Can Access"
        A[Browsing History<br>Current session only]
        B[Cart Contents<br>Read-only]
        C[Order History<br>Authenticated only]
        D[Wishlist<br>Authenticated only]
        E[Prime Status<br>Authenticated only]
        F[Delivery Address<br>Default only, masked]
    end

    subgraph "What Chatbot Cannot Access"
        G[Payment Methods]
        H[Full Address Details]
        I[Other Amazon Purchases<br>Non-manga]
        J[Account Settings]
    end

Privacy principle: The chatbot has the minimum data needed to answer the question. It never displays full addresses or payment info. It accesses order history only when the user asks about orders.

UI/UX Design

Chat Panel Layout

┌─────────────────────────────────┐
│ 🟠 MangaAssist          ✕  ─  │  ← Header (minimize, close)
├─────────────────────────────────┤
│                                 │
│  👋 Welcome to the JP Manga    │  ← Bot message
│  store! I can help you find     │
│  manga, track orders, or        │
│  answer questions.              │
│                                 │
│  ┌──────────┐ ┌──────────┐     │  ← Quick action chips
│  │ Find Me  │ │ Track My │     │
│  │ Manga    │ │ Order    │     │
│  └──────────┘ └──────────┘     │
│  ┌──────────┐ ┌──────────┐     │
│  │ Today's  │ │ Help &   │     │
│  │ Deals    │ │ Support  │     │
│  └──────────┘ └──────────┘     │
│                                 │
│  You: Recommend dark fantasy    │  ← User message
│                                 │
│  🟠 Here are some great picks: │  ← Bot response with cards
│  ┌─────┬───────────────────┐   │
│  │ 📖  │ Berserk Deluxe    │   │  ← Product card
│  │     │ ★★★★★ · $39.99   │   │
│  │     │ [Add to Cart]     │   │
│  └─────┴───────────────────┘   │
│  ┌─────┬───────────────────┐   │
│  │ 📖  │ Vinland Saga      │   │
│  │     │ ★★★★½ · $12.99   │   │
│  │     │ [Add to Cart]     │   │
│  └─────┴───────────────────┘   │
│                                 │
│  ┌──────────┐ ┌──────────┐     │  ← Follow-up chips
│  │ More     │ │ Show me  │     │
│  │ like     │ │ horror   │     │
│  │ these    │ │ instead  │     │
│  └──────────┘ └──────────┘     │
│                                 │
├─────────────────────────────────┤
│ Type your message...     [Send] │  ← Input field
├─────────────────────────────────┤
│ 👍 👎  Was this helpful?       │  ← Feedback bar
└─────────────────────────────────┘

UX Principles

Non-intrusive: The chat widget doesn't block content. It's a FAB in the bottom-right, expanding to a panel that overlays (not pushes) the page.
Context-aware greetings: The welcome message changes based on the page (store home vs. product page vs. cart).
Rich responses: Product recommendations include cover images, ratings, prices, and "Add to Cart" buttons.
Quick chips: Pre-built action buttons reduce typing friction.
Streaming responses: Text appears token-by-token for perceived speed.
Mobile-first: On mobile, the chat panel is full-screen when active. Dismissible with swipe-down.
Accessibility: Full keyboard navigation, screen reader labels, high contrast mode.