## Progressive web app

A Progressive Web App (PWA) is a web-based application that allows you to create an app-like experience for users and can be embedded on the web. It uses web technologies to facilitate features such as push notifications, offline access, and home screen icons.

A PWA chatbot is designed to embed on desktops, mobile devices, and other web browsers without the need to download or install any native mobile apps. It is used to provide product information, customer support, schedule appointments, and collect customer feedback. PWA chatbots are supported on mobile, desktop, and web browsers such as Chrome, Safari, and Firefox.

Let's say that you want to build a standalone bot for your brand. You can use a PWA chatbot to provide a convenient and secure conversational experience for the users.


In this article, you will learn:

* [What are the differences between a chat widget and PWA?](#difference)
* [How to install PWA?](#install)
* [How to setup PWA?](#setup)

## 1. Difference between chat widget and PWA

Following are the differences between a chat widget and PWA chatbot:

Chat widget | PWA chatbot
------------|-----------
This is a software application that can be embedded on a website’s interface to interact with the website's users. | This is a web-based application that can be embedded within a webpage, desktop application, or mobile application.
It appears as a small chat box or window on a website or application. | It appears on the entire screen of the webpage, desktop, or mobile app.
You can minimize the chat widget. | You cannot minimize the PWA chatbot.
You can set the size (Small, Medium, or Large), position (Bottom Left and Bottom Right), and the display mode (Half opened, Minimized, or Conversational layout) of the widget on the website. | You cannot set the size or display mode of the PWA chatbot.


## 2. Install PWA chatbot

You can install the PWA chatbot on desktop or mobile via URL.

### 2.1 Install PWA chatbot on your desktop via link

To install PWA chatbot on your desktop, follow these steps:

1. Use this `https://cloud.yellow.ai/pwa/v2/live/x1657623696077` URL to install PWA on your website.
2. Click the below highlighted icon and click **Install**.


3. PWA chatbot is installed under the Apps folder on your desktop.


4. You can also uninsatll the PWA chatbot from your apps folder. Click on the below highlighted icon and select **Uninstall webby**.


5. A confirmation message is displayed. If you want to clear the data from Chrome, enable the checkbox and click **Remove**.

<img src="https://i.imgur.com/7dOptxT.png" alt="drawing" width="60%"/>

6. The PWA chatbot will be removed from your Apps folder.

### 2.2 Install PWA chatbot on your mobile via link

To install PWA chatbot on your mobile device, follow these steps:

1. Use this `https://cloud.yellow.ai/pwa/v2/live/x1657623696077` URL to install PWA to your website.

2. Upon clicking the above link, the PWA chatbot will be displayed on your mobile website.

<img src="https://i.imgur.com/ytSbkMV.png" alt="drawing" width="40%"/>

3. Click **Install app** to install PWA chatbot on your mobile.

<img src="https://i.imgur.com/71jBOSK.png" alt="drawing" width="40%"/>

4. The PWA chatbot app has been installed successfully on your mobile device.

<img src="https://i.imgur.com/dw1mK6H.png" alt="drawing" width="40%"/>

## 3. Setup PWA chatbot

You can setup a PWA chatbot, which is similar to the chat widget setup, by customizing the bot name, description, font style, font size, primary color, and secondary color. To setup a PWA chatbot, click [here](https://docs.yellow.ai/docs/platform_concepts/channelConfiguration/web-widget#1-access-chat-widget).

:::note
You cannot customise widget size, initial display mode, or the bot icon for PWA chatbots, as these options are not supported.
:::

### 3.1 Deploy PWA chatbot

You can deploy your PWA chatbot on your web browser once it has been configured with your preferred style and settings.

1. Navigate to the **Deploy** tab.
2. Copy the code using the respective icon, and paste it on your website.

<img src="https://i.imgur.com/8TnDcjf.png" width="80%"/>

**Sample JavaScript to embed the PWA chatbot in your web browser:**

need to add the script

### 3.2 Preview PWA chatbot

As you design the PWA bot, you can preview the changes in real time in the **Preview Screen** tab before you save it.