# UI Widgets

## Notifications 

**Element name:** widget\_notifications\
**Purpose:** Display notifications to your users

This focus group reusable element contains a simple user interface for displaying unread messages or notifications. By default, we've included this reusable element in `Group Loggedin` in the header. This reusable element icon will only be visible when a user is logged into the app. <br>

![](https://265427419-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYJWnUT3lUFQk1K9BCK%2F-M53JAqgdUjuMBMo4k6Z%2F-M53jVeoBi1zeYSKnld_%2FScreen%20Shot%202020-04-16%20at%201.46.01%20PM.png?alt=media\&token=38ed0cc0-8aba-4dfd-b919-76ec62bf3c03)

To use this UI, please replace all dummy data type with the data type you want to display (e.g., Messages or Notifications).

Add workflows to `Button Mark as read`, `Group Select message`, and `Group view more`.\
\
If you do not want this UI to be visible, you can hide `Group notification icon` in the header reusable element by unchecking the box for *This element is visible on page load*.

![](https://265427419-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYJWnUT3lUFQk1K9BCK%2F-M53JAqgdUjuMBMo4k6Z%2F-M53kqH_1MNknSjc7i68%2FScreen%20Shot%202020-04-16%20at%201.51.09%20PM.png?alt=media\&token=57da0c15-2dc0-4af0-b5bc-c439028457bf)

## Search&#x20;

**Element name:** widget\_search\
**Purpose:** Provide a convenient location for your users to search and view results

This focus group reusable element contains a simple user interface for searching for things. By default, we've included this reusable element in `Group Loggedin` in the header. This reusable element icon will only be visible when a user is logged into the app. <br>

![](https://265427419-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYJWnUT3lUFQk1K9BCK%2F-M53JAqgdUjuMBMo4k6Z%2F-M54RVNV-Ds8EjVmSL3N%2FScreen%20Shot%202020-04-16%20at%205.02.43%20PM.png?alt=media\&token=433791bb-7a18-4028-960f-f26e367526dd)

To use this UI, please replace all dummy data type with the data type you want to display (e.g., Files or products).

Add workflows to `Group Select item` and update data source of `RepeatingGroup Dummy`.\
\
If you do not want this UI to be visible, you can hide `Group search icon` in the header reusable element by unchecking the box for *This element is visible on page load*.

![](https://265427419-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYJWnUT3lUFQk1K9BCK%2F-M53JAqgdUjuMBMo4k6Z%2F-M53kqH_1MNknSjc7i68%2FScreen%20Shot%202020-04-16%20at%201.51.09%20PM.png?alt=media\&token=57da0c15-2dc0-4af0-b5bc-c439028457bf)

## Shopping Cart&#x20;

**Element name:** widget\_shopping\_cart\
**Purpose:** Display the items in the user's cart for easy review and checkout

This focus group reusable element contains a simple user interface for reviewing the items in your cart. By default, we've included this reusable element in `Group Loggedin` in the header. This reusable element icon will only be visible when a user is logged into the app. <br>

![](https://265427419-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYJWnUT3lUFQk1K9BCK%2F-M53JAqgdUjuMBMo4k6Z%2F-M54L8WlzSZcm_1h_hHQ%2FScreen%20Shot%202020-04-16%20at%204.34.38%20PM.png?alt=media\&token=05961734-a2ef-4905-847e-f20d12dda950)

To use this UI, please replace all dummy data type with the data type you want to display (e.g., Product or Cart items).

Add workflows to `Button remove`and `Button CHECKOUT`.\
\
If you do not want this UI to be visible, you can hide `Group shopping cart icon` in the header reusable element by unchecking the box for *This element is visible on page load*.

![](https://265427419-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYJWnUT3lUFQk1K9BCK%2F-M53JAqgdUjuMBMo4k6Z%2F-M53kqH_1MNknSjc7i68%2FScreen%20Shot%202020-04-16%20at%201.51.09%20PM.png?alt=media\&token=57da0c15-2dc0-4af0-b5bc-c439028457bf)

## Messages

**Element name:** widget\_messages\
**Purpose:** Display a list of unread messages for the user