> For the complete documentation index, see [llms.txt](https://docs.novabloq.com/web3-metamask/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.novabloq.com/web3-metamask/quick-start-example.md).

# Quick Start Example

{% hint style="info" %}
This is a simple example of how to connect MetaMask and sign a message, you don't have to do it in the exact same way.
{% endhint %}

## Connect to MetaMask

1\. Add the Web3\&MetaMask plugin element on the page.

2\. Add a button, open workflow on Button click and add ***Connect To Metamask*** action<br>

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

3\. Add a text element on the page, to show the connected wallet address.

4\. In the text element, click on ***Insert dynamic data***

<div align="center"><figure><img src="/files/RNFVB8B4P600CJ0aCqzW" alt=""><figcaption></figcaption></figure></div>

5\. Find *Web3\&Metamask element* in the list and select it.\
&#x20;   A dropdown with all element states will open, choose *Wallet Address*<br>

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

#### **Done!** You can now connect your app to MetaMask!

## Sign and save Signature

Let's say you need to save the users signature somewhere for later use.\
You can run the action to sign a message similar to how we did the connection, on button click, or, for example, when an event is triggered.\
Most real-world use case is to sign a message right after the wallet connection so that's what we will do\
\
1\. In the Workflows, add the event ***MetaMask Connected*** from Web3\&MetaMask element

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

2\. In the actions, similar to how we added Connect action earlier, find the ***Sign action*** and add it.\
You need to add a message to be signed, it can be anything, including dynamic data like today's date or app name.

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

3\. Add another event called, ***Signed*** this will trigger only after the user will sign the message\
4\. Now here the signature will be available to you, let's save it in a custom state to use later.\
Add an action to Set state, select any element on the page where the state will be "attached to", and create a custom state of text type.

{% hint style="info" %}
Creating custom states is a Bubble standard feature, it is not related to the plugin
{% endhint %}

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

5\. In the state value, select ***This Web3\&Metamask Sign: Signature*** state

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

For this example, I will add the saved signature in the text element to be shown to the user.

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

{% hint style="info" %}
Saving signature in your own custom state or database is important because the plugin signature state will be re-written if you will run the sign action again somewhere else.
{% endhint %}

\
**Done!** \
**This example is available** [**here**](https://bubble.io/page?type=page\&name=sample\&id=ezplugins-demo-2\&test_plugin=1612784921335x464807902025875460_current\&tab=tabs-1)\
\
If you have questions or need additional help, feel free to ask in our Discord: <https://discord.com/invite/HWfg853N6d>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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.novabloq.com/web3-metamask/quick-start-example.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.
