# Introduction

Explore our comprehensive knowledge base and discover everything you need to get started with AppMySite.

{% embed url="<https://youtu.be/EuE82P5377E?si=KLMkEIy1jo__Rlsn>" %}

### Popular articles

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><a href="/pages/dr6tJxNztfk85oMQPcL7"><strong>Connect website to app</strong></a></td><td>Learn how to connect your WordPress website and app. </td><td></td><td><a href="/files/AEBBq19zZ3fIncxwb9Gf">/files/AEBBq19zZ3fIncxwb9Gf</a></td></tr><tr><td><a href="/pages/fZoG1nXTXBmJCXnXB0Mo"><strong>Web-to-app bottom bar</strong></a></td><td>Add items to your mobile app's bottom bar.</td><td></td><td><a href="/files/SEWkFoZZdPhYBHzpcPIo">/files/SEWkFoZZdPhYBHzpcPIo</a></td></tr><tr><td><a href="/pages/uu7umR87Hxfs0qNN4x2u"><strong>Generate iOS app</strong></a></td><td>Generate an IPA file of your iOS app.</td><td></td><td><a href="/files/kiJt2sZDwW40lAXbKe65">/files/kiJt2sZDwW40lAXbKe65</a></td></tr><tr><td><a href="/pages/7TSrV7AhCjJTEA6pxcAa"><strong>Generate Android app</strong></a></td><td>Generate an APK and AAB file of your Android app.</td><td></td><td><a href="/files/kiJt2sZDwW40lAXbKe65">/files/kiJt2sZDwW40lAXbKe65</a></td></tr><tr><td><a href="/pages/IsfneIsAzqmctNB5DjrG"><strong>Free plan features</strong></a></td><td>Explore all the features included in our free plan.</td><td></td><td><a href="/files/4H5uoHq8XWVq3mZcqKpZ">/files/4H5uoHq8XWVq3mZcqKpZ</a></td></tr><tr><td><a href="/pages/Ap0JXkH9zamEtZdDQYwT"><strong>Scope of assistance</strong></a></td><td>Learn the assistance offered in each support plan. </td><td></td><td><a href="/files/NhDYMExgjplj6hVvA5uq">/files/NhDYMExgjplj6hVvA5uq</a></td></tr></tbody></table>


# Create an app

### How to create an app?

This is the first step towards creating your mobile app. In this article, we will discuss the steps involved in adding a new app to your AppMySite account. Before creating an app, it is important to understand which solution will best suit your requirements.&#x20;

{% embed url="<https://scribehow.com/viewer/Create_a_New_App_on_AppMySite__pcFcRJZDR0G-3u9NFoibcw>" %}

#### **Step 1: Navigate to the “My Apps” Screen**

