NEW ROES Web: nav buttons
|
New Nav Buttons Nav buttons, which can be added in both the Web and Desktop versions of Template Tool, allows you to add any number of configurable navigation buttons to ROES Web's top banner, each displaying your HTML, all within the app. A nav button can be used as a splash page to show on app load, supporting ROES URLs, which allow product selection in ROES Web. Add one as a landing/splash page, one for your latest specials customers can jump to, one for orientation and help videos, or one for listing shipping policies:
|
|
When a nav button is clicked, the HTML is shown in an iframe where the styling is totally up to you. Retention, size, and essentially anything in CSS can be applied. You can see the examples via this ROES Web test app. Nav buttons will appear in mobile use as a 3 dot kebab menu:
Adding nav buttons in ROES Web:
Either Template Tool Web or the desktop Template Tool can be used to add nav buttons. In Web Template Tool, the nav buttons element is added off the root as a parent and have a nav button added off of it for each instance you want to appear. In desktop Template Tool, you can add a Nav button element off the root of the templates file for each instance, there is no parent group to contain them:
Attributes for nav buttons
Attributes to use for nav buttons are:
- label: text to display for the nav button to the customer
- overlay: set true to mask over the entire app window when the nav button is clicked and content displays; set false to leave the app fully viewable
- showonload: set true to have the iframe appear at app startup and act as a splash page; set false to not show unless the nav button is clicked
- style: any valid CSS, positioning best done as percentage (app width, height), like:
top:65%;left:2%;width:535px;height:224px; - adds a small frame at lower left, like for a chat window
top:65%;left:70%;width:29%;height:26%; - adds a small frame at lower right, like for a chat window
top:10%;left:10%;width:1216px;height:877px; - adds a larger frame covering most of app, like shipping policies in the image above
- url: enter URL to your file; Must be https:// link to file(s) and any images/links called out in the file(s)
For instance, a smaller iframe at lower right could be set like the following in both Web Template Tool and desktop Template Tool:
The iframe will appear in the location defined when the nav button is clicked:
ROES URLs use in nav buttons
ROES URLs are links added into the page using roes:// followed by a path made out of u_id values to the desired location in the templates collection (so if your Catalog u_id is Canvas and the group to jump to has u_id of wrappedcanvas, the ROES URL is roes://Canvas/wrappedcanvas to get to the group. If the first template has u_id of f6yhe3r then to jump to that would be roes://Canvas/wrappedcanvas/f6yhe3r. In ROES Web, ROES URLs need the following values defined to control behavior:
view - either products or workspace for the value. Using view="products" will stay in the product browser and is good for jumping to Catalogs or Groups; using view="workspace" is required to jump to a specific Template and also can be used for Catalogs or Groups and customers can browser in the left pane to get to groups, sub-groups or templates.
keep-open - Can be set to either true or false to leave the nav button iframe open (like opening a secondary page inside the iframe for browsing) or false to dismiss the splash after selection is made and shows. So to jump to a Fine Art catalog and leave the splash open and stay in the product browser, the line in your page can be
<a href="roes://FineArt" keep-splash-open="true" view="products">Fine Art Cat, Keep Open</a><br><br>
To jump straight to a cards group in the workspace and close the splash:
<a href="roes://RUG2017/Cards/4x8" keep-splash-open="false" view="workspace">Greet Cards group in workspace, close splash</a><br><br>
Or the first card in the group:
<a href="roes://RUG2017/Cards/4x8/126b4c2dd75:-7ba9" keep-splash-open="false" view="workspace">Greet Card 1 workspace, close splash</a><br><br>
ROES URL support in these nav button iframes require use of our RoesUrlemitter script in the body of the HTML like:
<body>
<script type="module" src="https://www.roesweb.com/roesUrlEmitter.js"></script>