Mobile Customization

In mobile section just copy and paste the functions inside command that executed after webview load.

Example Usage

Usage explained in detail in related Mobile Sections

Java

web = (WebView) findViewById(R.id.webview);

web.setWebViewClient(new WebViewClient() {

@Override

// javascript commands should be executed after page loaded

public void onPageFinished(WebView view, String url) {

web.loadUrl("javascript:initProducts('af648582-1346-45e0-bea2-f872c7a84c6d','http://127.0.0.1:8000')");

web.loadUrl("javascript:hideSlider()");

});

Kotlin

val webView: WebView = findViewById(R.id.webview)

webView.webViewClient = object : WebViewClient() {

override fun onPageFinished(view: WebView?, url: String?) {

webView.loadUrl("javascript: initProducts('af648582-1346-45e0-bea2-f872c7a84c6d','http://127.0.0.1:8000')")

webView.loadUrl("javascript: hideSlider()")

}

}

Flutter

String cmd = """

initProducts('af648582-1346-45e0-bea2-f872c7a84c6d','http://127.0.0.1:8000')

hideSlider()

""";

_makeUIView(BuildContext context) {

return Container(

height: MediaQuery.of(context).size.height * 0.8,

child: InAppWebView(

initialUrl: url, // takes url

onWebViewCreated: (InAppWebViewController controller) {

inAppWebViewController = controller;

},

onLoadStop: (InAppWebViewController controller, String url) {

setState(() {

inAppWebViewController.evaluateJavascript(source: command); // this command should be execute after load ends

});

},

));

}

React Native

const initialCommand =

`

origin = origin = 'http://127.0.0.1:8000';

initProducts('af648582-1346-45e0-bea2-f872c7a84c6d', origin);

hideSlider()

`;

<WebView

source={{ uri: url }} //takes url

injectedJavaScript= {initializeCommand} // takes javascript command when the page loaded

ref={(ref) => (this.webview = ref)} // webview reference

/>

Swift

func makeUIView(context: Context) -> WKWebView {

let request = URLRequest(url: URL(string: webUrl)!)//make requesr

let command = """

origin = 'http://127.0.0.1:8000';

initProducts('af648582-1346-45e0-bea2-f872c7a84c6d', origin);

hideSlider()

"""//This command will work after website loaded

let WKJS = WKUserScript(source: command, injectionTime: WKUserScriptInjectionTime.atDocumentEnd, forMainFrameOnly: false)

wkWebView?.configuration.userContentController.addUserScript(WKJS)

wkWebView?.load(request)

return wkWebView!

}

Change Background Color

changeBackgroundColor("#0000FF")

Change Try Label

changeTryLabel("TRY IT NOW")

Change Choose Model Button Color and Label

changeChoosModelColorAndLabel( "Choose Model","#0000FF"))

Change Take a Photo Color and Label

functionchangeTakePhotoWithAppButtonColorAndLabel("Take a Photo","#0000FF")

Hide Take a Photo Button

hideTakePhotoWithAppButton('')

Hide Choose Model Button

(If you want to use your models, you should hide our choose model button)

hideChooseModelButton()

Change Choose Model Label On Model Page

changeChooseModelText('Choose Model Please')

Will be used for UI integration
You can decide to choose your own icons for back button and slider button. Simply hide our button and put your icon. Post message when clicked your button.

Hide slider button.

hideSlider()

Hide back button.

hideBackButton()