> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fourthwall.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Embedded Settings

> Provide a settings page for your app users

Embedded settings allows you to provide a settings page for users of your app. This will be available when clicking through the app tile on the [apps page](https://my-shop.fourthwall.com/admin/dashboard/apps).

This works similarly to [embedded sections](/embedded-sections/overview).

## Getting started

You will specify the URL of the iframe that will be rendered on [your app](https://my-shop.fourthwall.com/admin/dashboard/settings/platform-apps?redirect) page, under Settings URL.

## Signature

Like embedded sections, this will be called with an HMAC signature.

### Parameters

| Parameter   | Description                                       |
| ----------- | ------------------------------------------------- |
| `timestamp` | The timestamp of when the signature was generated |
| `shop_id`   | The shop ID of the creator using your app         |
| `hmac`      | The HMAC signature                                |

The signature is generated using the following data string:

```
timestamp=${timestamp}&shop_id=${id}&app_id=${app_id}
```

<Note>
  The HMAC here is in base64 vs. hex in the embedded sections.
</Note>

Your HMAC secret key is available in the basic information section of your [Platform App settings](https://my-shop.fourthwall.com/admin/dashboard/settings/platform-apps?redirect).

## JavaScript Example

```javascript theme={null}
async function getHmacKey(secret) {
  const encoder = new TextEncoder();
  const keyData = encoder.encode(secret);
  return await crypto.subtle.importKey(
    'raw',
    keyData,
    { name: 'HMAC', hash: 'SHA-512' },
    false,
    ['sign', 'verify']
  );
}

async function verifySignature(params, hmacSignature, secret) {
  const { shopId, appId, timestamp } = params;

  const encoder = new TextEncoder();
  const key = await getHmacKey(secret);

  const data = `timestamp=${timestamp}&shop_id=${shopId}&app_id=${appId}`;

  const messageData = encoder.encode(data);
  const signature = await crypto.subtle.sign('HMAC', key, messageData);

  const providedSignature = base64ToUint8Array(hmacSignature);

  if (signature.byteLength !== providedSignature.length) {
    return false;
  }

  return crypto.subtle.verify('HMAC', key, providedSignature, messageData);
}
```