Read our documentation
For more in-depth guides on onboarding and setup.
Read Documentation

Using the Advanced Configuration

The basic configuration of Canvas will give you control over the tabbed menu and its colors, but in order to make further changes to the design and even behaviors of your app, you will need to use the advanced configuration.Below you will find a detailed explanation for each one of the available settings for the advanced configuration:

General Configuration

Configuration NameTypeDescriptionRemote_Server_Availabletrue/falseIf true, the app will look for the MobiLoud Canvas plugin and the login endpoint on the URL specified below.Remote_Server_Root_URLtext (url)The URL to your website where the MobiLoud Canvas is installed.Development_Always_Download_New_Config true/falseYou can enable this to make sure the app always downloads the latest remote configuration when it starts. It makes sense to disable it once the app is published and configuration changes are less frequent (it will take a couple loads of the app for a change to take effect, but the start time will be reduced).Allow_Local_Caching_For_Offline_ModeWhen local caching is enabled, the app stores the pages opened during a session (all tabs, any link clicked) and makes them available for offline use.Main_Page_URLtext (url)The page that will be displayed when the app is launched in case tabs are not configured.Preload_Main_Page_URLtrue/falsePreload the main page during the splash screen.

Navigation

Configuration NameTypeDescriptioniOS_Pull_To_Refreshtrue/falseIf disabled, pulling the screen down will not refresh the current page on iOSAndroid_Pull_To_Refreshtrue/falseIf disabled, pulling the screen down will not refresh the current page on AndroidiOS_Back_Button_Bartrue/falseIf enabled a bar containing a back button will be displayed at the bottom section of your iOS app, allowing users to return to the previous page - swipe from left should still work even if disabled.Android_Back_Button_Bartrue/falseIf enabled a bar containing a back button will be displayed at the bottom section of your Android app, allowing users to return to the previous page - physical back button should still work even if disabledEnable_Progress_Viewtrue/falseIf enabled displays a progress bar above the tabbed navigation while the content is loading.Open_Links_In_A_New_Screentrue/falseIf enabled, whenever a link is clicked a new window will be displayed, over everything, and the link content will load there. Keeping this feature disabled will cause links to load on the current view/tab.Open_External_Links_In_Apptrue/falseIf enabled, external links will open in the app rather than the device's native browser.Share_Buttontrue/falseIf enabled a share button will be displayed in the bottom bar.Exit_App_With_Back_Buttontrue/falseOn Android, if this is enabled, using the device back button from the app's main screen will close the app.Enable_Webview_Transition_Animationtrue/falseIf true, when navigating to an internal/external link, an animation will be displayed when the new content is loaded.

Tab Menu

Configuration NameTypeDescriptionShow_Tab_Menutrue/falseSet it to true to display the bottom tabbed navigation containing the tabs that were configured in the Items section.Auto_Hide_Tab_Menu_On_Scrolltrue/falseIf enabled, this feature will cause the bottom tabbed navigation to be automatically hidden if the user starts to scroll.ItemsarrayThis item contains the details for each one of the tabs that will be displayed in the bottom tabbed navigation, each item has its own settings as you can see below.

Items Array

KeyTypeDescriptionBackground ColorhexThe background color of the tabStatus_Bar_ColorhexThe color of your status bar when the tab is selectedPreloadtrue/falseIf enabled the content of the tab will be pre-loaded in the splash screen.Icon_FontstringIcon_Font_NamestringThe code used for the icon that should be displayed in the tab.Icon_URLstring (url)In case you decide to use a custom icon rather than the available icon libraries, you can insert the URL to the icon image here.URLstring (url)The URL that should be loaded in the tabLabelarrayContains the label for each one of the different languages, using the language code for the key and the label for value, as in the following example:"en": "Home","es": "Início"Typeconstant: "Webview" or "Alerts"Categorizes the tab item into a certain type.

Styling

