Hướng dẫn sử dụng Widget – Message box

08/09/2025
195 lượt xem
5/5 - (1 đánh giá)
Chia sẻ qua

Chào anh/chị,

Bài hướng dẫn này sẽ chỉ cho anh/chị cách tự tay thêm một Hộp Tin Nhắn vào trang web của mình.

Hộp Tin Nhắn là gì?

Hãy tưởng tượng nó như một mẩu giấy ghi chú được dán lên trang web để thu hút sự chú ý của người xem. Anh/chị có thể dùng nó để:

  • Thông báo khuyến mãi: “MIỄN PHÍ VẬN CHUYỂN cho đơn hàng từ 500.000đ!”
  • Đưa ra lưu ý quan trọng: “Lưu ý: Cửa hàng sẽ nghỉ lễ từ ngày 30/4 đến hết 1/5.”
  • Cảnh báo: “Cẩn thận hàng giả! Chỉ mua sản phẩm chính hãng tại website của chúng tôi.”
  • Hướng dẫn: “Mẹo: Hãy thêm sản phẩm vào giỏ hàng để được hưởng ưu đãi!”

Việc này rất đơn giản, chỉ cần anh/chị làm theo từng bước dưới đây là được. Đừng lo lắng nhé!

Các Bước Thực Hiện

Chúng ta sẽ thực hiện qua 3 bước chính:

  1. Mở trình chỉnh sửa trang web (gọi là UX Builder).
  2. Thêm Hộp Tin Nhắn vào vị trí mong muốn.
  3. Chỉnh sửa nội dung và kiểu dáng cho Hộp Tin Nhắn.

Bước 1: Mở Trình Chỉnh Sửa Trang Web (UX Builder)

Đầu tiên, anh/chị cần vào trang mà mình muốn thêm Hộp Tin Nhắn.

  1. Từ trang quản trị website (trang có menu màu đen bên trái), anh/chị tìm đến mục Trang.
  2. Rê chuột vào mục Trang, một menu con sẽ hiện ra, anh/chị bấm vào Tất cả các trang.
  3. Một danh sách các trang web (như Trang chủ, Giới thiệu, Liên hệ…) sẽ hiện ra. Anh/chị hãy tìm đến trang mình muốn sửa, sau đó rê chuột vào tên trang đó.
  4. Các tùy chọn sẽ hiện ra bên dưới tên trang, anh/chị hãy bấm vào nút “Sửa với UX Builder”.

Image7

Sau khi bấm, màn hình sẽ chuyển sang giao diện chỉnh sửa. Bên trái là cột công cụ, bên phải là giao diện trang web của anh/chị.

Bước 2: Thêm Hộp Tin Nhắn (Message Box)

Bây giờ, chúng ta sẽ “bốc” Hộp Tin Nhắn và “đặt” nó vào trang web.

  1. khung bên phải (khung xem trước trang web), anh/chị hãy xác định vị trí mình muốn đặt Hộp Tin Nhắn. Hãy nhấp chuột vào khu vực đó.
  2. Sau đó, nhìn sang cột công cụ bên trái. Anh/chị sẽ thấy một nút dấu cộng (+) to màu xanh có chữ “Add Elements”. Hãy bấm vào đó.
  3. Một bảng lớn chứa rất nhiều khối chức năng sẽ hiện ra. Để tìm cho nhanh, anh/chị hãy gõ chữ “Message Box” vào ô tìm kiếm ở trên cùng.
  4. Ngay lập tức, khối Message Box sẽ hiện ra. Anh/chị chỉ cần bấm chuột vào nó.

Image1

Vậy là xong! Một Hộp Tin Nhắn mẫu sẽ được thêm ngay vào trang web. Bây giờ chúng ta sẽ qua bước thú vị nhất: làm đẹp và viết nội dung cho nó.

Bước 3: Chỉnh Sửa Nội Dung và Kiểu Dáng

