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.

1. Enable Web View

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

1. App Header Customization

Personalize the app's header to align with your branding and improve usability:

• 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.

• Navigation Arrows: Enable arrows in the header to help users navigate through web pages.

• Three-dot Menu: Display a 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.

1. Website Header, Sidebar, and Footer

• Show Website Header: Choose whether to display or hide your website's header.

• Show Website Sidebar: Enable the website sidebar to provide quick access to additional navigation or features.

• Show Website Footer: Decide if the website footer should be visible within the app.

1. Webpage Navigation and Interactivity

• 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.

1. User-Specific Settings

• Retain Cookies: Preserve user-specific settings and data, such as login sessions, by retaining cookies.

1. Advanced Tracking and Optimization

• Include 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.

1. Loading Experience

• Native Loader Animation: Display an animation while web pages load in the background to provide a smooth user experience.

1. Customize Web Elements

• Hide Elements by Class or ID: Remove specific elements from your webpage by entering their HTML class or HTML ID.

---

1. Override CSS

This feature gives you even more control over your web view's appearance and functionality. With Override CSS, you can:

• Hide elements, override colors, or modify styling for your mobile app. Example:

// .example-banner { display: none; }

• Add custom banners:

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

• Change colors:

cssCopy codebody { background-color: #f5f5f5; }

• Enable the Override CSS Toggle: Turn this setting on in the Web View Settings section.

• Add Custom CSS: Enter your code in the provided field.

1. Save and Finalize

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