> For the complete documentation index, see [llms.txt](https://help.twinr.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.twinr.dev/extensions/no-internet-view.md).

# No Internet View

<mark style="color:green;">What is No Internet View?</mark>

When the user is using the application without internet connection, instead of showing the infinite loader, you can use our customized No Internet View screen.

## <mark style="color:green;">Enable No Internet Integration</mark>

<figure><img src="/files/s69oJX9gOnO2B4PaBpSU" alt=""><figcaption></figcaption></figure>

## <mark style="color:green;">Customize it however you want</mark>

### **Header Image**

Choose the main illustration displayed at the top of the No Internet screen.

1. **Select Image :** Pick from a set of professionally designed default images.
2. **Upload Image :** Upload your own custom illustration.\
   Supported formats: PNG. JPG. PEG

<figure><img src="/files/nP2EoLJtTUmo9xSVjfbw" alt=""><figcaption></figcaption></figure>

### **Title**

This section lets you customize the main heading displayed on the No Internet screen.

#### **Fields:**

* **Title** – Main text (required)
* **Text Style** – Use predefined styles or choose **Custom**
* **Font Size (px)** – Defines size in pixels
* **Font Weight** – Regular / Medium / Bold
* **Font Style** – Select from available font families
* **Color** – Choose preset colors or apply a custom HEX value with opacity

![](/files/QrCkIWx2uIj4Xc2sOAEp)![](/files/jjbXef6OU1Fxv6NjSxFR)

### **Description**

Customize the explanatory text shown below the title.

#### **Fields:**

* **Description** – Required text explaining the issue
* **Text Style** – Use default or custom
* **Font Size (px)** – Adjust text size
* **Font Weight** – Regular / Medium / Bold
* **Font Style** – Choose any available font
* **Color** – Theme-based or custom HEX value

Use this to guide users clearly, e.g.:

> "No internet connection found. Check your connection and try again."

![](/files/0gFelCZSOHP7Wu1eDEN9)![](/files/rTeVPGbOcaZixHcBsjm3)

### **Button**

Configure the action button displayed at the bottom of the No Internet screen.

#### **Fields:**

* **Button Text** – Label text (required)
* **Button Style** – Choose from available button design presets

This button usually performs a **Retry** action or reloads the screen when the user regains connection.

![](/files/rnbSBkN6jf7bC2AmnWDP)![](/files/cVvc5Q91lC1MssRYvi3U)

### **Save Changes**

Once customization is complete:

* Click **Save As a Draft** if you want to save it but not publish yet
* Click **Publish**  to apply the No Internet View to your live app version