Preload URL Options

Design a webview frame styles that better fits your page with URL options.

What is it

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 colors and title of header, which allows for a better user experience for first-time visitors to the page.

How it works

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)

Options

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.

Header

All color values do not require hash tag (#), default is hexadecimal color values.

Background

Set the background color of the WebView header, supports gradient values.

# black
https://token.im?hbg=000000

# gradient y 0% -> y 100%
https://token.im?hbg=000000,333333

Header background color

Foreground

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.

# red
https://token.im?hfg=ff0000

Header foreground color

Title

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.

# on loading
https://token.im?title=loading

Title Left

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.

https://token.im?title_left=1

Stay on the left side of the title

Title Size

Set the font size of the title.

https://token.im?title_size=12

font size of header title

Transparent

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.

https://token.im?trans=1

Hide the background color of the header

Offset Distance

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.

https://token.im?trans=1&trans_y=150

Show header after scrolling

Loading Bar

Background

Set the background color of the WebView loading bar.

Foreground

Set the foreground color of the WebView loading bar.

https://token.im?lbg=697689&lfg=f47373

Customized loading bar colors

Status Bar

Text Style

Set the text color of the status bar.

• 0: default.

• 1: light style.

• 2: dark style.

https://token.im?sfg=1

Background

• No background color for the status bar on iOS.

• The status bar background color for Android devices is the same as the Header Background.

Body

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.

Background

Set the background color of the WebView body content.

Foreground

Set the foreground color of the WebView body content.

https://token.im?bbg=000000&bfg=f47373

Set loading backgrounds with primary colors

Visualization Tool

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.

FAQ

What is the difference between set the title via 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.

Help

• 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.