Preload URL Options
Design a webview frame styles that better fits your page with URL options.
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.
Comparison of preloaded configurations
As you can see from the image above, even though our page is still loading, imToken's WebView can still be pre-configured with
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. (
All color values do not require hash tag (
#), default is hexadecimal color values.
Set the background color of the WebView header, supports gradient values.
# gradient y 0% -> y 100%
Header background color
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.
Header foreground color
Set the title of the header.
# on loading
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.
Stay on the left side of the title
Set the font size of the title.
font size of header 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.
Hide the background color of the header
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
transparentis turned on.
Show header after scrolling
Set the background color of the WebView loading bar.
Set the foreground color of the WebView loading bar.
Customized loading bar colors
Set the text color of the status bar.
1: light style.
2: dark style.
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.
Set loading backgrounds with primary colors
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.
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.
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.