# 4.5. Thông báo

**Thông báo** là một tiện ích độc đáo giúp hiển thị các thông báo ngắn, cung cấp thông tin nhanh chóng và dễ hiểu cho người dùng trên Landing Page. Tính năng này giúp tăng sự tương tác và xây dựng niềm tin của khách hàng thông qua các thông tin như: "Đã có người mua hàng", "Ai đó vừa đăng ký", hoặc "Khuyến mãi chỉ còn lại vài giờ"...

## 1. Thêm **Thông báo** vào trang langding page:

* Nhấn vào **Tiện ích** ở thanh sidebar của trình chỉnh sửa.
* Chọn **Thông báo** trong mục **Nâng cao.**
* Chọn phần tử **Thông báo** và kéo vào trang landing page.

<figure><img src="https://2305753878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuirRnKaniWtkmyJdKYX4%2Fuploads%2F7dRtt6SziiczFOyLjE0D%2Fimage.png?alt=media&#x26;token=200836e0-b23d-4245-942e-e876e4a1e900" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Nguyên lý của tính năng **Thông báo**: hiển thị những nội dung được chuẩn bị sẵn trong nguồn dữ liệu mặc định hoặc Google Sheet.
{% endhint %}

## 2. Trình chỉnh sửa Thông báo

### 2.1. Trình chỉnh sửa Nội dung

Để mở trình chỉnh sửa **Nội dung,** bạn click vào tiện ích **Thông báo** muốn chỉnh sửa trên màn hình ⇒ Chọn **Nội dung** trên thanh thiết lập nhanh.

<figure><img src="https://2305753878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuirRnKaniWtkmyJdKYX4%2Fuploads%2FeQFpF5aiNKzlcYv8jmBv%2Fimage.png?alt=media&#x26;token=53c25c22-b331-4e5b-b6da-878d22761215" alt=""><figcaption></figcaption></figure>

