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

<br>


---

# 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://village-labs.gitbook.io/coworker-product-and-developer-docs/legacy-developer-docs/embedding-village-dashboards.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.
