Skip to main content
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. This works similarly to embedded sections.

​
Getting started

You will specify the URL of the iframe that will be rendered on your app page, under Settings URL.

​
Signature

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

​
Parameters

ParameterDescription
timestampThe timestamp of when the signature was generated
shop_idThe shop ID of the creator using your app
hmacThe HMAC signature
The signature is generated using the following data string: 
timestamp=${timestamp}&shop_id=${id}&app_id=${app_id}
The HMAC here is in base64 vs. hex in the embedded sections.
Your HMAC secret key is available in the basic information section of your Platform App settings.

​
JavaScript Example

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);
}