* **Kiểu dữ liệu:** Là nguồn dữ liệu đầu vào chứa danh sách nội dung hiển thị trên Thông báo.
  * **Mặc định:** Cho phép bạn tạo, thêm mới và chỉnh sửa nội dung một cách thủ công.<br>

    <figure><img src="https://2305753878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuirRnKaniWtkmyJdKYX4%2Fuploads%2F6B84q2eyUDqbBTdeYOFx%2FScreenshot_29.png?alt=media&#x26;token=70e7a8c2-143f-4933-91ea-134d327e2b29" alt=""><figcaption></figcaption></figure>
  * **Google sheet:** Cho phép bạn nhập nhiều nội dung cùng lúc bằng file Google sheet khi bạn nhập đúng thông tin **Google Sheet ID** và **Sheet Name.** <br>

    <figure><img src="https://2305753878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuirRnKaniWtkmyJdKYX4%2Fuploads%2FEd8zvLiGNeh4cFvX4fM2%2Fimage.png?alt=media&#x26;token=a4b47218-b127-42fa-a28e-b107e5135b85" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Xem hướng dẫn chi tiết cách tạo nội dung bằng Google Sheet [tại đây](https://docs.shopone.io/cac-phan-tu-co-ban/tien-ich-nang-cao/thong-bao#cach-tao-noi-dung-tu-google-sheet).
{% endhint %}

* **Thời gian chạy:** Là khoảng thời gian Thông báo hiển thị trên màn hình.
* **Thời gian chờ:** Là khoảng thời gian chờ để hiển thị thông báo tiếp theo.

### 2.2. Trình chỉnh sửa Thiết kế

Để mở trình chỉnh sửa **Thiết kế,** bạn click vào tiện ích **Thông báo** muốn chỉnh sửa trên màn hình ⇒ Chọn **Thiết kế** trên thanh thiết lập nhanh.

<figure><img src="https://2305753878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuirRnKaniWtkmyJdKYX4%2Fuploads%2FGS5N5yrch3baBrpwAxTm%2Fimage.png?alt=media&#x26;token=9bf6a581-474f-46c1-a953-1a79fa54ffde" alt=""><figcaption></figcaption></figure>

* **Căn chỉnh:** Cho phép bạn căn chỉnh tiện ích theo khung chứa, chi tiết [**tại đây**](https://docs.shopone.io/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-thiet-ke/can-chinh).
* **Kích thước:** Điều chỉnh kích thước của tiện ích, bao gồm chiều rộng, chiều cao và khoảng cách từ tiện ích đến lề của section, chi tiết [**tại đây**](https://docs.shopone.io/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-thiet-ke/kich-thuoc).
* **Hiển thị:** Chọn các thiết bị mà tiện ích sẽ được hiển thị (Máy tính, Điện thoại).
* **Thiết kế:** Cho phép bạn thêm nền và đổ bóng cho tiện ích, chi tiết [**tại đây**](https://docs.shopone.io/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-thiet-ke/thiet-ke).
* **Kiểu chữ:** Cho phép bạn tùy chỉnh các thuộc tính của nội dung trong tiện ích (bao gồm: tiêu đề, nội dung và thời gian), chi tiết [**tại đây**](https://docs.shopone.io/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-thiet-ke/kieu-chu).
* **Đường viền:** Cho phép bạn thêm và tùy chỉnh viền xung quanh của tiện ích, bạn cũng có thể điều chỉnh độ bo tròn của đường viền, chi tiết [**tại đây**](https://docs.shopone.io/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-thiet-ke/duong-vien).
* **Thiết kế ảnh:** Cho phép bạn điều chỉnh độ bo tròn của hình ảnh hiển thị trên tiện ích.

### 2.3. Trình chỉnh sửa Nâng cao

Để mở trình chỉnh sửa **Nâng cao,** bạn click vào tiện ích **Notify** muốn chỉnh sửa trên màn hình ⇒ Chọn **Nâng cao** trên thanh thiết lập nhanh.

<figure><img src="https://2305753878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuirRnKaniWtkmyJdKYX4%2Fuploads%2Fa1viOa5eCDXjC9ZhUEee%2Fimage.png?alt=media&#x26;token=e9753281-3198-4dbd-8598-63aadcdde9d7" alt=""><figcaption></figcaption></figure>

* **Sự kiện:** Cho phép bạn thiết lập sự kiện cho hành động khi nhấp chuột hoặc hover vào tiện ích, chi tiết [tại đây](https://docs.shopone.io/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-nang-cao/su-kien).
* **Hiệu ứng:** Cho phép bạn thêm các hiệu ứng động cho tiện ích trên landing page để tạo sự thu hút và sinh động hơn, chi tiết [tại đây](https://docs.shopone.io/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-nang-cao/hieu-ung).
* **Đồng bộ thiết kế Máy tính/ Điện thoại:** Cho phép bạn cài đặt tùy chọn đồng bộ thiết kế giữa máy tính và điện thoại, chi tiết [tại đây](https://docs.shopone.io/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-nang-cao/dong-bo-thiet-ke-may-tinh-dien-thoai).
* **Kiểu định vị:** Cho phép bạn lựa chọn kiểu định vị phù hợp để tối ưu hóa trang web và mang lại trải nghiệm tốt nhất cho khách hàng, chi tiết [tại đây](https://docs.shopone.io/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-nang-cao/kieu-dinh-vi).
* **Tùy chỉnh nâng cao:** Cho phép bạn tùy biến giao diện và hành vi của thành phần thông qua các lớp CSS và mã CSS tùy chỉnh, chi tiết [tại đây](https://docs.shopone.io/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-nang-cao/tuy-chinh-nang-cao).

## 3. Cách tạo nội dung từ Google Sheet

**- Bước 1:** Tạo một Google Sheet với 4 cột nội dung chính với các tiêu đề : **Title, Content, Time, Image** và bạn điền tạo nội dung các cột. **Trang tính tạo nội dung, phải là nằm ở vị trí đầu tiên trên Bảng tính của bạn:**

<figure><img src="https://2305753878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuirRnKaniWtkmyJdKYX4%2Fuploads%2F0WGv6OrkKOu9BovvzRdS%2Fimage.png?alt=media&#x26;token=43ec5355-15a4-4d4d-9cd1-8cedb4c6258b" alt=""><figcaption></figcaption></figure>

**- Bước 2:** Xuất bản Google Sheet lên web.

<figure><img src="https://2305753878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuirRnKaniWtkmyJdKYX4%2Fuploads%2F6Gv4uIXEnODjNm3wihBo%2Fimage.png?alt=media&#x26;token=ae122586-c7d0-4d0d-a8ef-b1659c511282" alt=""><figcaption></figcaption></figure>

Bạn có thể lựa chọn xuất bản với toàn bộ tài liệu hoặc sheet chứa nội dung:

<figure><img src="https://2305753878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuirRnKaniWtkmyJdKYX4%2Fuploads%2FkIeDteDWcxoSCJhKQkzb%2FScreenshot_30.png?alt=media&#x26;token=aca2186d-5fe2-4561-a8ce-9da802ae4d37" alt=""><figcaption></figcaption></figure>

**- Bước 3:** Quay trở lại đường link trang tính lúc đầu

* Copy ID của Google Sheet và dán vào mục Google Sheet ID trình chỉnh sửa Nội dung.
* Copy tên của sheet và dán vào mục Sheet name.

<figure><img src="https://2305753878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuirRnKaniWtkmyJdKYX4%2Fuploads%2FlRHSDHjSeA4dqt4Un7uc%2FScreenshot_31.png?alt=media&#x26;token=3f8ca1c6-564f-4ffc-85c1-8ab1f149d3ee" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2305753878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuirRnKaniWtkmyJdKYX4%2Fuploads%2FDMeedv8zVH4FY89xrekh%2Fimage.png?alt=media&#x26;token=3dfd5ab6-9b3b-4e4d-ae18-ef73345c97c5" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Lưu ý:** Lấy ID của google sheet gốc, không phải ID của đường link sau khi đã xuất bản ở bước 2.
{% endhint %}

**- Bước 4:** Bật chế độ CÔNG KHAI cho sheet của bạn.

Để có thể hiện thị nội dung từ Google sheet lên Thông báo, bạn vui lòng bật chế độ Công khai theo hướng dẫn:

<figure><img src="https://2305753878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuirRnKaniWtkmyJdKYX4%2Fuploads%2FjpgZYZkIV4zF7AF41OIr%2Fimage.png?alt=media&#x26;token=3d00ee27-3f88-41e7-8bb6-e1ec5bb77d95" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2305753878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuirRnKaniWtkmyJdKYX4%2Fuploads%2FKQ6UKuiV2E4SlWwJVZE1%2FScreenshot_32.png?alt=media&#x26;token=2dae0d53-37dd-4510-bdad-5d3aa25aca96" alt=""><figcaption></figcaption></figure>