# 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.

## :point\_right: 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”](http://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:hello@gmail.com]
API data
email [action:email]
```

{% hint style="info" %}
**iOS only**: if there's no email account configured in the device, the default email application (such as Gmail) will be opened. 
{% endhint %}

### Open Phone Dialog

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

```
Static data 
[action:phone:+34123456789]
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.

<figure><img src="/files/pi4iHXRgy21Ti6wiB5DQ" alt=""><figcaption></figcaption></figure>

### 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.

<figure><img src="/files/Z9D6M0y6KvFaYvDhl0sW" alt=""><figcaption></figcaption></figure>

### Binding with your API data

1. Ensure your [GET API request](/connect-api/set-up-api-requests/creating-an-api-collection/airtable/set-up-an-api-get-request-for-list-page-airtable.md) is properly set up.

<figure><img src="/files/lHIqWvmXOiviJm6DeAtx" alt=""><figcaption></figcaption></figure>

2. Choose the screen where the mobile action tag was added.
3. In the **Elements** section, select the **Mobile Action**, easily identifiable by its lightning icon. For this example, choose the email action.
4. 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.
5. You're now set! Try and test your app with [Bravo Vision](/good-to-know/faq/bravo-vision.md)! :tada:

## :floppy\_disk:Example files

{% embed url="<https://www.figma.com/community/file/982588922484231865>" %}
Figma Bravo Sample: Mobile Actions&#x20;
{% endembed %}

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](https://community.bravostudio.app/home).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.bravostudio.app/bravo-tags/mobile-actions/mobile-actions.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.