ROES Web webviewurl
Using webviewurl on Options in ROES Web
Use this article to configure the webviewurl attribute on options in ROES Web so customers can open additional information in an overlay or pop-up window inside the app.
Overview
ROES Web can use the webviewurl attribute to provide additional information on options. The webviewurl window acts as an overlay or pop-up inside the app.
The value should be an https:// URL that points to an image or web page. Modifiers are then added to control the size, position, and overlay behavior of the pop-up.
If this image does not display, open it directly: webviewurl_value.PNG
webviewurl Format
To define the window location, size, and overlay mask level, append ?webview_style= to the end of the URL, followed by the desired values.
webviewurl Style Values
| Value | Description |
|---|---|
| top | Set the top position as a percentage from the top of the workspace area, for example top:10%; |
| left | Set the left position as a percentage from the left side of the workspace area, for example left:25%; |
| width | Set the desired pixel width, for example 800px; |
| height | Set the desired pixel height, for example 500px; |
| &webview_overlay | Set to true to fully mask the app behind the overlay, or false to leave the app visible behind it. |
The window offers scroll bars when needed. If using images, it is best to set the width and height close to the image dimensions for the best presentation.
Option Icon Behavior
When webviewurl is defined, an icon appears next to the option.
If this image does not display, open it directly: webviewurl_icon.PNG
Overlay Behavior Examples
When the icon is clicked, the configured page or image displays using the window settings in the URL.
With &webview_overlay=false
If this image does not display, open it directly: webviewurl_overlay_false.PNG
With &webview_overlay=true
If this image does not display, open it directly: webviewurl_overlay_true.PNG
Multiple webviewurl Overlays
You can define webviewurl on multiple options in a set. Customers can click each option and, if desired, view multiple pop-ups at the same time.
In the example below, both Mahogany and Pine have overlays defined.
If this image does not display, open it directly: dualoverlays.PNG
Set the top and left values to place the pop-ups close to each other but not directly on top of each other.
Since the Pine file size in the example is 340x400, using slightly larger width and height values helps avoid scroll bars.
Expected Result
Customers should see an information icon next to the option, and when clicked, the configured image or page should open at the specified size and location with the desired overlay behavior.
Escalation Notes
- Confirm the webviewurl value begins with an https:// URL.
- Confirm the appended ?webview_style= values are correctly formatted.
- Confirm the top and left values position the overlay where intended.
- Confirm width and height are appropriate for the content being displayed.
- If using images, size the window slightly larger than the image dimensions to reduce scroll bars.
- If multiple overlays are used, adjust positions so the pop-ups do not fully overlap each other.