Mobile Actions

What is a basic mobile action component? A visual element that prompts users to take a specific action within the app.

Enhance your Bravo apps by integrating native mobile actions such as sharing a URL, opening a PDF, sending an email, or making a call directly through our action tags. These tags can be applied to any layer, with the exception of containers and the top-level frames of pages, enriching your app's interactive capabilities.

👉 The tags

Share URL

The element will open the native share dialog to share the URL specified. You can indicate the URL statically, or bind the element with this action to API data.

If you bind the element to API data, you can also share some text in addition to the URL, for example: ”Check this out: www.google.com”

Static data 
[action:share:https://www.bravostudio.app/]
API data
[action:share]

Open URL

The element will open the web browser on your phone with the URL specified.

Static data 
[action:openurl:https://www.bravostudio.app/]
API data 
[action:openurl]

Open Email dialog

The element will open the native "compose an email" dialog with the email address specified as the "To:" address.

Static data 
[action:email:[e-mail]]
API data
email [action:email]

iOS only: if there's no email account configured in the device, the default email application (such as Gmail) will be opened.

Open Phone Dialog

The element will open the native phone dialog with the phone number specified.

Static data 
[action:phone:[phone]]
API data 
[action:phone]

Open PDF

The element will open the PDF link you specified in a web browser.

Static data 
[action:openpdf:https://www.ex.com/wp-content/uploads/menu.pdf]
API data
[action:openpdf]

🏷️ How to add the tag

📍 Where to add the tag: Any layer, except top-level and container.

Use it with static data

Here's an example on how to create a Bravorized screen in Figma, incorporating action tags and static data.

Use it with API data

Here's how to create a Bravorized screen in Figma, incorporating the action tags which would be binded later on in Bravo.

Binding with your API data

1. Ensure your GET API request is properly set up.

1. Choose the screen where the mobile action tag was added.

2. In the Elements section, select the Mobile Action, easily identifiable by its lightning icon. For this example, choose the email action.

3. In the Element binding section located on the right side, notice the active "Send email to address" action. Here, choose the relevant API collection followed by the API request, which is typically a GET request. Then, select the "email" data to be used.

4. You're now set! Try and test your app with Bravo Vision! 🎉

💾Example files

Bravo Sample: Mobile Actions | FigmaFigma

Figma Bravo Sample: Mobile Actions

Your feedback is valuable to us. If you have any suggestions or questions, please don't hesitate to reach out to us in the community.