1. Phạm vi

Tài liệu mô tả phần Widget cho OA chat.

2. Giới thiệu

2.1. Official Account

Official Account (OA) là nền tảng giao tiếp kết nối thông minh nhất giữa doanh nghiệp và khách hàng trong hệ sinh thái Vingroup, nơi mọi cuộc hội thoại đều tạo ra giá trị - cho khách hàng, cho doanh nghiệp.

Push Notification Scheme: Doanh nghiệp có thể thông qua OA để gửi các thông tin khuyến mãi, giới thiệu sản phẩm/dịch vụ tới người dùng mục tiêu. Phục vụ cho nhu cầu, chiến dịch kinh doanh của các đơn vị. V-App hỗ trợ hiện thị theo bộ widget -mẫu giao diện tương tác, nhằm người dùng dễ nhận diện và trực quan.
Trợ lý khách hàng (AI Agent + Chăm sóc khách hàng): Trợ lý thông minh khám phá nhu cầu khách hàng và chăm sóc khách hàng. Trong trường hợp, khách hàng muốn kết nối hỏi đáp với bộ phận chăm sóc, OA sẽ điều hướng qua đơn vị chăm sóc (Hiện tại sẽ kết nối tới CSKH của kinh doanh số VSF)
Commerce & Transactions: Trợ lý thông minh dựa trên mong muốn của khách hàng, điều hướng người dùng tới hành động (action) đăng ký/đặt hàng dịch vụ/sản phẩm.

Widget là các mẫu giao diện tương tác nhỏ, được nhúng trực tiếp vào cửa sổ chat Official, hỗ trợ việc tư vấn, marketing, thông báo từ doanh nghiệp dễ dàng và trực quan.

Chức năng

Hiển thị thông tin động (trạng thái đơn hàng, thông tin sản phẩm, chương trình khuyến mãi...)
Cung cấp các nút bấm/action nhanh: Giới hạn action (không ra bên ngoài ứng dụng)
Deeplink vào màn hình miniapp hoặc v-app (theo chuẩn deeplink V-App)
Call: hotline (CSKH)
Link ra landingpage, website (cần có utm, và tracking)

V-App cung cấp các widget hiển thị, các doanh nghiệp lựa chọn theo mục đích sử dụng của mình.

2.2. Các loại thông báo

Phân loại thông báo. Doanh nghiệp cần điền thông báo thuộc loại nào trong widget json trường:

 "noti_tag" : int // id loại thông báo

ID của các loại thông báo hỗ trợ :

Noti ID	Hiển thị	Mô tả	Giới hạn
1	Giao dịch	Thông tin giao dịch, hoá đơn, báo phí	không giới hạn
2	Dịch vụ	Xử lý vận hành dịch vụ	không giới hạn
3	Vi phạm	Cảnh báo, thông báo vi phạm	không giới hạn
4	Khuyến mãi	Các chương trình khuyến mãi	5 tin nhắn/người dùng /ngày cho các tin nhắn tin tức/khuyến mãi
5	Tin tức	Tin tức	5 tin nhắn/người dùng /ngày cho các tin nhắn tin tức/khuyến mãi
6	Thông tin chung	Các thông tin chung	5 tin nhắn/người dùng /ngày cho các tin nhắn tin tức/khuyến mãi

3. Các loại widget

Trực quan và lấy Json có thể, tham khảo tại đây: https://chat.dev.vsf.services/widget/widget_viewer_final.html (lưu ý, tool trực quan nhằm giúp doanh nghiệp xem layout, đối với UI vui lòng trong từng widget tài liệu này)

3.1.1. Markdown text

widget_id: widget_markdown
Name: text
Tag : Phân loại nhóm. Mỗi tin tin nhắn chỉ 1 tag
Mô tả: Hiển thị theo nội dung markdown text
Wireframe:

Tech:

{
  "id": "widget_markdown",
  "noti_title": "Title",  // Thông tin dùng để hiển thị trên thông báo in-app
  "noti_desc": "mô tả", // Thông tin dùng để hiển thị thông báo in-app
  "noti_tag" : 1, // tham khảo ID tại mục các loại thông báo

  "content": {
    "text": "<<markdown text>>"
  }
}

3.1.2. Nội dung + Image + Button

widget_id: widget_media_action
Name: Nội dung + Image + Button
Tag: Phân loại nhóm. Mỗi tin tin nhắn chỉ 1 tag

-** Mô tả**:

Image banner:

- Tỉ lệ là 16:9

- Kích thước là 1024x576 px

- Text

Button action:

- Deeplink to miniapp

- Call

Wireframe:

Tech:

{
  "id": "widget_media_action",
  "noti_title": "Title",  // Thông tin này dùng để hiển thị trên thông báo in-app
  "noti_desc": "mô tả", // Thông tin này dùng để hiển thị thông báo in-app
  "noti_tag" : 1, // tham khảo ID tại các loại thông báo

  "content": {
    "image": "<<url_img>>",
    "title": "<<title>>",
    "description": "<<desc>>",
    "buttons": [
      {
        "text": "<<text>>",
        "deeplink": "<<vapp://…>>"
      },
      {
        "text": "<<text>>",
        "deeplink": "<<vapp://…>>"
      }
    ]
  }
}

