Mô-đun Widget

Mô tả

Nhúng widget để hiển thị dataset và phân tích sản phẩm trên website bên ngoài. Yêu cầu xác thực bằng API key và domain cho phép.

Sơ đồ hoạt động tổng quan

---
config:
  theme: base
  layout: dagre
  flowchart:
    curve: linear
    htmlLabels: true
  themeVariables:
    edgeLabelBackground: "transparent"
---
flowchart TB
    Site[Client Website]
    Gateway[API /api/v1/widget]
    Middleware{ValidateWidgetRequest}
    Embed(EmbedWidgetController)
    Analyzer(ProductAnalyzerController)
    Datasets[(Dataset Histories)]

    Site --- Step1[
      <div style='text-align: center'>
        <span style='display: inline-block; background-color: #6699cc !important; color:white; width: 28px; height: 28px; line-height: 28px; border-radius: 50%; font-weight: bold'>1</span>
        <p style='margin-top: 8px'>Request với API key</p>
      </div>
    ]
    Step1 --> Gateway

    Gateway --- Step2[
      <div style='text-align: center'>
        <span style='display: inline-block; background-color: #6699cc !important; color:white; width: 28px; height: 28px; line-height: 28px; border-radius: 50%; font-weight: bold'>2</span>
        <p style='margin-top: 8px'>Xác thực key & domain</p>
      </div>
    ]
    Step2 --> Middleware

    Middleware --> Embed
    Middleware --> Analyzer

    Embed --> Datasets
    Analyzer --> Datasets

    Datasets --> Embed
    Datasets --> Analyzer

    Embed --> Site
    Analyzer --> Site

    style Site fill:#e6f3ff,stroke:#0066cc,stroke-width:2px
    style Gateway fill:#e6f3ff,stroke:#0066cc,stroke-width:2px
    style Middleware fill:#f5f0ff,stroke:#9966cc,stroke-width:2px
    style Embed fill:#f0f8e6,stroke:#339933,stroke-width:2px
    style Analyzer fill:#f0f8e6,stroke:#339933,stroke-width:2px
    style Datasets fill:#ffe6cc,stroke:#ff9900,stroke-width:2px
    style Step1 fill:transparent,stroke:transparent,stroke-width:1px
    style Step2 fill:transparent,stroke:transparent,stroke-width:1px

Danh sách module