Embedding Village Dashboards

Web Apps & Mobile Web View

Previous3rd Party Payments Integrations NextAdmin Quickstart

Last updated 1 year ago

Was this helpful?

Embedding Village Dashboards

Web Apps & Mobile Web View

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.

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.

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

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.

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>

Previous3rd Party Payments Integrations NextAdmin Quickstart

Last updated 1 year ago

Was this helpful?

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.

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

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]' 
}'

{
  "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.

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