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.

• Enable Web View

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

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

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

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

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

• User-specific settings

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

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

• Loading experience

  • Show native loader – Display an animation while web pages load in the background to provide a smooth user experience.

• Customize web elements

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

• Override CSS

  • Gain more control over your Web View's appearance and functionality.

Use Override CSS to hide elements, override colors, and modify styling for a more customized mobile app experience.

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; }

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

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.

• Save and Finalize

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