# Adding the Landing Page as an App

Users can add your ISoc.link landing page as an app on the home screen of phone or tablet devices, allowing it to be easily accessible and function as an app rather than a website.

#### Changing the App Icon

The app icon is generated from the image used for the avatar block. Click on your avatar block, or add one, and then upload a suitable image. We recommend a high quality square logo without any transparency. The square shape is to accommodate different app shapes across devices, and transparent backgrounds can get affected by the light/dark mode settings of devices, causing the icon to display improperly.

#### Changing the App Name

On iPhone, the app name is chosen by the user when they add it. This has been reflected in the instructions below.

On Android, the name of the app is whatever the page title is. You can edit this in your editor by going to the **Settings** tab, scrolling down to the **SEO Settings** section and editing the **Page title**, then clicking **Save changes**.

#### Adding a Back Button & Navigation

Depending on your device's browser, there might not be a back button when users navigate the landing page app. We recommend adding the avatar block to the top of every page, as clicking it takes the user back to the home page. You can also add a navigation menu by clicking on the down arrow next to **Publish** and then clicking the **Navigation Menu** tab.

#### Instructions to add the Landing Page as an App

You can share the following instructions with your members so they can add your landing page as an app on the phone devices. **Please copy these instructions somewhere else, ideally as a page in your landing page. <span style="color: rgb(224, 62, 45);">Do not share this page with your members.</span>**

##### <span style="color: rgb(0, 0, 0); background-color: rgb(194, 224, 244);">iPhone (Safari or Chrome)</span>

1. <span style="background-color: rgb(194, 224, 244);">Go to the home page of your landing page</span>
2. <span style="background-color: rgb(194, 224, 244);">Click the share button (usually located in the centre of the bottom of the screen or top right)</span>
3. <span style="background-color: rgb(194, 224, 244);">Scroll down and click **Add to Home Screen**</span>
4. <span style="background-color: rgb(194, 224, 244);">Change the name to something suitable, such as the ISoc's name</span>
5. <span style="background-color: rgb(194, 224, 244);">Click **Add**</span>

##### <span style="background-color: rgb(194, 224, 244);">Android (Chrome or Samsung Internet)</span>

1. <span style="background-color: rgb(194, 224, 244);">Go to the home page of your landing page</span>
2. <span style="background-color: rgb(194, 224, 244);">Click the menu button (three dots or hamburger icon)</span>
3. <span style="background-color: rgb(194, 224, 244);">Scroll down and click **Add to Home Screen**</span>
4. <span style="background-color: rgb(194, 224, 244);">Click **Install** on the Install App popup</span>