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 Name	Type	Description
Remote_Server_Available	true/false	If true, the app will look for the MobiLoud Canvas plugin and the login endpoint on the URL specified below.
Remote_Server_Root_URL	text (url)	The URL to your website where the Mobiloud Canvas is installed.
Development_Always_Download_New_Config	true/false	You 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_Mode		When 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_URL	text (url)	The page that will be displayed when the app is launched in case tabs are not configured.
Preload_Main_Page_URL	true/false	Preload the main page during the splash screen.

Navigation

Configuration Name	Type	Description
iOS_Pull_To_Refresh	true/false	If disabled, pulling the screen down will not refresh the current page on iOS
Android_Pull_To_Refresh	true/false	If disabled, pulling the screen down will not refresh the current page on Android
iOS_Back_Button_Bar	true/false	If 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_Bar	true/false	If 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 disabled
Enable_Progress_View	true/false	If enabled displays a progress bar above the tabbed navigation while the content is loading.
Open_Links_In_A_New_Screen	true/false	If 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_App	true/false	If enabled, external links will open in the app rather than the device’s native browser.
Share_Button	true/false	If enabled a share button will be displayed in the bottom bar.
Exit_App_With_Back_Button	true/false	On Android, if this is enabled, using the device back button from the app’s main screen will close the app.
Enable_Webview_Transition_Animation	true/false	If true, when navigating to an internal/external link, an animation will be displayed when the new content is loaded.

Tab Menu

Configuration Name	Type	Description
Show_Tab_Menu	true/false	Set it to true to display the bottom tabbed navigation containing the tabs that were configured in the Items section.
Auto_Hide_Tab_Menu_On_Scroll	true/false	If enabled, this feature will cause the bottom tabbed navigation to be automatically hidden if the user starts to scroll.
Items	array	This 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

Key	Type	Description
Background Color	hex	The background color of the tab
Status_Bar_Color	hex	The color of your status bar when the tab is selected
Preload	true/false	If enabled the content of the tab will be pre-loaded in the splash screen.
Icon_Font	string
Icon_Font_Name	string	The code used for the icon that should be displayed in the tab.
Icon_URL	string (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.
URL	string (url)	The URL that should be loaded in the tab
Label	array	Contains 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”
Type	constant: “Webview” or “Alerts”	Categorizes the tab item into a certain type.

Styling

Configuration Name	Type	Description
Status_Bar_Color	hex value	The 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_Color	hex value	The background color of the status bar when the webview displays an external link in the internal/external screen
View_Background_Color	hex value	The background color for all the screens in the app. This color can be overriden by Webview_Background_Color in each tab item
Android_Theme	constants: “Dark” or “Light”	Two main styles for the UI elements, following Android standards
No_Internet_Connection_Color	hex value	The color used as a background for the “No internet connection available” message.
No_Internet_Connection_Text_Color	hex value	The color used as text color for the “No internet connection available” message.
Tab_Bar_Loading_Progress_Color	hex value	The color to use for the progress bar displayed above the tab bar
Tab_Bar_Background_Color	hex value	The background color of the Tab Menu
Tab_Bar_Selected_Tab_Color	hex value	The color of the icon+text used in the Tab Menu when that tab item is selected
iOS_Translucency	true/false
Android_Tab_Bar_Disabled_Tab_Color	hex value	The color of the icon+text used in the Tab Menu when that tab item is NOT selected (default state)
Android_UI_Tab_Background_Color	hex value	The background color of any other tab bar (i.e. top Alerts bar) used in the app
Android_UI_Tab_Selected_Color	hex value	The color of the icon+text used in any other tab bar (i.e. top Alerts bar) inside the app, when that tab item is selected
Android_UI_Tab_Disabled_Color	hex value	The 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_Selector	hex value	Mostly used on Android, this colors the line which marks the selected tab in the Alert’s top bar
Webpage_Unavailable_Button_Color	hex value	The color for the button which is shown when the page inside a webview is not available
Android_Toggle_Switch_Thumb_Color_On	hex value	The color of the thumb (knob of the switch) when the switch is ON
Android_Toggle_Switch_Thumb_Color_Off	hex value	The color of the thumb (knob of the switch) when the switch is OFF
Android_Toggle_Switch_Background_Color_On	hex value	The color of the background of the switch when the switch is ON
Android_Toggle_Switch_Background_Color_Off	hex value	The color of the background of the switch when the switch is OFF
iOS_Toggle_Switch_Thumb_Color_On	hex value	The color of the thumb (knob of the switch) when the switch is ON
iOS_Android_Toggle_Switch_Thumb_Color_Off	hex value	The color of the thumb (knob of the switch) when the switch is OFF
iOS_Toggle_Switch_Background_Color_On	hex value	The color of the background of the switch when the switch is ON
iOS_Toggle_Switch_Background_Color_Off	hex value	The color of the background of the switch when the switch is OFF

Login

Configuration Name	Type	Description
Modal_Login_Enabled	true/false	If true the app will require users to login in order to access the content
Exit_Login_Button_Enabled	true/false	Show or hide the bottom tab bar on the login screen modal that allows users to exit the login process
Show_Login_On_Start	true/false	If enabled the login window will be displayed when the app is launched
Login_URL	text (url)	URL that will be displayed in the login window
Signup_URL	text (url)	If users should be allowed to register within the app you can insert the sign up URL here.
Login_Complete_String_Messages	array of text values	If 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_Regex	text (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_Messages	array of text values	If 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_Regex	text (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_Messages	array of text values	If 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_Regex	text (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_URL	text (url) can contain $$USER$$ to be replaced in app with the userName	URL 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 in
Login_Check_String_Messages	array of text values	when there is no redirect, the page should contain this string. Notw! Settings this requires “Login_Check_URL” to be set as well

Advertising

Configuration Name	Type	Description
Advertising_Enabled	true/false	Use true to enable the advertising settings below
Advertising_Platform	text (constant)	Use one of our available platforms: “Mopub”, “Admob”, “DFP”
Banner_Screen_Locations	array of text (constants)	Accepted constants: “Home”, “PushDetails”,”InternalLinks”
iOS_Phone_Banner_Unit_Id	text
iOS_Tablet_Banner_Unit_Id	text
iOS_Banner_Position	text (constant)	Accepted constants: “bottom”,”top”,”both”
iOS_Interstitial_Unit_Id	text
iOS_Interstitial_Interval	number	The number of internal/external links displayed to the user after which we display an interstitial ad
Android_Phone_Banner_Unit_Id	text
Android_Tablet_Banner_Unit_Id	text
Android_Banner_Position	text (constant)	Accepted constants: “bottom”,”top”,”both” !! USE ONLY ONE !
Android_Interstitial_Unit_Id	text
Android_Interstitial_Interval	number	The number of internal/external links displayed to the user after which we display an interstitial ad
Banner_Background_Color	hex value	The color of the background where the banner will go.