Configuration NameTypeDescriptionStatus_Bar_Colorhex valueThe status bar color is displayed at the very top of the screen. This can be customized to match the interface colors of your app, but we recommend keeping it black.External_Links_Status_Bar_Colorhex valueThe background color of the status bar when the webview displays an external link in the internal/external screenView_Background_Colorhex valueThe background color for all the screens in the app. This color can be overriden by Webview_Background_Color in each tab itemAndroid_Themeconstants: "Dark" or "Light"Two main styles for the UI elements, following Android standardsNo_Internet_Connection_Colorhex valueThe color used as a background for the "No internet connection available" message.No_Internet_Connection_Text_Colorhex valueThe color used as text color for the "No internet connection available" message.Tab_Bar_Loading_Progress_Colorhex valueThe color to use for the progress bar displayed above the tab barTab_Bar_Background_Colorhex valueThe background color of the Tab MenuTab_Bar_Selected_Tab_Colorhex valueThe color of the icon+text used in the Tab Menu when that tab item is selectediOS_Translucencytrue/falseAndroid_Tab_Bar_Disabled_Tab_Colorhex valueThe color of the icon+text used in the Tab Menu when that tab item is NOT selected (default state)Android_UI_Tab_Background_Colorhex valueThe background color of any other tab bar (i.e. top Alerts bar) used in the appAndroid_UI_Tab_Selected_Colorhex valueThe color of the icon+text used in any other tab bar (i.e. top Alerts bar) inside the app, when that tab item is selectedAndroid_UI_Tab_Disabled_Colorhex valueThe color of the icon+text used in any other tab bar (i.e. top Alerts bar) inside the app, when that tab item is NOT selected (default state)Android_Alerts_Tab_Bar_Bottom_Line_Selectorhex valueMostly used on Android, this colors the line which marks the selected tab in the Alert's top barWebpage_Unavailable_Button_Colorhex valueThe color for the button which is shown when the page inside a webview is not availableAndroid_Toggle_Switch_Thumb_Color_Onhex valueThe color of the thumb (knob of the switch) when the switch is ONAndroid_Toggle_Switch_Thumb_Color_Offhex valueThe color of the thumb (knob of the switch) when the switch is OFFAndroid_Toggle_Switch_Background_Color_Onhex valueThe color of the background of the switch when the switch is ONAndroid_Toggle_Switch_Background_Color_Offhex valueThe color of the background of the switch when the switch is OFFiOS_Toggle_Switch_Thumb_Color_Onhex valueThe color of the thumb (knob of the switch) when the switch is ONiOS_Android_Toggle_Switch_Thumb_Color_Offhex valueThe color of the thumb (knob of the switch) when the switch is OFFiOS_Toggle_Switch_Background_Color_Onhex valueThe color of the background of the switch when the switch is ONiOS_Toggle_Switch_Background_Color_Offhex valueThe color of the background of the switch when the switch is OFF

Login

Configuration NameTypeDescriptionModal_Login_Enabledtrue/falseIf true the app will require users to login in order to access the contentExit_Login_Button_Enabledtrue/falseShow or hide the bottom tab bar on the login screen modal that allows users to exit the login processShow_Login_On_Starttrue/falseIf enabled the login window will be displayed when the app is launchedLogin_URLtext (url)URL that will be displayed in the login windowSignup_URLtext (url)If users should be allowed to register within the app you can insert the sign up URL here.Login_Complete_String_Messagesarray of text valuesIf your page is not redirected to a different URL when the user logs in, you can use this to identify a specific string on the page, to help the app identify if a user is logged in or not. When using this, do not use "Login_Complete_Regex"Login_Complete_Regextext (url - regex)If your user is redirected after logging in you must include the URL to the redirect page so that the app can identify if a user is successfully logged in or not.Signup_Complete_String_Messagesarray of text valuesIf after registering for an account on your website the user is not redirected to a different URL, you can use this to identify a specific string in the success registration page. When using this, do not use "Signup_Complete_Regex"Signup_Complete_Regextext (url - regex)the regex of URL that represents a successful signup.,After a successful registration, the website will redirect to a URL. This regex will represent that URL.Logout_Complete_String_Messagesarray of text valuesIf after logging out on your website the user is not redirected to a different URL, you can use this to identify a specific string in the success logout page. When using this, do not use "Logout_Complete_Regex"Logout_Complete_Regextext (url - regex)If your user is redirected after logging out you must include the URL to the redirect page so that the app can identify if a user is logged out.Login_Check_URLtext (url) can contain $$USER$$ to be replaced in app with the userNameURL that responds with a redirect when the user is not logged in. Performing a request at this URL, if the response.URL then the user is not logged inLogin_Check_String_Messagesarray of text valueswhen there is no redirect, the page should contain this string. Notw! Settings this requires "Login_Check_URL" to be set as well

Advertising

Configuration NameTypeDescriptionAdvertising_Enabledtrue/falseUse true to enable the advertising settings belowAdvertising_Platformtext (constant)Use one of our available platforms: "Mopub", "Admob", "DFP"Banner_Screen_Locationsarray of text (constants)Accepted constants: "Home", "PushDetails","InternalLinks"iOS_Phone_Banner_Unit_IdtextiOS_Tablet_Banner_Unit_IdtextiOS_Banner_Positiontext (constant)Accepted constants: "bottom","top","both"iOS_Interstitial_Unit_IdtextiOS_Interstitial_IntervalnumberThe number of internal/external links displayed to the user after which we display an interstitial adAndroid_Phone_Banner_Unit_IdtextAndroid_Tablet_Banner_Unit_IdtextAndroid_Banner_Positiontext (constant)Accepted constants: "bottom","top","both" !! USE ONLY ONE !Android_Interstitial_Unit_IdtextAndroid_Interstitial_IntervalnumberThe number of internal/external links displayed to the user after which we display an interstitial adBanner_Background_Colorhex valueThe color of the background where the banner will go.

Thank you! We'll be in touch within 48 hours :)
Oops! Something went wrong while submitting the form.
Preview My App
Preview My App