NEW ROES Web: nav buttons
New Nav Buttons in ROES Web
Use this article to add configurable navigation buttons to the ROES Web top banner using Web Template Tool or desktop Template Tool.
Overview
Nav buttons can be added in both the Web and Desktop versions of Template Tool. They allow any number of configurable navigation buttons to appear in the ROES Web top banner, with each button displaying custom HTML inside the app.
A nav button can be used as a landing or splash page, a latest-specials page, an orientation/help-video page, a shipping-policy page, or a page containing ROES URLs that let customers jump to specific products, groups, catalogs, or templates in ROES Web.
If this image does not display, open it directly: d77e4c2efbae29275b742e6f14084f03.png
If this image does not display, open it directly: Shippoliciesnew.PNG
How Nav Buttons Display
When a nav button is clicked, the configured HTML is shown in an iframe. Styling is controlled by the HTML and CSS used for the content, including retention, position, size, and other CSS behavior.
You can view examples in the ROES Web test app. On mobile, nav buttons appear under a three-dot kebab menu.
If this image does not display, open it directly: kebab.PNG
If this image does not display, open it directly: kebabmenu.PNG
Adding Nav Buttons in ROES Web
Either Web Template Tool or desktop Template Tool can be used to add nav buttons.
- Web Template Tool: Add the nav buttons element off the root as a parent, then add a nav button under it for each button that should appear.
- Desktop Template Tool: Add a Nav button element off the root of the templates file for each button. There is no parent group to contain them.
If this image does not display, open it directly: 8Nav.PNG
Nav Button Attributes
| Attribute | Use |
|---|---|
| label | Text displayed to the customer for the nav button. |
| overlay | Set true to mask over the entire app window when content displays. Set false to leave the app fully viewable. |
| showonload | Set true to show the iframe at app startup as a splash page. Set false to show it only when the button is clicked. |
| style | Any valid CSS. Positioning is best done as percentages of app width and height. |
| url | URL to the HTML file. This must be an https:// link, including files, images, and links called from the HTML. |
Style Examples
Small frame at lower left
Small frame at lower right
Large frame covering most of the app
Lower-Right Iframe Example
A smaller iframe at the lower right can be configured in both Web Template Tool and desktop Template Tool. The iframe appears in the defined location when the nav button is clicked.
If this image does not display, open it directly: 10Nav.PNG
If this image does not display, open it directly: 9Nav.PNG
If this image does not display, open it directly: 6Nav.PNG
ROES URLs in Nav Buttons
ROES URLs are links added into the page using roes:// followed by a path made from u_id values to the desired location in the templates collection.
For example, if the catalog u_id is Canvas and the group u_id is wrappedcanvas, the ROES URL is:
If the first template has a u_id of f6yhe3r, the URL would be:
ROES URL Behavior Attributes
- view: Use products to stay in the product browser, which is useful for jumping to catalogs or groups. Use workspace to jump to a specific template. workspace can also be used for catalogs or groups, where customers can browse from the left pane to reach groups, sub-groups, or templates.
- keep-splash-open: Set true to leave the nav button iframe open, or false to dismiss the splash after the selection is made.
ROES URL Examples Preserved from Source HTML
-
roes://Canvas/wrappedcanvas
-
roes://Canvas/wrappedcanvas/f6yhe3r
-
<a href="roes://FineArt" keep-splash-open="true" view="products">Fine Art Cat, Keep Open</a><br><br>
-
<a href="roes://RUG2017/Cards/4x8" keep-splash-open="false" view="workspace">Greet Cards group in workspace, close splash</a><br><br>
-
<a href="roes://RUG2017/Cards/4x8/126b4c2dd75:-7ba9" keep-splash-open="false" view="workspace">Greet Card 1 workspace, close splash</a><br><br>
-
<body> <script type="module" src="https://www.roesweb.com/roesUrlEmitter.js"></script>
Required Script for ROES URLs
ROES URL support in nav button iframes requires the ROES URL emitter script in the body of the HTML page.
Links Preserved from Source HTML
- ROES Web test app
Example ROES Web test app showing nav button behavior. - ROES URL emitter script
Script required in nav-button HTML pages when using ROES URLs.
Expected Result
ROES Web should display configured nav buttons in the top banner on desktop and in the kebab menu on mobile. When selected, each nav button should display the configured HTML iframe, and ROES URL links should navigate to the intended catalog, group, or template when the emitter script is included.
Escalation Notes
- Confirm whether the nav button was added in Web Template Tool or desktop Template Tool.
- Confirm the nav button url uses an https:// link.
- Confirm any images or links called by the nav button HTML also use secure URLs.
- Confirm the style value positions and sizes the iframe as intended.
- For ROES URLs, confirm the path uses the correct u_id values.
- For ROES URLs, confirm https://www.roesweb.com/roesUrlEmitter.js is included in the body of the HTML.