Sau khi thêm Hộp Tin Nhắn, cột công cụ bên trái sẽ tự động chuyển sang phần cài đặt cho chính hộp đó. Anh/chị chỉ cần điền thông tin và lựa chọn theo ý mình.

  1. Chỉnh sửa Nội dung (Phần quan trọng nhất)
  • Message: Đây là nơi anh/chị gõ nội dung thông báo mình muốn hiển thị. Hãy xóa dòng chữ mẫu đi và gõ nội dung của mình vào.
    • Ví dụ: “Chào mừng quý khách! Cửa hàng đang có chương trình giảm giá 20% cho tất cả sản phẩm.”Image2
  • Icon: Anh/chị có muốn một biểu tượng nhỏ xinh đứng trước thông báo không? (Ví dụ: biểu tượng cái chuông, ngôi sao…).
    • Bấm vào nút “Select” bên cạnh chữ Icon.
    • Một bảng biểu tượng sẽ hiện ra, anh/chị có thể cuộn để chọn hoặc gõ tên tìm kiếm (bằng tiếng Anh, ví dụ: “star”, “gift”, “check”).
    • Bấm vào biểu tượng mình thích để chọn.Image3

2. Chỉnh sửa Kiểu dáng (Màu sắc)

  • Style (Kiểu): Đây là phần chọn màu sắc chủ đạo cho hộp thông báo. Có 4 lựa chọn với ý nghĩa khác nhau, anh/chị chỉ cần bấm vào để xem thử:
    • Success (Thành công): Màu xanh lá, dùng cho tin tốt, thông báo tích cực.
    • Warning (Cảnh báo): Màu vàng, dùng cho các lưu ý, cảnh báo nhẹ.
    • Alert (Báo động): Màu đỏ, dùng cho các thông báo khẩn cấp, rất quan trọng.
    • Info (Thông tin): Màu xanh dương, dùng cho các thông tin chung, hướng dẫn.
  • BG Color (Màu nền): Nếu không thích các màu có sẵn, anh/chị có thể tự chọn màu nền cho hộp tại đây.
  • Text Color (Màu chữ): Tương tự, anh/chị có thể đổi màu chữ tại đây.

Image6

3. Thêm Nút Tắt (Close Button)

  • Anh/chị có muốn người xem có thể tắt thông báo này đi không? Nếu có, hãy tích vào ô vuông bên cạnh chữ Close Button. Một dấu “x” nhỏ sẽ xuất hiện ở góc hộp tin nhắn.

4. Lưu lại thay đổi

Đây là bước cuối cùng và quan trọng nhất để mọi công sức của anh/chị được ghi nhận!

  1. Sau khi đã chỉnh sửa ưng ý ở cột bên trái, hãy bấm vào nút “Apply” ở dưới cùng của cột.
  2. Tiếp theo, nhìn lên góc trên bên phải màn hình, anh/chị sẽ thấy một nút “Update” màu xanh. Hãy bấm vào đó.

Image5

Chờ một vài giây cho hệ thống lưu lại. Vậy là xong! Anh/chị đã thêm và chỉnh sửa thành công một Hộp Tin Nhắn chuyên nghiệp trên trang web của mình.

Mẹo Thêm

  • Muốn di chuyển Hộp Tin Nhắn? Rất đơn giản! Ở khung xem trước bên phải, anh/chị chỉ cần nhấn giữ chuột vào Hộp Tin Nhắn và kéo nó đến vị trí mới rồi thả ra.
  • Muốn sửa lại Hộp Tin Nhắn đã tạo? Chỉ cần vào lại “Sửa với UX Builder”, sau đó bấm chuột trực tiếp vào Hộp Tin Nhắn đó trên trang web. Cột công cụ bên trái sẽ hiện ra các cài đặt để anh/chị chỉnh sửa.  
5/5 - (1 đánh giá)
Bài viết liên quan

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Đang tải...