📖

WebView and Video Tag Tutorial with Google Sheets and Airtable

In this tutorial, we will be looking at the web view and video tags in Bravo.

💡

This tutorial contains screenshots from an old version of data binding in Bravo Studio. The functionalities remain the same as the current interface.

Before you start

Here are some of the things you need to have ready before you begin this.

  1. An account for the design tool
  2. Airtable account or Google Sheets/Sheety account
  3. A Bravo Studio account
  4. Bravo Vision app, either from Google Play Store or the iOS app store.

If your data is on Airtable, we will be making use of the Airtable API.

If your data is on Google Sheets, we will need a Sheety account, which will add the API functionality.

What are Bravo Tags?

A Bravo Tag is a text string that you place in the layer names in your design file. After you import the design file into Bravo Studio, the layer with the Tag will turn into a mobile component or action in Bravo Vision. Learn more about Bravo Tags here.

WebView Tags

They allow you to embed webpages inside the rectangle element in the design tool.

Video Tags

An audio-less video that autoplays when a user is on the app screen. The video will replace the content of the rectangle. Supports URLs ending in .mp4. There are some exceptions. Copying the video address from Imgur, or Steam (Like we did in this tutorial) seems to have worked well.

Copying and pasting links from YouTube will not work with Video tags.

image

1. Setting up your designs with Bravo Tags

In *VideoCont [container] and *WebViewCont [container], the [container] is a Bravo tag that tells Bravo Studio that this is the layer containing the elements that will be used with your Airtable/Google Sheets data.

💡

Why the *asterisk? Well, these are the layers that will be populated with data. The only purpose of the asterisk is to allow those layers to stand out when we are binding our data to the designs in Bravo Studio. Alternatively, you can even do DATA-Video [component] instead of *Video [component]. All we are doing is indicating.

Then, create rectangles inside your [container]. Name them and the component tag shown below. As you can see, there are three parts. The last part, which is the URL, is just a default placeholder and you can substitute it in the design tool with anything. In case your data doesn't load, the URL will load instead, so it's also a great way to make sure everything is working before you do any data binding.

Video Tag

[component:video:https://google.com/test.mp4]
image

WebView Tag

[component:web-view:https://bravostudio.app]
image

Another important aspect is prototyping and connecting our screens using interactions. It will transfer over to Bravo Studio when you import your design file.

image

Important note about using the Video Tag

The Video tag (also the WebView Tag) are applied on the rectangle element. So the container that it is inside in must include any padding (as you can see below).

image
image

2. Setting up your data

Google Sheets and Sheety

We will only be using our tables to hold the content for the WebView and Video tags. Notice they are on two different tables.

image
image

Now let's move to Sheety. This is where the simple Google Sheet is turned into something that can communicate with Bravo Studio to populate your designs.

Name your project and copy-paste the Sheets URL. Keep in mind that on the free plan, Sheety allows you 1 project.

Once it is imported, it should look something like this. Make sure the GET request is checked. This is what will grab the Sheets data to populate our template.

Keep this tab with Sheety open because you will need the endpoint URLs.

image
For the two tables, you will get two API endpoints.
For the two tables, you will get two API endpoints.

Setting up your Data Library on Bravo Studio

Open up Bravo Studio and click on Data Library. This is where you will connect your data to Bravo Studio. Click on New Collection and name it and hit save.

image

Let's start with the Video Tag. Grab the API endpoint URL for the Video table from Sheety. Paste it and hit send. If all went well, it should successfully show you the sample data, like below. Now check all the fields you want to get your data from that will populate your UI elements.

Check the box that has the link to the video. Make sure to also check .data.videoTagContent[]. By default, it will be set to 0, you want to set it to All. That will show all the data from the Google Sheets on your designs.

image

Now repeat the step with the data for the WebView Tag.

image

Using Airtable

image
image

On Airtable, go to your account and generate your Airtable API key. You will need this in order to connect your data to Bravo Studio. Find more about it here.

image

Go to https://airtable.com/api while logged in to your Airtable account and it will show all the tables you have created in your workspace, and chose your table. You will be shown the page below. Keep this page open because you will need the Video and WebView api.airtable.com URLs for creating two GET requests.

image

Setting up your Data Library on Bravo Studio

Open up Bravo Studio and click on Data Library. This is where you will connect your data from Airtable to Bravo Studio. Click on New Collection and name it and hit save.

image

Let's start with the Video Tag. Grab the API endpoint URL for the Video table from the Airtable API page. Paste it and hit send. You will notice I have something in my header. This is where you are authenticating your API requests. So go to the Headers section and set it up as shown below. Field on left will have Authorization and field on the right will have Bearer YOUR_API_KEY.

image

If all went well, it should successfully show you the sample data, like below. Now check all the fields you want to get your data from that will populate your UI elements.

Check the box that has the link to the video. Make sure to also check .data.videoTagContent[]. By default, it will be set to 0, you want to set it to All.

image

3. Binding your data to your designs

Now navigate back to your projects and open the design file you just imported. It should look something like this. Select any screen to start binding your data to your design. This step is the exact same whether you are using Airtable or Google Sheets because the content and structure are the same.

image

From the collection dropdown we will select the Data Collection we just made and then it will pull up all the GET requests we created in that collection.

image

After that, underneath Data Content, you will see a blue link called + Add App Element. Because our elements that will be populated with data are under the *VideoCont container, select that on the popup with the list of visual elements. It will show up under design element.

You will see a dropdown under Bound Data from there select Videotagcontent[], which is your table on Google Sheets. For Airtable it will just be Records[]. Once you do that, a plus sign will appear right underneath it. Click on it and you will be greeted with the same visual element selector popup.

image

Now repeat the same step for the screen for the WebView Tag.

image
image

4. Testing on Bravo Vision.

Congratulations! If all went well, it should have an autoplay video on the first page, and clicking on the Nintendo Switch icon will take you to a webpage with the Nintendo eShop, along with an option to go back to the main page.