top of page

Mobile Browser

The Mobile Browser plugin is specifically designed to extend the features of the game application to support in-application browser, useful for browser popups, browser redirects, browser previews, Webview previews, HTML + CSS DOM extensions, etc., in both Android and iOS, for games built using Construct 3 and Construct 2.


The Mobile Browser plugin has full control over the in-application browser, with lots of features to choose from for the customization of the browser, even being able to control the game application's webview itself.


The Mobile Browser plugin supports all editors of Construct, both Construct 3 and Construct 2. Including all runtimes, c2runtime, c3runtime and c3runtime with modules and worker mode.


The Mobile Browser plugin gives the developer the ability to append, control, modify, support and utilize the game application's in-app browser.

PlayFab API v2.png

Introduction

Step 1.png

The Construct Master Collection supports the full and easy integration of native mobile Android SDKs and iOS SDKs for both Construct 3 and Construct 2.


Please click here to learn more about Mobile.

Features


The Mobile Browser plugin is specifically designed to extend the features of the game application to support in-application browser, useful for browser popups, browser redirects, browser previews, Webview previews, HTML + CSS DOM extensions, etc., in both Android and iOS, for games built using Construct 3 and Construct 2.


The Mobile Browser plugin has full control over the in-application browser, with lots of features to choose from for the customization of the browser, even being able to control the game application's webview itself.


The Mobile Browser plugin supports all editors of Construct, both Construct 3 and Construct 2. Including all runtimes, c2runtime, c3runtime and c3runtime with modules and worker mode.


The Mobile Browser plugin gives the developer the ability to append, control, modify, support and utilize the game application's in-application browser.


Here are some of the native features of the mobile plugin:

  • In-application browser

  • Full browser control

  • External JavaScript scripts

  • External CSS

  • Link open in Webview

  • Link open in external Webview

  • Link open in the actual application browser

  • Customization of the in-application browser.

  • Customization of the application webview.

  • Android custom settings

  • iOS custom settings

  • Optional Windows custom settings.

  • Optional MacOS custom settings.

  • Easy to use and no programming required.

For more information about native mobile or Android and iOS features, please click here to learn the introductory lessons to Mobile.


Platform Integration


Here are some of the platforms that are natively supported:

  • Android

  • iOS

  • Native Android

  • Native iOS

  • Ready support for Windows

  • Ready support for MacOS


Build Support


Here are some of the supported build options:


Editor Features


Here are some of the features in the Construct editor:

  • Construct 3

  • Construct 2

Introduction
Features

How to use?

It is easy to use the Mobile Browser plugin, you will only need to follow the steps below.

1. The first step is to add the Mobile Browser object into the project.


Instructions
Documentation

Documentation

There is currently nothing to show, we will add more in the future.

ACEs

Actions, Conditions & Expressions

Actions

The following action groups:

  • Core

  • Add Option : Android

  • Add Option : iOS

  • Add Option : Windows

Core

  • Open Link - Opens a URL in a new InAppBrowser instance, the current browser instance, or the system browser.

    • URL Link - Input the URL to show on the webview.

    • Target - "_self", if white-listed it opens on the Cordova Webview, "_blank" opens in the InAppBrowser, while "_system" opens in the system's web browser.

    • Location - Set to yes or no to turn the InAppBrowser's location bar on or off.

    • Add Options - "None" is to not add additional options. Otherwise, choose the Platform to load the additional options from.


  • Close - Closes the InAppBrowser window.

​

  • Show - Displays an InAppBrowser window that was opened hidden. Calling this has no effect if the InAppBrowser was already visible.

  • Hide - Hides the InAppBrowser window. Calling this has no effect if the InAppBrowser was already hidden.

