Hướng dẫn thiết lập hiển thị form pop-up khi click vào nút CTA trên trang

Nội dung

1. Mục đích

Giúp người dùng hiểu rõ và nắm bắt cách thiết lập form pop-up trên aiMarketing để form chỉ hiển thị khi người dùng click vào nút CTA trên trang.

2.1.1 Mở công cụ dành cho nhà phát triển (Developer Tools)

Trên Windows/Linux:
- Nhấn phím F12 hoặc
- Nhấn tổ hợp phím Ctrl + Shift + I
Trên macOS:
- Nhấn tổ hợp Cmd + Option + I

Cửa sổ Developer Tools sẽ hiện ra, thường nằm bên phải hoặc dưới cùng của trình duyệt.

2.2.2. Chọn công cụ chọn phần tử (Inspect Element)

Ở góc trên bên trái cửa sổ Developer Tools, nhấn vào biểu tượng mũi tên trong ô vuông hoặc biểu tượng Select Element (Inspect).
Sau đó di chuột ra trang web, con trỏ chuột sẽ đổi sang mũi tên.

2.2.3. Xác định nút (Button) cần lấy ID hoặc Class

Di chuột đến nút mà bạn muốn lấy ID hoặc Class, nhấn click vào nút đó.
Trong Developer Tools, phần HTML của nút đó sẽ được tô sáng trong phần Elements (Phần tử).

2.2.4. Tìm kiếm thông tin ID hoặc Class

Trong đoạn mã HTML được tô sáng, tìm thuộc tính:
- id=”giá_trị_id” — đây là giá trị ID của nút.
- class=”giá_trị_class” — đây là giá trị Class (có thể có nhiều class cách nhau bằng dấu cách).

Ví dụ: Trong ảnh trên, ID của button “VIEW MENU” = it35a

Bước 1: Sao chép URL trang web để thiết lập điều kiện hiển thị

Truy cập trang web bạn muốn gắn form pop-up.
Sao chép đường dẫn (URL) chính xác của trang.
Trong phần Thiết lập hiển thị trên aiMarketing, tại mục Website URL, Dán URL trang web bạn đã sao chép vào.
Bạn có thể thêm điều kiện (nếu cần) để giới hạn trang cụ thể cho form pop-up.

Bước 2: Thiết lập thời điểm hiển thị form pop-up

Trong mục Thời điểm form pop-up xuất hiện trên trang, tích chọn mục Click vào nút CTA trên trang.
Đây sẽ là điều kiện để form pop-up chỉ hiển thị khi người dùng bấm vào nút CTA mà bạn sẽ xác định.

Bước 3: Gắn mã ID hoặc Class của nút CTA

Tại phần ID hoặc Class của CTA/Button, chọn kiểu định danh tùy theo nút trên trang:
- Chọn ID nếu bạn lấy mã định danh dạng ID.
- Chọn Class nếu bạn lấy định danh dạng lớp (class).
Nhập chính xác mã ID hoặc Class bạn đã lấy được theo hướng dẫn lấy ID/Class ở trên.
Nếu muốn gắn nhiều nút CTA khác nhau cho cùng một pop-up, nhấn nút + Thêm CTA/Button để nhập thêm mã ID/Class các nút khác.

Bước 4: Lưu và kiểm tra

Sau khi hoàn tất các thiết lập, lưu và xuất bản form pop-up.
Truy cập trang web và thực hiện click vào nút CTA đã cấu hình để kiểm tra form pop-up hiển thị đúng như mong muốn.