---
description: Web Apps & Mobile Web View
---

# Embedding Village Dashboards

Rendering the Village Embedded User Dashboard requires a two-step process due to requirement of not utilizing the Village API key on a client-side application.

{% hint style="success" %}
**NOTE:** Village supports some sub-variations of the the below for different embed formats and development frameworks. Reach out to support@villagelabs.co if the generic solution below does not meet your needs and we can provide you with supported alternatives.&#x20;
{% endhint %}

In order to render a user's dashboard, your application should do the following 2-step process.

## [1: Create a temporary auth token for the given user using your API key.](https://gist.github.com/peterholcomb/551357e7c8c6045e4a3d3332dc3c5f6c#1-create-a-temporary-auth-token-for-the-given-user-using-your-api-key)

Your app's server should make a call to the Village API in order to generate a user's auth key:

```
## Get User Authorization Key
curl "https://api-ledger.villagelabs.net/networks/normau/users/peter@villagelabs.co/authorization_key" \
     -H 'Content-Type: application/json' \
     -H 'Authorization: Bearer [API KEY]' 
}'

```

The response returned from the API will have `token` response that is valid for 24 hours and allows your client-side app to make requests to our API on behalf of the given user in order to render their dashboard.

```
{
  "network": "normau",
  "user": "peter@villagelabs.co",
  "token": "[TOKEN]",
  "status": "success",
  "message": "Authorization key generated successfully for the user"
}
```

From here, your app can use the auth token to render the embedded dashboard into any DOM element in your application.

## [2. Render the Embedded Dashboard using the user's auth token](https://gist.github.com/peterholcomb/551357e7c8c6045e4a3d3332dc3c5f6c#2-render-the-embedded-dashboard-using-the-users-auth-token)

Add the following code snipped into your page and dynamically load the user's auth token into `window.village.token` in order to render that user's dashboard into your app. The code below shows an example of loading the Village dashboard javascript and css code into your app and renders the dashboard into an element with the id of `village-dashboard`

```
<html>
<body>

    <div id="village-dashboard"></div>

    <script>
        window.village = window.village || {};
        window.village.root = "village-dashboard";
        window.village.token = "[USER AUTH KEY]";
    </script>
    <link href="https://embedded.villagelabs.net/index.css" rel="stylesheet">
    <script crossorigin type="module" src="https://embedded.villagelabs.net/index.js"></script>
</body>
```

\
