How to create a Web View button

Links to external materials like websites or videos are essential in Crescendo. However, placing them within a specific folder may not allow quick access from anywhere in your Crescendo Case.

For example, you might want instant access to your company’s appointment booking page, a YouTube explainer video, an “About Us” page, or an e-commerce store. To address this, Crescendo offers customizable link menu buttons that are always accessible, no matter which folder you’re browsing.

Web View Button Placement

Web View buttons can be placed in any of the four locations marked in the screenshot below. Most users prefer the top-right or bottom-right positions, but all four spots can be utilized for different menus if needed.

Steps to Create a Web View Menu

1. Prepare the Assets:

• Menu Button Icons
Two icons are typically required—one for when the menu is expanded and another for when it is collapsed. In our example, the icons are 128 x 88 pixels due to the arrow. A similar size is recommended for consistency. Don’t worry about the color—the icon will automatically adapt to the color of your navigation bar.
Download website-icon-up@2x.png file
Download website-icon-down@2x.png file

• Menu Item Icons
For each menu item, we use icons sized at 44 x 44 pixels for the best appearance. Take it as your reference point.
Download play-icon@2x.png file
Download online-icon@2x.png file

• Menu Details
Collect the links, titles, and overall menu title for your items.

2. Add the “toolbars” Section to Your theme.json File:

Ensure your theme.json is correctly formatted. If you’re new to JSON, be mindful of commas, brackets, and syntax errors—they’re easy to overlook but critical for proper functionality.

Here is how a theme.json looks like in our example:

Download theme.json file

{
  "colors": {
    "tint": "#ffffff",
    "itemTitle": "#ffffff",
    "itemTitleBackground": "#1b253a"
  },
  "toolbar": {
    "buttons": [
      {
        "icon": "website-icon-down",
        "selectedIcon": "website-icon-up",
        "placement": "topRight",
        "title": "Visit our sites",
        "width": 270,
        "urls": [
          {
            "icon": "play-icon",
            "title": "Explainer Video",
            "url": "https://youtube.com/embed/C4Db8AhIPhc"
          },
          {
            "icon": "online-icon",
            "title": "Book a Demo",
            "url": "https://crescendoapp.com/book-a-demo/"
          }
        ]
      }
    ]
  }
}

Notice that a new “toolbars” section has been added to your theme.json, in addition to the color section described in the Crescendo Theming Guide. Icon names are specified without the @2x.png postfix. Edit this file to match your menu structure, icons, and other details, then save your changes.

3. Upload and sync

Upload the updated theme.json and all required icons to your Crescendo App Theme folder. Sync Crescendo.

And voilà! You’ve successfully created your first Web View button menu.

If you encounter any issues, feel free to reach out—we’re happy to assist!