Preload URL Options
Design a webview frame styles that better fits your page with URL options.
Last updated
Design a webview frame styles that better fits your page with URL options.
Last updated
In the WebView APIs documentation, we can change the layout style of the WebView via layout.setOptions , but this means we can only call it after the page is loaded and change the layout style. You may notice that the experience of a page is different when it is loading and when it is finished, so how can we refine these details to bring a better user experience to your DApp (or Web App)?
Preload URL Options allows you to define a number of parameters on the URL address, the imToken app parses these parameters and prepares all the design styles for you on a native level. Faster, more elegant, easier to configure, less invasive.
As you can see from the image above, even though our page is still loading, imToken's WebView can still be pre-configured with colors and title of header, which allows for a better user experience for first-time visitors to the page.
In fact, the above configuration only requires a string at the end of the URL, for example: https://token.im?hbg=000000, no APIs or SDK required.
When imToken's WebView reads the query parameters in the URL, it serializes and analyzes them, if the parameters meet the agreed criteria, the WebView pre-configures the layout at the native level according to this configuration.
Don't worry, it all happens very fast, and thanks to our deep optimization of WebView, any preloading configuration will not burden your page rendering speed. (All layout styles or other options will be resolved quickly before DNS parse.)
URL Options feature support requires imToken version 2.9.1. (>= 2.9.1)
The options interface here is for reference only, in most cases, you do not need to configure each parameter manually, try using the URL Options App.
All color values do not require hash tag (#), default is hexadecimal color values.
Set the background color of the WebView header, supports gradient values.
Set the foreground color of the WebView header. This affects the color of the header text and the main color of the menu on the right. (The main color of the menu will be automatically generated based on the foreground color)
Please note that the foreground color needs to be different from the background color.
Set the title of the header.
This only works if the page is not loaded or is loading, if you need to change the title in your application, please use our WebView APIs.
Set the title to the left of the header.
The title on the left will allow more content to be displayed, so if you have a long header, try this type of layout.
Set the font size of the title.
Set header to transparent.
When you have an image or other custom banner at the top of your page, it is useful to set the header of the WebView to be transparent.
Display the header after the page has scrolled a certain distance.
The scrolling listener comes from the WebView container and does not impose any performance burden on your web application.
This will only work if setup item transparent is turned on.
Set the background color of the WebView loading bar.
Set the foreground color of the WebView loading bar.
Set the text color of the status bar.
0: default.
1: light style.
2: dark style.
No background color for the status bar on iOS.
The status bar background color for Android devices is the same as the Header Background.
Setting up Body will not have any effect on your page, Body only represents the body frame of the external container of the page.
The foreground color of the Body affects the primary color of the default render loader.
Set the background color of the WebView body content.
Set the foreground color of the WebView body content.
Add individual values for each setting item is very tedious, it is also difficult to verify the type and effect of the value, to do this, we provide visual tools to help you quickly generate the URL options.
Visit the URL Options App to try the auto-generated options.
What is the difference between set the
titlevia URL Options or via WebView APIs?
The Title set using the URL Options is one-time and is usually only used for the preview on load and will not be changed.
If you need to change the title in your web application, please use the WebView APIs.
I have set the URL Options, but nothing works?
If your parameter value is wrong or illegal, the WebView layout will roll back to the initial state, please check your configuration and retry.
If you still have questions or need help with WebView, please create a discussion.
If you have any bugs or features to feedback, please create an issue.