* Log in to your [**AppMySite account**](https://app.appmysite.com/home).
* Select Pay Per App > Go to the My Apps screen and click **+Create App**.

{% hint style="success" %}

* Pay-per-app is ideal if you want to create and manage one app at a time.
* Unlimited workspace lets you build and manage unlimited apps under a single account.
* Agency white-label is perfect for launching your own branded app development business.
  {% endhint %}

#### **Step 2: Fill out the app details**

On the **+Create App** screen, you will need to provide the following details:

**App Name**

* Enter the name of your app. This is a mandatory field.

{% hint style="warning" %}
Character Limits: Minimum 3 characters, maximum 30 characters.
{% endhint %}

{% hint style="success" %}
The app name will appear on users’ mobile devices and can be changed later from [**Settings > General**.](https://app.appmysite.com/app/settings)
{% endhint %}

**App Type**

* Choose how you want to create your app:
  * WordPress, WooCommerce, or Web to App: Ideal for creating apps from existing websites. Select the option based on the CMS platform your website is built on.
  * Custom App: Choose this option if you want to build an app from scratch without a website.

**Website**

* If you select WordPress, WooCommerce, or Web to App, enter the URL of your website.

{% hint style="warning" %}
This option is not applicable if you are creating a custom app from scratch.&#x20;
{% endhint %}

#### **Step 3: Create Your App**

* Review the details you’ve entered.
* Click the +Create app button to proceed.

{% hint style="warning" %}
If you’re signing up for a new AppMySite account, you will be automatically redirected to the Add New App screen after registration.
{% endhint %}

#### **Choosing the Right AppMySite Product**

Selecting the right product depends on your needs. Here’s a breakdown to help you decide:

* [**Custom app**](https://www.appmysite.com/custom-mobile-app-builder/)
  * Build an app from scratch without connecting it to a website
  * Offers complete flexibility to design and structure a unique, standalone mobile app
* [**WooCommerce app**](https://docs.appmysite.com/)
  * Designed specifically for WooCommerce-powered websites
  * Ideal for creating e-commerce apps for online stores such as supermarkets, fashion outlets, and more
* [**WordPress app**](https://www.appmysite.com/wordpress-mobile-app-builder/)
  * Converts your WordPress website into fully native Android and iOS apps
  * Best suited for blogs, information-based websites, and catalogue-style content
* [**Web to app**](https://www.appmysite.com/webtoapp/)
  * Converts any website into an app, regardless of the platform
  * Suitable for most websites built on any platform, example: Shopify, Joomla, Magento, or custom platforms
  * Renders your mobile site inside the app for a seamless experience
* [**Shopify app**](https://www.appmysite.com/shopify-mobile-app-builder/)
  * Designed specifically for Shopify-powered online stores
  * Lets you convert your Shopify store into fully native Android and iOS apps
  * Ideal for e-commerce businesses looking to offer a seamless mobile shopping experience with real-time store sync

{% hint style="success" %}
For more information, visit our [Pricing Page](https://www.appmysite.com/pricing/).
{% endhint %}


# Initial requirements

### What do you need to get started with AppMySite?

AppMySite is a no-code app development platform that enables you to create an app in minutes. Powered with integrations and features, AppMySite is the ideal solution to build an app for your business.&#x20;

To get started, you may or may not need a website depending on the app want to create-&#x20;

* With the Custom app solution, you don’t need anything. This solution is designed to help you build an app without a website.&#x20;
* With the WordPress solution, you need a WordPress website to get started.&#x20;
* With the WooCommerce solution, you need a WordPress website which has a WooCommerce plugin.
* With the Web to app solution, you need a website. There are no specific CMS requirements as this solution works with any CMS platform or web technology.&#x20;

{% hint style="warning" %}
In addition to these initial requirements, you must create developer accounts for Google Play and the Apple App Stores. This is mandatory to submit your app to the app stores.
{% endhint %}


# Dashboard

### What is included in the app dashboard?

The custom app dashboard is the central hub for managing your app. It displays all the key information related to your app, subscription, setup, and build options.

**App card**

* Shows the name of the app.
* Displays the app ID.
* Shows the connected domain (if any).

**Product card**

* Displays the solution or product name (for example, WordPress to App, WooCommerce to App, Web to App, or Custom App).
* Shows the date and time of creation.

**Owner card**

* Displays the app owner’s name.
* Shows the registered email ID of the owner.
* Displays the owner’s user ID.

**Subscription card**

* Displays the current subscription plan (Free, Starter, Pro, Premium, or Lifetime).
* Shows whether the plan is monthly, yearly, or lifetime.
* Displays renewal or cancellation dates if applicable.

**You’re all set card**

* Displays the status of app setup items, including:
  * App icon
  * Splash screen
  * Pages
  * Posts
  * Bottom bar
  * Notifications
  * Download

**Team card**

* Displays the team members added to the app.
* Allows inviting new users and assigning roles (Admin, Manager, Viewer).

**Build cards**

* PWA card: Option to build and launch a Progressive Web App.
* Android card: Build your Android app (AAB format) and launch it on the Google Play Store.
* iOS card: Build your iOS app (IPA format) and launch it on the Apple App Store.

{% hint style="warning" %}
The app build will show as Draft for both Android and iOS until the app build is created. Once the build is generated, the status will update automatically.
{% endhint %}

**Analytics**

* Displays app traffic and analytics if enabled.
* Shows upgrade prompts if analytics is disabled.

**Support cards**

* Quick access to Knowledge base, Email support, Live chat, Book a call, Speak to sales, and Email sales.

{% hint style="success" %}
Each card on the custom app dashboard is functional and takes you directly to the specific screen where you can manage or update that feature.
{% endhint %}


# Design

Design Overview

The **Design** category focuses on the creative aspects of your app, helping you craft a visually appealing and professional design. This section includes comprehensive resources to guide you through designing key visual elements of your app, such as the [**App Icon**](/app/design/app-icon) and [**Splash Screen**](/app/design/splash-screen).

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

Here’s what you’ll find in this category:

* **Design Guides**: Step-by-step instructions for creating and customizing your app icon and splash screen to reflect your brand identity.
* **Troubleshooting Articles**: Solutions to common design-related issues, ensuring your app's visuals are optimized and error-free.
* **Best Practices**: Tips and recommendations for crafting designs that enhance user engagement and elevate your app’s appearance.

{% embed url="<https://youtu.be/mpmnw0N-wpQ>" %}

Explore this category to ensure your app’s design stands out and creates a memorable impression on your users.


# App icon

### How to design an app icon?

Your app icon is a critical component of your app’s identity. With AppMySite, you can either design your own custom icon or upload a pre-made design. Follow this guide to create or upload your app icon:

{% hint style="warning" %}
To update your app icon, you must generate a new build and submit it to the app stores. The change will only reflect once the updated version is approved and published.&#x20;
{% endhint %}

#### **Option 1: Design your app icon**

* Go to the [**App Icon**](https://app.appmysite.com/app/app-icon) section from your dashboard.
* Click on Start designing to open the app icon builder.

{% embed url="<https://scribehow.com/shared/Design_app_icon_from_scratch__QDFv9OH6Q_uwacd0-VsMdg>" %}

Within the app icon designer, you have a variety of creative tools:

* Templates:
  * Search and select from a wide range of templates.
  * Customize the internal elements, such as colors, shapes, and layouts.
* Upload & customize:
  * Upload an existing design and customize it further by changing opacity, adding animations, borders, and more.
* Images:
  * Search and add images to your design.
* Objects:
  * Add shapes, icons, mockups, and other objects to enhance your icon.
* Backgrounds:
  * Choose from solid backgrounds or enhanced background patterns.
* Text:
  * Add custom text or photo-text elements to your icon.
* Brand Kit:
  * Import your Brand Kit elements for consistent branding across your app.

Once you’ve finished designing your icon, click **Save** to finalize your app icon.

{% hint style="warning" %}
Use the show gridlines option to keep your design centred and aligned. This will also ensure that your design does not spill out upon rendering.
{% endhint %}

#### **Option 2: Upload an existing design**

{% embed url="<https://scribehow.com/viewer/Design_app_icon_Copy__8zV7AOEoSaOoZMTfS9gIGw?referrer=documents>" %}

* Upload your icon:
  * Click on Upload an image.
  * Upload your image file or provide a link to it.
  * Drag or upload the image from your computer.&#x20;

{% hint style="warning" %}
The recommended size requirement for your app icon is 1024px x 1024px.
{% endhint %}

{% hint style="success" %}
If your uploaded image doesn’t meet the required resolution, it will be automatically scaled using AI.&#x20;
{% endhint %}

* Complete the upload:
  * Click Done to finalize your app icon upload.
  * Finally, hit Save to complete the process.&#x20;

{% hint style="warning" %}
Use the show gridlines option to keep your design centred and aligned. This will also ensure that your design does not spill out upon rendering.
{% endhint %}

{% hint style="success" %}
Add-on available

If you prefer professional assistance, you can purchase the [**Mobile App Design Add-On**](https://app.appmysite.com/app/addons), which includes:

* Creating your app icon
* Designing a launch screen
* Customizing a login screen
* Developing a banner image
  {% endhint %}


# Splash screen

The **splash screen** is the first visual element users see when they launch your app, making it a crucial part of your brand identity. This section provides guides on designing, customizing, and troubleshooting your app’s splash screen.

Here, you'll find:

* Step-by-step tutorials to create and personalize your splash screen.
* Design best practices to ensure a seamless and professional look.
* Troubleshooting solutions for common splash screen issues.

Explore this section to craft a polished and engaging splash screen that enhances your app’s user experience.


# Design Splash screen

How to design a Splash screen?

Your app's splash screen is the first screen users see, making it a crucial element in setting the tone for their experience. In this article, we will discuss the steps you can follow to design you launch screen. Let’s get started.

{% hint style="warning" %}
To update your splash screen, you must generate a new build and submit it to the app stores. The change will only reflect once the updated version is approved and published.&#x20;
{% endhint %}

#### **Option 1: Design your splash screen**

* Go to the[ **Splash screen**](https://app.appmysite.com/app/splash) section from your app your dashboard.
* Click on the Start designing button to open the splash screen designer.

{% embed url="<https://scribehow.com/shared/Design_splash_screen_from_scratch__twnvqmWvRGuEZXQazsIQhA>" %}

* Templates:
  * Browse and choose from a variety of templates.
  * Customize elements such as colors, shapes, and layouts.
* Upload & customize:
  * Upload an existing design and personalize it further using tools like changing opacity, adding animations, and borders.
* Images:
  * Search and add images to enrich your splash screen.
* Objects:
  * Add shapes, icons, mockups, and other elements to enhance your design.
* Backgrounds:
  * Select solid colors or enhanced patterns for your background.
* Text:
  * Add custom text or photo-text elements to include branding or messaging.
* Brand Kit:
  * Import your Brand Kit elements for consistent branding.

After completing your design, click Save to finalize your splash screen.

{% hint style="warning" %}
Use the show gridlines option to keep your design centred and aligned. This will also ensure that your design does not spill out upon rendering.
{% endhint %}

#### **Option 2: Upload an existing design**

{% embed url="<https://scribehow.com/shared/Upload_a_pre-designed_image_for_your_splash_screen__nI13pfliQgODapis_fwjJw>" %}

* Upload your splash screen:
  * Click on Upload an image.
  * Drag or upload the image from your computer or provide a link to your file.

{% hint style="warning" %}
The recommended size requirement fo your splash screen is 1500px \* 2688px
{% endhint %}

{% hint style="success" %}
If your uploaded image doesn’t meet the required resolution, it will be automatically scaled using AI.&#x20;
{% endhint %}

* Complete the upload
  * Click Done to finalize your splash screen upload.
  * Finally, click Save to complete the process.

{% hint style="warning" %}
Use the show gridlines option to keep your design centred and aligned. This will also ensure that your design does not spill out upon rendering.
{% endhint %}

{% hint style="success" %}
Add-on available \
\
If you prefer professional assistance, you can purchase the [**Mobile App Design Add-On**](https://app.appmysite.com/app/addons), which includes:

* Creating your app icon
* Designing a launch screen
* Customizing a login screen
* Developing a banner image
  {% endhint %}


# Theme

The  theme section helps you design a visually cohesive and branded experience for your app. Here, you'll find guides on customizing the app's **header, buttons, and icons** to match your brand identity.

Explore this section to create a consistent and engaging color theme that enhances your app’s look and feel.

{% embed url="<https://www.youtube.com/watch?v=xRkTTjEGd0U>" %}


# Design theme

### How to design the theme of your app?

The Theme section in your app dashboard allows you to customize the look and feel of your app’s interface by adjusting header and button styles. These settings help you maintain consistent branding and enhance the overall visual experience for your app users.

{% embed url="<https://scribehow.com/viewer/Design_theme__B9xp2wumQVWzyToYp6eNtA>" %}

#### Step 1: Go to the theme settings

* From the side menu, click on Design
* Open the [Theme screen](https://app.appmysite.com/app/theme) to customize various visual elements of your app

#### Step 2: Customize fonts

* Click on the Heading font field to select a font style for all headings in your app
* Click on the Paragraph font field to select a font style for all body text

Use the search bar or scroll through the list to select your preferred font for each field.

{% hint style="success" %}
Choose from over 7000 fonts to personalize your app's typography.
{% endhint %}

{% hint style="warning" %}
The selected font will apply across the entire app, including the bottom bar, menu, pages, posts, and more.
{% endhint %}

#### Step 3: Customize the header style

* Header background color sets the background color of your app’s header to match your brand palette
* Header separator color defines the color of the thin line under the header, helping visually separate it from the content area
* Header text color allows you to select the color of screen titles that appear in the header
* Header icon color applies to the back, menu, and search icons within the header

{% hint style="success" %}
Customize your header elements to create a clean, consistent navigation experience for your app users.
{% endhint %}

#### Step 4: Customize the button style

* Button background color defines the background color used for all primary buttons in the app
* Button text color sets the text color that appears on these buttons
* Button shape lets you choose from three styles
  * Square
  * Squircle (square with slightly rounded corners)
  * Circle

{% hint style="success" %}
Visually appealing and well-styled buttons help increase engagement and make important actions stand out.
{% endhint %}

To customize the icons used in your app, visit the guide linked below:

{% content-ref url="/pages/L19dbczaBhNcJ8pv7zCE" %}
[Upload icons](/app/design/theme/upload-icons)
{% endcontent-ref %}

To set up the overall color scheme of your app, visit the color scheme guide:

{% content-ref url="/pages/9VoINBO3Dtv461f8NNZC" %}
[Color scheme](/app/design/theme/color-scheme)
{% endcontent-ref %}

{% hint style="success" %}
Preview the design on the demo app or the [**Preview emulator.** ](/app/preview)
{% endhint %}


# Color scheme

### How to set the color scheme of your app?

You can define how your app looks by setting a custom color scheme. This controls the colors used in the header, footer, buttons, icons, and other interactive elements.

{% embed url="<https://scribehow.com/shared/Color_Scheme__1DXt-8zBScGsEJHKMPmpZQ>" %}

**Step 1: Open the color scheme settings**

* Go to the [**Theme screen**](https://app.appmysite.com/app/theme) from the Design section in the side menu
* Click on the Color scheme button at the top of the screen

**Step 2: Choose how to configure colors**

* "Your app colors" option lets you manually select and apply your own brand colors
* "Preset colors" option provides a set of ready-made combinations you can instantly use
* "Get my website’s colors" option allows you to extract and apply colors from your connected website

{% hint style="warning" %}
Click "Retry" to fetch a new set of colors from your website using the "Get my website’s colors" feature.
{% endhint %}

**Step 3: Set each color in your palette**

* Base color defines the main color used across the header, bottom bar, and background elements
* Contrast color is used for text and icons that appear on top of the base-colored areas
* Selection color is applied to selected items like tabs, active icons, and highlights
* Highlight color is used for call-to-action buttons and other accent elements between the header and footer

**Step 4: Save or reset your selection**

* Click Done to save your selected colors
* Click "Reset" to revert all changes
* Click Cancel to discard changes and exit

{% hint style="success" %}
Preview the design on the demo app or the [**Preview emulator.** ](/app/preview)
{% endhint %}


# Upload icons

### How to upload icons in your app?

You can configure the icons used throughout your app to align with your brand’s design. AppMySite offers a built-in icon library, and you can also upload your own designs. These changes apply across various app areas, including the header, listing screens, profile, and settings.

{% embed url="<https://scribehow.com/shared/How_To_Upload_a_Menu_in_AppMySite__qgpYr5n4SRakoREaeWbmhA>" %}

#### Step 1: Open the icon customization panel

* Click on the Icons button at the top right corner of the [Theme screen](https://app.appmysite.com/app/theme)
* Select any icon you want to edit

{% hint style="success" %}
You can configure icons across different parts of your app, including the header, listing screens, profile, and settings.
{% endhint %}

#### Step 2: Choose or upload an icon

* Choose from the available stock icon library
* Alternatively, upload a custom image to use as your icon

#### Step 3: Customize icons across the app

You can configure icons used in different areas of the app:

#### Header icons

These icons appear in the app’s native header:

* Hamburger menu icon – Launches the navigation menu.
* Back icon – Navigates to the previous screen.
* Search icon – Opens the search interface.
* Share icon – Launches the native share widget.
* Wishlist icon – Navigates to the wishlist screen.
* Bookmark icon – Opens the bookmarked posts.
* Notification icon – Takes users to their notifications.
* Cart icon – Opens the shopping cart.
* Profile icon – Directs users to their profile.

#### Listing screen icons

These icons appear on the result listing screens:

* Sort icon – Allows users to sort results.
* Filter icon – Filters content based on selected criteria.
* List view icon – Switches results to a list view.
* Grid view icon – Switches results to a grid view.

#### Profile icons

These icons are visible in the user profile section:

* Reward icon – Shows reward points.
* Bookmark icon – Takes users to their bookmarked content.
* Wishlist icon – Displays items saved to the wishlist.
* Order history icon – Navigates to past orders.
* Saved address icon – Lists the user’s saved addresses.
* Change password icon – Navigates to the reset password screen.
* Chat icon – Initiates customer chat.
* Settings icon – Opens app settings.
* Logout icon – Logs the user out of the app.
* Delete account icon – Allows users to delete their profile.

#### Settings icons

These icons are used throughout the app’s settings area:

* Push notifications icon – Represents the notification settings.
* Appearance icon – Opens the app’s appearance settings.
* Offline mode icon – Enables or disables offline browsing.
* Notification icon – Displays notification history.
* Site icon – Links to the associated website.
* Currency icon – Represents the currency settings.
* Language icon – Opens the language selector.
* Terms and conditions icon – Links to the terms and conditions page.

{% hint style="warning" %}
Default icons are already set up. If a user removes an uploaded icon, the system will automatically restore the default.
{% endhint %}


# Access

Access overview

The **Access** category focuses on features that define how users enter and interact with your app. This section includes modules designed to manage and streamline user entry while ensuring compliance and a seamless onboarding experience.

<figure><img src="/files/08YhsHizFe7sunCle5T1" alt=""><figcaption></figcaption></figure>

Here’s what you’ll find in this category:

* [**Login & Sign-Up**](/app/access/login):
  * Guides and resources to help you configure login and sign-up screens, enabling users to create accounts or log in easily.
  * Includes troubleshooting articles to address common issues related to user authentication and account management.
* [**Consent Screen**](/app/access/consent)**:**
  * Articles explaining how to set up a consent screen to inform users about your app’s terms, conditions, and policies before accessing the app.
  * Covers design and compliance best practices to ensure a professional and legally sound user onboarding process.

{% embed url="<https://www.youtube.com/watch?v=RjxS6UsltH8>" %}

Explore the **Access** category for all the information you need to configure user entry points and improve the app experience right from the start.

{% content-ref url="/pages/849zIXUl8BW0R9eSD76A" %}
[Consent](/app/access/consent)
{% endcontent-ref %}

{% content-ref url="/pages/3A0FEvhQavldW8ll0yqY" %}
[Login](/app/access/login)
{% endcontent-ref %}


# Consent

The **consent screen** is displayed before the splash screen, allowing you to notify and warn users about mature themes, products, or media that may not be suitable for all audiences. This section provides guides on setting up, customizing, and managing the consent screen for your app.

Here, you'll find:

* **Step-by-step instructions** to enable and configure the consent screen.
* **Customization options** for text, buttons, and background design.

Explore this section to effectively implement a consent screen that aligns with your app’s content and user expectations.


# Add consent screen

### How to add a consent screen to your app?

A Consent Screen is a great way to notify and warn users if your app contains mature themes, products, or media that may not be suitable for all audiences. Follow the steps below to add and customize a consent screen for your app:

{% embed url="<https://scribehow.com/shared/How_to_add_a_consent_screen_to_your_app__xr2s66IkQ5Wi3BZ6O9nqSQ>" %}

#### **Step 1: Enable the consent screen toggle**

* Navigate to [**Access > Consent**](https://app.appmysite.com/app/consent) from your app dashboard.
* Turn on the toggle for "Ask for user consent".

{% hint style="warning" %}
Enabling the "Ask for user consent" setting shows the consent screen when users launch the app for the first time.
{% endhint %}

{% hint style="success" %}
This feature also helps you comply with statutory or regulatory requirements related to your app’s content.
{% endhint %}

#### **Step 2: Define button placement layout**

* Select the layout for button placement and text on the consent screen to the left, centre or right.

#### **Step 3: Customize the content**

You can personalize the text that appears on your consent screen, including:

* Heading: The main title of the consent screen.
* Subtext: Additional information or disclaimers.
* Accept Button: The text for the button users click to proceed into the app.
* Exit Button: The text for the button users click to exit the app.

#### **Step 4: Add a background image**

You can choose a background image for your consent screen using the following options:

* Upload: Add your own custom image or enter a web link.&#x20;
* Design: Use advanced design tools to create a unique background.
* Library: Select an image from AppMySite’s extensive image library.

#### **Step 5: Style the theme**

Match the consent screen to your app’s branding by customizing the following:

* Button Colors: Adjust the primary and secondary button colors.
* Text Colors: Customize the colors of the text to align with your brand's design.

{% hint style="danger" %}
Clicking the accept button allows users to enter into the app. Clicking the exit button will close the app.&#x20;
{% endhint %}

Hit the **Save** button once you are done. Your app users will interact with the consent screen when they first launch it.   &#x20;

{% hint style="success" %}
Preview the design on the demo app or the [**Preview emulator.** ](/app/preview)
{% endhint %}


# Login

The **login feature** allows you to set up and manage user authentication for your app, whether it’s built using WordPress, Custom App, or Web to App solutions. This section provides comprehensive guides on configuring login functionality, enabling seamless access for your users.

Here, you'll find:

* **Step-by-step instructions** for adding login functionality to your app.
* **Troubleshooting solutions** for resolving common login issues.

{% embed url="<https://www.youtube.com/watch?v=DWc-osC11ek>" %}

Explore this section to ensure a smooth and secure login experience for your app users.


# Design login screen

### How to design the login screen?

Designing the native login screen on AppMySite can be divided broadly into three steps: designing the background, social login button and theme. Let’s take a look at designing your onboarding screens:

{% embed url="<https://scribehow.com/shared/Design_login_screen__2J1NxI-USUW8EmWZvfJ3Kg>" %}

#### Step 1: Navigate to login screen

* Navigate to [**Access < Login**](https://app.appmysite.com/app/login) from your app dashboard.&#x20;

#### Step 2: Set the layout

* Select the layout for the placement of elements on the login screen: top, centre or bottom

#### Step 3: Customise the background&#x20;

Expand the background section and click on Upload to set up a background image for your login screen. Customise your login screen using the following design options:

* Choose an image from the in-built image stock library by simply searching for it.
* Upload your own design by clicking on the “Upload” button. Click anywhere on the Upload media pop up to upload an image from your device. You can also drag and drop the image file.
* Use the link option to enter a web link to upload an image.
* Click on the “Create” button to design the login screen. You can design your login screen on a blank canvas using templates, uploads, photos, texts, and background images, all from scratch.&#x20;

{% hint style="warning" %}
Make sure the image file meets the required specifications.

* File format: PNG, JPG
* File size: 1242 x 2208 px
  {% endhint %}

#### Step 4: Customise button appearance

Customise the appearance of the social login button here. Choose the desired shape of your social login button.&#x20;

* Stack buttons: Display social login options vertically (one above the other) rather than horizontally (side by side).
* Button shape: Choose the desired shape for your social login buttons from circle, square, rectangle or squircle.

#### Step 5: Select the color theme

Follow the steps below to choose the color of the fields and buttons of the login, signup, and forgot password screens.

Primary Text Color

* Choose the primary color from the color panel.
* Alternatively, enter a hex code or RGB values to select a specific color.

Secondary Text Color

* Choose the secondary color from the color panel.
* Alternatively, enter a hex code or RGB values to select a specific color.

Button Background Color

* Choose a button background color from the color panel.
* Alternatively, enter a hex code or RGB values to select a specific color.

Button Text Color

* Choose a button text color from the color panel.
* Alternatively, enter a hex code or RGB values to select a specific color.

Click on **SAVE** when you’ve selected the color for your onboarding screens.&#x20;

{% hint style="success" %}
Preview the design on the demo app or the [**Preview emulator.** ](/app/preview)
{% endhint %}

{% content-ref url="/pages/3WKbCOc4JzzksI716ov1" %}
[Preview app](/app/preview/preview-app)
{% endcontent-ref %}


# Web-to-app login

### How can I add a login screen to my Web to App?

In a Web to App solution, the login screen is not built natively. Instead, it is rendered directly from your website. This means users will be interacting with the login screen as it appears on your mobile site. You can easily guide users to this screen by linking it to key navigational elements of your app.

**Option 1: Side menu**

You can add the login page URL from your website directly into the side (hamburger) menu of your app.

{% embed url="<https://scribehow.com/shared/Add_login_screen_in_the_side_menu__AgN9qaLKRsCPG-vrMNxhTA>" %}

* Navigate to the Menu settings from your app dashboard.
* Click + Add Item and choose **Web View** as the item type.
* Enter the title (e.g., "Login") and paste your login page URL.
* Save your changes to display this as a menu item in your app.

**Option 2: Bottom bar**

If you want to feature the login screen in the bottom navigation bar:

{% embed url="<https://scribehow.com/shared/Add_login_screen_on_the_bottom_bar__z383QfzDSoSCCdm63wKSuQ>" %}

* Navigate to the Bottom Bar settings.
* Add a new item and choose **Web View** as the type.
* Enter the title and your login page URL as above.
* Save the configuration.

{% hint style="warning" %}
Login screens in Web to App are not native—they are displayed directly from your website inside the app.
{% endhint %}

This approach allows users to access your website’s login screen seamlessly from within the app.

Follow these guides to set up your bottom bar and side menu:&#x20;

{% content-ref url="/pages/fZoG1nXTXBmJCXnXB0Mo" %}
[Web-to-app bottom bar](/app/navigation/bottom-bar/web-to-app-bottom-bar)
{% endcontent-ref %}

{% content-ref url="/pages/2wrSYeRTx3sNO5oourJu" %}
[Web to App menu](/app/navigation/menu/web-to-app-menu)
{% endcontent-ref %}


# Custom app login

### How to add a login screen to your Custom app?

Adding a login screen helps manage access to your app’s content and allows for a personalized experience. The login, sign-up, and forgot password screens form a key part of your user onboarding journey.

{% embed url="<https://scribehow.com/shared/WordPress_login__uUcSMI84ScqPwHQn5_0XQA>" %}

#### Step 1: Navigate to login settings

* Log in to your AppMySite account.
* Go to [**Access > Login** ](https://app.appmysite.com/app/login)from your app dashboard.

#### Step 2: Enable login and registration

* Turn the "Enable user login" toggle on. If disabled, the app will switch to Catalog Mode.

{% hint style="danger" %}
Disabling the login toggle will remove all purchase functionality from your app.. The "Add to cart" button and "Cart" icon will disappear from the app.
{% endhint %}

#### Step 3: Navigate to login settings

Click on the Settings button from top right of the screen. Use toggles to manage the settings of the login screen:

* Guest browsing: Allow users to browse the app without logging in. They can complete purchases without creating an account.
* Login with email: Allow users to log in using their email and password credentials.
* Login with Google: Enable Google login to let users sign up and log in using their Google accounts.
* Login with Apple: Enable Apple login for iOS users. Apple mandates this option if either Google or Facebook login is activated.
* Prompt login on app launch: Show the login screen each time the app is launched.&#x20;

{% hint style="warning" %}
If the "Prompt login on app launch" toggle is disabled, the user will see the home screen and will only be prompted to log in at checkout.
{% endhint %}

#### Step 5: Save changes

* Click the Save button to apply changes.

{% hint style="warning" %}
If you wish to enable Google and Apple login, you must configure your app builds to support social login.&#x20;
{% endhint %}

Follow these guides to configure social login in your app:

{% content-ref url="/pages/aW2SypMFRIweTjh0OS5Q" %}
[Social login configuration](/app/access/login/social-login-configuration)
{% endcontent-ref %}


# Prompt user login

### How to enable login prompt on app launch?

If you would like to prompt users to log in to your app as soon as it launches, you can enable the login prompt setting. This ensures that users must authenticate themselves every time they access the app.

{% hint style="warning" %}
This feature is available for apps built using the WordPress, WooCommerce, and Custom App product.&#x20;
{% endhint %}

{% embed url="<https://scribehow.com/shared/Enable_login_prompt_on_app_launch__UD3clDJyT6Ki_z99P8BcGw>" %}

* Navigate to the Login Settings:
  * Log in to your AppMySite account.
  * Go to [**Access > Login**](https://app.appmysite.com/app/login) in your dashboard.
* **Enable the Login Prompt**:
  * Click on the Settings icon at the top right of the Login screen.
  * Toggle on "Prompt login on app launch."

Click Save to apply changes.&#x20;

#### **What Happens When This Feature is Enabled?**

* Users will be prompted to:
  * Log in
  * Register
  * Browse as a guest
* If the toggle is disabled, users will be directed to the app home screen upon launch. They will only be asked to log in or register during specific actions, such as checkout.

{% hint style="warning" %}
This feature requires at least one login method to be enabled before the login prompt toggle becomes available.
{% endhint %}


# Apple login requirement

### Why is it mandatory to turn on Apple login if Google login is enabled?

When submitting your app to the Apple App Store, complying with Apple’s strict guidelines is crucial for approval. According to the App Store Review Guidelines, if your app offers third-party login options such as Google login, you must also provide Apple login as an alternative.

#### **Why is Apple login required?**

* Compliance with App Store Guidelines:
  * Apple mandates that apps offering third-party logins, like Google, must also include the option for users to log in using Sign in with Apple.
* Seamless Integration with Apple ID:
  * Apple login ensures a secure and streamlined authentication process by integrating directly with users’ Apple IDs.
  * It provides a privacy-focused login experience, allowing users to sign in without sharing unnecessary personal information.

#### **What happens if Apple login is not enabled?**

Failing to include Apple login when Google or other third-party login options are offered can lead to the following issues:

* App Review Rejection: Apple may reject your app during the review process.
* App Store Removal: Apps already live on the App Store may be removed for non-compliance.

{% hint style="warning" %}
Apple login is automatically enabled when you turn on the Google login toggle while configuring social logins for your app.
{% endhint %}

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

Configure social logins of your app using the guide below:&#x20;

{% content-ref url="/pages/aW2SypMFRIweTjh0OS5Q" %}
[Social login configuration](/app/access/login/social-login-configuration)
{% endcontent-ref %}


# Login settings

### How to configure login settings in your app?

Customize the login screen of your app to align with your brand’s theme and user experience preferences. Follow this guide to configure login settings for your app.

{% embed url="<https://scribehow.com/shared/Login_settings__Nm_Ztp46THCFG_fhgCqS0w>" %}

#### Step 1: Enable user login

* Navigate to **Login Settings** from your app dashboard.
* Enable login to allow users to sign in and access features that require authentication, such as adding products to the cart or commenting on posts.

{% hint style="danger" %}
Disabling the user login toggle will remove all purchase functionality from your app.. The "Add to cart" button and "Cart" icon will disappear from the app.
{% endhint %}

#### Step 2: Select layout

* Choose the preferred alignment of login elements from the available layout options.
* Preview the layout to ensure it matches your app’s branding and user experience.

{% hint style="success" %}
Different layouts can help optimize the user experience based on the app's design and structure.
{% endhint %}

#### Step 3: Customize the background

* Upload an image to set as the background of your login screen.
* Select a high-quality image that complements your app’s theme and branding.

{% hint style="success" %}
A visually appealing background can enhance the login experience and align with your brand identity.
{% endhint %}

#### Step 4: Configure social login options

Enhance user convenience by customizing the appearance of social login buttons.

**Stack buttons**

* Choose whether to display social login buttons vertically (one above the other) or horizontally (side by side).

{% hint style="success" %}
Stacking buttons vertically can improve readability, while horizontal alignment offers a more compact look.
{% endhint %}

**Button shape**

* If stacked buttons are enabled, select between:
  * Rectangle
  * Rectangle with rounded corners
* If stacked buttons are disabled, choose from the following four shapes:
  * Circle
  * Soft square
  * Soft rectangle
  * Rectangle with rounded corners

{% hint style="success" %}
Choosing a suitable button shape ensures visual consistency with your app’s design and branding.
{% endhint %}

#### Step 5: Customize the theme

Adjust colors to match your app’s overall look and feel.

Text colors

* Primary text color – Defines the main text color on the login screen.
* Secondary text color – Applies to secondary texts, such as labels and hints.

{% hint style="success" %}
Using contrasting text colors can improve readability and accessibility for users.
{% endhint %}

Button appearance

* Button background color – Sets the background color of login action buttons.
* Button text color – Determines the text color of the action buttons.

{% hint style="success" %}
Ensure that button text contrasts well with the background color to maintain visibility and accessibility.
{% endhint %}

#### Step 6: Save and preview

* Once all settings are configured, click Save to apply changes.
* Preview the login screen to ensure that the customizations reflect as intended.

By following these steps, you can create a visually appealing and user-friendly login screen that enhances your app’s onboarding experience.


# WordPress

The **WordPress Login** category provides all the resources you need to configure and manage your app's login functionality. This section is designed to help you create a seamless and secure login experience for your app users, including setting up standard and social login options.

Here’s what you’ll find in this category:

* **Login Setup Guides**: Step-by-step articles to help you configure the login functionality of your WordPress app, ensuring users can securely access your app.
* **Social Login Configuration**: Tutorials on integrating popular social login options like Google, Facebook, or Apple for a convenient and user-friendly login process.
* **Troubleshooting Login Issues**: Solutions to common login-related problems, such as credential errors, social login misconfigurations, and more.

{% embed url="<https://youtu.be/QU4xytCi6o4>" %}

Explore the **WordPress Login** category to configure a secure, efficient, and user-friendly login process for your app.


# WordPress login

### How to add a login screen to your WordPress app?

Adding a login screen helps manage access to your app’s content and allows for a personalized experience. The login, sign-up, and forgot password screens form a key part of your user onboarding journey.

{% embed url="<https://scribehow.com/shared/WordPress_login__uUcSMI84ScqPwHQn5_0XQA>" %}

#### Step 1: Navigate to login settings

* Log in to your AppMySite account.
* Go to [**Access > Login**](https://app.appmysite.com/app/login) from your app dashboard.

#### Step 2: Enable login and registration

* Turn the "Enable user login" toggle on. If disabled, the app will switch to Catalog Mode.

{% hint style="danger" %}
Disabling the user login toggle will remove all purchase functionality from your app.. The "Add to cart" button and "Cart" icon will also be removed from the app.&#x20;
{% endhint %}

#### Step 3: Navigate to login settings

Click on the Settings button from top right of the screen. Use toggles to manage the settings of the login screen:

* Guest browsing: Allow users to browse the app without logging in. They can complete purchases without creating an account.
* Login with email: Allow users to log in using their email and password credentials.
* Login with Google: Enable Google login to let users sign up and log in using their Google accounts.
* Login with Apple: Enable Apple login for iOS users. Apple mandates this option if either Google or Facebook login is activated.
* Prompt login on app launch: Show the login screen each time the app is launched.&#x20;

{% hint style="warning" %}
If the "Prompt login on app launch" toggle is disabled, the user will see the home screen and will only be prompted to log in at checkout.
{% endhint %}

#### Step 5: Save changes

* Click the Save button to apply changes.

{% hint style="warning" %}
If you wish to enable Google and Apple login, you must configure your app builds to support social login.&#x20;
{% endhint %}

Follow these guides to configure social login in your app:

{% content-ref url="/pages/6KX0ldLoHgfijcKzaFfq" %}
[Android build for social login](/app/access/login/social-login-configuration/android-build-for-social-login)
{% endcontent-ref %}

{% content-ref url="/pages/qCg91nNW1EwheUA9Vmkq" %}
[iOS build for social login](/app/access/login/social-login-configuration/ios-build-for-social-login)
{% endcontent-ref %}


# WordPress member login

### **How to use WordPress member login for app signup and login?**

Yes, AppMySite integrates seamlessly with the core **User module** of WordPress. This means:

* Users who register on your website can log in to your app and vice versa.
* Once users sign in to your app, they will remain logged in until they choose to log out.

Your users are required to log in only when they open the app for the first time or after they have signed out.&#x20;

{% hint style="warning" %}
Configure login settings of your app [using this guide](/app/access/login/wordpress/wordpress-login).
{% endhint %}


# WP Social login issue

### Why are my social logins not working?

AppMySite supports social logins via Google and Apple. If the social logins on your app are not working, ensure you have followed the steps below:&#x20;

* [**Configure your Android app and iOS app for social login**](/app/access/login/social-login-configuration) on Google Firebase.&#x20;
* Ensure you have enabled Google authentication as a Sign-in provider in your Firebase account.&#x20;

#### Steps to enable Google authentication

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

* [**Login to your Firebase account**](https://console.firebase.google.com/) and go to the relevant app project.&#x20;
* Navigate to the Authentication section from the sidebar.
* Click on the Sign-in method.
* Click on Add new provider.
* Select Google from the list of additional providers.
* In the popup menu, turn on the Enable toggle.
* Click Save to finalize the changes.

Follow the detailed guide to configure social login for your apps:&#x20;

{% content-ref url="/pages/aW2SypMFRIweTjh0OS5Q" %}
[Social login configuration](/app/access/login/social-login-configuration)
{% endcontent-ref %}

You can always contact[ our support team](https://app.appmysite.com/email-support) if you are experiencing issues.&#x20;


# User registration issue

### How to enable user registration for WooCommerce app?

If your users cannot register on the app, it is probably because user registration is disabled on your WooCommerce website.&#x20;

Follow the steps below to enable user registration on your WooCommerce website:

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

* Login to your WordPress backend.&#x20;
* From the sidebar, navigate to WooCommerce > Settings > Accounts & Privacy
* Select the following boxes next to Account creation:
  * Allow customers to create an account during checkout
  * Allow customers to create an account on the “My Account” page
* Scroll down and click on Save changes

Your app will now allow user registration.&#x20;

{% hint style="warning" %}
AppMySite supports WooCommerce's core features, including user login and registration. Customers can log in to the app or website interchangeably.
{% endhint %}


# Social login configuration

The **social login configuration** section provides step-by-step guides to help you enable social login options into your iOS and Android app builds. Enabling social logins allows users to sign in seamlessly using their preferred platforms, enhancing user experience and engagement.

{% embed url="<https://youtu.be/1bPK6CjZlzs>" %}

Explore this section to streamline user authentication and improve app accessibility with social login options.


# Android build for social login

### How to configure social login for the Android app build?

The social login feature is available for WordPress, WooCommerce and Custom app solutions, allowing app users to log in using Google. Follow these steps to configure your Android app build for social login:&#x20;

{% embed url="<https://scribehow.com/shared/Android_build_for_social_login__9mI_1FCqR0i9GSC28EyMnA>" %}

#### Step 1:  Access login build settings&#x20;

* From your app dashboard, navigate to [**Access < Login**](https://app.appmysite.com/app/login)**.**
* Click on the [**build settings button**](https://app.appmysite.com/app/login/build-settings) and enable the toggle for social logins.
* Click on the Generate button to create the SHA Key-1.

#### Step 2: Set up your Google Firebase

* Navigate to [**Google Firebase**](https://console.firebase.google.com/).&#x20;
* Generate the google-services.json file from Project Overview > Project Settings.&#x20;
* Under the General tab, go to the "Your Apps" section and click on your Android app.
* Download the google-services.json by clicking the "google-service.json" button.
* Upload the JSON file in the Google Firebase configuration field on the Build Settings screen in your AppMySite account.&#x20;
* Click on Save.&#x20;

Visit this link for a complete guide on how you can [create an app project on Firebase](/app/notifications/basic-notifications/create-firebase-project):

{% content-ref url="/pages/6SLKJlgk39WUqYLvDldm" %}
[Create Firebase project](/app/notifications/basic-notifications/create-firebase-project)
{% endcontent-ref %}

#### Step 3: Enable Sign-in provider on Firebase

Now, enable Google authentication as a Sign-in provider in your Firebase account:

* Navigate to the Authentication section from the sidebar.
* Click on the Sign-in method.
* Then, click on Add new provider.
* Select Google from the list of additional providers.
* In the popup menu, turn on the Enable toggle.
* Click Save to finalize the changes.

{% hint style="danger" %}
Google login will not function unless Google is selected as a provider in the **Sign-in Method** section of the authentication settings on your Firebase account.
{% endhint %}


# iOS build for social login

### How to configure social login for the iOS app build?

The social login feature is available for WordPress, WooCommerce and Custom app solutions, allowing app users to log in using Google and Apple. Follow these steps to configure your iOS app build for social login:&#x20;

{% embed url="<https://scribehow.com/shared/iOS_build_for_social_login__iMYLsvrRSYOwirSyLYRhpw>" %}

#### Step 1 : Access login build settings

* From your AppMySite app dashboard, navigate to [**Access < Login**](https://app.appmysite.com/app/login)**.**
* Click on the [**build settings button**](https://app.appmysite.com/app/login/build-settings) and enable the toggle for social logins

#### Step 2: Set up your Google Firebase

* Navigate to [**Google Firebase**. ](https://console.firebase.google.com/)
* Generate the google-services.json file from the Project Overview> Project Settings.
* Under the General tab, go to "Your Apps" section and click on your iOS app
* Download the GoogleServices-Info.plist from your Google Firebase account.
* Upload the .plist file in the Google Firebase configuration field.&#x20;
* Click on Save.&#x20;

Visit this link for a complete guide on creating a [Firebase app project](/app/notifications/basic-notifications/create-firebase-project):

{% content-ref url="/pages/6SLKJlgk39WUqYLvDldm" %}
[Create Firebase project](/app/notifications/basic-notifications/create-firebase-project)
{% endcontent-ref %}

#### Step 3: Enable Sign-in provider on Firebase

Now, enable Google authentication as a Sign-in provider in your Firebase account:

* Navigate to the Authentication section from the sidebar.
* Click on the Sign-in method.
* Then, click on Add new provider.
* Select Google from the list of additional providers.
* In the popup menu, turn on the Enable toggle.
* Click Save to finalize the changes.

{% hint style="danger" %}
Google login will not function unless Google is selected as a provider in the **Sign-in Method** section of the authentication settings on your Firebase account.
{% endhint %}


# Connectivity

Connectivity Overview

The Connectivity category provides comprehensive resources to help you establish and maintain a seamless connection between your website and app. This section includes guides and troubleshooting articles to ensure uninterrupted functionality and resolve common connectivity issues.

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

Here’s what you’ll find in this category:

* Setup Guides: Step-by-step instructions to establish connectivity between your app and website.
* Troubleshooting Common Issues: Solutions for addressing frequent connectivity challenges.
* Monitoring Connectivity: Tips and tools to monitor and ensure consistent performance between your app and website.

Explore this category to ensure a smooth and reliable connection between your website and app.


# WordPress connectivity

The WordPress category includes guides to help you connect your WordPress website with your app and keep the connection running smoothly. This section covers setup instructions, troubleshooting common issues, and monitoring connectivity to ensure your website content stays in sync with your app.

{% embed url="<https://www.youtube.com/watch?t=1s&v=8eevFEYR7rg>" %}


# WordPress to app connectivity

### How to connect your WordPress website to your app?

Connecting a website to an app is a two-step process. This involves installing the WordPress plugin and granting access. Read on for more details :

Watch this video to learn how to seamlessly connect your WordPress website to your mobile app, ensuring your content, products, pages and user experience stay in perfect sync:

#### Step 1: [Install the AppMySite plugin](/app/connectivity/wordpress-connectivity/install-wordpress-plugin)

Install the AppMySite plugin on your WordPress website to connect your website and app.&#x20;

{% hint style="danger" %}
Installing the plugin on your website is mandatory for both WordPress & WooCommerce apps.&#x20;
{% endhint %}

You can download the plugin from AppMySite’s official WordPress page or install the plugin directly on your website’s admin panel.&#x20;

{% embed url="<https://scribehow.com/shared/Install_WordPress_plugin__AfPFjxVlSlyA2sv1pJST3Q>" %}

**Option 1: Download the plugin from the AppMySite’s WordPress page**

* Login to your AppMySite account. Navigate to Connectivity > Install plugin.&#x20;
* Click on Download Plugin. This will redirect you to the official [**AppMySite WordPress plugin**](https://wordpress.org/plugins/appmysite/) page.
* Click on the Download button to download the plugin's zip file.
* Now login to your website’s admin panel. Navigate to Plugins > Add Plugin from side menu.
* Click on Upload Plugin and upload the plugin zip file from your device.
* Activate the AppMySite WordPress plugin to complete the process.

{% hint style="warning" %}
The AppMySite plugin is compatible with WordPress version 6.6 and higher.
{% endhint %}

**Option 2: Use the ‘Install plugin’ button**

* Login to your AppMySite account and navigate to your app. Go to [**Connectivity > Install plugin**](https://app.appmysite.com/app/connect/wp-plugin).&#x20;
* This will redirect you to the Plugin screen of your WordPress website.
* Click on "Install Now" to install the plugin. Activate the plugin to complete the process.

**Install and activate the plugin via your website’s admin panel**

* Log in to your website’s admin panel. Navigate to Plugins > Add Plugin.
* Search for “AppMySite” in the plugin search bar.
* Click on the Install Now button to install the plugin.
* Activate the plugin to complete the process.

**Verify**

Once you’ve installed the plugin, you can verify the plugin installation. Follow the steps below to complete the process:&#x20;

* From your app dashboard, navigate to Connectivity > Install Plugin.&#x20;
* Click on Verify.&#x20;

{% hint style="warning" %}
**Optional - Plugin key for better troubleshooting**

Copy and paste this key into your WordPress website admin portal.&#x20;
{% endhint %}

{% hint style="success" %}
Our WordPress plugin key helps you access in-depth troubleshooting capabilities for better connectivity between your website and app.&#x20;
{% endhint %}

#### Step 2: Grant access&#x20;

There are two ways to connect your WordPress website to your app: using a WordPress Application Password or using WooCommerce REST API keys. The WordPress Application Password method is recommended and works for all WordPress websites, including WooCommerce. The WooCommerce REST API method is applicable only to WooCommerce websites.

[**Connect with WordPress Application-Password support**](/app/connectivity/wordpress-connectivity/grant-access/wp-application-password)

WordPress Application Passwords enable website owners to generate a unique token to authorize a REST API request. Using Application Passwords, you can authorize third-party applications to make REST API requests from your website.&#x20;

You can connect your WordPress website with the app using Application Password support.&#x20;

{% hint style="warning" %}
To avoid connectivity issues, we recommend establishing connectivity using the WordPress Application Password.&#x20;
{% endhint %}

{% embed url="<https://scribehow.com/shared/WP_Application-Password__l1nh8vj5T2yeLYOLu9S04Q>" %}

The following points highlight how to connect your website and app with WordPress Application Passwords:

* Login to your WordPress website’s admin panel.&#x20;
* Navigate to Users >Profile from the side menu. Scroll down to the **Application Passwords** section.&#x20;
* Enter a name for your application password in the **New Application Password Name** field and click on Add New Application Password button.&#x20;
* Copy your admin account’s username and the newly generated application password.

{% hint style="warning" %}
To achieve connectivity between your website and app, it is mandatory that you have administrator access.&#x20;
{% endhint %}

Once you have the application password, return to your AppMySite account and navigate to [**Connectivity > Grant Acess**](https://app.appmysite.com/app/connect/wp-grant-access). Follow the steps below:

* Turn on the WordPress toggle on the Grant Access screen.&#x20;
* Paste your website’s administrator username and the application password generated earlier.&#x20;
* Click on Verify. If it is unsuccessful, visit the Troubleshooting screen to diagnose and fix your connectivity issues.&#x20;

Using an application password to connect your website and app is essential for enabling login and signup support for blog and CMS page website types, supporting custom post taxonomy, and more.&#x20;

{% hint style="warning" %}
Application Password support is available for the AppMySite WP plugin with code version 3.0.0 and higher. Update your AppMySite WP plugin to the latest version to use application password support.
{% endhint %}

[**Connect with WooCommerce REST API Keys**](/app/connectivity/wordpress-connectivity/grant-access/woocommerce-rest-api)

Generate WooCommerce REST API keys and submit them in the connectivity section of your app to connect your online store and app. However, it is recommended you establish connectivity using WordPress Application Passwords.&#x20;

Visit this guide to learn more:&#x20;

{% embed url="<https://scribehow.com/shared/Connect_with_WooCommerce_REST_API_Keys__g6ZapSW2RJKBXPCeq958Pw>" %}

* Login to the admin panel of your WordPress website.
* Navigate to WooCommerce > Settings from the side menu.
* Select the Advanced tab on the WooCommerce settings screen.
* Now, click on the REST API tab and then on the Add key button. Fill out the following details:
  * Description: Enter a friendly name for easy identification.
  * User: Select the administrator of the website.
  * Permission: Choose **Read/Write** from the drop-down menu.
* You will find the generated REST API keys. Copy the Consumer key and Consumer secret,  return them to your AppMySite account and paste them into the relevant fields.&#x20;
* Click Verify.

{% hint style="warning" %}
The WooCommerce plugin on your WordPress website must be updated to the latest version while generating REST API keys. You may not be able to achieve connectivity if an older version of the WooCommerce plugin is installed on your website.
{% endhint %}


# Install WordPress plugin

### How to install the WordPress plugin on your WordPress website?

Install the AppMySite plugin on your website’s admin panel to connect your website and app. You can download the plugin from AppMySite’s official WordPress page or install the plugin directly on your website’s admin panel.&#x20;

{% hint style="danger" %}
Installing the plugin on your website is mandatory for both WordPress & WooCommerce apps.&#x20;
{% endhint %}

Follow this visual guide to install the AppMySite plugin on your WordPress website:

{% embed url="<https://scribehow.com/shared/Install_WordPress_plugin__AfPFjxVlSlyA2sv1pJST3Q>" %}

Watch this video to learn how to install and activate the AppMySite plugin on your WordPress website to connect it with your mobile app:

{% embed url="<https://youtu.be/M9ashfoaTNQ>" %}

#### Option 1 : Download the plugin from AppMySite’s WordPress page

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

* Login to your AppMySite account. Navigate to [**Connectivity > Install plugin**](https://app.appmysite.com/app/connect/wp-plugin).&#x20;
* Click on Download Plugin. This will redirect you to the official [AppMySite WordPress plugin page](https://wordpress.org/plugins/appmysite/)
* Click on the Download button to download the plugin's zip file.
* Now login to your website’s admin panel. Navigate to Plugins > Add Plugin from side menu.
* Click on Upload Plugin and upload the plugin zip file from your device.
* Activate the AppMySite WordPress plugin to complete the process.

{% hint style="warning" %}
The AppMySite plugin is compatible with WordPress version 6.6 and higher.
{% endhint %}

#### Option 2: Use the ‘Install plugin’ option

You can use this option if you’re already logged in to your website’s admin panel. The following steps explain the process:

* Login to your AppMySite account. Navigate to [**Connectivity > Install plugin**](https://app.appmysite.com/app/connect/wp-plugin).&#x20;
* Click on the Install plugin. This will redirect you to Plugin screen of your WordPress website.
* Click on "Install Now" to install the plugin. Activate the plugin to complete the process.

#### Install and activate the plugin via your website’s admin panel

Follow these steps if you’re not logged in to your website’s backend.

* Log in to your website’s admin panel. Navigate to Plugins > Add Plugin.
* Search for “AppMySite” in the plugin search bar.
* Click on the Install Now button to install the plugin.
* Activate the plugin to complete the process.

{% hint style="success" %}
The WordPress plugin key will help access in-depth troubleshooting capabilities for better connectivity between your website and app.&#x20;
{% endhint %}

#### Verify

Once you’ve installed the plugin, you can verify the plugin installation. Follow the steps below to complete the process:

* From your AppMySite app dashboard, navigate to **Connectivity > Install Plugin**
* &#x20;Click on **Verify** to complete the process.

#### Enter Your License Key

* Once the verification is complete, click on the Generate button.
* Your Plugin license key will be generated. &#x20;
* Copy your unique license key and paste it on the Plugin dashboard in your WordPress admin panel. &#x20;

{% hint style="success" %}
The plugin license key unlocks advanced troubleshooting features for enhanced connectivity between your website and app.
{% endhint %}

<br>


# Grant access

The **Grant access** category provides resources to help you securely connect your WordPress or WooCommerce website with your app.&#x20;

This section includes guides on using WordPress Application Passwords or WooCommerce REST API keys to establish access, along with troubleshooting articles to resolve common authorization issues and ensure smooth data sync between your website and app.


# WP Application-Password

### How to connect with WordPress Application-Password support?

WordPress Application Passwords enable website owners to generate a unique token to authorize a REST API request. Use Application Passwords to authorize and grant access to third-party applications and make REST API requests from your website.&#x20;

{% embed url="<https://scribehow.com/shared/WP_Application-Password__l1nh8vj5T2yeLYOLu9S04Q>" %}

{% hint style="success" %}
We recommend establishing connectivity on AppMySite using the WordPress Application Password to ensure smooth connectivity between your app and website.
{% endhint %}

Learn the process of granting secure access to your WordPress website using an Application Password:

{% embed url="<https://www.youtube.com/watch?v=vxxCdI2XdxE>" %}

The following points highlight the steps to connect your website and app with WordPress Application Passwords.

* Login to your WordPress website’s admin panel as the administrator.&#x20;
* Make sure the AppMySite plugin is updated to version 3.0.0 or higher.&#x20;
* Navigate to Users > Profile from the side menu. Scroll down to the **Application Passwords** section.&#x20;
* Enter a name for your application password in the **New Application Password Name** field and click on Add New Application Password button.
* Copy your admin account’s username and the newly generated application password.

{% hint style="warning" %}
To achieve connectivity between your website and app, it is mandatory that you have administrator access.&#x20;
{% endhint %}

Once you have the application password, return to your AppMySite account and navigate to [**Connectivity > Grant Acess**](https://app.appmysite.com/app/connect/wp-grant-access).&#x20;

Next, follow the steps below to connect your website and app using the Application Password generated in the previous section:

* Turn on the WordPress toggle on the Grant Access screen.&#x20;
* Paste your website’s administrator username and the application password generated earlier.&#x20;
* Click on Verify. If it is unsuccessful, visit the Troubleshooting screen to diagnose and fix the connectivity issues you’re facing.&#x20;

{% hint style="danger" %}
Using an application password to connect your website and app is essential for enabling login and signup support for blog and CMS page website types, supporting custom post taxonomy, and more.
{% endhint %}

{% hint style="warning" %}
Application Password support is available for AppMySite plugins with code version 3.0.0 and higher. Update your AppMySite plugin to the latest version and use application password support to connect your website and app.
{% endhint %}


# WooCommerce REST API

### How to generate WooCommerce REST API keys?

You can generate WooCommerce REST API keys and submit them on AppMySite to connect your online store and app.&#x20;

{% embed url="<https://scribehow.com/shared/WooCommerce_REST_API__g6ZapSW2RJKBXPCeq958Pw>" %}

{% hint style="warning" %}
Establishing connectivity on using the WordPress Application Password is recommeded to ensure smooth connectivity between your app and website.
{% endhint %}

Watch this video to learn how to generate and use WooCommerce REST API keys to connect your online store with your mobile app:

{% embed url="<https://youtu.be/Z8ije_bC3-0>" %}

Follow the steps below to establish connectivity using WooCommerce REST API keys:&#x20;

* Login to the admin panel of your WordPress website.
* Click on WooCommerce and open Settings.
* Select the Advanced tab in the WooCommerce settings.
* Click on REST API. You will have to select the Add key button and fill out the following details:
  * Description: Enter a friendly name for easy identification.
  * User: Select the administrator of the website.
  * Permission: Select **Read/Write** from the drop-down menu.
  * Copy: Copy and paste the consumer key and secret from your website
  * &#x20;Submit: Enter the consumer key and secret in the relevant fields of your AppMySite's Connectivity section.
* Click on **Verify** once you have submitted the keys.&#x20;

{% hint style="danger" %}
Turn on the Force authentication toggle to send your Consumer Key and Secret in the URL. This is less secure and should only be used if HTTP Authorisation is turned off on your server.
{% endhint %}

{% hint style="warning" %}
The WooCommerce plugin on your WordPress website must be updated to the latest version while generating REST API keys. You may not be able to achieve connectivity if an older version of the WooCommerce plugin is installed on your website.
{% endhint %}


# Troubleshoot connectivity

### How to troubleshoot connectivity between your WordPress website and app?

If your app fails to connect to your website, it’s likely due to configuration or server-related issues. This guide outlines a step-by-step approach to help you identify and resolve the most common causes of connectivity failure.

Watch this guide to troubleshoot connectivity issues between your website and app:

{% embed url="<https://youtu.be/vFPW3KrG0Hk>" %}

Let’s begin by checking the most critical connection points between your app and website.

#### Step 1: Verify SSL certificate

Confirm that your website has a valid SSL certificate to ensure secure communication with AppMySite. To check if you a valid SSL certificate, follow these steps

* Visit a reliable SSL Checker website
* Enter your website domain
* Review the certificate status

**Expected outcome:**&#x20;

All indicators should appear green. There should be no amber or red warnings.

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

**Next steps:**

If all indicators don't appear green, it means your website needs a valid SSL certificate. Contact your hosting provider to install or renew your certificate.

**Step 2: Confirm plugin and website features**

Ensure that the WordPress REST API is accessible and functioning correctly, as it is essential for connecting your website with AppMySite. To verify, follow the steps below:

* Visit: <mark style="color:blue;"><https://yourwebsite.com/wp-json/></mark>

{% hint style="warning" %}
Simply replace yourwebsite.com with your actual domain.
{% endhint %}

**Expected outcome:**

A structured JSON file should load in the browser without any errors.

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

**Next steps:**

If you see an error or the page doesn’t load properly, continue with the next steps in this guide to further troubleshoot the issue.

**Step 2.1: Check for AppMySite’s plugin installation**

Verify that the AppMySite plugin is properly installed on your WordPress website. Follow these steps to check plugin activation:

* Visit: <mark style="color:blue;"><https://yourwebsite.com/wp-content/plugins/appmysite/readme.txt></mark>

{% hint style="warning" %}
Simply replace yourwebsite.com with your actual domain.
{% endhint %}

**Expected outcome:**

You should see a text file mentioning “AppMySite,” confirming that the plugin is installed.

<figure><img src="/files/4sJWTXcdUpKIdXL6NSi8" alt=""><figcaption></figcaption></figure>

**Next steps:**

If the file is missing or doesn't mention AppMySite, install the plugin from your WordPress admin panel before proceeding.

#### &#x20;**Step 2.2: Verify plugin’s endpoint accessibility**

Ensure that the AppMySite plugin can successfully communicate with your WordPress REST API. Follow these steps to check endpoint accessibility:&#x20;

* Visit: [<mark style="color:blue;">https://yourwebsite.com/wp-json/wc/v3/ams-menu-names</mark>](https://yourwebsite.com/wp-json/wc/v3/ams-menu-names)

{% hint style="warning" %}
Simply replace yourwebsite.com with your actual domain.
{% endhint %}

**Expected outcome:**

A JSON response should load without any errors, indicating the endpoint is accessible.

**Next steps:**

If the endpoint does not return a valid response, continue with the troubleshooting process.

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

**Step 2.3: Install and run Health Check plugin**

Identify potential plugin or theme conflicts that could disrupt connectivity. Watch this tutorial to identify plugin/them conflict:

{% embed url="<https://scribehow.com/shared/How_To_Install_and_Activate_a_New_Plugin__QEpLfJ-OQX-2OuwvnZUQkw>" %}

* Go to Plugins → Add New Plugin in your WordPress admin panel.
* Search for and install the **Health Check & Troubleshooting** plugin.
* Once installed, go to Plugins → Installed Plugins and click Health Check under the plugin name.
* On the Health Check Dashboard, review issues and recommendations.

**Expected outcome:**

The Site Health Status should not report any critical issues that may affect API or plugin connectivity.

**Next steps:**

Watch this tutorial to resolve issues if detected:

{% embed url="<https://scribehow.com/shared/Enable_WooCommerce_Checkout_Field_Editor_in_AppMySite__B_43hzVXSbGHZbzmF4IyAA>" %}

* Navigate to the Troubleshooting tab in the Health Check plugin.
* From the Plugins screen, enable only AppMySite and WooCommerce plugins (if installed). Click Enable while troubleshooting.
* Check whether connectivity between your app and website is restored in the connectivity section of your AppMySite app.

{% hint style="success" %}
**How Troubleshooting Mode works**\
Troubleshooting Mode isolates your admin experience, simulating a clean WordPress install. It only affects your session—your visitors will continue to see your normal site. You can selectively enable plugins and themes to identify conflicts.
{% endhint %}

{% hint style="danger" %}
Once testing is complete, **exit Troubleshooting Mode** from the Health Check Dashboard to return your site to normal operation.
{% endhint %}

**Step 3: Check permalink settings**

Ensure your website’s permalink structure is compatible with AppMySite's connectivity requirements. Watch this tutorial to check permalink settings:

{% embed url="<https://scribehow.com/shared/How_To_Change_Permalink_Structure_In_WordPress__mM_HX8r-RhaoqZnEkOLObw>" %}

* Log in to your WordPress admin panel.
* Navigate to **Settings → Permalinks**.
* Verify that one of the following permalink structure is selected:
  * Day and name
  * Month and name
  * Numeric
  * Post name

**Expected outcome:**

A supported permalink structure should be active, ensuring proper API endpoint formatting.

**Next steps:**

If a different option is selected:

* Change to any of the supported options listed above.
* Click Save Changes.
* Retry connectivity from AppMySite.

**Step 3.1: Check for plugin conflicts**

Identify any installed plugins that may block or interfere with AppMySite’s connectivity. Follow these steps to check plugin conflicts:

* Log in to your WordPress admin panel.
* Go to Plugins → Installed Plugins.
* Review your active and inactive plugins.
* Cross-check them against this list of plugins known to potentially block API communication or cause conflicts:
  * **Security Plugins**:\
    WordFence Security, iThemes Security, Sucuri Security, WP Cerber Security, All In One WP Security, MalCare Security, FortiGuard Intrusion Prevention, BulletProof Security, Shield Security, Defender Security by WPMU DEV, Hide My WP Ghost, NinjaFirewall (WP Edition), SecuPress Pro, Sitelock Security
  * **Caching/Performance Plugins**:\
    W3 Total Cache, WP Super Cache, LiteSpeed Cache, WP Rocket, Super Page Cache for Cloudflare, Autoptimize, Cache Enabler, Hyper Cache, Swift Performance, Breeze Cache, Hummingbird
  * **GeoIP/Blocking Plugins**:\
    IP2Location Country Blocker, WP GeoIP Redirect Rules, Currency Countries (by IP)
  * **REST/API/Auth Plugins**:\
    Orange Mini REST API Authentication, WordPress REST API Authentication, JWT Auth, API Bearer Auth
  * **WooCommerce & Checkout Plugins**:\
    WooCommerce Memberships, Profile Builder Pro, Force Authentication Before Checkout, Age Gate, Booked, Order Min/Max for WooCommerce, WooCommerce Product Bundles, After Sale Surveys
  * **GDPR & Consent Plugins**:\
    Cookie Information
  * **Translation/Search/UI Plugins**:\
    TranslatePress, Neve Pro Addon, Ajax Search, Query Monitor, WPML, Relevanssi, Ivory Search, SearchWP, FacetWP
  * **Membership & Role Management Plugins**:\
    Ultimate Member, User Role Editor, Restrict Content Pro, MemberPress
  * **Backup & Migration Plugins**:\
    UpdraftPlus, Duplicator Pro, BackupBuddy, WP Migrate DB Pro
  * **Marketing & Builder Plugins**:\
    Ad Inserter, Popup Builder, OptinMonster, Elementor, Beaver Builder
  * **SEO Plugins**:\
    Rank Math SEO, Yoast SEO

**Expected outcome:**

No conflicting plugins from the list should be installed or active.

**Next steps:**

If any plugin from the list is found:

* Refer to **Step 2.3**: Install and Run Health Check Plugin to activate Troubleshooting Mode.
* Enable only AppMySite and WooCommerce plugins to test compatibility.
* If the issue is resolved in troubleshooting mode, disable the conflicting plugin or find an alternative.

**Step 4: Hosting, security, and firewall settings**

Ensure that your website’s hosting environment and firewall settings do not block AppMySite’s connection requests. Steps to follow:

Whitelist AppMySite’s IP addresses in the following systems:

* DNS firewall (e.g., Cloudflare or other CDN-level security systems)
* Network firewall (configured at the hosting or server level)
* Server firewall (for dedicated or VPS-hosted environments)
* Plugin firewall (enabled through security, bot-checking, or captcha plugins)

Each of these layers can potentially block the REST API calls AppMySite uses to connect with your site.

**Expected outcome:**

AppMySite’s requests are not blocked at any firewall level, and connections to your website are successfully established.

**Next steps:**

If your website is behind a firewall, CDN, or has active security measures, request support from your hosting provider or IT team to apply the IP allowlist or follow this guide:

{% content-ref url="/pages/4vC5j81PmlJZizR4BTaJ" %}
[Whitelist IP Addresses](/app/connectivity/wordpress-connectivity/whitelist-ip-addresses)
{% endcontent-ref %}

**Still having connectivity issues? Contact us**

If the steps mentioned here don’t resolve your connectivity issues, you can always [raise a ticket](https://app.appmysite.com/email-support) and communicate directly with our customer support team.


# Configure Solid Security

### How to configure the Solid security plugin to establish connectivity with AppMySite?

If you’re using the [**Solid security plugin**](https://wordpress.org/plugins/better-wp-security/) on your websit&#x65;**,** you may be unable to establish connectivity between your website and app. This is because the Solid security plugin provides restricted access to WordPress REST APIs.&#x20;

{% embed url="<https://scribehow.com/shared/Configure_iThemes__LqFms0lKR5O3N64E_Wt0Rg>" %}

The following steps show how you can configure Solid security to establish connectivity with AppMySite:

* Login to your WordPress website’s admin panel.&#x20;
* Go to Security from the left side menu and select Settings.&#x20;
* On the Settings screen, search for WordPress Tweaks in the search bar.&#x20;
* Navigate to API Access. Under the REST API section, select Default Access.&#x20;
* Click on Save on the bottom right of the page.&#x20;

{% embed url="<https://www.youtube.com/watch?v=ByJvQNG_Ow8>" %}

{% hint style="warning" %}
Try connecting your website and app again after configuring the default access of Solid security settings on your website.&#x20;
{% endhint %}

Follow these guides to establish connectivity between your website and app again:&#x20;

{% content-ref url="/pages/dr6tJxNztfk85oMQPcL7" %}
[Connectivity](/app/connectivity)
{% endcontent-ref %}


# Whitelist IP Addresses

## What IP Addresses should I whitelist to ensure connectivity?

To ensure seamless communication between your WordPress website and  AppMySite, it is essential to whitelist specific IP addresses. This is particularly important for features like app connectivity, data synchronization, and real-time updates.

{% embed url="<https://www.youtube.com/watch?v=nXfOUcwd15k>" %}

#### **List of IP Addresses to Whitelist**

Please whitelist the following IP addresses in your hosting or firewall settings:

* 100.27.107.244
* 209.59.176.92
* 52.7.84.233
* 52.26.54.28
* 13.203.124.23
* 47.130.82.232
* 54.95.161.188
* 3.66.161.152
* 13.41.107.152

#### **How to whitelist these IP addresses**

The process may vary depending on your hosting provider or firewall configuration. Follow these guides based on the firewall installed on your website:

* For CloudFlare Hosting:&#x20;

{% content-ref url="/pages/6eXcUuVUdLGqDAvwk9VQ" %}
[Whitelist in CloudFlare](/app/connectivity/wordpress-connectivity/whitelist-ip-addresses/whitelist-in-cloudflare)
{% endcontent-ref %}

* For All In One WP Security&#x20;

{% content-ref url="/pages/UMD8nzqL7AHuOmz11Okf" %}
[Whitelist in All In One WP Security](/app/connectivity/wordpress-connectivity/whitelist-ip-addresses/whitelist-in-all-in-one-wp-security)
{% endcontent-ref %}

* For Wordfence:

{% content-ref url="/pages/1EYtzporrSdHsrgWZyi3" %}
[Whitelist in Wordfence](/app/connectivity/wordpress-connectivity/whitelist-ip-addresses/whitelist-in-wordfence)
{% endcontent-ref %}

* For Solid Security:&#x20;

{% content-ref url="/pages/TICPPTOsQwUaCwBqlqXG" %}
[Whitelist in Solid Security](/app/connectivity/wordpress-connectivity/whitelist-ip-addresses/whitelist-in-solid-security)
{% endcontent-ref %}

* For Jetpack:

{% content-ref url="/pages/NwoQvGFnRPAdpTngG9sC" %}
[Whitelist in Jetpack](/app/connectivity/wordpress-connectivity/whitelist-ip-addresses/whitelist-in-jetpack)
{% endcontent-ref %}

{% hint style="warning" %}

#### **Key points to note**

* Ensure all IP addresses are added to avoid connectivity issues.
* Consult your hosting provider’s support team if you are unsure how to whitelist IP addresses.
* [Troubleshoot the connectivity ](https://app.appmysite.com/app/connectivity/troubleshoot)status of your app after whitelisting these IPs.
  {% endhint %}

By whitelisting the specified IP addresses, you can ensure uninterrupted functionality and secure communication between your website and app.


# Whitelist in CloudFlare

### How to whitelist AppMySite in your CloudFlare firewall?

Using Cloudflare to optimize your website along with the Firewall addon may block the connection between your website and AppMySite.

To allow your website to connect with AppMySite, whitelist AppMySite within your Cloudflare account.

#### Steps to add an IP Access Rule

Follow the steps listed below to create an IP Access Rule.

* Log in to your Cloudflare account.
* Select your domain.
* Click the Firewall app.
* Go to the Tools tab.
* Under **IP Access Rules**, enter the following details:
  * **Rule Name**: Provide a name for this rule to identify it easily.
  * **When Incoming Requests Match…**: Specify the conditions for incoming requests that should trigger this rule:
    * **Field**: Select **IP Address** from the dropdown.
    * **Operator**: Choose the **equals** operator.
    * **Value**: Enter the IP address as per the guide provided below.

{% content-ref url="/pages/4vC5j81PmlJZizR4BTaJ" %}
[Whitelist IP Addresses](/app/connectivity/wordpress-connectivity/whitelist-ip-addresses)
{% endcontent-ref %}

* **Choose an Action**
  * Select the **Bypass** option from the dropdown.
* **Choose a Feature**
  * User Agent Block
  * Browser Integrity Check
  * Hotlink Protection
  * Security Level
  * Rate Limiting
  * Zone Lockdown
  * WAF Managed Rules

By following these steps, you ensure that your website can successfully connect with AppMySite, enabling you to build your mobile app without interruptions.

Click[ here](https://support.cloudflare.com/hc/en-us/articles/217074967-Configuring-IP-Access-Rules) to explore the Cloudflare documentation for further details.


# Whitelist in All In One WP Security

### How to whitelist AppMySite in All-In-One Security (AIOS)?

To whitelist AppMySite IP address on your website, if you are using the All-In-One Security plugin, you can follow the steps below:&#x20;

* Log into your WordPress admin panel.
* Go to the “WP Security” or “All In One WP Security” menu on the left-hand side in the WordPress dashboard.
* Click on “Firewall” in the menu. This section contains various firewall-related settings, including options for whitelisting IP addresses.
* Find the “Whitelist IP Addresses” section, under “Firewall Rules” or a similar sub-section.
* Follow the guide below for IP values:

{% content-ref url="/pages/4vC5j81PmlJZizR4BTaJ" %}
[Whitelist IP Addresses](/app/connectivity/wordpress-connectivity/whitelist-ip-addresses)
{% endcontent-ref %}

* Click “Save Settings” or “Save Changes” to apply the whitelist.

This will help establish connections between your website and your app.


# Whitelist in Wordfence

### How to whitelist AppMySite in Wordfence firewall?

To whitelist the AppMySite IP address in WordPress, you can follow the steps below:

* Log into your WordPress admin panel.
* On your WordPress dashboard, go to the “Wordfence” menu on the left-hand side.
* Under the Wordfence menu, click on “Firewall.” This section handles various security settings, including IP whitelisting.
* Click on the gear icon to open the global and advanced firewall options.&#x20;
* In the “Whitelisted IP addresses that bypass all rules” field, enter the IP address.
* Follow the guide below for IP values:

{% content-ref url="/pages/4vC5j81PmlJZizR4BTaJ" %}
[Whitelist IP Addresses](/app/connectivity/wordpress-connectivity/whitelist-ip-addresses)
{% endcontent-ref %}

* After entering the IP address, click “Save Changes” to apply the whitelist.

Your website can successfully establish connectivity with AppMySite by following this guide.


# Whitelist in Solid Security

### How to whitelist AppMySite in Solid Security?

If you are unable to establish connectivity between your website and app because of the Solid security plugin, follow these steps to whitelist the AppMySite IP address:&#x20;

* Log into your WordPress admin panel.
* In the WordPress dashboard, go to the “Security”< “Settings” menu on the left-hand side.
* On the iThemes Security page, find the Global Settings module and click on the “Configure Settings” button.
* &#x20;Scroll down to find the “Lockout Whitelist” section.&#x20;
* Submit the IP address. Follow the guide below for IP values:

{% content-ref url="/pages/4vC5j81PmlJZizR4BTaJ" %}
[Whitelist IP Addresses](/app/connectivity/wordpress-connectivity/whitelist-ip-addresses)
{% endcontent-ref %}

After entering the IP address, click “Save Settings” to apply the whitelist.


# Whitelist in Jetpack

### How to whitelist AppMySite in Jetpack?

If you are using Jetpack's security features, such as Protect, you may need to whitelist AppMySite IP using your hosting provider or other security setting. This may be required to establish connectivity between your website and app.&#x20;

* Log into your WordPress admin panel.
* Go to the “Jetpack” menu on the left-hand side of the WordPress dashboard.
* Look for any settings related to “Security” or “Protect.”
* Find the section where you can whitelist IPs or manage security settings. This may also involve adjusting settings with their web host or firewall provider if Jetpack defers security management.
* Follow the guide below for IP values:

{% content-ref url="/pages/4vC5j81PmlJZizR4BTaJ" %}
[Whitelist IP Addresses](/app/connectivity/wordpress-connectivity/whitelist-ip-addresses)
{% endcontent-ref %}


# Website-to-app sync

### Does AppMySite support plugins and website functionality?

#### **1. WordPress & WooCommerce**

AppMySite is designed to integrate seamlessly with the core functionality of **WordPress** and **WooCommerce** websites. However, plugin compatibility may vary based on their support for the official **WordPress REST APIs**:

* **Plugins Supporting REST APIs**:
  * Plugins integrated with the official WordPress REST APIs are more likely to function smoothly within your app.
  * These plugins can interact effectively with the app's infrastructure, ensuring seamless operation.
* **Plugins Without REST API Support**:
  * If a plugin does not support the REST APIs, your app may face limitations in functionality.
  * For example, custom functionalities or plugins that rely on non-standard APIs might require additional adjustments.
* **WooCommerce Optimization**:
  * The WooCommerce to App model is optimized to work with most plugins and content forms found on WooCommerce websites.
  * While core WooCommerce functionality is fully supported, certain third-party plugins may require testing to confirm compatibility.

{% hint style="success" %}
Use advanced web-view to support features that are not natively supported, while offering a completely professional app experience to your users.&#x20;
{% endhint %}

Follow this guide to use web-view for WordPress:

{% content-ref url="/pages/hsD4f343cpsg5oxjnRCO" %}
[Web-view for WordPress](/app/web-view/web-view-for-wordpress)
{% endcontent-ref %}

**2. Web to App**

With the **Web to App** solution, your app will support all functionalities present on your website by leveraging advanced web views. This means your app can render your website exactly as it appears on a browser, ensuring compatibility with most plugins and features.

* **Advanced Web-View Features**:
  * The web view technology provided by **Google** and **Apple** powers this solution, ensuring a professional and responsive app experience.
  * Your app will offer a complete native-like experience to users, regardless of the complexity of your website’s functionality.

Follow the guide to learn more about the advanced web-view settings:

{% content-ref url="/pages/sgZw0r2MP57mpnx7mrqD" %}
[Advanced web-view settings](/app/web-view/advanced-web-view-settings)
{% endcontent-ref %}

* **Considerations for Compatibility**:
  * While the Web to App solution supports your website’s full functionality, certain features may behave differently depending on how they interact with websites.
  * Testing is recommended to ensure all functionality meets your requirements.

{% hint style="warning" %}
It is important to note that the web view in the app is controlled by the technical infrastructure provided by Google and Apple.&#x20;
{% endhint %}


# Shopify connectivity

The Shopify category includes guides to help you connect your Shopify store with your app. This section covers setup steps, troubleshooting tips, and best practices to ensure your store and app stay fully synced and work smoothly together.

{% embed url="<https://www.youtube.com/watch?v=n-EADFkHOUg>" %}


# Connect to Shopify

#### How to connect your Shopify store to AppMySite?

You can connect your Shopify store to AppMySite to sync your website content with your app. Follow the steps below to complete the connection.

{% embed url="<https://scribehow.com/viewer/Connect_to_Shopify_Store__AqR3tR1QT72qskobgWFmGg>" %}

#### Steps to follow

**Step 1: Open the Shopify connection page**

* From the side menu, go to Connectivity.
* Click [**Connect to Shopify**.](https://app.appmysite.com/app/connect/shopify)

**Step 3: Review the Shopify web address**

* Your Shopify web address will appear in the Shopify web address field.
* Use the edit icon if you need to change the entered URL.

{% hint style="danger" %}
Make sure you enter the .myshopify.com domain that was automatically assigned when you signed up on Shopify.
{% endhint %}

**Step 4: Find your Shopify web address**

* Log in to your Shopify admin.
* Click Settings on the bottom left of the screen.

**Step 5: Open Domains**

* Click Domains from the side menu.

**Step 6: Copy the correct domain**

* Copy the default Shopify web address, not the primary domain.

**Step 7: Verify the connection**

* Paste the Shopify web address in AppMySite Connectivity Dashboard.
* Click **Verify**.

**Step 8: Install the AppMySite Shopify app**

* Clicking Verify will open a new screen in your Shopify admin.
* You’ll be prompted to install the AppMySite Shopify app.
* Click **Install** to proceed.

**Step 9: Confirm the connection**

* Return to your AppMySite connectivity dashboard.
* Your Shopify website and app will now be connected automatically.

Once connected, your Shopify store and app will stay in complete sync. All data and updates made on your Shopify store will reflect in the app in real time.


# Monitor connectivity

### How to track the connectivity errors?

The monitor feature allows you to schedule and check connectivity between your website and app. You can schedule these checks on a weekly or monthly basis.

{% embed url="<https://scribehow.com/shared/How_to_track_connectivity__dNldpWLHQ4-iFlxAT-jqHw>" %}

Here’s how the process works:

* Navigate to [**Connectivity > Monitor**](https://app.appmysite.com/app/connect/monitor) in your AppMySite account.
* Turn on the Monitor connectivity toggle.
* From the Frequency dropdown, select whether you’d like to schedule connectivity checks weekly or monthly.
* If you select Weekly, select a week during which you’d like to run the troubleshooter from the Day dropdown.
* If you select Monthly, choose a date in the month when you’d like to run the troubleshooter from the Day dropdown.
* Click on Save.

{% hint style="warning" %}
Please tick the box for “Email me if connectivity fails” if you would like to be notified via email about connectivity issues.
{% endhint %}

Visit these guides to ensure smooth connectivity between your website and app:&#x20;

{% content-ref url="/pages/dr6tJxNztfk85oMQPcL7" %}
[Connectivity](/app/connectivity)
{% endcontent-ref %}


# Navigation

Navigation Overview

The **Navigation** category provides resources to help you configure and manage the navigational elements of your app. This section focuses on creating an intuitive user experience by guiding you through the setup of **bottom navigation** and **side menus** while also offering solutions to common issues.

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

Here’s what you’ll find in this category:

* [**B**ottom Navigation Setup](/app/navigation/bottom-bar): Step-by-step guides to configure and customize the bottom navigation bar, including adding and managing items, icons, and layouts.
* [Side Menu Configuration](/app/navigation/menu): Tutorials on creating and personalizing side menus to enhance app navigation and accessibility.
* Troubleshooting Navigation Issues: Solutions to common problems related to navigation elements, ensuring a smooth and seamless user experience.

{% embed url="<https://www.youtube.com/watch?v=1bPK6CjZlzs>" %}

Explore the Navigation category to optimize your app’s structure and provide users with a streamlined and efficient way to navigate your app.


# Home Screen

The **home screen setup** section provides guides to help you design and customize the main interface of your app. A well-structured home screen enhances user experience by ensuring easy navigation and engagement.

Here, you'll find:

* Step-by-step instructions for setting up and customizing your home screen.
* Guides on adding and managing sections like banners, categories, and featured content.

{% embed url="<https://www.youtube.com/watch?v=B6K7WqI_cec>" %}

Explore this section to build a functional and engaging home screen that aligns with your app’s purpose and branding.


# Homescreen

The homescreen is the first screen you see when you open your app. You can design and customize it to display products, blogs, categories, banners, and more from your WordPress website.

#### Steps to follow

**Step 1: Navigate to the homescreen**

* Log in to your AppMySite account.
* From the app dashboard, go to [**Appearance > Homescreen**](https://app.appmysite.com/app/home).

**Step 2: Configure home header and section colors**

* Home header - The home header will displayed will appear consistently across the app header.
  * Add a header title.
  * Enable product search in header&#x20;
  * Enable post search in header.

{% hint style="warning" %}
You can enable either product search or post search in the home header.
{% endhint %}

* Section colors: The section colors will apply to all sections on the homescreen.&#x20;
  * Background color
  * Heading color
  * Icon background color
  * Icon arrow color

**Step 3: Design or upload the homescreen banner**

Design a banner or upload a predesigned image to highlight promotions or featured content. Elements you can configure include:

* Select banner image or solid image
* Add banner text that will be displayed on the banner&#x20;
* Select the font style&#x20;
* Select the font size
* Select the color of the banner text
* Align the banner text to left, right or center

**Step 4: Display and manage WooCommerce products and categories**

* Product categories – Showcase categories from your WordPress site. Elements you can configure include:
  * Columns: Set up the number of coloumns. The number of columns you select will decide the appearance of the category tiles on the homescreen.&#x20;
  * Category image: Import category image from the website or style with an attractive color.&#x20;

{% hint style="warning" %}
Product categories will only show images if you’ve added them on your WordPress website.
{% endhint %}

* Show product category name:  Use the toggle to show or hide product category names.
* Shapes: Select the shape of the category tiles&#x20;
* Text color: Select the color of the category name text color
* Show categories: Select whether you would like to show the parent category, the most populated category or select from list imported from your website.&#x20;
* Sort categories by: Sort catgories by most populated or in alphabetical strings
* New products – Highlights all latest products added to your WordPress website.
* Featured products – Displays products marked as featured on your website.

{% hint style="success" %}
Read this article to learn how to mark products as featured: [**Mark products featured**](https://docs.appmysite.com/app/navigation/home-screen/mark-products-featured)
{% endhint %}

* Recently viewed products – Shows products users have recently browsed in the app.
* Sale products – Displays products available at discounted prices.

**Step 5: Add and manage blog content**

* Blog banner – Enable the blog banner to showcase popular blogs from your website in a carousel format. Popular blogs are those marked as sticky on your WordPress website.

{% hint style="success" %}
Read this article to learn how to make blogs sticky: [**Mark blogs sticky**](https://docs.appmysite.com/app/navigation/home-screen/mark-blogs-sticky)
{% endhint %}

* Blog categories: Display blog categories from your WordPress site. Elements you can configure include:
  * Columns: Set the number of columns. The number of columns you select will decide the appearance of the category tiles on the homescreen.&#x20;
  * Shapes: Choose the shape of the category tiles.
  * Background color: Select the background color of the category tiles.&#x20;
  * Text color: Choose the color for category name text.
  * Show categories: Show the parent category, the most populated categories, or select from a list imported from your site.
  * Sort categories by: Sort by most populated or alphabetically.
* Popular blogs – Show blogs marked as sticky or spotlighted on your WordPress website.
* Recent blogs – Highlights the latest blog posts from your site.
* Web view – Embed a webpage directly into your homescreen by entering the desired web address.&#x20;

{% hint style="danger" %}
If your web view does not appear as expected in the app, we recommend turning off all other features on the Home Screen for a better browsing experience.
{% endhint %}

* Cart – Add a cart section for quick checkout access.
* Pages – Add pages from your WordPress site using the "Select Pages" setting.

**Step 6: Preview changes**

* As you add or edit sections, use the device preview to see how your homescreen looks on iOS and Android.

**Step 7: Save your homescreen**

* Click Save to apply changes.
* Preview your homescreen using this [**guide**](/app/preview/preview-app).

{% hint style="success" %}
You can reorder sections by dragging and dropping them to control the flow of content on your homescreen.
{% endhint %}


# Design main banner

### How to design the main banner for your app’s home screen?

Creating a visually appealing main banner is essential for your app’s home screen. If you’re using the WordPress solution, follow these steps to design the main banner:

{% embed url="<https://scribehow.com/shared/Design_main_banner__gkTEsWdlTPKKJq22Lsi4VA>" %}

#### **Step 1: Log in to AppMySite**

* Log in to your AppMySite account.
* Navigate to your app Dashboard > [**Navigation > Home Header**](https://app.appmysite.com/app/home) to access the main banner settings.

#### Step 2: Select a banner image

* Click on the field under Select Image Banner.
* Search the image library to find relevant images.
* Click on the image you like and select DONE to use it as your banner.
* To upload your own image:
  * Click the Upload button
  * Drag and drop an image or click the window to upload it from your device.
  * Once uploaded, click DONE to save your image.

{% hint style="warning" %}
Recommended specifications:

* File format: PNG, JPG
* File size: 1125 x 480 px
  {% endhint %}

#### **Step 2.1:** Select a solid color for the banner

* Open the color panel under Select Solid Color.
* Choose a color for the banner or enter a hex code or RGB values for precise selection.

#### **Step 3: Add and customize banner text**

* Click on the Banner Text field to enter text

{% hint style="warning" %}
Maximum character limit: 15 characters
{% endhint %}

* Customize the text with:
  * Font: Select a font from the dropdown menu.
  * Font Size: Choose the size of your text.
  * Text Color: Pick a color or enter a hex code or RGB values.
* Align the text using the Align buttons (left, centre, or right).

#### **Step 4: Save your design**

Click Save to apply the changes.


# Mark blogs sticky

### How to mark your WordPress blogs sticky?

To showcase a blog on the dashboard of your mobile application, you must mark it as “Sticky” from the backend of your WordPress website. Here are the steps you can follow to mark a blog sticky:

{% embed url="<https://scribehow.com/shared/Mark_blogs_sticky__Ir1MdOjTQPKlozYb7d7M2Q>" %}

#### Option 1: Use the Edit option

* Login to the backend of your WordPress website and navigate to **Posts > All Posts** from the side menu.&#x20;
* Select the blog that you’d like to mark sticky.
* Click on “Edit” under the blog’s name to access the post's backend.
* On the right, you’ll find a section called Status & visibility.
* Click to check the box against “Stick to the top of the blog”
* Finally, click on “Update” to save settings.

#### Option 2: Use the ‘Quick Edit’ option

Here is an alternate way to mark a blog sticky.

* Login to the backend of your WordPress website and navigate to the Posts > All Posts.
* Click “Quick Edit” under the blog you wish to mark as sticky.
* Click to check the box against “Make this post sticky".
* Finally, click on “Update” to save settings.

{% hint style="danger" %}
The blogs marked as **sticky** on your WordPress website will appear in the **Popular** section of your app's home screen. If no blogs are marked as sticky, the Popular section will remain empty, even if it is enabled.&#x20;
{% endhint %}


# Mark products featured

### How to show a featured product on my WooCommerce app?

To display a product on your app's home screen under the Featured products category, you must mark it as “Featured” from the backend of your WordPress website. Here are the steps to mark a product featured on WordPress websites:&#x20;

{% embed url="<https://scribehow.com/shared/Mark_products_featured__biOv12sPSGCFiD1DLe-jgg>" %}

* Login to the backend of your WordPress website and navigate to Products > All Products from the side menu
* Select the product that you’d like to mark featured.
* Click on “Quick Edit” under the product you wish to mark as featured.
* Check the “Featured" box.
* Finally, click on “Update” to save settings.

{% hint style="danger" %}
The blogs marked as **featured** on your WordPress website will appear in the **Featured** section of your app's home screen. If no blogs are marked as featured, the Featured section will remain empty, even if it is enabled.&#x20;
{% endhint %}


# Bottom bar

The bottom bar setup section provides guides on configuring and customizing the bottom navigation bar in your app. The bottom bar enhances user experience by offering quick access to key app sections.

Here, you'll find:

* Step-by-step instructions to add, modify, and arrange bottom bar items.
* Customization options for icons, labels, and navigation links.

{% embed url="<https://youtu.be/Rg_MKalGeCk>" %}

Explore this section to optimize your bottom bar and improve accessibility within your app.


# WordPress bottom bar

### How to add a bottom bar to your WordPress app?

The bottom bar is a key navigation component for your app, allowing users to access important screens easily. Follow this guide to set up and customize your bottom bar:

{% embed url="<https://scribehow.com/shared/WooCommerce_bottom_bar__kFewxYhzQP2GEkBoPimUNw>" %}

**Step 1: Enable the Bottom Bar**

* Log in to your [AppMySite dashboard](https://app.appmysite.com/app/bottom-bar).
* Navigate to the Bottom Bar section.
* Toggle Enable Bottom Bar to activate the bottom bar functionality.

{% hint style="warning" %}
The bottom bar’s default item is still used as the app’s home screen, even if the bottom bar is hidden.
{% endhint %}

**Step 2: Configure the Bottom Bar**

* **Add Items to the Bottom Bar**
  * Click on Add Item to include different options in your bottom bar. You can choose from the following:
    * Home: Sets the home screen of your app.
    * Product Categories: Opens the Product Categories screen of your app.
    * Post Categories: Opens the Post Categories screen of your app.
    * Cart: Opens the shopping cart of your app users.
    * Profile: Opens the Profile settings screen of your app users.
    * Settings: Opens the Settings screen of your app.
    * Web View: Opens a web view interface within your app. Simply enter the website URL of the page you want to render.

{% hint style="success" %}
[Follow this guide](/app/web-view/advanced-web-view-settings) to customize web-views using advanced Web View settings.
{% endhint %}

* **Set default bottom bar button**
  * Select one item as the default button for the bottom bar. This button will appear highlighted as the active screen and will appear when you first launch the app.&#x20;
* **Customize icon buttons**
  * Assign icons to each bottom bar item. You can upload custom icons or choose from the available icon library for a personalized look.

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

{% hint style="success" %}

* Duplicate: Quickly copy an existing item by clicking the duplicate icon.
* Delete: Remove an item from the bottom bar by clicking the delete icon.
* Re-arrange: Drag and drop items to change their order on the bottom bar.
  {% endhint %}

**Step 3: Preview in Simulator**

* Use the Simulator on the Bottom Bar screen to preview how the bottom bar will look and function in your app.
* Make any adjustments as needed based on the preview.

**Step 4: Save Your Changes**

* Once satisfied with your bottom bar configuration, click **Save** to finalize your settings.


# Web-to-app bottom bar

### How to add a bottom bar to your Web-to-app?

The bottom bar in your Web to App is a crucial navigation element that enhances usability and accessibility for your app users. Follow this guide to configure or manage your bottom bar:

{% embed url="<https://scribehow.com/shared/Web-to-app_bottom_bar__h-ltfyHlR5idAeObAxFTyw>" %}

**Step 1: Enable the Bottom Bar**

* Log in to your [AppMySite dashboard](https://app.appmysite.com/app/bottom-bar).
* Navigate to the **Bottom Bar** section.
* Toggle **Enable Bottom Bar** to activate the bottom bar functionality.

{% hint style="warning" %}
The bottom bar’s default item is used to set the app’s home screen, even if the bottom bar is hidden.
{% endhint %}

**Step 2: Add Items to the Bottom Bar**

Click on **Add Item** to customize your bottom bar. You can include the following options:

* Menu: Adds a hamburger menu to your bottom bar. This menu allows app users to quickly navigate through your app’s features.
* Settings: Opens the Settings screen of your app.
* Web View: Opens a web view interface within your app. Customize this option by:
  * Entering the website URL of the page you want to display.
  * Enabling or disabling the app header, website header, or website footer.
  * Hiding specific webpage elements by entering their HTML class or HTML ID in the Web View settings.

**Step 3: Customise icons buttons**

* Assign icons to each item in your bottom bar.
  * You can upload custom icons for a personalized look.
  * Alternatively, select icons from the available icon library.
* Adjust the icons to match your app's design and functionality requirements.

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

{% hint style="success" %}

* Duplicate: Quickly copy an existing item by clicking the duplicate icon.
* Delete: Remove an item from the bottom bar by clicking the delete icon.
* Re-arrange: Drag and drop items to change their order on the bottom bar.
  {% endhint %}

**Step 5: Preview in Simulator**

* Use the Simulator on the Bottom Bar screen to preview how the bottom bar will look and function in your app.
* Adjust the settings as needed based on the preview.

**Step 6: Save Your Changes**

Once satisfied with your bottom bar configuration, click **Save** to finalize your settings.

{% hint style="success" %}
[Follow this guide](/app/web-view/advanced-web-view-settings) to customize web-views in your app using advanced Web View settings.
{% endhint %}


# Custom app bottom bar

### What can be added to the bottom bar of your custom app?

The bottom bar in your Custom App is a vital navigation element that allows users to seamlessly navigate through your app. Follow this guide to configure or manage your bottom bar:

{% embed url="<https://scribehow.com/shared/Custom_app_bottom_bar__cpUrG-pRQyS1ehe7Fg-eoA>" %}

**Step 1: Enable the Bottom Bar**

* Log in to your [**AppMySite dashboard**](https://app.appmysite.com/app/bottom-bar).
* Navigate to the **Bottom Bar** section.
* Toggle **Enable Bottom Bar** to activate the bottom bar functionality.

{% hint style="warning" %}
The bottom bar’s default item is used to set the app’s home screen, even if the bottom bar is hidden.
{% endhint %}

**Step 2: Add Items to the Bottom Bar**

Click on Add Item to customize your bottom bar. You can include the following options:

* Menu: Adds a hamburger menu to your bottom bar. This menu provides quick access to various sections of your app.
* Settings: Opens the Settings screen of your app.
* Web View: Opens a web view interface within your app. Customize this option by:
  * Entering the website URL of the page you want to display.
  * Enabling or disabling the app header, website header, or website footer.
  * Hiding specific webpage elements by entering their HTML class or HTML ID in the Web View settings.
* Pages: Displays any content from your app’s pages. Standard pages may include Home, About, or Contact pages.
* Post: Displays all posts in your app. Posts are time-stamped articles, and the most recent posts appear first.
* Post Categories: Opens a screen showing all post categories. You can choose a template to style the appearance of categories in your app.
* Post Tags: Adds a tag screen for your posts, allowing users to find posts based on the tags you assign to them.
* Menu - Select to add a hamburger menu in your bottom bar. A menu provides quick access for your app users to navigate through the app.
* Settings -Opens the Settings screen of your app.&#x20;
* Web view -Opens a web view interface within your app. If you choose this option, you can enter the website URL of the page you wish to render.&#x20;

{% hint style="success" %}
[Follow this guide](/app/web-view/advanced-web-view-settings) to customize web-views in your app using advanced Web View settings.
{% endhint %}

* Pages -Display any content on pages. Examples of standard pages include Home, About, and Contact pages.
* Post -Displays all posts on your bottom bar. A post is a time-stamped article organized through categories and tags. Most recent posts will appear first.
* Post Categories -This opens the screen that displays all your posts' categories. You can choose a template to style the appearance of categories in your app.
* Post tags -Choose to add the tag screen for your posts. This allows users to find your posts based on the tags you assign to them.&#x20;

**Step 3: Customise icon buttons**

* Assign icons to each item in your bottom bar.
  * You can upload custom icons for a personalized look.
  * Alternatively, select icons from the available icon library.
* Ensure the icons align with your app’s design and navigation needs.

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

{% hint style="success" %}

* Duplicate: Quickly copy an existing item by clicking the duplicate icon.
* Delete: Remove an item from the bottom bar by clicking the delete icon.
* Re-arrange: Drag and drop items to change their order on the bottom bar.
  {% endhint %}

**Step 5: Preview in Simulator**

* Use the Simulator on the Bottom Bar screen to preview how the bottom bar will look and function in your app.
* Adjust the settings as needed based on the preview.

**Step 6: Save Your Changes**

* Once satisfied with your bottom bar configuration, click **Save** to finalize your settings.


# Bottom bar settings

### How to customise the settings of the bottom bar?

The Bottom Bar and Bottom Menu play a key role in your app’s navigation. With the advanced settings, you can fully customize their appearance to align with your branding and user experience goals. Follow this guide to configure these elements to your preference:

{% embed url="<https://scribehow.com/shared/Bottom_Bar_Settings_Copy__iNjIy-g2T3OMdkHjFrdMAA>" %}

* Log in to your AppMySite account.
* Navigate to [**Navigation > Bottom Bar**](https://app.appmysite.com/app/bottom-bar) to access the customization options.

**Customize the appearance**

* Background color – Select a background color to match your app’s theme.
* Border color – Choose a border color to outline the Bottom Bar.
* Icon color – Set a color for the **icons** in the Bottom Bar.

{% hint style="danger" %}
The icon color setting will only apply if all icons selected from the icon library are black and solid.
{% endhint %}

* Selected icon color – Define the color of an icon when it is selected.
* Text color – Customize the text color for items in the Bottom Bar.
* Selected text color – Choose the color for selected text in the Bottom Bar.

#### **Adjust Visibility Settings**

* Show text – Enable to display item names in the Bottom Bar.
* Show icon – Enable to show icons alongside text in the Bottom Bar.

#### **Configure Menu Options**

* Menu text – Enter a label for the menu button (e.g., "More") that allows users to open the Bottom Menu.
* Menu icon – Select an icon that users will click to access the Bottom Menu.

#### **Customize the Bottom Menu Appearance**

* Show grid view – Enable to display items in a grid format instead of a list.
* Show icons – Enable to display icons for menu items.
* Show text – Choose whether to display item names in the Bottom Menu.

#### **Adjust Layout and Styling**

* Tile shape – Select the shape of tiles in the Bottom Menu.
* Columns – Modify the number of columns using arrows.
* Icon color – Define the icon color (works only if icons are solid black).
* Text color – Customize the text color of Bottom Menu items.
* Tile background color – Set the background color for menu tiles.
* Tile border color – Select a color for the tile borders.
* Selected icon color – Choose a color for icons when selected (works only if icons are black).
* Selected text color – Define the text color of the selected menu item.
* Selected tile background color – Set the background color for selected tiles.
* Selected tile border color – Choose a border color for selected tiles.
* Background color – Customize the overall Bottom Menu background color.
* Page background color – Adjust the page background color for the Bottom Menu screen.

#### **Enable Haptic Feedback**

* Haptic vibration on touch – Enable to provide subtle vibration feedback when users interact with the Bottom Menu, enhancing the user experience.

Once all settings are adjusted, click **Save** to finalize your customizations.


# Menu

The **menu** section provides guides on setting up and customizing the app’s navigation menu. A well-structured menu enhances usability by giving users quick access to important sections of your app.

Here, you'll find:

* Step-by-step instructions for configuring the menu layout and structure.
* Customization options for menu items, icons, and colors.

{% embed url="<https://www.youtube.com/watch?v=B2af3SK_5IY>" %}

Explore this section to design a seamless and user-friendly menu for your app.


# WordPress menu

### How to add a menu to WordPress app?

Adding a menu to your WordPress app is essential for providing smooth navigation and a user-friendly experience. Follow these steps to configure and add a menu to your WordPress app:

{% embed url="<https://scribehow.com/shared/Add_menu__i8FljFQnSfad4ieZBT8B4g>" %}

**Step 1: Log into Your AppMySite Account**

* Log into your account using your credentials.
* Once logged in, go to your app dashboard.
* From the dashboard, navigate to [**Navigation** < **Menu**](https://app.appmysite.com/app/menu) from the side bar.
* Turn on the “Enable menu” toggle.

**Step 2: Configure the primary menu**

Turn on the Primary menu toggle and choose between the two options:&#x20;

{% hint style="success" %}
The primary menu should be designed to guide users toward key content and features that matter most in your app experience.
{% endhint %}

* **Option 1: Create your own menu**
  * Build a custom menu specifically for your app by adding, removing, and reordering items as needed.
* **Option 2: Sync with my WordPress menu**
  * If your app is synced with a WordPress website, you can choose to import the menu structure directly from your website. To do this, turn the “Sync with my WordPress menu” toggle on and choose the items you want to display in your app menu.

{% hint style="warning" %}
Enabling the "Sync with my WordPress menu" toggle allows you to sync your WordPress menu with the secondary menu.
{% endhint %}

**Step 3: Configure the secondary menu**

{% hint style="success" %}
The secondary menu lets you include extra navigation options, helping users explore more sections of your app with ease.
{% endhint %}

* By default, the secondary menu includes options such as email, call, and share.
* However, you can customize this by adding additional items based on your requirements.

#### Step 4: Add a social menu

The social menu provides users quick access to your social profiles.

* Scroll to the Social menu section
* Enable the toggle to activate the social menu
* Add links to your social media profiles (e.g., Facebook, Instagram, Twitter)
* These links will appear as icons at the bottom of the side menu in the app

{% hint style="warning" %}
Social items open in external browsers and appear with predefined icons on a white background.
{% endhint %}

**Step 5: Add Menu Items**

* Click on Add Item to include pages, categories, or custom links to the menu.
* For each item, you will need to specify:
  * Title: The label that will appear on the menu.
  * Link: The page or section the menu item links to.
  * Icon: You can add an icon next to the menu label for a better visual appeal.

Visit the detailed guide to customise the [**navigation settings**](/app/navigation/menu/menu-settings)**:**&#x20;

{% content-ref url="/pages/Tak77L1fu6soAxShFXuz" %}
[Menu settings](/app/navigation/menu/menu-settings)
{% endcontent-ref %}

{% hint style="success" %}
You can upload custom icons for a personalized look. Alternatively, select icons from the available icon library.
{% endhint %}

**Step 5: Save & Preview the Menu**

After configuring your menu, click **Save** to apply the changes. Use the App Simulator to preview how the menu will look and function in your app.


# Custom app menu

### How to add a menu for Custom app?

Adding a menu to your custom app is key for seamless navigation and an improved user experience. Follow these simple steps to configure and add a menu to your app:

{% embed url="<https://scribehow.com/shared/Custom_app_menu__tOMQmVXuQRmjoGySubuoXw>" %}

#### Step 1: Log into Your AppMySite Account

* Log in using your AppMySite account credentials.
* Once logged in, go to your app dashboard.
* Go to [**Navigation** < **Menu**](https://app.appmysite.com/app/menu) section from the sidebar.
* Enable the menu by turning on the Enable Menu toggle.

#### Step 2: Configure the primary menu

{% hint style="success" %}
The primary menu should be designed to guide users toward key content and features that matter most in your app experience.
{% endhint %}

* Toggle on the Primary menu switch.
* Add, remove, or rearrange items to personalize the menu for your app's structure and content.

Visit the detailed guide to customise the [**navigation settings**](/app/navigation/menu/menu-settings):&#x20;

{% content-ref url="/pages/Tak77L1fu6soAxShFXuz" %}
[Menu settings](/app/navigation/menu/menu-settings)
{% endcontent-ref %}

#### Step 3: Add a Secondary Menu

{% hint style="success" %}
The secondary menu lets you include extra navigation options, helping users explore more sections of your app with ease.
{% endhint %}

* Toggle on the Secondary menu option.
* By default, the secondary menu includes email, call, and share options.
* You can also add custom items like external links or internal app features, depending on your requirements.

#### Step 4: Add a social menu

The social menu provides users quick access to your social profiles.

* Scroll to the Social menu section
* Enable the toggle to activate the social menu
* Add links to your social media profiles (e.g., Facebook, Instagram, Twitter)
* These links will appear as icons at the bottom of the side menu in the app

{% hint style="warning" %}
Social items open in external browsers and appear with predefined icons on a white background.
{% endhint %}

#### Step 5: Add menu items

You can add a variety of items to both the primary and secondary menus.

* Click on Add Item to include settings, login, custom links, chat options, tags, categories, pages, posts, and more.
* For each new item, specify the following:
  * Title: The label that will appear in the menu.
  * Link: The URL or section where the menu item will take users.
  * Icon: Optionally, add an icon for better visual representation.

{% hint style="success" %}
You can upload custom icons for a personalized look. Alternatively, select icons from the available icon library.
{% endhint %}

#### Step 6: Save & Preview the Menu

* After configuring your menu, click **Save** to apply the changes. Use the App Simulator to preview how the menu will look and function in your app.


# Web to App menu

### How to add a menu to web to app?

Adding a menu to your Web to App is essential for providing smooth navigation and a user-friendly experience. Follow these steps to configure and add a menu to your app:&#x20;

{% embed url="<https://scribehow.com/shared/Web_to_App_menu__92Dd70s6SFO2EYNayM98Ng>" %}

#### Step 1: Log into Your AppMySite Account

* Log into your account using your credentials.
* Once logged in, go to your app dashboard.
* From the dashboard, go to [**Navigation > Menu**](https://app.appmysite.com/app/menu) from the side menu.
* Turn on the “Enable menu” toggle

#### Step 2: Configure the primary menu

{% hint style="success" %}
The primary menu should be designed to guide users toward key content and features that matter most in your app experience.
{% endhint %}

* Toggle on the Primary menu switch.
* Add, remove, or rearrange items to customize the menu specifically for your app.

#### Step 3: Add a secondary menu

{% hint style="success" %}
The secondary menu lets you include extra navigation options, helping users explore more sections of your app with ease.
{% endhint %}

* Toggle on the Secondary menu option.
* By default, the secondary menu includes email, call, and share options.
* You can add custom items to this menu, such as links, depending on your app's requirements.

#### Step 4: Add a social menu

The social menu provides users quick access to your social profiles.

* Scroll to the Social menu section
* Enable the toggle to activate the social menu
* Add links to your social media profiles (e.g., Facebook, Instagram, Twitter)
* These links will appear as icons at the bottom of the side menu in the app

{% hint style="warning" %}
Social items open in external browsers and appear with predefined icons on a white background.
{% endhint %}

#### Step 5: Add Menu Items

To further customize your menu, you can add specific items to both the primary and secondary menus.

* Click on Add Item to include new settings, custom links, chat, and more.
* For each new item, specify:
  * Title: The label that will be displayed in the menu.
  * Link: The page or section where the menu item will redirect users.
  * Icon: Add an icon next to the label for better visual appeal.

Visit the detailed guide to customise the [**navigation settings**](/app/navigation/menu/menu-settings)**:**&#x20;

{% content-ref url="/pages/Tak77L1fu6soAxShFXuz" %}
[Menu settings](/app/navigation/menu/menu-settings)
{% endcontent-ref %}

{% hint style="success" %}
You can upload custom icons for a personalized look. Alternatively, select icons from the available icon library.
{% endhint %}

#### Step 6: Save & Preview the Menu

* After configuring your menu, click **Save** to apply the changes. Use the App Simulator to preview how the menu will look and function in your app.


# Email, call & share buttons

### How to add share, email, and call options in your app?

Add share, email, and call options in your app’s secondary menu. These options open the respective native apps on the user’s device, allowing quick access to sharing, calling, or sending emails.

#### Steps to follow

{% embed url="<https://scribehow.com/viewer/Add_email_call_and_share_buttons__LR9N7c6zQtiBwDIz7at3cA>" %}

**Step 1: Enable the secondary menu**

* Go to your [**app dashboard**](https://app.appmysite.com/app/dashboard).
* Go to [**Navigation > Menu**](https://app.appmysite.com/app/menu).
* Turn on the toggle for the secondary menu.

**Step 2: Locate default buttons**

* Once enabled, the share, email, and call buttons will appear by default in the secondary menu.

**Step 3: Add your details**

* For the email button, enter the email address where you want to receive messages.
* For the call button, enter the phone number you want users to call.
* For the share button, enter the link to share your app with the world.&#x20;

{% hint style="success" %}
The share, email, and call buttons and their icons can be customized as per your preference.
{% endhint %}

{% hint style="warning" %}
Add any messaging app to the secondary menu using direct links that open chats instantly, such as WhatsApp or Telegram
{% endhint %}

**Step 4: Save changes**

* Click Save to confirm your setup.


# Menu settings

### **How to customize the menu in your app?**

The Menu in your app plays a key role in navigation, and with advanced settings, you can fully customize its appearance to match your branding and user experience preferences. Follow this guide to configure and personalize the Primary Menu and Secondary Menu settings.

{% embed url="<https://scribehow.com/shared/Menu_settings__95fe0q_9RNCrSZobQEMPLQ>" %}

#### **Access menu settings**

* Log in to your AppMySite account.
* Navigate to [**Navigation > Menu**](https://app.appmysite.com/app/menu) to access customization options.
* Click on the Settings icon on the top right of the screen.&#x20;

#### **Customize menu appearance**

* Logo – Upload your logo to be displayed in the menu header.
* Text (Alternative to Logo) – Instead of a logo, you can display text in the menu header.
* Text color – Select the color for the text in the menu header.
* Background color – Set the background color of the menu.
* Separator color – Choose the color of the separator lines between the primary menu and secondary menu.

#### **Customizing the primary menu**

* Show as grid – Enable to display menu items in a grid instead of a list.
* Show icon – Enable to display icons for menu items.
* Show text  – Enable to display text labels for menu items.
* Tile shape – Choose a shape for menu items:
  * Square
  * Rounded corners
  * Circle
* Columns – Adjust the number of columns in the grid layout.
* Icon color – Set a color for menu icons.
* Text color – Choose the color of the menu item text.
* Tile background color – Set the background color for menu items.
* Tile border color – Choose a color for the tile borders.

{% hint style="danger" %}
The icon color setting will only apply if all icons selected from the icon library are black and solid.
{% endhint %}

#### **Customizing the secondary menu**

* Show as grid  – Enable to display items in a grid instead of a list.
* Show icon – Enable to display icons.
* Show text – Enable to display text labels.
* Tile shape – Choose from Square, Rounded Corners, or Circle.
* Columns – Adjust the number of columns.
* Icon color – Select a color for icons.
* Text color – Customize the text color of menu items.
* Tile background color – Set the background color of menu tiles.
* Tile border color – Define the color of the tile borders.

#### **Enable haptic feedback**

* Haptic vibration on touch – Enable to provide subtle vibration feedback when users interact with the menu, enhancing the tactile experience.

#### **Saving Your Changes**

Once you’ve configured your menu settings, click **Save** to apply the changes.


# Web view

Webview Overview

The **Web View** category includes guides to help you integrate and optimize web-based content within your app. Whether you're converting your website into an app or customizing the Web View experience, this section provides step-by-step instructions and troubleshooting solutions.

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

Here, you'll find:

* Setup guides to enable and configure Web View for your app.
* Customization options to refine the look and feel of Web View pages.
* Advanced settings to enhance functionality, including overriding CSS, managing headers, and enabling user interactions.
* Troubleshooting solutions for resolving common Web View issues.

{% embed url="<https://www.youtube.com/watch?v=iL1DHEiR52c>" %}

Explore this section to create a seamless, responsive Web View experience that aligns with your app’s design and functionality.


# Advanced web-view settings

### How to configure webview settings?

The advanced web-view settings in AppMySite offer extensive customization to control how your website appears and functions within your mobile app. This feature includes settings to personalize the app's header, tailor web view elements, and enhance the overall user experience.

{% embed url="<https://scribehow.com/shared/Configuring_Web_View_Settings_in_AppMySite__56t2WdoeSK60yHS3c2Lv3Q>" %}

**Step 1: Navigate to web view settings**

* Navigate to [**Web view**](https://app.appmysite.com/app/web-view-settings) settings from the side menu.

**Step 2: Enable Web View**

* Toggle the **Enable Web View** option to activate the feature and render your website within the app.

**Step 3:  App header customization**

* Show app header – Display the native header of the app.
* Show website title – Display the title of your website in the app header.
* Show custom title – Replace the website title with a title of your choice.
* Show website domain – Include your website's domain in the app header.
* Configure title alignment – Align the title to the left, center, or right within the header.
* Show back and forth arrows – Enable arrows in the header to help users navigate back and forth in web views.&#x20;
* Three-dot menu – Display the kebab menu with additional options for enhanced usability.
* Header colors – Set the background color, border color, icon color, and text color of the app header to match your app’s design.

**Step 4: Webpage navigation and interactivity**

* Show website header – Display the website header in the app.
* Show website sidebar– Display the website sidebar in the app.
* Show website footer – Display the website footer in the app.&#x20;
* Allow pinch-to-zoom – Enable users to zoom in and out of web pages using pinch gestures.
* Enable pull to refresh – Allow users to refresh web pages by pulling down from the top of the screen.&#x20;

**Step 5: User-specific settings**

* Retain cookies – Preserve user-specific settings and data, such as login sessions, by retaining cookies.

**Step 6: Loading experience**

* Show native loader – Turn this on to show a loading screen while web pages load in the background. Turning it off will hide the native loader, though the page will continue to load and remain visible.

**Step 7: Advanced tracking and optimization**

* Append app code version in user agent – Add the app code version to the User Agent string to track and identify the app version accessing your webpage.

**Step 8: Customize web elements**

* Hide elements by class or ID – Remove specific elements from your webpage by entering their HTML class or HTML ID.

**Step 9: Override CSS**

* Gain more control over your Web View's appearance and functionality.&#x20;

{% hint style="warning" %}
Use **Override CSS** to hide elements, override colors, and modify styling for a more customized mobile app experience.
{% endhint %}

{% hint style="success" %}
Example: // .example-banner { display: none; }
{% endhint %}

* Add custom banners

```css
cssCopy code.custom-banner::after { 
    content: 'Welcome to the App!'; 
    font-size: 20px; 
    color: #000; 
}
```

* Change colors:

```css
cssCopy codebody { background-color: #f5f5f5; }
```

**Step 10: Caching settings**

* Honor website cache policy – Follow your website’s caching rules to ensure consistency in the app.
* Force cache web pages – Override website cache settings and set a custom caching duration for app pages. Cached data refreshes automatically after the set time.

{% hint style="warning" %}
**Cache** is a temporary storage system that saves frequently accessed data to improve performance and speed. In apps and websites, caching helps load content faster by storing elements like images, scripts, and pages locally, reducing the need to fetch them from the server each time.
{% endhint %}

**Step 11: Save and Finalize**

Once you’re satisfied with your configurations, click **Save** to apply all settings to your app.


# Web view checkout

### Why is my WooCommerce app redirected to a web view checkout?

AppMySite is designed to support any payment gateway that you use on your WooCommerce website, regardless of the provider or region. This ensures seamless transactions for your customers, no matter where they are.

### **How payment gateways work in your app**

* **Web View Checkout Integration**
  * When customers proceed to payment in the app, they are redirected to a Web View interface that mirrors your website’s checkout page.
  * This ensures that your app maintains full compatibility with all payment gateways, including third-party and region-specific options.
  * All discount coupons and custom rules set up on your website will automatically work in the app checkout. No additional setup is needed.

{% hint style="success" %}
Since payments are processed via Web View, any updates made to the payment gateway on your website will automatically reflect in the app—no extra configuration required.
{% endhint %}

* **Universal payment gateway support**
  * Whether you're using Stripe, PayPal, Razorpay, Square, or any local provider, your customers can complete transactions just as they would on your website.

{% hint style="success" %}
There are no restrictions on which payment provider you use—if it works on your WooCommerce website, it will work in your app.
{% endhint %}


# Web-view for WordPress

### Where can I use the web-view feature for my WordPress & WooCommerce app and how?

AppMySite enables you to create native Android and iOS apps as these are the best when it comes to performance. However, you can also turn on the web view feature for certain sections or the entire app as well.

{% embed url="<https://scribehow.com/shared/Web-view_for_WordPress__WYjPnP-2QLi49t2MiunFOA>" %}

Follow this guide to know how and where you can add a web view for your WordPress app:&#x20;

#### Web view for pages&#x20;

* Go to Pages.
* Turn the toggle on against web view.
* Click on Save when done.

{% hint style="success" %}
The app will mirror your website and all your pages will be shown in a web view interface.
{% endhint %}

#### Web view for products

* Go to Products.
* Turn the toggle on against Web view.
* Click on Save when done.

{% hint style="success" %}
The app will mirror your website and all your product screens will now turn into a web view interface.
{% endhint %}

#### Web view for posts

* Go to Posts.
* Turn the toggle on against Web view.
* Click on Save when done.

{% hint style="success" %}
The app will mirror your website and all your posts will turn into a web view interface.
{% endhint %}

#### Web view for specific pages on the bottom navigation menu

If you want to turn on web view for only specific pages, you can add them to the bottom navigation menu bar.

* Go to [**Navigation > Bottom bar**](https://app.appmysite.com/app/bottom-bar) > Add Item.
* Select your preferred item name.
* Upload an icon for your item and click on Done.
* Click on Item Type and select Web View from the pop up menu.
* Enter the webpage URL you wish to render.
* Click on Save when done.

{% hint style="warning" %}
A new item will get added to your bottom navigation bar which will direct users to the rendered web view. Similarly, add web views for other destinations on the bottom navigation bar.
{% endhint %}

#### Web-view for specific pages on the menu

If you want to turn on web view for only specific pages, you can also add them to the side menu.

* Go to [**Navigation > Menu**](https://app.appmysite.com/app/menu) > Add Item.
* Select your preferred item name.
* Upload an icon for your item and click on Done.
* Click on Item Type and select Web View from the pop up menu.
* Enter the webpage URL you wish to render.
* Click on Save when done.

#### Webview for the entire app

{% hint style="warning" %}
If you want to enable web view for your entire app, you can do it from the Homescreen. This will enable a web view interface for your entire app.&#x20;
{% endhint %}

Follow the steps below:

* Navigate to [**Navigation > Home screen**](https://app.appmysite.com/app/home) in your WordPress app.
* Turn on the Web-view toggle and enter the desired URL in the Page URL field.&#x20;
* Hit Save.
* Your entire website will now appear in a web view interface. Manage the web-view settings from the Web View section in the side menu.&#x20;

{% hint style="danger" %}
If your web view does not appear as expected in the app, we recommend turning off all other features on the Home Screen for a better browsing experience.
{% endhint %}

[**Follow this guide**](/app/web-view/advanced-web-view-settings) to customise how your web pages will appear in the app:

{% content-ref url="/pages/sgZw0r2MP57mpnx7mrqD" %}
[Advanced web-view settings](/app/web-view/advanced-web-view-settings)
{% endcontent-ref %}

You can open the Preview section to see how your app looks and works on an emulator.


# Web-view for Custom app

### How to use web-views in the custom app?

AppMySite enables you to render your mobile site in an app with a web view interface. A webview interface is built to render your mobile site in the app.&#x20;

{% embed url="<https://scribehow.com/shared/Web-view_for_Custom_app__FdIEup6RSUmcgRPlQgT2ag>" %}

You can enable web-views on the following assets of your app:&#x20;

* [**Bottom bar**](https://app.appmysite.com/app/bottom-bar) - Add web view to any button of your bottom bar. Select web-view in the Item Type and add the desired URL in the relevant field while setting up your bottom bar.&#x20;
* [**Menu**](https://app.appmysite.com/app/menu) - Similar to the bottom bar settings, you can add web views to your hamburger menu. Select web-view in the item type and enter the URL in the relevant field.\
  You can customize further by choosing whether you’d like to display the app header, website header, and website footer. Furthermore, you can hide certain webpage elements by entering their HTML class or HTML ID in the Web view settings.&#x20;
* [**Pages**](https://app.appmysite.com/app/pages) **&** [**Post**](https://app.appmysite.com/app/posts) - Insert engaging buttons to direct users and encourage interaction. Buttons can be hyperlinked to an external web page or any post, page email or phone number. Design the button by selecting the button colour and text colour.&#x20;

[**Follow this guide**](/app/web-view/advanced-web-view-settings) to customise how your web pages will appear in the app:

{% content-ref url="/pages/sgZw0r2MP57mpnx7mrqD" %}
[Advanced web-view settings](/app/web-view/advanced-web-view-settings)
{% endcontent-ref %}

You can open the Preview section to see how your app looks and works on an emulator.


# Intercept web traffic

### How to intercept web traffic and manipulate webpages?

AppMySite offers a straightforward method to achieve intercepting web traffic and manipulating web pages. Follow these steps to get started:&#x20;

{% embed url="<https://scribehow.com/shared/Intercept_web_traffic__B-mku8AsSMGWIwOfKlAaKQ>" %}

#### Step 1: Enable the "Append App Code Version in User Agent" Toggle

* Access your AppMySite dashboard.
* Navigate to the [**Web view settings**](https://app.appmysite.com/app/web-view) of the app you wish to configure.
* Turn the toggle on for "Append app code version in User Agent".

#### Step 2: Add the User-Agent Key in Your Website Header

* Once you enable the toggle, AppMySite will modify the User-Agent header when loading the web-view in the app's browser. The app will append the APICodeVersion of the app to the User-Agent. For instance, the User-Agent string will look like this: APICodeVersion/1.18.9

{% hint style="warning" %}
To detect this User-Agent in your website’s code, use the following standard PHP syntax: $user\_agent = $\_SERVER\['HTTP\_USER\_AGENT'];
{% endhint %}

* Once you have detected the User-Agent using the above PHP code, you can then manipulate your website’s functionality based on the APICodeVersion value to customize how your web content behaves in the app’s web-view.

{% hint style="success" %}
With the User-Agent string configured, you can manipulate the web page loaded within the app's web view. Depending on your requirements, you can inject custom CSS, add analytics script or implement any other code necessary to customize the user experience within the web view.
{% endhint %}


# Pages

Pages Overview

The **Pages** section allows you to create, manage, and customize pages in your app, making it easy to showcase important content such as **About Us, Contact, FAQs, and more**. This section provides guides on designing pages, structuring content, and optimizing their appearance.

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

Here, you'll find:

* **Step-by-step guides** to create and customize pages.
* **Layout and design options** to enhance user experience.
* **Settings and customization tools** for background, text, media, and more.

Explore this section to create engaging and well-structured pages that enhance your app’s functionality and user experience.


# Custom app

Design and structure pages from scratch, and get full control over the content and layout of your app. Whether you're adding an About Us, Services, FAQs, or any other informational page, this section helps you create and customize them to match your brand identity.

Here, you'll find:

* Step-by-step guides for creating and managing custom pages.
* Customization options for adding text, images, videos, buttons, and more.
* Layout and styling tools to enhance user experience and engagement.

{% embed url="<https://www.youtube.com/watch?v=wCxsvHKiGuA>" %}

Explore this section to build dynamic, visually appealing pages tailored to your app’s needs.


# Custom app pages

### How to create pages on your custom app?

A page is an area where you can display content and be about anything. Common pages include Home, About, and Contact pages.

Follow these steps to create a new page for your app:

{% embed url="<https://scribehow.com/shared/Custom_app__Add_pages__EITJpInDSoiihQEvlUlhIw>" %}

#### **Step 1: Access the Pages Screen**

* Navigate to the [**Pages**](https://app.appmysite.com/app/pages) of your app from the side menu
* Click on the +Create button at the top right of the screen.

#### **Step 2: Add Page Content**

**Title**

* Enter a title for your page.
* The title appears in the app header and cannot be rearranged.
* Preview the placement of the title in the emulator.

**Image**

* Upload an image to enhance your page’s visual appeal.
* Adjust the image ratio to fit your layout.
* Click Upload to choose from:
  * AppMySite Image Library – Filter images by orientation, color, or keyword search.

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

* Advanced Design Editor – Click Create to design an image from scratch.

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

* Pre-Designed Image Upload – Upload an image from your device.

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

* Link: Enter a web link to upload an image.

**Heading**

* Add bold, clear headings to highlight important sections.
* Align the heading to the left, center, or right based on your preference.

**Paragraph**

* Add a text block to describe your content, product, or service.
* Customize the text by making it bold, italic, underlined, aligned, or adding:
  * Bullet points
  * Hyperlinks
* Click Add Section to include more content sections on your page.

**Gallery**

* Showcase multiple images in a gallery format.
* Customize the gallery layout by selecting:
  * Number of columns and rows from the dropdown menu.
  * Image ratio based on your design preference.
* Upload images from:
  * AppMySite Image Library
  * Your device
  * Advanced Design Editor to create custom images.

**Video**

* Upload engaging multimedia content to enhance your page.
* Alternative option: Paste a video link to embed it on your page.
* Upload a custom thumbnail for the video.

{% hint style="warning" %}
Supported formats for a video upload is MP4, MOV, M4V, 3GP (Max file size: 200 MB).
{% endhint %}

**Code**

* Add iframe snippets for interactive content or specialized features.

**Button**

* Insert interactive buttons to direct users to:
  * External web pages
  * Other posts or pages
  * Emails or phone numbers
* Customize buttons by selecting:
  * Button color
  * Text color
* **Spacer**

  * Add spacing between elements to ensure a clean and organized layout.
  * Adjust the space size from the dropdown menu.

  **Separator**

  * Use separators to visually divide different sections of your page.
  * Customize the separator by adjusting:
    * Width of the border
    * Color

  **YouTube Video**

  * Embed YouTube videos by pasting the video link.

  **Facebook Video**

  * Engage your audience with Facebook content by pasting a Facebook video link.

  **Vimeo Video**

  * Showcase Vimeo-hosted videos by pasting the Vimeo link into this block.

{% hint style="success" %}

* Duplicate: Quickly copy an existing item by clicking the duplicate icon.
* Delete: Remove an item from the bottom bar by clicking the delete icon.
* Re-arrange: Drag and drop items to change their order on the bottom bar.
  {% endhint %}

#### Step 3: Save changes

Click Save draft to revisit this page before publishing. Click the Save button if you are happy with the page and want to make it live on your app.

{% hint style="warning" %}
Custom pages can only be added to the Custom App solution. For the Web to App, WordPress, and WooCommerce solutions, pages are directly fetched from your website, and therefore, custom pages cannot be incorporated into these solutions.
{% endhint %}


# Individual page settings

### **How to customize individual page settings in your app?**

The individual page settings allow you to manage and organize pages efficiently, ensuring better content hierarchy and author attribution. These settings help structure content and improve visibility within your app.

{% embed url="<https://scribehow.com/shared/Individual_page_settings__XVsNyJpVQayM2R3NEAu5bw>" %}

#### **Step 1: Navigate to page settings**

* Navigate to [**Pages**](https://app.appmysite.com/app/pages) from the side menu.
* Open the page that you would like to make changes to.
* Click on the Settings button from the top right of the pages screen.

#### **Step 2: Customize page details**

* Author – Choose an author to display their name along with this page.
* Parent page – Select a parent page from the dropdown menu to organize pages hierarchically, if required.

{% hint style="success" %}
Assigning a parent page helps maintain a structured layout, making it easier for users to navigate related content.
{% endhint %}

#### **Step 3: Save your changes**

* Once you have configured the page settings, click save to apply them.

By customizing individual page settings, you can create a well-structured content experience, ensuring clear organization and enhanced navigation for app users.


# Bulk page settings

### How to use bulk update settings for pages?

The Bulk Update Settings feature allows you to make changes to multiple pages at once, streamlining the page management process in your app. You can update key attributes such as the Parent, Author, and Status of selected pages.

Follow these steps to bulk update pages in your app:

{% embed url="<https://scribehow.com/shared/How_to_bulk_edit_your_Custom_apps_pages__7qTy7rV7TECBR-mmuDTFTg>" %}

#### **Step 1: Access bulk update settings**

* Navigate to the [**Pages**](https://app.appmysite.com/app/pages) section and click on the Bulk Update button.
* Use the checkboxes to select the pages you want to update.

#### **Step 2: Apply Bulk Updates**

Once the pages are selected, you can update the following attributes:

* Parent – Assign a parent category or page to the selected pages.
* Author – Change the author of the pages in bulk.
* Status – Set the pages to Draft or Published.

#### **Step 3: Save Changes**

* Click on the "Update" button at the top right of the screen.
* After making your selections, click "Apply" to save the changes.
* To remove selected pages, click "Delete Selected" instead.

{% hint style="success" %}
By using the Bulk Update Settings, you can efficiently manage multiple pages at once, saving time and ensuring consistency across your app’s content.
{% endhint %}


# Page layout

### **How to customize page layout in your app?**

The **Layout Settings** allow you to style the appearance of pages in your app by selecting a preferred template. You can choose between two layout options:

{% embed url="<https://scribehow.com/shared/Updating_App_Content_in_AppMySite__3_L-fmjTSLy1-GNhMDvjKQ>" %}

#### **Step 1: Access page layout settings**

* Navigate to the [**Pages**](https://app.appmysite.com/app/pages) section.
* Click on the layout icon to access layout settings.

#### Step 2: Select from the options

* Select Layout Settings and choose either Grid View or List View.

{% hint style="warning" %}
Display options

* Grid View – Displays content in a structured grid format for a visually rich experience.
* List View – Organizes content in a vertical list for easy readability and navigation.
  {% endhint %}

#### Step 3: Apply changes

* Click Save to apply your changes.

{% hint style="success" %}
This ensures your app’s pages are presented in a layout that best suits your content and enhances user experience.
{% endhint %}


# Page Settings

### How to customize page settings in your app

The Page Settings allow you to customize the appearance and functionality of app pages, ensuring they align with your design and user experience preferences. Follow this guide to configure your page list and page details.

{% embed url="<https://scribehow.com/shared/Changing_App_Theme_Colors_in_App_My_Site__CMKThZU5RImfQS-H9ebflA>" %}

#### **Step 1: Access the Pages Screen**

* Navigate to the [**Pages**](https://app.appmysite.com/app/pages) of your app from the side menu.
* Click on the Settings button at the top right of the screen.

**Step 2: Customize page list settings**

The Page list settings let you control how pages appear in your app.

* **Background color**
  * Set the background color for the page list.
* **Text color**
  * Choose a text color for the page items.
* **Tile background color**
  * Set the background color of the tiles for a visually cohesive layout.

#### **Step 3: Customize page details settings**

The Page details settings allow you to fine-tune how individual pages and their content appear.

* **Share**&#x20;
  * Enable to display a share icon for easy content sharing.
* **Show media in full screen**
  * Allow users to view media content in full-screen mode for a detailed experience.
* **Show media as thumbnails**&#x20;
  * Display media content as thumbnails for a preview-style layout.
* **Section margins (pixels)**
  * Adjust spacing around sections for a clean and polished look:
    * Top margin
    * Bottom margin
    * Left margin
    * Right margin
* **Image shape**
  * Select the preferred image shape for media content:
    * Square
    * Soft square&#x20;

{% hint style="success" %}
Apply **rounded corners** for a sleek and modern design.
{% endhint %}

* **Center crop images**&#x20;
  * Enable to center crop images, ensuring they fit uniformly within the frame.
  * Disable to maintain the original aspect ratio while fitting the frame.

{% hint style="success" %}
**Center crop image** means cropping an image while keeping its center as the focal point. This ensures that the middle portion of the image remains visible while the edges are trimmed to fit a specific frame or aspect ratio, creating a uniform and consistent look across your app.
{% endhint %}

#### **Step 3: Saving changes**

* Once you've configured your page settings, click **Save** to apply them.


# WordPress

### How to customize page settings for WordPress pages

The **Page Settings** for WordPress pages allow you to modify the appearance and layout of your pages, ensuring they align with your app’s design and user experience.

{% embed url="<https://scribehow.com/shared/WordPress__Page_settings__6qB45IUqRV6i1kp3gsDFgA>" %}

#### **Step 1: Access the Pages Screen**

* Navigate to the [**Pages**](https://app.appmysite.com/app/pages) of your app from the side menu.

#### **Step 2: Customize page appearance**

* Background color – Set the background color of the page to match your app’s theme.
* Text color – Choose the text color for better readability and visual consistency.
* Tile background color – Define the background color of the content tiles for a structured layout.

#### **Step 3:** Enable web view rendering

* Render as web view – Display the page exactly as it appears in a mobile browser, preserving its original design and functionality.

{% hint style="danger" %}
Enabling Render as Web View will automatically disable other page settings, as the page will be displayed exactly as it appears in a mobile browser.
{% endhint %}

#### **Step 4:** Enhance page interaction

* Share – Display a share icon, allowing users to easily share content from the page.

#### **Step 5:** Adjust section margins

Customize the spacing around your content for a polished and well-structured layout.

* Top margin – Adjust the space above the content.
* Bottom margin – Modify the space below the content.
* Left margin – Set the spacing on the left side.
* Right margin – Define the spacing on the right side.

{% hint style="warning" %}
The default section margin values are 7.5 pixels (top), 7.5 pixels (bottom), 15 pixels (left), and 15 pixels (right). You can adjust these values as needed to customize the spacing.
{% endhint %}

{% hint style="success" %}
The available page settings will vary based on your selected layout—List View or Tile View—ensuring optimal customization for each format.
{% endhint %}

#### **Step 6:** Save your changes

* Once you've customized the settings, click Save to apply the changes to your WordPress pages.


# Posts

Posts Overview

The **Posts** section allows you to manage and display time-stamped articles in your app. Posts are organized using **categories and tags**, making it easy for users to find relevant content. The most **recent posts** automatically appear first, ensuring your audience always sees the latest updates.

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

Here, you'll find:

* Guides on **setting up and managing posts** within your app.
* **Customization options** to enhance post appearance and layout.
* **Best practices** for organizing content using categories and tags.

Explore this section to create an engaging, structured post layout that keeps your app’s content dynamic and up to date.


# Custom app

Custom app posts overview

The Custom App Posts section allows you to create and manage posts directly within your app, without the need for a website. This feature enables you to publish news, articles, updates, or any other content tailored to your app’s audience. Posts can be organized with categories and tags for easy navigation, ensuring a structured content experience.

Here, you'll find:

* Step-by-step guides to create and publish custom posts.
* Customization options for styling and formatting content.
* Best practices for organizing posts using categories and tags.

{% embed url="<https://www.youtube.com/watch?v=ZRu4AqqfMHU>" %}

Explore this section to build an engaging content experience within your custom app.


# Custom app posts

### How to create a post in your app?

A post is a time-stamped article organized through categories, tags, and attributes. The most recent posts appear first.&#x20;

Follow the steps below to create a new post in your app:

{% embed url="<https://scribehow.com/shared/Custom_app__Add_posts__dJPaWVWFTUanG2bxG223xA>" %}

#### **Step 1: Access the post screen**

* Navigate to the [**Post**](https://app.appmysite.com/app/posts) section of your app.
* From the dropdown menu, select Posts.
* Click on the **+Create** button at the top right of the screen.

#### **Step 2: Add post content**

**Title**

* Add a title for your post.
* You can preview the title placement in the emulator.

**Image**

* Upload an image to enhance your post’s visual appeal.
* Adjust the image ratio to fit your layout.
* Click Upload to choose from:
  * AppMySite Image Library – Filter images by orientation, color, or search.

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

* Advanced Design Editor – Click Create to design an image from scratch.

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

* Pre-designed Image Upload – Upload an image from your device.

<figure><img src="/files/3j6nLN10Wo2XZWHGxZrZ" alt=""><figcaption></figcaption></figure>

* Link: Enter a web link to upload an image.

**Heading**

* Add bold, clear headings to highlight key sections.
* Align the heading to the left, center, or right based on your preference.

**Paragraph**

* Add a text block to describe your content, product, or service.
* Customize text using:
  * Bold, italics, underline, alignment, bullet points, hyperlinks.
* Click Add Section to include more content sections in your post.

**Gallery**

* Display multiple images in a gallery format.
* Customize the layout by selecting:
  * Number of columns and rows from the dropdown menu.
  * Image ratio based on your design preference.
* Upload images from:
  * AppMySite Image Library
  * Your device
  * Advanced Design Editor to create custom images.

**Video**

* Upload engaging multimedia content to enhance your post.
* Alternative option: Paste a video link to embed it in your post.
* Upload a custom thumbnail for the video.

{% hint style="warning" %}
Supported formats for a video upload is MP4, MOV, M4V, 3GP (Max file size: 200 MB).
{% endhint %}

**Code**

* Add iframe snippets for interactive content or specialized features.

**Button**

* Insert interactive buttons to direct users to:
  * External web pages
  * Other posts or pages
  * Emails or phone numbers
* Customize buttons by selecting:
  * Button color
  * Text color

**Attribute**

* Attributes help app users filter posts efficiently.
* Add or remove attributes from Settings.

**Spacer**

* Add spacing between elements to maintain a clean layout.
* Adjust the space size from the dropdown menu.

**Separator**

* Use separators to visually divide different sections of your post.
* Customize by adjusting:
  * Width of the border
  * Color

**YouTube video**

* Embed YouTube videos by pasting the video link.

**Facebook video**

* Add Facebook content by pasting a Facebook video link.

**Vimeo video**

* Showcase Vimeo-hosted videos by pasting the Vimeo link into this block.

{% hint style="success" %}

* Duplicate: Quickly copy an existing item by clicking the duplicate icon.
* Delete: Remove an item from the bottom bar by clicking the delete icon.
* Re-arrange: Drag and drop items to change their order on the bottom bar.
  {% endhint %}

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

{% hint style="success" %}
Once you have added the sections to your post, you can customize the settings by clicking the “Settings” button in the top menu. This will allow you to customize and organize your posts. [Follow this guide](/app/posts/custom-app/post-settings) to customize your post settings.&#x20;
{% endhint %}

{% hint style="success" %}
Custom posts can only be added to the Custom App solution. For the Web to App, WordPress, and WooCommerce solutions, posts are directly fetched from your website.
{% endhint %}

#### Step 3: Save changes

Click Save draft to revisit this page before publishing. Click the Save button if you are happy with the page and want to make it live on your app.


# Individual post settings

### How to customize individual post settings in your app?

The individual post settings allow you to manage and organize your posts efficiently. These settings help structure content, improve searchability, and enhance visibility for users.

{% embed url="<https://scribehow.com/shared/Creating_a_Summary_for_a_Fashion_Post__pvaMjulmQg65ij_f87g25g>" %}

#### **Step 1: Access the post screen**

* Navigate to the [**Post**](https://app.appmysite.com/app/posts) section of your app.
* From the dropdown menu, select Posts.
* Open the post that you would like to make changes to.
* Click on the Settings button from the top right of the screen

#### **Step 2: Customize post details**

* Author – Assign an author to the post.
* Thumbnail – Upload a thumbnail image that will be featured on all pages where this post appears.

{% hint style="success" %}
A well-chosen thumbnail improves visual appeal and helps users recognize posts easily.
{% endhint %}

#### **Step 3: Organize post content**

* Assign categories – Organize posts into relevant categories for better navigation.
* Assign tags – Improve post visibility by adding tags that help users filter and find relevant content.
* Assign attributes – Add additional attributes to categorize posts more effectively.
* Excerpt – Write a brief summary or teaser for the post to engage users.

#### **Step 4: Control post publishing**

* Publish immediately – Choose whether to publish the post instantly.
* Featured post – Mark the post as featured to highlight it in the app.

{% hint style="success" %}
Use the featured post option to showcase important content and keep it prominently visible.
{% endhint %}

#### **Step 5: Advanced settings for individual posts**

Clicking the **advanced settings** option allows further customization of how posts appear in the app. The following toggles can be used to manage post details:

* Show author – Display the author’s name within the post.
* Show publish date – Display the date the post was published.
* Show categories – Display assigned categories on the post.
* Show tags – Display tags for better content organization.
* Show related posts – Display related posts to enhance content discovery.
* Filter related posts by:
  * Categories
  * Authors
  * Featured
  * Tags
* Enable bookmarking – Allows app users to save posts for later by bookmarking them.
* Show bookmark icon – Displays a bookmark icon in the app header  for quick access.

{% hint style="success" %}
Enabling related posts and filtering them by categories or tags helps keep users engaged with relevant content.
{% endhint %}

#### **Step 6: Save your changes**

* Once you have configured the post settings, click save to apply them.


# Bulk post settings

### **How to use bulk post settings in your app?**

The bulk post settings feature allows you to update multiple posts simultaneously, making content management more efficient. You can modify status, categories, and tags for multiple posts in one go, saving time and ensuring consistency.

{% embed url="<https://scribehow.com/shared/Bulk_post_settings__yCnglJl1SkS5x1LHyVoPpQ>" %}

#### **Step 1: Access bulk post settings**

* Navigate to the [**Posts section**](https://app.appmysite.com/app/posts) in your AppMySite dashboard.
* Click on the Bulk icon at the top right of the screen.

#### **Step 2: Select posts for bulk update**

* Use the checkboxes to select the posts you want to update.

#### **Step 3: Apply bulk updates using the filter feature**

* Click on the Filter button at the top right of the screen.
* Modify the following settings for selected posts:
  * Status – Set the selected posts to draft or published.
  * Categories – Assign or update categories for better organization.
  * Tags – Add or modify tags for better post classification.

#### **Step 4: Apply updates to selected posts**

* Choose whether to update all posts or only the selected ones.
* Click on the Update button.
* The update button allows you to modify:
  * Author
  * Categories
  * Tags
  * Attributes
  * Status
  * Featured post

#### **Step 5: Apply and reset changes**

* Click Apply to save the changes to all selected posts.
* If needed, use the Reset button to clear all applied filters and restore default settings.

{% hint style="success" %}
By using bulk post settings, you can efficiently manage multiple posts at once, ensuring consistency across your app's content while reducing manual work.
{% endhint %}


# Post settings

### How to customize post settings in your app?

The **post settings** allow you to control the appearance and functionality of posts in your app. You can manage how posts are displayed, customize post details, and enhance user experience with filtering and sorting options.

{% embed url="<https://scribehow.com/shared/Configure_Post_Settings_on_AppMySite__q1kJ7R7vTp-pNv_DrbqHxg>" %}

#### **Customize post list settings**

These settings control how posts appear in your app's list view.

* Show search icon – Display or add a search icon in the header for quicker access to content.
* Show grid view – Arrange posts in a structured grid format.
* Show excerpt – Display a short preview of each post.
* Show filter – Allow users to filter posts based on attributes.
* Show sort – Enable users to sort posts based on their preferences.
* Show total count – Display the total number of posts available.
* Show author – Show the author's name alongside the post.
* Show published date – Display the publication date of each post.

{% hint style="success" %}
Use the **grid view option** for a more visually appealing layout, or keep the **list view** for a clean, structured look.
{% endhint %}

#### **Customize post image settings**

* Image ratio – Choose the aspect ratio for post images:
  * 16:9 – Widescreen format for panoramic visuals.
  * 4:3 – Classic format for balanced compositions.
  * 1:1 – Square format for symmetrical visuals.
  * 3:4 – Portrait format for vertical images.
  * 9:16 – Full vertical format for tall images.
* Image shape – Choose between square or soft square image styles.
* Center crop images – Keep images centered within the frame for a consistent look.

{% hint style="success" %}
Adjust the image ratio and shape to create a visually engaging post layout tailored to your content.
{% endhint %}

#### **Customize post details settings**

These settings control the details displayed within individual posts.

* Show categories – Display post categories for better organization.
* Show author – Show the author's name inside the post.
* Show published date – Display the date when the post was published.
* Show media in full screen – Allow users to expand media content for a detailed view.
* Show media as thumbnails – Display media in thumbnail format for a compact layout.
* Show attributes – Display post attributes to provide additional details.
* Show attribute values as list – Show attribute values in a list format instead of comma-separated values.
* Show tags – Display tags to help users categorize and explore related content.
* Show related posts – Display related posts to enhance content discovery.

{% hint style="success" %}
Enable **related posts** to keep users engaged by suggesting similar content based on categories or tags.
{% endhint %}

#### **Filter and refine related posts**

* Filter related posts by – Choose a filter option from the dropdown menu to refine related posts.
* Section margins – Adjust the spacing around post sections for a clean layout:
  * Top margin
  * Bottom margin
  * Left margin
  * Right margin

{% hint style="success" %}
Adjust section margins to create a structured and visually balanced post layout.
{% endhint %}

#### **Save your changes**

Once you have customized the post settings, click **Save** to apply the changes.

By adjusting these settings, you can create a well-organized and visually appealing post layout, improving navigation and readability for your app users.


# Post categories

### How to create categories under posts for custom apps?

Post categories help you organize content in your custom app and improve content discovery for users. You can create parent and sub-categories and customize their appearance.

#### Step 1: Go to the categories section

* From the side menu, go to Posts
* From the dropdown, select Categories to open the [**Post categories**](/app/posts/custom-app/post-categories) screen

#### Step 2: Create a new category

{% embed url="<https://scribehow.com/shared/Create_post_categories__CynaEQQlRliFUrcQFYxmlw>" %}

* Click on the +Create button at the top right of the screen
* A pop-up will open where you can name your category
* Click the link icon to select a parent category if you're creating a sub-category
* Leave the parent category field empty to create a top-level category

{% hint style="warning" %}
The maximum character limit for a category name is 120.
{% endhint %}

#### Step 3: Add a feature image

* Click on the Image field to upload an image for the post category.
* You can choose an image from the library, upload a pre-designed image, or create one using the Image Designer

#### Step 4: Save the category

* Click the Create button in the pop-up to save the category

{% hint style="success" %}
To delete or edit a post category, use the pen icon to edit or the bin icon to delete.
{% endhint %}

#### Step 5: Choose a layout for categories

{% embed url="<https://scribehow.com/shared/Post_categories_layout__907hnUQsSz-TVxzRYSGdXQ>" %}

* Click on the Layout button at the top right of the screen
* Select how the categories should appear in the app, such as list or grid view

#### Step 6: Configure post settings

{% embed url="<https://scribehow.com/shared/Configure_post_categories_settings__Ikbi4w3XQqOVGCHvrkdi0w>" %}

* Click on the Settings button to control what appears on the category screen
* The following options are available:
  * Show search icon\
    Enable to display a search icon in the app header for quick access to required content
  * Show bookmark icon\
    Enable to display a bookmark icon in the app header for quick access to bookmarked posts
  * Columns\
    Adjust the number of columns that you would like to see on the post category screen
  * Background color\
    Set the background color of the category screen
  * Category text color\
    Define the color of the text within the category tiles
  * Show category image\
    Enable to display the category images in the app interface
  * Image dimensions\
    Choose an aspect ratio that best fits your images\
    16:9 – Suitable for wide, cinematic visuals\
    4:3 – Classic ratio for balanced compositions\
    1:1 – Square format for uniform display\
    3:4 – Portrait layout for vertical images\
    9:16 – Ideal for tall, portrait-oriented visuals
  * Image shape\
    Select the shape in which the category images are displayed. You can choose from square, squircle (rounded corners), and round
  * Centre crop image\
    When enabled, images are centered within the image frame for a uniform appearance\
    When disabled, images are resized to fit the frame while maintaining their original aspect ratios

#### Step 7: Save your changes

* Once you've configured your layout and settings, click the Save button to apply all updates to your category screen


# Post tags

### How to create and manage tags for your posts

Tags help you group related posts and make it easier for users to discover content through keyword-based navigation. You can add and customize tags directly from the Posts section in your app dashboard.

#### Step 1: Go to the tags section

* From the side menu, go to Posts
* Click on Tags to open the [**tags screen**](https://app.appmysite.com/app/post-tags)

#### Step 2: Create a new tag

{% embed url="<https://scribehow.com/shared/Create_post_tags__HjuacFfCRHCT9M1reu_YyQ>" %}

* Click the +Create button on the top right of the screen
* A pop-up will appear where you can enter a name for the tag
* Use relevant keywords as tag names to improve discoverability of related content

{% hint style="warning" %}
Press the Tab key on your keyboard to create multiple tags quickly in one go.
{% endhint %}

#### Step 3: Save the tag

* Click the Create button in the pop-up to save the tag

{% hint style="success" %}
Once a tag has been created, you can edit it using the pen icon or delete it using the bin icon.
{% endhint %}

#### Step 4: Choose a layout for tags

{% embed url="<https://scribehow.com/shared/Post_tags_layout__dTTGZqxHSXuknPEPTFSuhg>" %}

* Click on the Layout button at the top right of the screen
* Select how the tags will appear in the app, such as list view or tag view

#### Step 5: Configure display settings

{% embed url="<https://scribehow.com/shared/Tags_settings__eHQ8CGmlROysdyMRqSY0lQ>" %}

* Click on the Settings button to control what appears on the tag screen
* The following options are available:
  * Show search icon\
    Displays a search icon in the header for quick access to content
  * Background color\
    Defines the background color of the tag screen
  * Tag text color\
    Sets the color of the text used in the tag labels

#### Step 6: Save your changes

* Click the Save button to apply your settings and update the tag screen in your app


# WordPress

The **WordPress posts** category includes guides on managing, customizing, and displaying posts within your app. Posts are time-stamped articles organized through categories and tags, with the most recent posts appearing first.

{% embed url="<https://www.youtube.com/watch?v=kSEP0-9lybs>" %}

This section covers everything from setting up post layouts, configuring display options, enabling search and filtering, managing related posts, and troubleshooting common issues. Whether you want to optimize post appearance, enhance navigation, or refine content organization, these guides will help you make the most of your **WordPress post settings** in the app.


# WordPress posts settings

### **How to customize posts on the WordPress app?**

The Post settings section allows you to control how posts appear within your app. You can choose from multiple options to customize the layout and appearance of post screens.

{% embed url="<https://scribehow.com/shared/Setting_Up_Tags_in_AppMySite__GHqT6IRyRv2M2tWb6Qz0kw>" %}

**Step 1: Access the post screen**

* Navigate to the [**Post**](https://app.appmysite.com/app/posts) section of your app.

#### **Step 2: Manage post screens**

* Render as web view – Display posts in a web view interface. This is recommended if your website has custom features or if posts do not appear correctly in the app. Disabling this option enables a faster, native view.
* Share - Enable to display a share icon for quick access to sharing options.
* Show search icon in header – Display or add a search icon to help users find posts by entering a query. The icon will appear on the post listing page and post category page when enabled.
* Show as grid – Display posts in a grid view for a structured layout. Disabling this option switches to a list view.
* Show excerpt: Turn this on to display a short preview of each post.
* Show published date – Display the publication date of each post.
* Image ratio – Define the aspect ratio for post images. Choose an appropriate image ratio to match your content.
* Image shape – Select the preferred shape for post images.
* Center crop images – Maintain a consistent look by centering images within the frame. Disabling this option fits images to the frame while preserving their original aspect ratio.

{% hint style="danger" %}
Enabling Render as Web View will automatically disable other page settings, as the page will be displayed exactly as it appears in a mobile browser.
{% endhint %}

{% hint style="success" %}
Using a grid view with optimized image settings ensures a visually appealing and well-structured layout.
{% endhint %}

#### **Step 3: Customize post details screen**

These settings define the layout of the **post details** screen:

* Show author – Display the author’s name at the bottom of the title.
* Show published date – Show the publication date beneath the post title.
* Show categories – Display post categories at the top of the page.
* Show tags – Display tags associated with the post to help users navigate related content.
* Show additional information – Display attributes and associated details about the post.
* Show media in full screen: Enable to display a full-screen expanded view of media upon tapping.
* Show related posts – Show similar posts beneath the current post to provide users with additional content. If enabled, related posts can be filtered by:
  * Author
  * Categories
  * Featured
  * Tags
* Image ratio – Define the aspect ratio for post images on the details screen.
* Image shape – Select the preferred shape for post images.
* Center crop images – Keep images centered within the frame for a consistent display.

{% hint style="success" %}
Enabling related posts improves user engagement by suggesting content similar to what they are currently viewing.
{% endhint %}

#### **Step 4: Save your changes**

* Once you have customized the post settings, click Save to apply them.


# Custom post types

### How to sync your WordPress website’s custom post types to your mobile app?

You can now show custom post types and taxonomies created by third-party plugins from your website in your mobile app.&#x20;

Several WordPress plugins create custom post types and taxonomies on your website. This includes LMS solutions, directory listing plugins, real estate listings, and more.

AppMySite supports custom post types. If a plugin creates custom posts and taxonomies on your website, you can sync them to your app.&#x20;

{% embed url="<https://scribehow.com/shared/Custom_post_types__N_rSi2BtQjW1P8GPsDy8-g>" %}

Follow the steps below to import custom post taxonomies and post types to your app:

* Connect your WordPress website and app using Application Password support to enable custom post taxonomies. Visit the Help Centre article below to learn more:

{% content-ref url="/pages/vsK7Vwh0HCEAg0mwSsAx" %}
[WP Application-Password](/app/connectivity/wordpress-connectivity/grant-access/wp-application-password)
{% endcontent-ref %}

* On your WordPress website’s admin panel, navigate to Appearance > Menus.&#x20;
* Choose your primary menu and add the custom posts you want to show in the app.&#x20;
* Navigate to the Menu screen in the Settings module of your AppMySite account. Select the box next to **Pick a menu from my website.**&#x20;
* Select your primary menu.&#x20;
* Your app will now reflect your website’s custom posts in the app.&#x20;
* To render these posts in web view, navigate to Settings > Posts. Turn on the Web View toggle to show custom posts in the app exactly as they appear on your website.

{% hint style="warning" %}
Support for custom post taxonomies requires connectivity via Application passwords. Your AppMySite plugin version must be 3.0.0 or higher to support application passwords.
{% endhint %}


# Forum plugins

### Which forum plugins can be integrated with your WordPress app?

Integrating forum plugins with your WordPress app is possible using the custom post type feature. The integration process remains the same across different forum plugins.

#### **Supported forum plugins**

Here are some popular forum plugins that can be integrated with your app:

* Ultimate Member
* BuddyPress / BuddyBoss
* bbPress
* LearnDash (LMS Plugins)
* Dokan Plugin (WCFM)
* Memberpress

&#x20;**Steps to integrate a forum plugin in your app**

**1.** [**Connect your WordPress website and app**](/app/connectivity/wordpress-connectivity/grant-access/wp-application-password)

Use the Application Password feature to enable custom post taxonomies.

{% content-ref url="/pages/vsK7Vwh0HCEAg0mwSsAx" %}
[WP Application-Password](/app/connectivity/wordpress-connectivity/grant-access/wp-application-password)
{% endcontent-ref %}

**2. Add custom posts to your menu**

* Log in to your WordPress admin panel.
* Navigate to Appearance > Menus.
* Select your primary menu and add the custom posts you want to display in the app.

**3. Configure the app menu in AppMySite**

* Go to the Menu screen in the Settings module of your AppMySite account.
* Check the box next to Pick a menu from my website.
* Select your primary menu from the list.

**4. Reflect custom posts in the app**

Your app will now automatically sync and display the custom posts from your website.

{% hint style="warning" %}
Any updates made to custom posts on your website will reflect in the app in real time.
{% endhint %}

**5. Render posts in web view**

* Navigate to [**Settings > Posts**](https://app.appmysite.com/app/posts) in your AppMySite account.
* Enable the Web View option to display custom posts exactly as they appear on your website.


# Product

The **products** section allows you to manage and display your WooCommerce products seamlessly in your app. All product details, including images, descriptions, pricing, and stock availability, are automatically synced from your website, ensuring real-time updates.

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

Here, you'll find:

* Guides on setting up and managing product listings within your app.
* Customization options to enhance product layout, images, and discount badges.
* Best practices for enabling sorting, filtering, and checkout settings.

{% embed url="<https://youtu.be/dhbSKs-x8vs>" %}

Explore this section to optimize your app’s shopping experience, making it more user-friendly and visually appealing for your customers.


# WordPress product settings

### **How to customize product screen settings in your app?**

AppMySite enables you to customize how Product screens look and function in your app. To do this, navigate to the Products screen from your WooCommerce app dashboard. You will find all configurable settings under two sections: product list and product details.

{% embed url="<https://scribehow.com/shared/Customise_products_page__ipDW-8noS0mmA78qBSoQEQ>" %}

**Step 1: Access the products screen**

* Navigate to the [**Products**](https://app.appmysite.com/app/product-settings) section from your app dashboard.

#### **Step 2: Customize product list settings**

Customize the way products are displayed in the app's product listing.

**Product Display Options**

* Show filter – Allow users to filter products by attributes.
* Show sort – Enable sorting options so users can arrange products based on their preferences.
* Show search icon in header – Display a search icon in the header for quick product searches.
* Show grid view – Display products in a structured grid format instead of a list.
* Show wishlist icon – Display a heart icon allowing users to add products to their wishlist.

{% hint style="danger" %}
To use the Wishlist feature, the app user must be logged in. The feature is also not available in offline mode.
{% endhint %}

**Discount & Availability Indicators**

* Show discount badge – Display a badge on products with a sale price.
* Badge background color – Customize the background color of the discount badge.
* Badge icon color – Choose the icon color of the discount badge.
* Show discount percentage – Display the discount percentage within the badge.
* Show "Out of stock" watermark – Indicate when a product is out of stock.

**Image & Button Settings**

* Original images – Display uploaded original images without optimization (may affect app load time).
* Show add to cart button – Display the "Add to Cart" button on product listings.
* Image ratio – Define the aspect ratio of product images to match your design.
* Image shape – Select the preferred shape of product images.
* Center crop images – Maintain a consistent image appearance by centering them within the frame.

{% hint style="success" %}
Enable grid view for a structured product layout and use discount badges to highlight promotions effectively.
{% endhint %}

**Step 3: Customize product details settings**

These settings control how individual product pages appear and function.

#### **Page Display Options**

* Render as web view – Display the product details page as it appears in a mobile browser.
* Show additional information – Display extra product details.
* Show additional information as a list – Present additional details in a list instead of comma-separated values.
* Show wishlist icon – Enable to display a wishlist icon in the header for quick access to products added to the app user’s wishlist.

{% hint style="success" %}
Saved items in the appear on the Wishlist screen with real-time sync.
{% endhint %}

#### **Image Settings**

* Show images in gallery – Allow users to tap on a product image to view it in a gallery.
* Show images as thumbnails in gallery – Display product images as thumbnails within the gallery view.
* Image ratio – Define the aspect ratio of images within product detail screens.
* Center crop images – Keep images centered within the frame for a uniform display.

#### **Related Products & Discovery**

* Show related products – Display related products at the bottom of the product page.
* Filter-related products – Choose how related products are filtered and displayed.

{% hint style="danger" %}
Enabling Render as Web View will automatically disable other product settings, as the screen will be displayed exactly as it appears in a mobile browser.
{% endhint %}

{% hint style="success" %}
Using related products helps increase product discovery and improves user engagement.
{% endhint %}

**Step 4: Customize checkout settings**

* Show native payment screen – Display payment options on a native checkout screen. Disabling this option redirects users to the web view payment screen.

#### **Step 5: Save your changes**

Once you configure these settings, click Save to apply them.

These settings allow you to customize the product screen and improve the shopping experience in your WooCommerce-based mobile app. They are only available if you use the WooCommerce product for your app.

{% hint style="warning" %}
All products, including images and content, are directly fetched from your WooCommerce website, ensuring real-time updates and synchronization in your app.
{% endhint %}


# Remove product reviews

### Is it possible to remove product reviews from the product page on my WooCommerce app?

Your app syncs all native WooCommerce data, including product reviews, directly from your WooCommerce website.

{% embed url="<https://scribehow.com/shared/WooCommerce_product_reviews__qYjhEn8VSq2g32t2mNqXZQ>" %}

To remove product reviews from your app’s product screens, disable reviews in your WooCommerce store settings. This will prevent them from appearing both on your website and in the app.

{% hint style="warning" %}
If you are using a non-WooCommerce website with the web-to-app solution, disable product reviews on your website to remove them from the app as well.
{% endhint %}


# Payment gateway support

### Which payment gateways do you support?

Your app will support any payment gateways that is active on your website or web store. No additional setup is required to integrate a payment gateway into your app.

During checkout, your app will automatically display the payment options available on your website, ensuring a seamless transaction experience.

{% hint style="warning" %}
Payment gateways are directly fetched from your website, so any updates or changes made to your site’s payment options will reflect in your app instantly.
{% endhint %}


# Shipping plugins support

### Which shipping plugins does AppMySite support?

Your app supports all shipping plugins and methods configured on your WooCommerce store. No additional setup is required, as shipping methods are automatically synced from your website to the app.

Shipping methods are directly fetched from your WooCommerce store, so any updates made on your website will automatically reflect in your app.

{% hint style="warning" %}
Ensure all shipping options appear correctly by updating your Android and iOS apps to code version 1.15.0 or higher and the plugin to version 3.3.0 or higher on your website.
{% endhint %}


# Settings

Settings overview

The settings section allows you to manage key configurations that define how your app functions and appears. From general preferences to advanced customizations, this section helps you tailor your app to meet your business needs.

Here, you'll find:

* Guides on changing the product type, app name, and domain name.
* Instructions for enabling offline mode, selecting languages, and configuring social accounts.
* Steps for managing app deletion, movement, and other essential settings.

{% embed url="<https://www.youtube.com/watch?v=Atq7fW1VM3s>" %}

Explore this section to customize your app’s core settings and ensure a smooth, optimized experience for your users.


# Configure general settings

### How to configure general settings in your app?

The General settings section allows you to define how your app behaves and appears across different platforms. These settings vary depending on the app product you’ve selected—WordPress, WooCommerce, Custom, or Web to App.

{% embed url="<https://scribehow.com/shared/App_settings__jrc0a-JbS4imtpAgfWKrOQ>" %}

#### Step 1: Go to General settings

* From the app dashboard, navigate to [**Settings**](https://app.appmysite.com/app/settings) in the side menu

#### Step 2: Configure your general settings

* App name – This is the name of the app shown on the App Store or Play Store listing and on the native screens within the app, and can be changed anytime.&#x20;
* Product – Displays the type of solution your app is built on. You can change the product type using the Change button between WordPress, WooCommerce, Custom, and Web to App.

{% hint style="danger" %}
Changing the product type will reset certain app screens and features depending on the new product selection.
{% endhint %}

* Website – If you are using the WordPress, WooCommerce or Web to App product, the URL of your connected website will be shown here. You can change this at any point of time.&#x20;

{% hint style="danger" %}
If you're using a WordPress or WooCommerce solution, changing the website address will require reconnecting your website with the plugin.
{% endhint %}

* Country – Select the country associated with your app.
* Map coordinates – Specify the primary location of your app. Some features may require this information.
* Terms and conditions – Add a web link to your Terms and Conditions page. It’ll appear on your app’s user registration page if login is enabled.&#x20;
* Enable auto-translate –Enable to translate app content from other languages into the default language. Disabling this will keep all content in its original language.

{% hint style="warning" %}
This feature will automatically be enabled for Custom Apps and Web-to-App solutions.&#x20;
{% endhint %}

* Enable language selection – Lets app users manually select a preferred language from the app settings on their device.

{% hint style="warning" %}
When disabled, the app will not display a language selection option.
{% endhint %}

* Force app update – Prompt users to update the app when a newer version is available on the store.
* Enable offline mode – Enables caching of key app content, so limited functionality remains available without an internet connection.
* Prompt on exit – Displays a confirmation prompt when a user attempts to close or exit the app.

Hit Save when you are done.&#x20;


# Change app product

### How to change your app product?

Changing your app product is simple and can be done in just a few steps:

{% embed url="<https://scribehow.com/shared/Change_app_product__Dq5XSCgQR1GYbLwN-2gDCg>" %}

Changing your app product is quite straightforward. Follow these simple steps:&#x20;

* Go to your app dashboard
* Navigate to [**Settings**](https://app.appmysite.com/app/settings)
* Click on Change featured on the right side of the product field.
* Select your desired product.
* Click Proceed to progress through the Change product technology pop-up.

{% hint style="danger" %}
Changing product technology will reset most of your app's settings.
{% endhint %}

{% hint style="warning" %}
We recommend publishing your app to the app stores after making this change. Your customers may experience disruptions until they download the updated version.
{% endhint %}




---

[Next Page](/llms-full.txt/1)