# 4.5. Notify

**Notifications** is a unique widget that displays short messages, providing quick and easy-to-understand information to users on a landing page. This feature enhances user engagement and builds customer trust with updates such as: "A purchase was just made," "Someone just signed up," or "Promotion ends in a few hours."...

## 1. Add Notify to your landing page:

* Click on **Widgets** in the sidebar of the editor.
* Select **Notify** from the **Advanced** section.
* Drag the **Notify** element onto your landing page.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FmHd5DmA52SxJRBgIfI33%2Fimage.png?alt=media&#x26;token=3a8cc962-51cc-4830-bbd0-ec70495c4338" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Working principle of the **Notify** feature: Displays pre-prepared content from either the default data source or a Google Sheet.
{% endhint %}

## 2. Notify Editor

### 2.1. Content Editor

To access the **Content Editor**, click on the Notify widget you wish to modify on the screen and select **Content** from the quick settings bar.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2F0UFqUKCQsZBkD9CEVmMZ%2Fimage.png?alt=media&#x26;token=250cfe83-ac91-4877-9eec-7e0d8167ca32" alt=""><figcaption></figcaption></figure>

* **Data type:** This is the input data source containing the list of content displayed in Notify.
  * **Default:** Allows you to manually create, add, and edit content.

    <figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FvUz8WlPz2VfwHBkwtGRc%2Fimage.png?alt=media&#x26;token=8810c80e-5f91-460a-890e-bc8c1295c1cb" alt=""><figcaption></figcaption></figure>
  * **Google sheet:** Enables you to import multiple pieces of content simultaneously using a Google Sheet file by entering the correct **Google Sheet ID** and **Sheet Name**.

    <figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2F4qeuZeUnO7FKyZhZ8vL9%2Fimage.png?alt=media&#x26;token=54f4151c-54b9-4b61-bc8d-480c6ca891e1" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
See detailed instructions for creating content with Google Sheets [here](https://docs.shopone.io/english/basic-elements/advanced-widgets/notify#create-content-from-google-sheet).
{% endhint %}

* **Display time:** This is the duration for which each Notification is displayed on the screen.
* **Delay time:** This is the waiting time before the next Notification is displayed.

### 2.2. Design Editor

To access the **Design Editor**, click on the **Notify** widget you wish to modify on the screen and select **Design** from the quick settings bar.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FXkEIJVHEZRJCgMBUNkmW%2Fimage.png?alt=media&#x26;token=9d90bd91-2101-47bf-9ab8-9f4f2ca6624a" alt=""><figcaption></figcaption></figure>

* **Align**: Allows you to align the widget within its container. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/align).
* **Size**: Adjust the size of the widget, including width, height, and the margin from the widget to the section's edges. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/size).
* **Display on**: Select the devices where the widget will be displayed (Desktop, Mobile).
* **Styles:** Allows you to add background and shadow to the widget. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/styles).
* **Typography**: Customize the text properties within the widget (include: title, content, time). See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/typography).
* **Border**: Add and customize borders around the widget, including adjusting the border radius. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/border).
* **Image style:** Allows you to adjust the border radius of the images displayed in the widget.

### 2.3. Advanced Editor

To access the **Advanced Editor**, click on the **Notify** widget you wish to modify on the screen and select **Advanced** from the quick settings bar.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FM2wTwAAYYFOtovu2pc1o%2Fimage.png?alt=media&#x26;token=a6079276-6e06-407d-b168-902b126b6db1" alt=""><figcaption></figcaption></figure>

* **Events:** Allows you to set events for click or hover actions on the widget. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/event).
* **Animation**: Allows you to add dynamic animations to the widget on your landing page to make it more attractive and lively. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/animation).
* **Desktop/Mobile sync design**: Allows you to set synchronization options for the design between desktop and mobile. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/desktop-mobile-sync-design).
* **Position type**: Lets you choose the appropriate positioning style to optimize the webpage and provide the best experience for users. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/position-type).
* **Custom advance**: Allows you to customize the appearance and behavior of the component using CSS layers and custom CSS code. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/custom-advance).

## 3. Create content from Google Sheet

**- Step 1:** Create a Google Sheet with 4 main content columns with titles: **Title, Content, Time, Image** and you fill information of the columns. The sheet containing your content must be the first sheet in your Google sheet.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FPKI6suq93agrPZqCV6vp%2Fimage.png?alt=media&#x26;token=8d243c46-4de0-46ad-b595-f923371f036f" alt=""><figcaption></figcaption></figure>

**- Step 2**: Publish the Google Sheet to the web.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FLUfTsl68EsCo4gI66AmH%2Fimage.png?alt=media&#x26;token=130812c7-5652-4f2f-83c6-ce41ac1a5c8c" alt=""><figcaption></figcaption></figure>

You can choose to publish the entire document or just the sheet containing the content:

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FHPuH91qERD7hj1OEKr18%2Fimage.png?alt=media&#x26;token=cf8614e7-704a-4efa-95d4-f16603cb0eb0" alt=""><figcaption></figcaption></figure>

**- Step 3**: Go back to the original Google Sheet link.

* Copy the **Google Sheet ID** and paste it into the **Google Sheet ID** field in the Content Editor.
* Copy the name of the specific sheet and paste it into the **Sheet Name** field.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FGOZId8PyURA2jy9YM3bc%2FScreenshot_33.png?alt=media&#x26;token=e8b76f8b-1326-4005-9338-b327ac884e52" alt=""><figcaption></figcaption></figure>

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FjusstWjAeVHG937cNuzs%2Fimage.png?alt=media&#x26;token=640cd234-a980-4a71-a89a-098c191f8fd8" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Note**: Use the ID from the original Google Sheet, not the link generated after publishing in Step 2.
{% endhint %}

**- Step 4:** Set the sheet to **Public**.

To display content from Google Sheets in Notifications, you must set the sheet to Public. Follow these steps to enable Public mode:

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FhviLHNGYQOCdIZH3TYmd%2Fimage.png?alt=media&#x26;token=25359224-b8cd-4555-a529-1ecc63620305" alt=""><figcaption></figcaption></figure>

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2Fprmz45pwipmfM91UAZIW%2Fimage.png?alt=media&#x26;token=e7488a95-15a7-4e9b-b50a-336ed9f8ea6e" alt=""><figcaption></figcaption></figure>