# Thiết kế popup

Để thiết kế popup bạn hãy làm theo các bước đơn giản sau đây:

{% tabs %}
{% tab title="Bước 1" %}

## <mark style="color:blue;">Vào màn hình quản lý Popup</mark>

Đầu tiên để thiết kế Popup bạn hãy vào màn hình quản lý Popup bằng cách chọn module "**Quản lý điểm chạm**" sau đó nhấn "**Popup**" như hình sau:

<figure><img src="/files/BlzuZn7BRES7c4KCDnSK" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Bước 2" %}

## <mark style="color:blue;">Tạo mới một popup</mark>

Sau khi vào được màn hình quản lý, bạn hãy tạo mới một popup bằng cách nhìn lên góc trên bên phải sau đó nhấn vào nút "**Tạo mới**" như hình bên dưới:

<figure><img src="/files/eVf3gBPOo1PdpiCPzoUl" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Bước 3" %}

## <mark style="color:blue;">Điền thông tin cơ bản</mark>

Tại màn hình quản lý Popup mới bạn hãy điền các thông tin cần thiết sau đây:

* Tên - Tên của Popup
* Trang web - Nhập trang web của bạn để hệ thống chụp ảnh màn hình và hiển thị một ví dụ
* Mô tả - Mô tả Popup
* Danh mục - Danh mục popup
* Xuất bản - Nhấn "**Có**" để xuất bản Popup
* Thời gian bắt đầu xuất bản (ngày/ giờ)
* Thời gian dừng xuất bản (ngày/ giờ)
* Google Analytics UTM tags - Giúp bạn theo dõi được một chiến dịch bất kì đã được chạy trên website.

<figure><img src="/files/l4kqJV8Rhph7raeb84MD" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Bước 4" %}

## <mark style="color:blue;">Mở màn hình thiết kế popup</mark>

Tại màn hình tạo mới popup, bạn hãy nhấn chọn nút  "**Builder**" ở góc phải màn hình.

<figure><img src="/files/jpZuh5yfpB0hGBxlsfse" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Bước 5" %}

## <mark style="color:blue;">Chọn loại popup</mark>

Sau khi vào màn hình xây dựng Popup bạn hãy chọn loại popup bằng các nhấn chuột vào mục "**Loại popup**". Hệ thống sẽ hiển thị 3 loại popup cho bạn lựa chọn tùy vào mục đích sử dụng popup của mình. Bao gồm:

* Thu thập dữ liệu
* Hiển thị thông báo
* Khởi tạo nút CTA

<figure><img src="/files/gJOETvMdQuCosbrpXRo4" alt=""><figcaption></figcaption></figure>

Sau đó, bạn cần điền các thông tin cần thiết sau:

&#x20;      \+ Hiệu ứng - Nhấn "**Có**" nếu bạn muốn có hiệu ứng

&#x20;      \+ Popup được hiển thị khi nào? - Cài đặt thời gian muốn popup hiển thị, ví dụ như khi cuộc chuột xuống giữa trang, hay ngay khi truy cập,...

&#x20;      \+ Thời gian chờ trước khi hiển thị - Nếu bạn muốn popup chờ 1 vài giây trước khi mà hiển thị trên website, vui lòng nhập số giây muốn chờ vfao trường này

&#x20;      \+ Tần suất hiển thị? - Tần suất mà bạn muốn popup hiển thị trên trang web, ví dụ một số loại mà hệ thống hỗ trợ:

&#x20;                \- Mỗi trang: popup sẽ hiển thị trên mỗi trang mà khách hàng truy cập trên website\
&#x20;                \- Mỗi phiên truy cập: popup sẽ hiển thị khi khách hàng bắt đầu 1 phiên truy cập mới\
&#x20;                \- Mỗi x phút/ngày một lần: popup sẽ hiển thị sau mỗi x phút/mỗi ngày 1 lần

&#x20;      \+ Ngừng hiển thị sau khi chuyển đổi? - Nhấn "**Có**" nếu bạn muốn ngừng hiển thị popup khi khách hàng đã thực hiện hành động chuyển đổi mà bạn muốn.