widget_id: widget_campaign_action
Name: Campaign Widget
Tag: Phân loại nhóm. Mỗi tin tin nhắn chỉ 1 tag
Mô tả:

Image banner:

- Tỉ lệ là 16:9

- Kích thước là 1024x576px

Text (hỗ trợ markdown hiển thị)

List action :

item:

    + image: Tỉ lệ là 1:1, Kích thước là 250x250px

    + text

    + Action: Deeplink to miniapp hoặch call action

Wireframe:

Tech:

{
  "id": "widget_campaign_action",
  "noti_title": "Title",  // Thông tin này dùng để hiển thị trên thông báo in-app
  "noti_desc": "mô tả", // Thông tin này dùng để hiển thị thông báo in-app
  "noti_tag" : 2, // tham khảo ID tại các loại thông báo

  "content": {
    "image": "<<image_url>>",
    "title": "<<title>>",
    "description": "<<desc>>",
    "info_title": "info_title",
    "info": [
      {
        "label": "<<label>>",
        "value": "<<value>>"
      },
      {
        "label": "<<label>>",
        "value": "<<value>>"
      }
    ],
    "buttons": [
      {

        "icon": “url_icon",
        "text": "<<text>>",
        "deeplink": "<<vapp://…>>"
      },
      {
        "icon": “url_icon",
        "text": "<<text>>",
        "deeplink": "<<vapp://…>>"
      }
    ]
  }
}

widget_id: widget_list
Name: Widget List
Tag: Phân loại nhóm. Mỗi tin tin nhắn chỉ 1 tag
Mô tả: Mẫu hiện thị dưới dạng danh sách
Wireframe:

Tech:

 {
  "id": "widget_list",
  "noti_title": "Title",  // Thông tin này dùng để hiển thị trên thông báo in-app
  "noti_desc": "mô tả", // Thông tin này dùng để hiển thị thông báo in-app
  "noti_tag" : 2, // tham khảo ID tại các loại thông báo

  "content": {
    "title": "<<title>>",
    "subtitle": "<<sub_text>>",
    "items": [
      {
        "image": "url_image",
        "title": "title",
        "description": "Des",
        "icon": "https://cdn-icons-png.flaticon.com/512/545/545682.png",
        "action_type": "deeplink",
        "action_value": "vapp://…"
      },
      {
        "image": "url_image",
        "title": "title",
        "description": "Des",
        "icon": "https://cdn-icons-png.flaticon.com/512/545/545682.png",
        "action_type": "deeplink",
        "action_value": "vapp://…"
      },
      {
       {
        "image": "url_image",
        "title": "title",
        "description": "Des",
        "icon": "https://cdn-icons-png.flaticon.com/512/545/545682.png",
        "action_type": "deeplink",
        "action_value": "vapp://…"
      }
      }
    ]
  }
}

widget_id: widget_transaction
Name: Giao dịch
Mô tả: Mẫu hiển thị cho thông báo cước hoặc thông báo thanh toán thành công

Thông báo hoá đơn  tới khách hàng
- Logo doanh nghiệp 
- Text
- Khung thông tin các trường giao dịch (số lượng thông tin có thể tăng thêm
- Text
- Action: Button action

Wireframe:

Tech:

 {
  "id": "widget_transaction",
  "noti_title": "Title",  // Thông tin này dùng để hiển thị trên thông báo in-app
  "noti_desc": "mô tả", // Thông tin này dùng để hiển thị thông báo in-app
  "noti_tag" : 2, // tham khảo ID tại các loại thông báo

  "content": {
    "logo": "url_image",
    "title": "title",
    "subtitle": "sub_text",
    "description": “text",
    "info": [
      {
        "label": "label",
        "value": "value"
      },
       {
        "label": "label",
        "value": "value"
      }
    ],
    "note": "text",
    "buttons": [
      {
        "text": "text",
        "icon": "url_image",
        "type": "deeplink",
        "value": "vapp://"
      },
      {
        "text": "text",
        "icon": "url_image",
        "type": "phone",
        "value": "1900323323"
      }
    ]
  }
}

1. Phạm vi

2. Giới thiệu

2.1. Official Account

2.2. Widget

Chức năng

2.2. Các loại thông báo

3. Các loại widget

3.1. Widget - Thông báo và Marketing

3.1.1. Markdown text

3.1.2. Nội dung + Image + Button

3.1.3. Campaign Widget

3.1.4. Widget List

3.2. Widget - Transaction

2. Giới thiệu

2.1. Official Account​

2.2. Widget​

Chức năng​

2.2. Các loại thông báo​

3. Các loại widget

3.1. Widget - Thông báo và Marketing​

3.1.1. Markdown text​

3.1.2. Nội dung + Image + Button​

3.1.3. Campaign Widget​

3.1.4. Widget List​

3.2. Widget - Transaction​

2.1. Official Account

2.2. Widget

Chức năng

2.2. Các loại thông báo

3.1. Widget - Thông báo và Marketing

3.1.1. Markdown text

3.1.2. Nội dung + Image + Button

3.1.3. Campaign Widget

3.1.4. Widget List

3.2. Widget - Transaction