​

  • Execute Script - Injects JavaScript code into the InAppBrowser window. (Only available when the target is set to '_blank').

    • Script - The JavaScript code to insert into the InAppBrowser window.


  • Execute External Script - Injects External JavaScript code into the InAppBrowser window. (Only available when the target is set to '_blank').

    • File Name - The External JavaScript Code File to insert into the InAppBrowser window.


  • Insert CSS - Injects CSS into the InAppBrowser window. (Only available when the target is set to '_blank').

    • Style - The CSS Style code to insert into the InAppBrowser window.


  • Insert External CSS - Injects External CSS code into the InAppBrowser window. (Only available when the target is set to '_blank').

    • File Name - The External CSS Code File to insert into the InAppBrowser window.


​ Add Option : Android

  • Hidden - Set to "Yes" to create the browser and load the page, but not show it. The loadstop event fires when loading is complete. Omit or set to "No" (default) to have the browser open and load normally.

    • Set Toggle - Set "Yes" or "No".


  • Clear Cache - Set to "Yes" to have the browser's cookie cache cleared before the new window is opened.

    • Set Toggle - Set "Yes" or "No".


  • Clear Session Cache - Set to "Yes" to have the session cookie cache cleared before the new window is opened.

    • Set Toggle - Set "Yes" or "No".


  • Close Button Caption - Set to a string to use as the close button's caption instead of a X. Note that you need to localize this value yourself.

    • Caption - Set the Caption string.


  • Close Button Color - Set to a valid hex color string, for example: #00ff00, and it will change the close button color from default, regardless of being a text or default X. Only has effect if user has Location set to "Yes".

    • Hex Color - Set the Hex Color string.


  • Footer - Set to "Yes" to show a close button in the footer similar to the iOS Done button. The close button will appear the same as for the header hence use "CloseButtonCaption" and "CloseButtonColor" to set its properties.

    • Set Toggle - Set "Yes" or "No".


  • Footer Color - Set to a valid hex color string, for example "#00ff00" or "#CC00ff00" (#aarrggbb) , and it will change the footer color from default. Only has effect if user has footer set to "Yes".

    • Hex Color - Set the Hex Color string.

​

  • Hardware Back - Set to "Yes" to use the hardware back button to navigate backwards through the InAppBrowser's history. If there is no previous page, the InAppBrowser will close. The default value is "Yes", so you must set it to "No" if you want the back button to simply close the InAppBrowser.

    • Set Toggle - Set "Yes" or "No".


  • Hide Navigation Buttons - Set to "Yes" to hide the navigation buttons on the location toolbar, only has effect if user has location set to "Yes". The default value is "No."

    • Set Toggle - Set "Yes" or "No".


  • Hide URL Bar - Set to "Yes" to hide the url bar on the location toolbar, only has effect if user has location set to "Yes". The default value is "No".

    • Set Toggle - Set "Yes" or "No".


  • Navigation Button Color - Set to a valid hex color string, for example: "#00ff00", and it will change the color of both navigation buttons from default. Only has effect if user has location set to "Yes" and not HideNavigationButtons set to "Yes".

    • Hex Color - Set the Hex Color string.


  • Toolbar Color - Set to a valid hex color string, for example: "#00ff00", and it will change the color the toolbar from default. Only has effect if user has location set to "Yes".

    • Hex Color - Set the Hex Color string.


  • Zoom - Set to "Yes" to show Android browser's zoom controls, set to "No" to hide them. Default value is "Yes".

    • Set Toggle - Set "Yes" or "No".


  • Media Playback Requires User Action - Set to "Yes" to prevent HTML5 audio or video from autoplaying (defaults to "No").

    • Set Toggle - Set "Yes" or "No".

  • Should Pause On Suspend - Set to "Yes" to make InAppBrowser WebView to pause/resume with the app to stop background audio (this may be required to avoid Google Play issues like described in CB-11013).

    • Set Toggle - Set "Yes" or "No".

  • Use Wide View Port - Sets whether the WebView should enable support for the "viewport" HTML meta tag or should use a wide viewport. When the value of the setting is "No", the layout width is always set to the width of the WebView control in device-independent (CSS) pixels. When the value is "Yes" and the page contains the viewport meta tag, the value of the width specified in the tag is used. If the page does not contain the tag or does not provide a width, then a wide viewport will be used. (defaults to "Yes").

    • Set Toggle - Set "Yes" or "No".


  • Before Load - Set to enable the "beforeload" event to modify which pages are actually loaded in the browser. Note that POST requests are currently not supported and will be ignored, if set it will raise an error.

    • Options - Set to "Get" to intercept only GET requests, "Post" to intercept only POST requests and "Both" to intercept both GET and POST requests.


​ Add Option : IOS

  • Hidden - Set to "Yes" to create the browser and load the page, but not show it. The loadstop event fires when loading is complete. Omit or set to "No" (default) to have the browser open and load normally.

    • Set Toggle - Set "Yes" or "No".


  • Clear Cache - Set to "Yes" to have the browser's cookie cache cleared before the new window is opened.

    • Set Toggle - Set "Yes" or "No".


  • Clear Session Cache - Set to "Yes" to have the session cookie cache cleared before the new window is opened.

    • Set Toggle - Set "Yes" or "No".


  • Close Button Color - Set as a valid hex color string, for example: "#00ff00", to change from the default "Done" button's color. Only applicable if toolbar is not disabled.

    • Hex Color - Set the Hex Color string.


  • Close Button Caption - Set to a string to use as the "Done" button's caption. Note that you need to localize this value yourself.

    • Caption - Set the Caption string.


  • Disallow Overscroll - Set to "Yes" or "No" (default is "No"). Turns on/off the UIWebViewBounce property.

    • Set Toggle - Set "Yes" or "No".

  • Hide Navigation Buttons - Set to "Yes" or "No" to turn the toolbar navigation buttons on or off (defaults to no). Only applicable if toolbar is not disabled.

    • Set Toggle - Set "Yes" or "No".


  • Navigation Button Color - Set as a valid hex color string, for example: "#00ff00", to change from the default color. Only applicable if navigation buttons are visible.

    • Hex Color - Set the Hex Color string.


  • Toolbar - Set to "Yes" or "No" to turn the toolbar on or off for the InAppBrowser (defaults to "Yes").

    • Set Toggle - Set "Yes" or "No".


  • Toolbar Color - Set as a valid hex color string, for example: "#00ff00", to change from the default color of the toolbar. Only applicable if toolbar is not disabled.

    • Hex Color - Set the Hex Color string.


  • Toolbar Translucent - Set to "Yes" or "No" to make the toolbar translucent(semi-transparent) (defaults to "Yes"). Only applicable if toolbar is not disabled.

    • Set Toggle - Set "Yes" or "No".


  • Enable Viewport Scale - Set to "Yes" or "No" to prevent viewport scaling through a meta tag (defaults to "No").

    • Set Toggle - Set "Yes" or "No".


  • Media Playback Requires User Action - Set to "Yes" to prevent HTML5 audio or video from autoplaying (defaults to "No").

    • Set Toggle - Set "Yes" or "No".


  • Allow Inline Media Playback - Set to "Yes" or "No" to allow in-line HTML5 media playback, displaying within the browser window rather than a device-specific playback interface. The HTML's "video" element must also include the "webkit-playsinline" attribute (defaults to "No").

    • Set Toggle - Set "Yes" or "No".


  • Keyboard Display Requires User Action - Set to "Yes" or "No" to open the keyboard when form elements receive focus via JavaScript's "focus()" call (defaults to "Yes").

    • Set Toggle - Set "Yes" or "No".


  • Suppresses Incremental Rendering - Set to "Yes" or "No" to wait until all new view content is received before being rendered (defaults to "No").

    • Set Toggle - Set "Yes" or "No".


  • Presentation Style - Set to "Pagesheet", "Formsheet" or "Fullscreen" to set the presentation style (defaults to "Fullscreen").

    • Set Toggle - Set "Pagesheet", "Formsheet" or "Fullscreen".


  • Transition Style - Set to "FlipHorizontal", "CrossDissolve" or "CoverVertical" to set the transition style (defaults to "CoverVertical").

    • Set Toggle - Set "FlipHorizontal", "CrossDissolve" or "CoverVertical".


  • Toolbar Position - Set to "Top" or "Bottom" (default is "Bottom"). Causes the toolbar to be at the top or bottom of the window.

    • Set Toggle - Set "Top" or "Bottom".


  • Hide Spinner - Set to "Yes" or "No" to change the visibility of the loading indicator (defaults to "No").

    • Set Toggle - Set "Yes" or "No".


  • Before Load - Set to enable the "beforeload" event to modify which pages are actually loaded in the browser. Note that POST requests are currently not supported and will be ignored, if set it will raise an error.

    • Options - Set to "Get" to intercept only GET requests, "Post" to intercept only POST requests and "Both" to intercept both GET and POST requests.


​ Add Option : Windows

  • Hidden - Set to "Yes" to create the browser and load the page, but not show it. The loadstop event fires when loading is complete. Omit or set to "No" (default) to have the browser open and load normally.

    • Set Toggle - Set "Yes" or "No".

  • Hardware Back - Set to "Yes" to use the hardware back button to navigate backwards through the InAppBrowser's history. If there is no previous page, the InAppBrowser will close. The default value is "Yes", so you must set it to "No" if you want the back button to simply close the InAppBrowser.

    • Set Toggle - Set "Yes" or "No".


  • Fullscreen - Set to "Yes" to create the browser control without a border around it. Please note that if "Location=No" is also specified, there will be no control presented to user to close IAB window.

    • Set Toggle - Set "Yes" or "No".

Conditions

The following condition groups:

  • Core

  • Event Triggers

  • Execute Script

  • Intert CSS

Core

  • On Error - Triggers when the plugin encountered an error.



Event Triggers

  • On Load Start - Event fires when the InAppBrowser starts to load a URL.

​

  • On Load Stop - Event fires when the InAppBrowser finishes loading a URL.

​

  • On Load Error - Event fires when the InAppBrowser encounters an error when loading a URL.

​

  • On Exit - Event fires when the InAppBrowser window is closed.


  • On Before Load - Trigger fires when the in-application browser decides whether to load a URL or not (only with option 'beforeload' set).


  • On Message - Trigger fires when the in-application browser receives a message posted from the page loaded inside the in-application browser webview.


Execute Script

  • On Loaded Script - Triggers when the script has been fully loaded.

​

  • On Loaded Script File - Triggers when the script file has been fully loaded.


Insert CSS

  • On Loaded CSS - Triggers when the CSS has been fully loaded.

​

  • On Loaded CSS File - Triggers when the CSS file has been fully loaded.

Expressions

The following expression groups:

  • Core

  • Event Triggers

  • Debugging

Core

  • recentURL - Return the recent URL used to open a link.


  • EventResponse - Return the response of the recently fired event.


Event Triggers

  • loadErrorMessage - Return the recent error message when "On Load Error" is triggered. This is a production error message.


Debugging

  • errorMessage - Return the recent error message when "On Error" is triggered. This is a debugging error message.

Object   Properties

Plugin Properties

The following property groups:

  • Configuration

Configuration - The options to set the plugin settings.

  • Debug - If checked, the runtime will log runtime notifications. This should be unchecked on production builds.



Properties
Showcase

Showcase

The Mobile Browser is a plugin that controls the app webview or append an in-application browser to the current application webview. This lets you browse the web from your game application without opening an external browser, or manipulate or control the internal Webview where the game application is running.



Game Projects

Game Projects 

Instructions Kit

Specifications

  • Instructions - The game project contains instructions and steps on how to use the addon and its features.

  • Action, Conditions and Expressions - It covers the implementation of each action, condition and expression.

  • Tips and Tricks - It provides some tips and tricks on the recommended ways of using the addon.

Supporters

Only

bottom of page