---
sourceType: official-guide
sourceTypeMatchedRule: fallback
slug: OA/extension/bat-dau/extension-zone/user-profile-config-block
title: user-profile-config-block
---
# user-profile-config-block


## Tổng quan

Zone `user-profile-config-block` cho phép các tiện ích tùy biến hiển thị trên trang hồ sơ OA. Thích hợp cho việc hiển thị các thông tin như:

- Banner chương trình khuyến mãi (tĩnh/động).
- Thực hiện các tác vụ đơn giản như nhận voucher.
- Tạo các mini-game hoặc thử thách để thu hút người dùng.


:::info Thông tin:
- Zone chỉ hiển thị khi OA chọn và thiết lập sử dụng tiện ích tại zone `admin-profile-config-action`.
- Khi người dùng tương tác với zone, tiện ích có thể điều hướng người dùng đến các tài nguyên sẵn có để thực hiện các tác vụ chuyên sâu như Trang cửa sổ Chat, MiniApp, Chatbot, v.v.
:::

## Cấu hình

### app-config.json

```json
{
  "zones": {
    "user-profile-config-block": {
      "enable": true,
      "hideTitle": true,
      "height": 800
    }
  }
}
```

### zoaSDK.getSessionInfo(data)

Các thông tin được cung cấp:

- `oa_id`: ID của Official Account.
- `user_id`: ID của người dùng theo từng OA.
- `user_is_follower`: Trạng thái quan tâm OA của người dùng.
- `user_last_interaction_timestamp`: Thời gian tương tác gần nhất (millisecond). Giá trị 0 là chưa tương tác.

## Chi tiết hiển thị

- **Vị trí:** Trang thông tin OA ([zalo.me/oa_id](http://oa.zalo.me/officialaccount))
- **Kích thước:**
  - **Chiều cao tối đa:** 800px
  - **Chiều rộng:** Tự động điều chỉnh theo màn hình điện thoại

## Hình ảnh minh họa

{/* ![User Profile Config Block](/assets/images/user-profile-config-block-e5faa9e21afe6f7f43b7e50c7f36aac4.png)

![User Profile Config Block HideTitle](/assets/images/user-profile-config-block-hideTitle-4ef7202e388b034fcc8212c596adde45.png) */}

### Hình ảnh minh họa — default

![](/assets/OA/img/extension/user-profile-config-block.png)

### Hình ảnh minh họa — hideTitle

![](/assets/OA/img/extension/user-profile-config-block-hideTitle.png)


## Hướng dẫn sử dụng

1. Thiết kế nội dung hiển thị phù hợp với chiều cao tối đa 800px và chiều rộng linh hoạt.
2. Sử dụng thông tin từ `zoaSDK.getSessionInfo(data)` để cá nhân hóa nội dung cho từng người dùng.
3. Tạo các tương tác đơn giản và hấp dẫn để thu hút người dùng.
4. Tận dụng liên kết đến các tính năng khác của Zalo OA để tăng tương tác.

## Ứng dụng

1. **Hiển thị banner khuyến mãi động:**
   - Tạo banner thay đổi theo thời gian thực, hiển thị các ưu đãi mới nhất.
   - Cá nhân hóa banner dựa trên lịch sử tương tác của người dùng (ví dụ: hiển thị ưu đãi cho sản phẩm mà người dùng đã xem gần đây).

2. **Tạo nút "Nhận voucher" với hiệu ứng hấp dẫn:**
   - Thiết kế nút với animation bắt mắt để thu hút sự chú ý.
   - Khi người dùng nhấn nút, hiển thị hiệu ứng "lật thẻ" để tiết lộ voucher, tạo trải nghiệm thú vị.

3. **Mini-game tương tác:**
   - Tạo trò chơi đơn giản như "Quay số may mắn" hoặc "Ghép hình" để tăng tương tác.
   - Người dùng có thể nhận phần thưởng sau khi hoàn thành trò chơi.

4. **Tích hợp social proof:**
   - Hiển thị đánh giá và nhận xét mới nhất từ khách hàng.
   - Tạo một section "Trending" hiển thị các sản phẩm hoặc bài viết đang được quan tâm nhiều nhất.

Những ứng dụng này không chỉ làm cho trang hồ sơ OA trở nên sinh động và hấp dẫn hơn, mà còn tăng cường tương tác của người dùng, từ đó nâng cao hiệu quả marketing và bán hàng cho doanh nghiệp.

## Lưu ý

- Đảm bảo nội dung hiển thị nhanh và mượt mà để tối ưu trải nghiệm người dùng.
- Thường xuyên cập nhật và làm mới nội dung để giữ cho zone luôn hấp dẫn.

---

Cập nhật lần cuối: 2024-10-12