<figure><img src="/files/CddTmynxvWpC1xJxEJ36" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Bước 6" %}

## <mark style="color:blue;">Chọn loại hiển thị</mark>

Sau khi chọn loại popup bạn hãy tiến hành chọn loại hiển thị bằng cách nhấn vào ô "**Loại hiển thị**". Hệ thống cung cấp 4 loại hiển thị mà bạn có thể chọn, bao gồm:

* Thanh: popup hiển thị là thanh dài bên trên hoặc dưới màn hình
* Popup: popup hiển thị là hình chữ nhật chứa các nội dung truyền tải ở trên website
* Thông báo: popup hiển thị như các thẻ thông báo nhỏ ở các góc của màn hình
* Toàn trang: popup hiển thị với kích thước bằng kích thước màn hình máy bạn

<figure><img src="/files/BoQWgtVJI2HUcYlQHaqA" alt=""><figcaption></figcaption></figure>

Sau đó, bạn cần nhập các thông tin sau:

&#x20;    \+ Vị trí - Vị trí sẽ hiển thị của popup (theo từng loại)

{% hint style="info" %}
Lưu ý:&#x20;

* Với popup loại toàn trang, bạn sẽ không cần cấu hình gì thêm phần này
* Với popup loại thẻ, bạn có thể thêm thông số kích thuốc cho popup để cài đặt kích thước hiển thị của popup trên website
  {% endhint %}
  {% endtab %}

{% tab title="Bước 7" %}

## <mark style="color:blue;">Chọn màu sắc</mark>

Hệ thống đưa ra các màu mặc định, bạn có thể tùy chỉnh các màu này để phù hợp với style của website bạn cần thêm Popup.

Để chọn màu sắc cho popup bạn hãy chọn vào mục "**Màu sắc**" sau đó chọn màu sắc ở các phần sau:

* Màu chính: Màu nền của popup
* Màu văn bản: Màu của các text văn bản trong popup
* Màu nút: Nếu trong popup có nút, thì bạn có thể cài đặt màu cho nút ở mục này
* Màu chữ nút

<figure><img src="/files/zdraWqXtdVU1oEON0sU2" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Bước 8" %}

## <mark style="color:blue;">Xây dựng nội dung</mark>

Sau khi chọn màu cho Popup bạn hãy xây dựng nội dung cho Popup bằng cách nhấn vào mục "Nội dung" ở bên phải màn hình.

Có 3 cách để thêm nội dung vào Popup của bạn:

* Cơ bản - Đây là các đơn giản nhất để thêm nội dung, bạn chỉ cần điền các trường cơ bản như hình dưới, hệ thống sẽ tự động hiển thị theo nội dung bạn đã điền.

<figure><img src="/files/fntAodNPyZuqVgNa9QU6" alt=""><figcaption></figcaption></figure>

* Trình soạn thảo

<figure><img src="/files/qAJWLHVVFJ6N9rUhr1Qo" alt=""><figcaption></figcaption></figure>

* HTML: bạn có thể dán các đoạn mã code popup có sẵn vào đây, hệ thống sẽ tự động tải theo mã của bạn

<figure><img src="/files/oKdqRP14UOgJ2tnDWXkO" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Bước 9" %}

## <mark style="color:blue;">Hoàn tất thiết kế Popup</mark>

Để hoàn tất việc thiết kế Popup bạn hãy nhấn "**Đóng**" tại góc trên bên phải của màn hình thiết kế Popup.

<figure><img src="/files/BHSaS2hnpWwVnPljRFbW" alt=""><figcaption></figcaption></figure>

Sau khi đóng màn hình thiết kế Popup bạn hãy nhấn nút “**Lưu & Đón**g” để lưu lại các cài đặt của Popup.

<figure><img src="/files/GrXs4jK3rRf9Um1Mjf3O" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help-cdp.hub-js.com/touchpoint/popup/thiet-ke-popup.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.