diff --git a/.pnp.cjs b/.pnp.cjs
index a1eef93e..39c293d4 100755
--- a/.pnp.cjs
+++ b/.pnp.cjs
@@ -33,7 +33,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["@prettier/sync", "virtual:c76842a5689228a0ce1b65e064c1f5e0d5b61e442d08b6527a3b1f100ca1f2105e58f5f1435c5a59df3cce3338560737838d99dae36d25b47d20aa50c89d0539#npm:0.5.2"],\
             ["@testing-library/jest-dom", "npm:6.4.8"],\
             ["@testing-library/preact", "virtual:c76842a5689228a0ce1b65e064c1f5e0d5b61e442d08b6527a3b1f100ca1f2105e58f5f1435c5a59df3cce3338560737838d99dae36d25b47d20aa50c89d0539#npm:3.2.4"],\
-            ["@transcend-io/airgap.js-types", "npm:10.15.0"],\
+            ["@transcend-io/airgap.js-types", "npm:12.2.0"],\
             ["@transcend-io/internationalization", "npm:1.6.0"],\
             ["@transcend-io/logger", "npm:1.1.0"],\
             ["@transcend-io/type-utils", "npm:1.4.2"],\
@@ -1757,10 +1757,10 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
         }]\
       ]],\
       ["@transcend-io/airgap.js-types", [\
-        ["npm:10.15.0", {\
-          "packageLocation": "./.yarn/cache/@transcend-io-airgap.js-types-npm-10.15.0-04d03b2efb-681251cdcc.zip/node_modules/@transcend-io/airgap.js-types/",\
+        ["npm:12.2.0", {\
+          "packageLocation": "./.yarn/cache/@transcend-io-airgap.js-types-npm-12.2.0-d1c89d7b66-a0c92b7a5a.zip/node_modules/@transcend-io/airgap.js-types/",\
           "packageDependencies": [\
-            ["@transcend-io/airgap.js-types", "npm:10.15.0"],\
+            ["@transcend-io/airgap.js-types", "npm:12.2.0"],\
             ["@transcend-io/type-utils", "npm:1.4.2"],\
             ["fp-ts", "npm:2.16.9"],\
             ["io-ts", "virtual:647270e91e7a3b3be8360975cf4b261fc37aa1becc6251358c91b0bf0733ffddc3f7d7b9c35550155c202696cf87b8999803730126a6d8c46e4270742d944b5d#npm:2.2.21"]\
@@ -1789,7 +1789,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["@prettier/sync", "virtual:c76842a5689228a0ce1b65e064c1f5e0d5b61e442d08b6527a3b1f100ca1f2105e58f5f1435c5a59df3cce3338560737838d99dae36d25b47d20aa50c89d0539#npm:0.5.2"],\
             ["@testing-library/jest-dom", "npm:6.4.8"],\
             ["@testing-library/preact", "virtual:c76842a5689228a0ce1b65e064c1f5e0d5b61e442d08b6527a3b1f100ca1f2105e58f5f1435c5a59df3cce3338560737838d99dae36d25b47d20aa50c89d0539#npm:3.2.4"],\
-            ["@transcend-io/airgap.js-types", "npm:10.15.0"],\
+            ["@transcend-io/airgap.js-types", "npm:12.2.0"],\
             ["@transcend-io/internationalization", "npm:1.6.0"],\
             ["@transcend-io/logger", "npm:1.1.0"],\
             ["@transcend-io/type-utils", "npm:1.4.2"],\
diff --git a/.yarn/cache/@transcend-io-airgap.js-types-npm-10.15.0-04d03b2efb-681251cdcc.zip b/.yarn/cache/@transcend-io-airgap.js-types-npm-12.2.0-d1c89d7b66-a0c92b7a5a.zip
similarity index 52%
rename from .yarn/cache/@transcend-io-airgap.js-types-npm-10.15.0-04d03b2efb-681251cdcc.zip
rename to .yarn/cache/@transcend-io-airgap.js-types-npm-12.2.0-d1c89d7b66-a0c92b7a5a.zip
index 3b4ec90c..d5787275 100644
Binary files a/.yarn/cache/@transcend-io-airgap.js-types-npm-10.15.0-04d03b2efb-681251cdcc.zip and b/.yarn/cache/@transcend-io-airgap.js-types-npm-12.2.0-d1c89d7b66-a0c92b7a5a.zip differ
diff --git a/index.html b/index.html
index 7e027ee0..e6ec1f37 100644
--- a/index.html
+++ b/index.html
@@ -4,10 +4,12 @@
     <title>Transcend Consent Manager Playground</title>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css" />
+    <!-- <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css" /> -->
     <style type="text/css">
       body {
-        grid-template-columns: 1fr min(70rem, 90%) 1fr;
+        display: grid;
+        place-items: center;
+        height: 100vh;
       }
 
       #load-options ul,
@@ -21,6 +23,11 @@
         padding-left: 4px;
       }
 
+      #policy-content img {
+        max-width: 100%;
+        height: auto;
+      }
+
       img:not([src]):not([srcset])::after,
     img[src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"]::after
       {
@@ -83,6 +90,10 @@ <h2>Do Not Sell/Share</h2>
     <hr />
     <h2>View States</h2>
     <p id="data"></p>
+    <h2>Policy Content</h2>
+    <div style="max-width: 600px">
+      <div id="policy-content" style="max-width: 100%"></div>
+    </div>
     <br />
     <script>
       var handleDoNotSell = (event) => {
@@ -149,6 +160,21 @@ <h2>View States</h2>
         });
       };
 
+      /**
+       * Dynamically change out policy content based on language
+       */
+      async function setPolicyContent(language) {
+        if (language) {
+          await transcend.setActiveLocale(language);
+        }
+        const [policy] = await transcend.getTranscendPolicies({
+          policyTitles: ['Label Privacy Policy'],
+          // variables: { labelName: 'Marshmalt Records' },
+          locale: language || transcend.getActiveLocale(),
+        });
+        document.getElementById('policy-content').innerHTML = policy.content;
+      }
+
       // Prepare document on ready
       transcend.ready(() => {
         // Add buttons for view states
@@ -184,6 +210,14 @@ <h2>View States</h2>
         // setup the do not sell button
         setupDoNotSellButton();
 
+        transcend
+          .setTranscendUiVariables({
+            labelName: 'Marshmalt Records',
+          })
+          .then(() => {
+            setPolicyContent();
+          });
+
         // resolve consent from backend
         // uncomment to test backend consent mocked integration
         // fetchBackendConsent(1234).then((consent) =>
diff --git a/package.json b/package.json
index aedd63a2..7521ba29 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/transcend-io/consent-manager-ui.git"
   },
   "homepage": "https://github.com/transcend-io/consent-manager-ui",
-  "version": "4.17.4",
+  "version": "4.18.0",
   "license": "MIT",
   "main": "build/ui",
   "files": [
@@ -37,6 +37,7 @@
     "clean": "yarn pnpify tsc --build --clean",
     "lint": "yarn pnpify eslint src --ext .ts,.tsx",
     "start": "rm -rf build/ &&  yarn build && concurrently 'WATCH=true yarn build' 'yarn live-server --host=localhost --entry-file=./index.html'",
+    "start:https": "rm -rf build/ &&  yarn build && concurrently 'WATCH=true yarn build' 'yarn live-server --host=yo.com --https=../main/ssl/index.js --entry-file=./index.html'",
     "build:playground": "rm -rf build/ && yarn build && cp ./src/playground/playground.css ./build/",
     "playground": "yarn build:playground && concurrently 'WATCH=true yarn build' 'yarn live-server --host=localhost --open=./src/playground/index.html --mount=/src/playground/:./src/'",
     "prepublish": "yarn build",
@@ -49,7 +50,7 @@
     "@prettier/sync": "^0.5.2",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/preact": "^3.2.4",
-    "@transcend-io/airgap.js-types": "^10.12.5",
+    "@transcend-io/airgap.js-types": "^12.2.0",
     "@transcend-io/type-utils": "^1.0.7",
     "@types/jest": "^29.5.12",
     "@types/node": "^17.0.45",
diff --git a/src/api.ts b/src/api.ts
index 4afa7f83..cae1e24a 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -7,19 +7,29 @@ import {
 import { isViewStateClosed } from './hooks';
 import { logger } from './logger';
 import { PRIVACY_SIGNAL_NAME } from './privacy-signals';
-import { LOG_LEVELS } from './settings';
+import { LOG_LEVELS, settings } from './settings';
 import {
   HandleSetLanguage,
   HandleChangePrivacyPolicy,
   HandleSetViewState,
+  HandleChangeUiVariables,
 } from './types';
 import { VERSION } from './constants';
+import type { ConsentManagerLanguageKey } from '@transcend-io/internationalization';
+import { getTranscendPolicies } from './utils/getTranscendPolicies';
+import { ObjByString } from '@transcend-io/type-utils';
 
 interface MakeConsentManagerAPIInput {
   /** The event target, where events as dispatched */
   eventTarget: EventTarget;
   /** Property for the current view state of the consent manager UI */
   viewState: ViewState;
+  /** The currently selected language */
+  activeLocale: ConsentManagerLanguageKey;
+  /** The current dynamic variables */
+  currentVariables: ObjByString;
+  /** Method to handle changes to UI global variables */
+  handleChangeUiVariables: HandleChangeUiVariables;
   /** Method to change language */
   handleChangeLanguage: HandleSetLanguage;
   /** Method to change view state */
@@ -43,18 +53,35 @@ let promptSuppressionNoticeShown = false;
 export function makeConsentManagerAPI({
   eventTarget,
   viewState,
+  activeLocale,
+  currentVariables,
   handleChangeLanguage,
+  handleChangeUiVariables,
   handleChangePrivacyPolicy,
   handleChangeSecondaryPolicy,
   handleSetViewState,
   airgap,
 }: MakeConsentManagerAPIInput): ConsentManagerAPI {
   const consentManagerMethods: Omit<ConsentManagerAPI, keyof EventTarget> = {
+    setTranscendUiVariables: (variables) =>
+      Promise.resolve(handleChangeUiVariables(variables)),
+    getTranscendUiVariables: () => currentVariables,
+    getTranscendPolicies: (input = {}) =>
+      Promise.resolve(
+        getTranscendPolicies(
+          input,
+          settings.policiesCdnLocation,
+          activeLocale,
+          currentVariables,
+        ),
+      ),
+
     setPrivacyPolicy: (privacyPolicyLink) =>
       Promise.resolve(handleChangePrivacyPolicy(privacyPolicyLink)),
     setSecondaryPolicy: (privacyPolicyLink) =>
       Promise.resolve(handleChangeSecondaryPolicy(privacyPolicyLink)),
     setActiveLocale: (locale) => Promise.resolve(handleChangeLanguage(locale)),
+    getActiveLocale: () => activeLocale,
     getViewState: () => viewState,
     viewStates: new Set(Object.values(ViewState)),
     doNotSell: (auth, options) =>
diff --git a/src/components/AcceptAll.tsx b/src/components/AcceptAll.tsx
index e846a84f..b2734d59 100644
--- a/src/components/AcceptAll.tsx
+++ b/src/components/AcceptAll.tsx
@@ -1,3 +1,4 @@
+import { ObjByString } from '@transcend-io/type-utils';
 import { h, JSX } from 'preact';
 import { useIntl } from 'react-intl';
 import { useAirgap } from '../hooks';
@@ -10,7 +11,10 @@ import { Button } from './Button';
  */
 export function AcceptAll({
   handleSetViewState,
+  globalUiVariables,
 }: {
+  /** Global variables to pass to message contents */
+  globalUiVariables: ObjByString;
   /** Function to change viewState */
   handleSetViewState: HandleSetViewState;
 }): JSX.Element {
@@ -37,22 +41,32 @@ export function AcceptAll({
             role="heading"
             className="text-title text-title-left"
           >
-            {formatMessage(messages.consentTitleAcceptAll)}
+            {formatMessage(messages.consentTitleAcceptAll, globalUiVariables)}
           </p>
         </div>
         <div>
-          <p className="paragraph"
+          <p
+            className="paragraph"
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{
-              __html: formatMessage(messages.acceptAllDescription),
+              __html: formatMessage(
+                messages.acceptAllDescription,
+                globalUiVariables,
+              ),
             }}
           />
         </div>
       </div>
       <Button
-        primaryText={formatMessage(messages.acceptAllButtonPrimary)}
+        primaryText={formatMessage(
+          messages.acceptAllButtonPrimary,
+          globalUiVariables,
+        )}
         handleClick={handleAcceptAll}
-        ariaDescription={formatMessage(messages.acceptAllButtonAriaDescription)}
+        ariaDescription={formatMessage(
+          messages.acceptAllButtonAriaDescription,
+          globalUiVariables,
+        )}
         initialFocus
       />
     </div>
diff --git a/src/components/AcceptAllOrMoreChoices.tsx b/src/components/AcceptAllOrMoreChoices.tsx
index 8fc2645b..31471298 100644
--- a/src/components/AcceptAllOrMoreChoices.tsx
+++ b/src/components/AcceptAllOrMoreChoices.tsx
@@ -1,3 +1,4 @@
+import { ObjByString } from '@transcend-io/type-utils';
 import { h, JSX } from 'preact';
 import { useIntl } from 'react-intl';
 import { useAirgap } from '../hooks';
@@ -10,9 +11,12 @@ import { Button } from './Button';
  */
 export function AcceptAllOrMoreChoices({
   handleSetViewState,
+  globalUiVariables,
 }: {
   /** Function to change viewState */
   handleSetViewState: HandleSetViewState;
+  /** Global variables to pass to message contents */
+  globalUiVariables: ObjByString;
 }): JSX.Element {
   const { airgap } = useAirgap();
   const { formatMessage } = useIntl();
@@ -47,7 +51,7 @@ export function AcceptAllOrMoreChoices({
             role="heading"
             className="text-title text-title-left"
           >
-            {formatMessage(messages.consentTitleAcceptAll)}
+            {formatMessage(messages.consentTitleAcceptAll, globalUiVariables)}
           </p>
         </div>
         <div>
@@ -55,18 +59,27 @@ export function AcceptAllOrMoreChoices({
             className="paragraph"
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{
-              __html: formatMessage(messages.acceptAllDescription),
+              __html: formatMessage(
+                messages.acceptAllDescription,
+                globalUiVariables,
+              ),
             }}
           />
         </div>
       </div>
       <div className="accept-or-reject-all-button-row">
         <Button
-          primaryText={formatMessage(messages.acceptAllButtonPrimary)}
+          primaryText={formatMessage(
+            messages.acceptAllButtonPrimary,
+            globalUiVariables,
+          )}
           handleClick={handleAcceptAll}
         />
         <Button
-          primaryText={formatMessage(messages.moreChoicesButtonPrimary)}
+          primaryText={formatMessage(
+            messages.moreChoicesButtonPrimary,
+            globalUiVariables,
+          )}
           handleClick={handleMoreChoices}
           initialFocus
         />
diff --git a/src/components/AcceptAllRejectAllToggle.tsx b/src/components/AcceptAllRejectAllToggle.tsx
index ae144872..d395479e 100644
--- a/src/components/AcceptAllRejectAllToggle.tsx
+++ b/src/components/AcceptAllRejectAllToggle.tsx
@@ -1,3 +1,4 @@
+import { ObjByString } from '@transcend-io/type-utils';
 import { h, JSX } from 'preact';
 import { useState } from 'preact/hooks';
 import { useIntl } from 'react-intl';
@@ -18,11 +19,14 @@ let savingTimeout: ReturnType<typeof setTimeout>;
 export function AcceptAllRejectAllToggle({
   handleSetViewState,
   fontColor,
+  globalUiVariables,
 }: {
   /** Function to change viewState */
   handleSetViewState: HandleSetViewState;
   /** Font color */
   fontColor: string;
+  /** Global variables to pass to message contents */
+  globalUiVariables: ObjByString;
 }): JSX.Element {
   const { airgap } = useAirgap();
   const { formatMessage } = useIntl();
@@ -64,6 +68,7 @@ export function AcceptAllRejectAllToggle({
         }}
         className="accept-all-reject-all-toggle-close"
         fontColor={fontColor}
+        globalUiVariables={globalUiVariables}
       />
       <div>
         <div>
@@ -72,21 +77,26 @@ export function AcceptAllRejectAllToggle({
             role="heading"
             className="text-title text-title-left"
           >
-            {formatMessage(messages.consentTitleAcceptAllRejectAllToggle)}
+            {formatMessage(
+              messages.consentTitleAcceptAllRejectAllToggle,
+              globalUiVariables,
+            )}
           </p>
         </div>
         <div>
-          <p className="paragraph"
+          <p
+            className="paragraph"
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{
               __html: formatMessage(
                 messages.acceptAllRejectAllToggleDescription,
+                globalUiVariables,
               ),
             }}
           />
         </div>
         <div className="margin-tops do-not-sell-explainer-interface">
-          <GPCIndicator />
+          <GPCIndicator globalUiVariables={globalUiVariables} />
           <Switch
             id={switchId}
             checked={consentLocal}
@@ -95,6 +105,7 @@ export function AcceptAllRejectAllToggle({
               consentLocal
                 ? messages.doNotSellOptedIn
                 : messages.doNotSellOptedOut,
+              globalUiVariables,
             )}
             initialFocus
           />
@@ -110,6 +121,7 @@ export function AcceptAllRejectAllToggle({
                     : consentLocal
                     ? messages.preferencesSavedOptedIn
                     : messages.preferencesSaved,
+                  globalUiVariables,
                 )
               : '\u200b'}
           </p>
diff --git a/src/components/AcceptOrRejectAdvertising.tsx b/src/components/AcceptOrRejectAdvertising.tsx
index 1db115db..dde05fe4 100644
--- a/src/components/AcceptOrRejectAdvertising.tsx
+++ b/src/components/AcceptOrRejectAdvertising.tsx
@@ -1,3 +1,4 @@
+import { ObjByString } from '@transcend-io/type-utils';
 import { h, JSX } from 'preact';
 import { useIntl } from 'react-intl';
 import { CONSENT_OPTIONS } from '../constants';
@@ -11,9 +12,12 @@ import { Button } from './Button';
  */
 export function AcceptOrRejectAdvertising({
   handleSetViewState,
+  globalUiVariables,
 }: {
   /** Function to change viewState */
   handleSetViewState: HandleSetViewState;
+  /** Global UI variables to pass to messages */
+  globalUiVariables: ObjByString;
 }): JSX.Element {
   const { airgap } = useAirgap();
   const { formatMessage } = useIntl();
@@ -27,7 +31,10 @@ export function AcceptOrRejectAdvertising({
             role="heading"
             className="text-title text-title-left"
           >
-            {formatMessage(messages.consentTitleAcceptOrRejectAdvertising)}
+            {formatMessage(
+              messages.consentTitleAcceptOrRejectAdvertising,
+              globalUiVariables,
+            )}
           </p>
         </div>
         <div>
@@ -37,6 +44,7 @@ export function AcceptOrRejectAdvertising({
             dangerouslySetInnerHTML={{
               __html: formatMessage(
                 messages.acceptOrRejectAdvertisingDescription,
+                globalUiVariables,
               ),
             }}
           />
@@ -44,7 +52,10 @@ export function AcceptOrRejectAdvertising({
       </div>
       <div className="accept-or-reject-all-button-row">
         <Button
-          primaryText={formatMessage(messages.acceptAdvertising)}
+          primaryText={formatMessage(
+            messages.acceptAdvertising,
+            globalUiVariables,
+          )}
           handleClick={(event) => {
             event.preventDefault();
             airgap.setConsent(event, { Advertising: true }, CONSENT_OPTIONS);
@@ -52,7 +63,10 @@ export function AcceptOrRejectAdvertising({
           }}
         />
         <Button
-          primaryText={formatMessage(messages.rejectAdvertising)}
+          primaryText={formatMessage(
+            messages.rejectAdvertising,
+            globalUiVariables,
+          )}
           handleClick={(event) => {
             event.preventDefault();
             airgap.setConsent(event, { Advertising: false }, CONSENT_OPTIONS);
diff --git a/src/components/AcceptOrRejectAll.tsx b/src/components/AcceptOrRejectAll.tsx
index 8c0d9c90..fe9a028b 100644
--- a/src/components/AcceptOrRejectAll.tsx
+++ b/src/components/AcceptOrRejectAll.tsx
@@ -1,3 +1,4 @@
+import { ObjByString } from '@transcend-io/type-utils';
 import { h, JSX } from 'preact';
 import { useIntl } from 'react-intl';
 import { useAirgap } from '../hooks';
@@ -10,9 +11,12 @@ import { Button } from './Button';
  */
 export function AcceptOrRejectAll({
   handleSetViewState,
+  globalUiVariables,
 }: {
   /** Function to change viewState */
   handleSetViewState: HandleSetViewState;
+  /** Global UI view state variables */
+  globalUiVariables: ObjByString;
 }): JSX.Element {
   const { airgap } = useAirgap();
   const { formatMessage } = useIntl();
@@ -48,7 +52,7 @@ export function AcceptOrRejectAll({
             role="heading"
             className="text-title text-title-left"
           >
-            {formatMessage(messages.consentTitleAcceptAll)}
+            {formatMessage(messages.consentTitleAcceptAll, globalUiVariables)}
           </p>
         </div>
         <div>
@@ -56,18 +60,27 @@ export function AcceptOrRejectAll({
             className="paragraph"
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{
-              __html: formatMessage(messages.acceptAllDescription),
+              __html: formatMessage(
+                messages.acceptAllDescription,
+                globalUiVariables,
+              ),
             }}
           />
         </div>
       </div>
       <div className="accept-or-reject-all-button-row">
         <Button
-          primaryText={formatMessage(messages.acceptAllButtonPrimary)}
+          primaryText={formatMessage(
+            messages.acceptAllButtonPrimary,
+            globalUiVariables,
+          )}
           handleClick={handleAcceptAll}
         />
         <Button
-          primaryText={formatMessage(messages.rejectAllButtonPrimary)}
+          primaryText={formatMessage(
+            messages.rejectAllButtonPrimary,
+            globalUiVariables,
+          )}
           handleClick={handleRejectAll}
           initialFocus
         />
diff --git a/src/components/AcceptOrRejectAllOrMoreChoices.tsx b/src/components/AcceptOrRejectAllOrMoreChoices.tsx
index 05e8d6a7..b4f80e25 100644
--- a/src/components/AcceptOrRejectAllOrMoreChoices.tsx
+++ b/src/components/AcceptOrRejectAllOrMoreChoices.tsx
@@ -1,3 +1,4 @@
+import { ObjByString } from '@transcend-io/type-utils';
 import { h, JSX } from 'preact';
 import { useIntl } from 'react-intl';
 import { useAirgap } from '../hooks';
@@ -10,9 +11,12 @@ import { Button } from './Button';
  */
 export function AcceptOrRejectAllOrMoreChoices({
   handleSetViewState,
+  globalUiVariables,
 }: {
   /** Function to change viewState */
   handleSetViewState: HandleSetViewState;
+  /** Global UI view state variables */
+  globalUiVariables: ObjByString;
 }): JSX.Element {
   const { airgap } = useAirgap();
   const { formatMessage } = useIntl();
@@ -58,7 +62,7 @@ export function AcceptOrRejectAllOrMoreChoices({
             role="heading"
             className="text-title text-title-left"
           >
-            {formatMessage(messages.consentTitleAcceptAll)}
+            {formatMessage(messages.consentTitleAcceptAll, globalUiVariables)}
           </p>
         </div>
         <div>
@@ -66,23 +70,35 @@ export function AcceptOrRejectAllOrMoreChoices({
             className="paragraph"
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{
-              __html: formatMessage(messages.acceptAllDescription),
+              __html: formatMessage(
+                messages.acceptAllDescription,
+                globalUiVariables,
+              ),
             }}
           />
         </div>
       </div>
       <div className="accept-or-reject-all-button-row">
         <Button
-          primaryText={formatMessage(messages.acceptAllButtonPrimary)}
+          primaryText={formatMessage(
+            messages.acceptAllButtonPrimary,
+            globalUiVariables,
+          )}
           handleClick={handleAcceptAll}
         />
         <Button
-          primaryText={formatMessage(messages.rejectAllButtonPrimary)}
+          primaryText={formatMessage(
+            messages.rejectAllButtonPrimary,
+            globalUiVariables,
+          )}
           handleClick={handleRejectAll}
           initialFocus
         />
         <Button
-          primaryText={formatMessage(messages.moreChoicesButtonPrimary)}
+          primaryText={formatMessage(
+            messages.moreChoicesButtonPrimary,
+            globalUiVariables,
+          )}
           handleClick={handleMoreChoices}
         />
       </div>
diff --git a/src/components/AcceptOrRejectAnalytics.tsx b/src/components/AcceptOrRejectAnalytics.tsx
index 294a850e..c5a6361e 100644
--- a/src/components/AcceptOrRejectAnalytics.tsx
+++ b/src/components/AcceptOrRejectAnalytics.tsx
@@ -1,3 +1,4 @@
+import { ObjByString } from '@transcend-io/type-utils';
 import { h, JSX } from 'preact';
 import { useIntl } from 'react-intl';
 import { CONSENT_OPTIONS } from '../constants';
@@ -11,9 +12,12 @@ import { Button } from './Button';
  */
 export function AcceptOrRejectAnalytics({
   handleSetViewState,
+  globalUiVariables,
 }: {
   /** Function to change viewState */
   handleSetViewState: HandleSetViewState;
+  /** Global UI view state variables */
+  globalUiVariables: ObjByString;
 }): JSX.Element {
   const { airgap } = useAirgap();
   const { formatMessage } = useIntl();
@@ -27,7 +31,10 @@ export function AcceptOrRejectAnalytics({
             role="heading"
             className="text-title text-title-left"
           >
-            {formatMessage(messages.consentTitleAcceptOrRejectAnalytics)}
+            {formatMessage(
+              messages.consentTitleAcceptOrRejectAnalytics,
+              globalUiVariables,
+            )}
           </p>
         </div>
         <div>
@@ -37,6 +44,7 @@ export function AcceptOrRejectAnalytics({
             dangerouslySetInnerHTML={{
               __html: formatMessage(
                 messages.acceptOrRejectAnalyticsDescription,
+                globalUiVariables,
               ),
             }}
           />
@@ -44,7 +52,10 @@ export function AcceptOrRejectAnalytics({
       </div>
       <div className="accept-or-reject-all-button-row">
         <Button
-          primaryText={formatMessage(messages.acceptAnalytics)}
+          primaryText={formatMessage(
+            messages.acceptAnalytics,
+            globalUiVariables,
+          )}
           handleClick={(event) => {
             event.preventDefault();
             airgap.setConsent(event, { Analytics: true }, CONSENT_OPTIONS);
@@ -52,7 +63,10 @@ export function AcceptOrRejectAnalytics({
           }}
         />
         <Button
-          primaryText={formatMessage(messages.rejectAnalytics)}
+          primaryText={formatMessage(
+            messages.rejectAnalytics,
+            globalUiVariables,
+          )}
           handleClick={(event) => {
             event.preventDefault();
             airgap.setConsent(event, { Analytics: false }, CONSENT_OPTIONS);
diff --git a/src/components/App.tsx b/src/components/App.tsx
index 0071e5c6..18308ecd 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -45,6 +45,9 @@ export function App({
   // Get the active privacy regime
   const privacyRegime = getPrimaryRegime(airgap.getRegimes());
 
+  // Global variables used for message templates
+  const [currentVariables, handleChangeUiVariables] = useState({});
+
   // Get default view states
   const { initialViewStateByPrivacyRegime, dismissedViewState } = config;
   const initialViewState =
@@ -80,7 +83,10 @@ export function App({
   const consentManagerAPI = makeConsentManagerAPI({
     eventTarget,
     viewState,
+    currentVariables,
+    handleChangeUiVariables,
     handleChangeLanguage,
+    activeLocale: language,
     handleSetViewState,
     handleChangePrivacyPolicy: (privacyPolicyUrl) =>
       setConfig({
@@ -115,6 +121,7 @@ export function App({
         {/** Ensure messages are loaded before any UI is displayed */}
         {messages ? (
           <Main
+            globalUiVariables={currentVariables}
             airgap={airgap}
             modalOpenAuth={auth}
             viewState={viewState}
diff --git a/src/components/BottomMenu.tsx b/src/components/BottomMenu.tsx
index d5decc38..d90aa1c6 100644
--- a/src/components/BottomMenu.tsx
+++ b/src/components/BottomMenu.tsx
@@ -5,6 +5,7 @@ import { DefinedMessage } from '@transcend-io/internationalization';
 import { bottomMenuMessages, noticeAndDoNotSellMessages } from '../messages';
 import type { HandleSetViewState } from '../types';
 import { MenuItem } from './MenuItem';
+import { ObjByString } from '@transcend-io/type-utils';
 
 const VIEW_STATE_TO_MESSAGE: { [k in ViewState]: DefinedMessage | undefined } =
   {
@@ -51,6 +52,7 @@ export function BottomMenu({
   firstSelectedViewState,
   secondaryPolicy,
   privacyPolicy,
+  globalUiVariables,
 }: {
   /** The first view state when opening the modal */
   firstSelectedViewState: ViewState | null;
@@ -62,6 +64,8 @@ export function BottomMenu({
   privacyPolicy: string;
   /** Secondary policy */
   secondaryPolicy: string;
+  /** Global UI view state variables */
+  globalUiVariables: ObjByString;
 }): JSX.Element {
   const { formatMessage } = useIntl();
   const policyMessage = VIEW_STATE_TO_MESSAGE[viewState];
@@ -71,11 +75,17 @@ export function BottomMenu({
       {viewState === 'LanguageOptions' ? (
         <div className="bottom-menu-item-container">
           <MenuItem
-            label={formatMessage(bottomMenuMessages.backButtonTooltip)}
+            label={formatMessage(
+              bottomMenuMessages.backButtonTooltip,
+              globalUiVariables,
+            )}
             type="button"
             onClick={(e) => handleSetViewState('back', e)}
           >
-            {formatMessage(bottomMenuMessages.backButtonText)}
+            {formatMessage(
+              bottomMenuMessages.backButtonText,
+              globalUiVariables,
+            )}
           </MenuItem>
         </div>
       ) : (
@@ -102,22 +112,32 @@ export function BottomMenu({
               <MenuItem
                 label={formatMessage(
                   bottomMenuMessages.simplerChoicesButtonLabel,
+                  globalUiVariables,
                 )}
                 type="button"
                 onClick={() => handleSetViewState(firstSelectedViewState)}
               >
-                {formatMessage(bottomMenuMessages.simplerChoicesButtonPrimary)}
+                {formatMessage(
+                  bottomMenuMessages.simplerChoicesButtonPrimary,
+                  globalUiVariables,
+                )}
               </MenuItem>
             </div>
           )
         ) : (
           <div className="bottom-menu-item-container">
             <MenuItem
-              label={formatMessage(bottomMenuMessages.moreChoicesButtonLabel)}
+              label={formatMessage(
+                bottomMenuMessages.moreChoicesButtonLabel,
+                globalUiVariables,
+              )}
               type="button"
               onClick={() => handleSetViewState('CompleteOptions')}
             >
-              {formatMessage(bottomMenuMessages.moreChoicesButtonPrimary)}
+              {formatMessage(
+                bottomMenuMessages.moreChoicesButtonPrimary,
+                globalUiVariables,
+              )}
             </MenuItem>
           </div>
         ))
@@ -126,11 +146,17 @@ export function BottomMenu({
       {viewState === 'NoticeAndDoNotSell' && (
         <div className="bottom-menu-item-container">
           <MenuItem
-            label={formatMessage(noticeAndDoNotSellMessages.doNotSellLabel)}
+            label={formatMessage(
+              noticeAndDoNotSellMessages.doNotSellLabel,
+              globalUiVariables,
+            )}
             type="button"
             onClick={() => handleSetViewState('CompleteOptions')}
           >
-            {formatMessage(noticeAndDoNotSellMessages.doNotSellPrimary)}
+            {formatMessage(
+              noticeAndDoNotSellMessages.doNotSellPrimary,
+              globalUiVariables,
+            )}
           </MenuItem>
         </div>
       )}
@@ -142,13 +168,17 @@ export function BottomMenu({
             <MenuItem
               label={formatMessage(
                 bottomMenuMessages.showSecondaryPolicyButtonLabel,
+                globalUiVariables,
               )}
               type="a"
               href={secondaryPolicy}
               target="_blank"
               rel="noopener noreferrer"
             >
-              {formatMessage(bottomMenuMessages.showSecondaryPolicyButton)}
+              {formatMessage(
+                bottomMenuMessages.showSecondaryPolicyButton,
+                globalUiVariables,
+              )}
             </MenuItem>
           </div>
         )
@@ -156,14 +186,17 @@ export function BottomMenu({
 
       <div className="bottom-menu-item-container">
         <MenuItem
-          label={formatMessage(bottomMenuMessages.showPolicyButtonLabel)}
+          label={formatMessage(
+            bottomMenuMessages.showPolicyButtonLabel,
+            globalUiVariables,
+          )}
           type="a"
           href={privacyPolicy}
           target="_blank"
           rel="noopener noreferrer"
         >
           {policyMessage
-            ? formatMessage(policyMessage)
+            ? formatMessage(policyMessage, globalUiVariables)
             : 'Undefined Policy Link Message'}
         </MenuItem>
       </div>
diff --git a/src/components/CloseButton.tsx b/src/components/CloseButton.tsx
index cb08043c..9d553932 100644
--- a/src/components/CloseButton.tsx
+++ b/src/components/CloseButton.tsx
@@ -1,3 +1,4 @@
+import { ObjByString } from '@transcend-io/type-utils';
 import { h, JSX } from 'preact';
 import { useIntl } from 'react-intl';
 import { messages } from '../messages';
@@ -10,7 +11,10 @@ export function CloseButton({
   fontColor,
   onClick,
   initialFocus,
+  globalUiVariables,
 }: {
+  /** Global UI view state variables */
+  globalUiVariables: ObjByString;
   /** Class name of button */
   className: string;
   /** Font color */
@@ -24,7 +28,7 @@ export function CloseButton({
   return (
     <button
       type="button"
-      aria-label={formatMessage(messages.close)}
+      aria-label={formatMessage(messages.close, globalUiVariables)}
       className={className}
       onClick={onClick}
       data-initialFocus={initialFocus}
@@ -36,7 +40,9 @@ export function CloseButton({
           d="M25.71 24.29a.996.996 0 1 1-1.41 1.41L16 17.41 7.71 25.7a.996.996 0 1 1-1.41-1.41L14.59 16l-8.3-8.29A.996.996 0 1 1 7.7 6.3l8.3 8.29 8.29-8.29a.996.996 0 1 1 1.41 1.41L17.41 16l8.3 8.29z"
         />
       </svg>
-      <span className="screen-reader">{formatMessage(messages.close)}</span>
+      <span className="screen-reader">
+        {formatMessage(messages.close, globalUiVariables)}
+      </span>
     </button>
   );
 }
diff --git a/src/components/Collapsed.tsx b/src/components/Collapsed.tsx
index 2c3b5f41..30b1b2cf 100644
--- a/src/components/Collapsed.tsx
+++ b/src/components/Collapsed.tsx
@@ -1,3 +1,4 @@
+import { ObjByString } from '@transcend-io/type-utils';
 import { h, JSX } from 'preact';
 import { useRef } from 'preact/hooks';
 import { useIntl } from 'react-intl';
@@ -10,9 +11,12 @@ import { TranscendLogoLogomark } from './TranscendLogo';
  */
 export function Collapsed({
   handleSetViewState,
+  globalUiVariables,
 }: {
   /** Function to change viewState */
   handleSetViewState: HandleSetViewState;
+  /** Global UI view state variables */
+  globalUiVariables: ObjByString;
 }): JSX.Element {
   const { formatMessage } = useIntl();
   const paragraphRef = useRef<HTMLParagraphElement>(null);
@@ -21,7 +25,7 @@ export function Collapsed({
     <button
       onClick={() => handleSetViewState('open')}
       className="collapsed-container"
-      aria-label={formatMessage(messages.collapsedLabel)}
+      aria-label={formatMessage(messages.collapsedLabel, globalUiVariables)}
     >
       <svg
         className="collapsed-square-logo-svg"
@@ -31,7 +35,9 @@ export function Collapsed({
       >
         <TranscendLogoLogomark />
       </svg>
-      <p ref={paragraphRef}>{formatMessage(messages.collapsedLabel)}</p>
+      <p ref={paragraphRef}>
+        {formatMessage(messages.collapsedLabel, globalUiVariables)}
+      </p>
     </button>
   );
 }
diff --git a/src/components/CompleteOptions.tsx b/src/components/CompleteOptions.tsx
index 9a8ff5af..49221b6a 100644
--- a/src/components/CompleteOptions.tsx
+++ b/src/components/CompleteOptions.tsx
@@ -11,15 +11,19 @@ import { Toggle } from './Toggle';
 import { CONSENT_OPTIONS } from '../constants';
 import { DEFAULT_PURPOSE_TO_MESSAGE_KEY } from './constants';
 import { sortByPurposeOrder } from '../helpers';
+import { ObjByString } from '@transcend-io/type-utils';
 
 /**
  * The model view for "More Choices" showing granular checkboxes and more info
  */
 export function CompleteOptions({
   handleSetViewState,
+  globalUiVariables,
 }: {
   /** Function to change viewState */
   handleSetViewState: HandleSetViewState;
+  /** Global variables to pass to message contents */
+  globalUiVariables: ObjByString;
 }): JSX.Element {
   const { formatMessage } = useIntl();
   const { airgap } = useAirgap();
@@ -64,7 +68,10 @@ export function CompleteOptions({
     Object.entries(consentSelections).sort(sortByPurposeOrder);
 
   // Render description
-  const description = formatMessage(completeOptionsMessages.description);
+  const description = formatMessage(
+    completeOptionsMessages.description,
+    globalUiVariables,
+  );
 
   return (
     <div className="complete-options-container" role="none">
@@ -73,10 +80,10 @@ export function CompleteOptions({
           id="consent-dialog-title"
           className="text-title text-title-center"
         >
-          {formatMessage(messages.consentTitle)}
+          {formatMessage(messages.consentTitle, globalUiVariables)}
         </legend>
         <form className="complete-options-form">
-          <GPCIndicator />
+          <GPCIndicator globalUiVariables={globalUiVariables} />
           {description && description !== '-' ? (
             <p className="paragraph">
               <div
@@ -91,11 +98,18 @@ export function CompleteOptions({
           <div
             className="toggles-container"
             role="group"
-            aria-label={formatMessage(messages.buttonGroupAriaDescription)}
+            aria-label={formatMessage(
+              messages.buttonGroupAriaDescription,
+              globalUiVariables,
+            )}
           >
             <Toggle
               key="Essential"
-              name={formatMessage(purposeToMessageKey.Essential)}
+              globalUiVariables={globalUiVariables}
+              name={formatMessage(
+                purposeToMessageKey.Essential,
+                globalUiVariables,
+              )}
               initialToggleState
               disabled
               handleToggle={() => {
@@ -103,14 +117,19 @@ export function CompleteOptions({
               }}
               ariaLabel={formatMessage(
                 completeOptionsMessages.essentialAriaLabel,
+                globalUiVariables,
               )}
             />
             {orderedSelections.map(([purpose, isChecked], idx) => (
               <Toggle
                 key={purpose}
+                globalUiVariables={globalUiVariables}
                 name={
                   Object.hasOwnProperty.call(purposeToMessageKey, purpose)
-                    ? formatMessage(purposeToMessageKey[purpose])
+                    ? formatMessage(
+                        purposeToMessageKey[purpose],
+                        globalUiVariables,
+                      )
                     : purpose
                 }
                 initialToggleState={isChecked}
@@ -126,6 +145,7 @@ export function CompleteOptions({
             handleClick={handleSave}
             primaryText={formatMessage(
               completeOptionsMessages.saveButtonPrimary,
+              globalUiVariables,
             )}
             type="submit"
             {...(orderedSelections.length === 0 ? { initialFocus: true } : {})}
diff --git a/src/components/CompleteOptionsInverted.tsx b/src/components/CompleteOptionsInverted.tsx
index ebe7315e..6610c434 100644
--- a/src/components/CompleteOptionsInverted.tsx
+++ b/src/components/CompleteOptionsInverted.tsx
@@ -17,15 +17,19 @@ import {
   DEFAULT_PURPOSE_TO_INVERTED_MESSAGE_KEY,
   ORDER_OF_PURPOSES,
 } from './constants';
+import { ObjByString } from '@transcend-io/type-utils';
 
 /**
  * The model view where checking each checkbox represents an opt otu
  */
 export function CompleteOptionsInverted({
   handleSetViewState,
+  globalUiVariables,
 }: {
   /** Function to change viewState */
   handleSetViewState: HandleSetViewState;
+  /** Global variables to pass to message contents */
+  globalUiVariables: ObjByString;
 }): JSX.Element {
   const { formatMessage } = useIntl();
   const { airgap } = useAirgap();
@@ -79,6 +83,7 @@ export function CompleteOptionsInverted({
   // Render description
   const description = formatMessage(
     completeOptionsInvertedMessages.description,
+    globalUiVariables,
   );
 
   return (
@@ -88,10 +93,13 @@ export function CompleteOptionsInverted({
         role="heading"
         className="text-title text-title-center"
       >
-        {formatMessage(messages.completeOptionsInvertedTitle)}
+        {formatMessage(
+          messages.completeOptionsInvertedTitle,
+          globalUiVariables,
+        )}
       </p>
       <form className="complete-options-form">
-        <GPCIndicator />
+        <GPCIndicator globalUiVariables={globalUiVariables} />
         {description && description !== '-' ? (
           <p className="paragraph">
             <div
@@ -105,15 +113,22 @@ export function CompleteOptionsInverted({
         <div
           className="toggles-container"
           role="group"
-          aria-label={formatMessage(messages.buttonGroupAriaDescription)}
+          aria-label={formatMessage(
+            messages.buttonGroupAriaDescription,
+            globalUiVariables,
+          )}
         >
           {orderedSelections.map(([purpose, isChecked], idx) => (
             <Toggle
               key={purpose}
+              globalUiVariables={globalUiVariables}
               invertLabels
               name={
                 Object.hasOwnProperty.call(purposeToMessageKey, purpose)
-                  ? formatMessage(purposeToMessageKey[purpose])
+                  ? formatMessage(
+                      purposeToMessageKey[purpose],
+                      globalUiVariables,
+                    )
                   : purpose
               }
               initialToggleState={!isChecked}
@@ -127,7 +142,10 @@ export function CompleteOptionsInverted({
         </div>
         <Button
           handleClick={handleSave}
-          primaryText={formatMessage(completeOptionsMessages.saveButtonPrimary)}
+          primaryText={formatMessage(
+            completeOptionsMessages.saveButtonPrimary,
+            globalUiVariables,
+          )}
           {...(orderedSelections.length === 0 ? { initialFocus: true } : {})}
         />
       </form>
diff --git a/src/components/CompleteOptionsToggles.tsx b/src/components/CompleteOptionsToggles.tsx
index 52fb648c..531056a6 100644
--- a/src/components/CompleteOptionsToggles.tsx
+++ b/src/components/CompleteOptionsToggles.tsx
@@ -1,3 +1,4 @@
+import { ObjByString } from '@transcend-io/type-utils';
 import { h, JSX } from 'preact';
 import { useMemo, useState } from 'preact/hooks';
 import { useIntl } from 'react-intl';
@@ -17,11 +18,14 @@ import { Switch } from './Switch';
 export function CompleteOptionsToggles({
   handleSetViewState,
   fontColor,
+  globalUiVariables,
 }: {
   /** Function to change viewState */
   handleSetViewState: HandleSetViewState;
   /** Font color */
   fontColor: string;
+  /** Global UI view state variables  */
+  globalUiVariables: ObjByString;
 }): JSX.Element {
   const { airgap } = useAirgap();
   const { formatMessage } = useIntl();
@@ -77,6 +81,7 @@ export function CompleteOptionsToggles({
         }}
         className="complete-options-toggle-close"
         fontColor={fontColor}
+        globalUiVariables={globalUiVariables}
         {...(orderedSelections.length === 0 ? { initialFocus: true } : {})}
       />
       <div>
@@ -86,15 +91,20 @@ export function CompleteOptionsToggles({
             role="heading"
             className="text-title text-title-left"
           >
-            {formatMessage(messages.consentTitleCompleteOptionsToggle)}
+            {formatMessage(
+              messages.consentTitleCompleteOptionsToggle,
+              globalUiVariables,
+            )}
           </p>
         </div>
         <div>
-          <p className="paragraph"
+          <p
+            className="paragraph"
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{
               __html: formatMessage(
                 messages.consentTitleCompleteOptionsToggleDescription,
+                globalUiVariables,
               ),
             }}
           />
@@ -102,7 +112,10 @@ export function CompleteOptionsToggles({
         <div
           className="margin-tops complete-options-toggle-interface"
           role="group"
-          aria-label={formatMessage(messages.buttonGroupAriaDescription)}
+          aria-label={formatMessage(
+            messages.buttonGroupAriaDescription,
+            globalUiVariables,
+          )}
         >
           <span key="essential">
             <Switch
@@ -119,7 +132,10 @@ export function CompleteOptionsToggles({
               }
               label={
                 Object.hasOwnProperty.call(purposeToMessageKey, 'Essential')
-                  ? formatMessage(purposeToMessageKey.Essential)
+                  ? formatMessage(
+                      purposeToMessageKey.Essential,
+                      globalUiVariables,
+                    )
                   : 'Essential'
               }
             />
@@ -141,7 +157,10 @@ export function CompleteOptionsToggles({
                 }
                 label={
                   Object.hasOwnProperty.call(purposeToMessageKey, purpose)
-                    ? formatMessage(purposeToMessageKey[purpose])
+                    ? formatMessage(
+                        purposeToMessageKey[purpose],
+                        globalUiVariables,
+                      )
                     : purpose
                 }
                 {...(idx === 0 ? { initialFocus: true } : {})}
diff --git a/src/components/DoNotSellDisclosure.tsx b/src/components/DoNotSellDisclosure.tsx
index 19a215bc..5de6bfff 100644
--- a/src/components/DoNotSellDisclosure.tsx
+++ b/src/components/DoNotSellDisclosure.tsx
@@ -7,18 +7,22 @@ import type { HandleSetViewState } from '../types';
 import { useAirgap } from '../hooks';
 import { Button } from './Button';
 import { CONSENT_OPTIONS } from '../constants';
+import { ObjByString } from '@transcend-io/type-utils';
 
 /**
  * Component showing acknowledgement of do not sell
  */
 export function DoNotSellDisclosure({
   handleSetViewState,
+  globalUiVariables,
   modalOpenAuth,
 }: {
   /** Authentication for opening the airgap modal */
   modalOpenAuth: AirgapAuth;
   /** Function to change viewState */
   handleSetViewState: HandleSetViewState;
+  /** Global UI view state variables */
+  globalUiVariables: ObjByString;
 }): JSX.Element {
   const { airgap } = useAirgap();
   const { formatMessage } = useIntl();
@@ -62,15 +66,18 @@ export function DoNotSellDisclosure({
               globalPrivacyControl
                 ? noticeAndDoNotSellMessages.doNotSellHonoredGpc
                 : noticeAndDoNotSellMessages.doNotSellHonored,
+              globalUiVariables,
             )}
           </p>
         </div>
         <div>
-          <p className="paragraph"
+          <p
+            className="paragraph"
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{
               __html: formatMessage(
                 noticeAndDoNotSellMessages.doNotSellHonoredDescription,
+                globalUiVariables,
               ),
             }}
           />
@@ -79,6 +86,7 @@ export function DoNotSellDisclosure({
       <Button
         primaryText={formatMessage(
           noticeAndDoNotSellMessages.confirmButtonPrimary,
+          globalUiVariables,
         )}
         handleClick={handleConfirm}
         initialFocus
diff --git a/src/components/DoNotSellExplainer.tsx b/src/components/DoNotSellExplainer.tsx
index dd6ebc92..88736d24 100644
--- a/src/components/DoNotSellExplainer.tsx
+++ b/src/components/DoNotSellExplainer.tsx
@@ -1,3 +1,4 @@
+import { ObjByString } from '@transcend-io/type-utils';
 import { h, JSX } from 'preact';
 import { useState } from 'preact/hooks';
 import { useIntl } from 'react-intl';
@@ -19,11 +20,14 @@ let savingTimeout: ReturnType<typeof setTimeout>;
 export function DoNotSellExplainer({
   handleSetViewState,
   fontColor,
+  globalUiVariables,
 }: {
   /** Function to change viewState */
   handleSetViewState: HandleSetViewState;
   /** Font color */
   fontColor: string;
+  /** Global UI view state variables */
+  globalUiVariables: ObjByString;
 }): JSX.Element {
   const { airgap } = useAirgap();
   const { formatMessage } = useIntl();
@@ -57,6 +61,7 @@ export function DoNotSellExplainer({
         }}
         className="do-not-sell-explainer-close"
         fontColor={fontColor}
+        globalUiVariables={globalUiVariables}
       />
       <div>
         <div>
@@ -65,19 +70,26 @@ export function DoNotSellExplainer({
             role="heading"
             className="text-title text-title-left"
           >
-            {formatMessage(messages.consentTitleDoNotSellExplainer)}
+            {formatMessage(
+              messages.consentTitleDoNotSellExplainer,
+              globalUiVariables,
+            )}
           </p>
         </div>
         <div>
-          <div className="paragraph"
+          <div
+            className="paragraph"
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{
-              __html: formatMessage(messages.doNotSellDescription),
+              __html: formatMessage(
+                messages.doNotSellDescription,
+                globalUiVariables,
+              ),
             }}
           />
         </div>
         <div className="margin-tops do-not-sell-explainer-interface">
-          <GPCIndicator />
+          <GPCIndicator globalUiVariables={globalUiVariables} />
           <Switch
             id="sale-of-info"
             checked={consentLocal}
@@ -86,6 +98,7 @@ export function DoNotSellExplainer({
               consentLocal
                 ? messages.doNotSellOptedIn
                 : messages.doNotSellOptedOut,
+              globalUiVariables,
             )}
             initialFocus
           />
@@ -102,6 +115,7 @@ export function DoNotSellExplainer({
                     : consentLocal
                     ? messages.preferencesSavedOptedIn
                     : messages.preferencesSaved,
+                  globalUiVariables,
                 )
               : '\u200b'}
           </p>
diff --git a/src/components/GPCIndicator.tsx b/src/components/GPCIndicator.tsx
index 234fbc22..916d2cc0 100644
--- a/src/components/GPCIndicator.tsx
+++ b/src/components/GPCIndicator.tsx
@@ -3,6 +3,7 @@ import { useIntl } from 'react-intl';
 import type { AirgapAPI } from '@transcend-io/airgap.js-types';
 import { useAirgap } from '../hooks';
 import { completeOptionsMessages } from '../messages';
+import { ObjByString } from '@transcend-io/type-utils';
 
 /**
  * Helper to get the current sale of info setting
@@ -17,7 +18,12 @@ function getSaleOfInfoIsOn(airgap: AirgapAPI): boolean {
 /**
  * Indicator that the Global Privacy Control signal is controlling this setting
  */
-export function GPCIndicator(): JSX.Element {
+export function GPCIndicator({
+  globalUiVariables,
+}: {
+  /** Global variables to pass to message contents */
+  globalUiVariables: ObjByString;
+}): JSX.Element {
   const { formatMessage } = useIntl();
   const { airgap } = useAirgap();
 
@@ -37,7 +43,12 @@ export function GPCIndicator(): JSX.Element {
       <svg height="6" width="6">
         <circle cx="3" cy="3" r="3" fill="#52c41a" />
       </svg>
-      <p>{formatMessage(completeOptionsMessages.globalPrivacySignal)}</p>
+      <p>
+        {formatMessage(
+          completeOptionsMessages.globalPrivacySignal,
+          globalUiVariables,
+        )}
+      </p>
     </div>
   );
 }
diff --git a/src/components/LanguageButton.tsx b/src/components/LanguageButton.tsx
index 791ae7e4..2eea4812 100644
--- a/src/components/LanguageButton.tsx
+++ b/src/components/LanguageButton.tsx
@@ -4,6 +4,7 @@ import { useIntl } from 'react-intl';
 import type { HandleSetViewState } from '../types';
 import { messages } from '../messages';
 import { ConsentManagerLanguageKey } from '@transcend-io/internationalization';
+import { ObjByString } from '@transcend-io/type-utils';
 
 /**
  * The button to change languages
@@ -13,9 +14,12 @@ export function LanguageButton({
   viewState,
   fontColor,
   supportedLanguages,
+  globalUiVariables,
 }: {
   /** Function to change viewState */
   handleSetViewState: HandleSetViewState;
+  /** Global UI view state variables */
+  globalUiVariables: ObjByString;
   /** Current viewState */
   viewState: ViewState;
   /** Font color */
@@ -51,7 +55,7 @@ export function LanguageButton({
           : 'language-button-inactive'
       }`}
       onClick={handleClick}
-      aria-label={formatMessage(messages.switchLanguage)}
+      aria-label={formatMessage(messages.switchLanguage, globalUiVariables)}
     >
       <svg
         fill={fontColor}
@@ -65,7 +69,7 @@ export function LanguageButton({
         <path d="M1.54545 0C0.700815 0 0 0.700815 0 1.54545V10.0455C0 10.8901 0.700815 11.5909 1.54545 11.5909H5.40909V15.4545C5.40909 16.3084 6.10068 17 6.95455 17H15.4545C16.3084 17 17 16.3084 17 15.4545V6.95455C17 6.10068 16.3084 5.40909 15.4545 5.40909H11.5909V1.54545C11.5909 0.700815 10.8901 0 10.0455 0H1.54545ZM1.54545 1.54545H10.0455V6.18182L6.18182 10.0455H1.54545V1.54545ZM5.40909 2.70455V3.86364H3.09091V4.63636H6.95455C6.95455 5.83331 6.61732 6.55191 5.99618 7.02397C5.82635 7.15304 5.62398 7.26123 5.40154 7.35449C5.15205 7.2311 4.91771 7.09143 4.72088 6.92587C4.16677 6.45979 3.86364 5.86635 3.86364 5.40909H3.09091C3.09091 6.17969 3.5342 6.93826 4.22283 7.51749C4.26843 7.55584 4.32435 7.58639 4.37225 7.62314C3.98477 7.68505 3.56774 7.72727 3.09091 7.72727V8.5C3.95275 8.5 4.71991 8.41088 5.37589 8.19513C5.85407 8.3841 6.38426 8.5 6.95455 8.5V7.72727C6.76545 7.72727 6.58468 7.70391 6.40669 7.67596C6.42513 7.66256 6.44592 7.65201 6.46404 7.63823C7.29178 7.00915 7.72727 5.98942 7.72727 4.63636H8.5V3.86364H6.18182V2.70455H5.40909ZM10.3564 8.48189H12.0497L13.8804 13.9272H12.3712L12.0316 12.7304H10.2537L9.90359 13.9272H8.53018L10.3564 8.48189ZM11.114 9.7089L10.5178 11.7343H11.7705L11.1864 9.7089H11.114Z" />
       </svg>
       <span className="screen-reader">
-        {formatMessage(messages.switchLanguage)}
+        {formatMessage(messages.switchLanguage, globalUiVariables)}
       </span>
     </button>
   );
diff --git a/src/components/Main.tsx b/src/components/Main.tsx
index 02e4d3db..42bcec35 100644
--- a/src/components/Main.tsx
+++ b/src/components/Main.tsx
@@ -35,6 +35,7 @@ import { CompleteOptionsToggles } from './CompleteOptionsToggles';
 import { useIntl } from 'react-intl';
 import { messages } from '../messages';
 import { initialFocusElement } from '../helpers';
+import { ObjByString } from '@transcend-io/type-utils';
 
 /**
  * Presents view states (collapsed, GDPR-mode, CCPA-mode etc)
@@ -44,11 +45,14 @@ export function Main({
   viewState,
   config,
   firstSelectedViewState,
+  globalUiVariables,
   handleSetViewState,
   handleChangeLanguage,
   supportedLanguages,
   modalOpenAuth,
 }: {
+  /** Global variables for UI view state */
+  globalUiVariables: ObjByString;
   /** airgap.js API */
   airgap: AirgapAPI;
   /** Configuration for consent UI */
@@ -88,7 +92,7 @@ export function Main({
     return (
       <div
         role="regions"
-        aria-label={formatMessage(messages.modalAriaLabel)}
+        aria-label={formatMessage(messages.modalAriaLabel, globalUiVariables)}
         className="modal-container"
         id="consentManagerMainDialog"
         ref={dialogRef}
@@ -96,21 +100,29 @@ export function Main({
         <div className="modal-container-inner">
           <div className="inner-container">
             {viewState === 'QuickOptions' && (
-              <QuickOptions handleSetViewState={handleSetViewState} />
+              <QuickOptions
+                handleSetViewState={handleSetViewState}
+                globalUiVariables={globalUiVariables}
+              />
             )}
 
             {viewState === 'AcceptAll' && (
-              <AcceptAll handleSetViewState={handleSetViewState} />
+              <AcceptAll
+                handleSetViewState={handleSetViewState}
+                globalUiVariables={globalUiVariables}
+              />
             )}
 
             {viewState === 'AcceptOrRejectAnalytics' && (
               <AcceptOrRejectAnalytics
                 handleSetViewState={handleSetViewState}
+                globalUiVariables={globalUiVariables}
               />
             )}
             {viewState === 'AcceptOrRejectAdvertising' && (
               <AcceptOrRejectAdvertising
                 handleSetViewState={handleSetViewState}
+                globalUiVariables={globalUiVariables}
               />
             )}
 
@@ -118,6 +130,7 @@ export function Main({
               <DoNotSellExplainer
                 handleSetViewState={handleSetViewState}
                 fontColor={config.theme.fontColor}
+                globalUiVariables={globalUiVariables}
               />
             )}
 
@@ -125,42 +138,58 @@ export function Main({
               <CompleteOptionsToggles
                 handleSetViewState={handleSetViewState}
                 fontColor={config.theme.fontColor}
+                globalUiVariables={globalUiVariables}
               />
             )}
 
             {viewState === 'QuickOptions3' && (
-              <QuickOptions3 handleSetViewState={handleSetViewState} />
+              <QuickOptions3
+                handleSetViewState={handleSetViewState}
+                globalUiVariables={globalUiVariables}
+              />
             )}
 
             {viewState === 'PrivacyPolicyNotice' && (
-              <PrivacyPolicyNotice handleSetViewState={handleSetViewState} />
+              <PrivacyPolicyNotice
+                handleSetViewState={handleSetViewState}
+                globalUiVariables={globalUiVariables}
+              />
             )}
 
             {viewState === 'PrivacyPolicyNoticeWithCloseButton' && (
               <PrivacyPolicyNoticeWithCloseButton
                 handleSetViewState={handleSetViewState}
                 fontColor={config.theme.fontColor}
+                globalUiVariables={globalUiVariables}
               />
             )}
 
             {viewState === 'AcceptOrRejectAll' && (
-              <AcceptOrRejectAll handleSetViewState={handleSetViewState} />
+              <AcceptOrRejectAll
+                handleSetViewState={handleSetViewState}
+                globalUiVariables={globalUiVariables}
+              />
             )}
 
             {viewState === 'AcceptAllRejectAllToggle' && (
               <AcceptAllRejectAllToggle
                 handleSetViewState={handleSetViewState}
                 fontColor={config.theme.fontColor}
+                globalUiVariables={globalUiVariables}
               />
             )}
 
             {viewState === 'AcceptAllOrMoreChoices' && (
-              <AcceptAllOrMoreChoices handleSetViewState={handleSetViewState} />
+              <AcceptAllOrMoreChoices
+                handleSetViewState={handleSetViewState}
+                globalUiVariables={globalUiVariables}
+              />
             )}
 
             {viewState === 'AcceptOrRejectAllOrMoreChoices' && (
               <AcceptOrRejectAllOrMoreChoices
                 handleSetViewState={handleSetViewState}
+                globalUiVariables={globalUiVariables}
               />
             )}
 
@@ -168,6 +197,7 @@ export function Main({
               <DoNotSellDisclosure
                 handleSetViewState={handleSetViewState}
                 modalOpenAuth={modalOpenAuth}
+                globalUiVariables={globalUiVariables}
               />
             )}
 
@@ -175,21 +205,29 @@ export function Main({
               <OptOutDisclosure
                 handleSetViewState={handleSetViewState}
                 modalOpenAuth={modalOpenAuth}
+                globalUiVariables={globalUiVariables}
               />
             )}
 
             {viewState === 'CompleteOptions' && (
-              <CompleteOptions handleSetViewState={handleSetViewState} />
+              <CompleteOptions
+                handleSetViewState={handleSetViewState}
+                globalUiVariables={globalUiVariables}
+              />
             )}
 
             {viewState === 'CompleteOptionsInverted' && (
               <CompleteOptionsInverted
                 handleSetViewState={handleSetViewState}
+                globalUiVariables={globalUiVariables}
               />
             )}
 
             {viewState === 'NoticeAndDoNotSell' && (
-              <NoticeAndDoNotSell handleSetViewState={handleSetViewState} />
+              <NoticeAndDoNotSell
+                handleSetViewState={handleSetViewState}
+                globalUiVariables={globalUiVariables}
+              />
             )}
 
             {viewState === 'LanguageOptions' && (
@@ -208,12 +246,14 @@ export function Main({
               handleSetViewState={handleSetViewState}
               privacyPolicy={config.privacyPolicy}
               secondaryPolicy={config.secondaryPolicy}
+              globalUiVariables={globalUiVariables}
             />
             <LanguageButton
               handleSetViewState={handleSetViewState}
               viewState={viewState}
               fontColor={config.theme.fontColor}
               supportedLanguages={supportedLanguages}
+              globalUiVariables={globalUiVariables}
             />
           </div>
         </div>
@@ -226,7 +266,12 @@ export function Main({
     viewState === 'Collapsed' &&
     (!firstSelectedViewState || !isViewStateClosed(firstSelectedViewState))
   ) {
-    return <Collapsed handleSetViewState={handleSetViewState} />;
+    return (
+      <Collapsed
+        handleSetViewState={handleSetViewState}
+        globalUiVariables={globalUiVariables}
+      />
+    );
   }
 
   // Completely hidden
diff --git a/src/components/NoticeAndDoNotSell.tsx b/src/components/NoticeAndDoNotSell.tsx
index b360c55a..07b432f1 100644
--- a/src/components/NoticeAndDoNotSell.tsx
+++ b/src/components/NoticeAndDoNotSell.tsx
@@ -5,15 +5,19 @@ import type { HandleSetViewState } from '../types';
 import { useAirgap } from '../hooks';
 import { Button } from './Button';
 import { CONSENT_OPTIONS } from '../constants';
+import { ObjByString } from '@transcend-io/type-utils';
 
 /**
  * Component showing 'okay' button for "do not sell my personal information" interface
  */
 export function NoticeAndDoNotSell({
   handleSetViewState,
+  globalUiVariables,
 }: {
   /** Function to change viewState */
   handleSetViewState: HandleSetViewState;
+  /** Global UI view state variables */
+  globalUiVariables: ObjByString;
 }): JSX.Element {
   const { airgap } = useAirgap();
   const { formatMessage } = useIntl();
@@ -34,14 +38,18 @@ export function NoticeAndDoNotSell({
         role="heading"
         className="text-title text-title-left"
       >
-        {formatMessage(messages.noticeTitle)}
+        {formatMessage(messages.noticeTitle, globalUiVariables)}
       </p>
       <Button
         primaryText={formatMessage(
           noticeAndDoNotSellMessages.confirmButtonPrimary,
+          globalUiVariables,
         )}
         handleClick={handleConfirm}
-        ariaDescription={formatMessage(messages.noticeButtonAriaDescription)}
+        ariaDescription={formatMessage(
+          messages.noticeButtonAriaDescription,
+          globalUiVariables,
+        )}
         initialFocus
       />
     </div>
diff --git a/src/components/OptOutDisclosure.tsx b/src/components/OptOutDisclosure.tsx
index b387dbc0..44ec65c0 100644
--- a/src/components/OptOutDisclosure.tsx
+++ b/src/components/OptOutDisclosure.tsx
@@ -9,6 +9,7 @@ import {
 import type { HandleSetViewState } from '../types';
 import { useAirgap } from '../hooks';
 import { Button } from './Button';
+import { ObjByString } from '@transcend-io/type-utils';
 
 /**
  * Component showing acknowledgement of a 1 click opt out of all purposes
@@ -16,11 +17,14 @@ import { Button } from './Button';
 export function OptOutDisclosure({
   handleSetViewState,
   modalOpenAuth,
+  globalUiVariables,
 }: {
   /** Authentication for opening the airgap modal */
   modalOpenAuth: AirgapAuth;
   /** Function to change viewState */
   handleSetViewState: HandleSetViewState;
+  /** Global UI view state variables */
+  globalUiVariables: ObjByString;
 }): JSX.Element {
   const { airgap } = useAirgap();
   const { formatMessage } = useIntl();
@@ -59,15 +63,18 @@ export function OptOutDisclosure({
               globalPrivacyControl
                 ? optOutDisclosureMessages.optOutHonoredGpc
                 : optOutDisclosureMessages.optOutHonored,
+              globalUiVariables,
             )}
           </p>
         </div>
         <div>
-          <p className="paragraph"
+          <p
+            className="paragraph"
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{
               __html: formatMessage(
                 optOutDisclosureMessages.optOutHonoredDescription,
+                globalUiVariables,
               ),
             }}
           />
@@ -76,6 +83,7 @@ export function OptOutDisclosure({
       <Button
         primaryText={formatMessage(
           noticeAndDoNotSellMessages.confirmButtonPrimary,
+          globalUiVariables,
         )}
         handleClick={handleConfirm}
         initialFocus
diff --git a/src/components/PrivacyPolicyNotice.tsx b/src/components/PrivacyPolicyNotice.tsx
index 11d43122..7c0e7a52 100644
--- a/src/components/PrivacyPolicyNotice.tsx
+++ b/src/components/PrivacyPolicyNotice.tsx
@@ -1,3 +1,4 @@
+import { ObjByString } from '@transcend-io/type-utils';
 import { h, JSX } from 'preact';
 import { useIntl } from 'react-intl';
 import { CONSENT_OPTIONS } from '../constants';
@@ -11,9 +12,12 @@ import { Button } from './Button';
  */
 export function PrivacyPolicyNotice({
   handleSetViewState,
+  globalUiVariables,
 }: {
   /** Function to change viewState */
   handleSetViewState: HandleSetViewState;
+  /** Global UI view state variables */
+  globalUiVariables: ObjByString;
 }): JSX.Element {
   const { airgap } = useAirgap();
   const { formatMessage } = useIntl();
@@ -38,20 +42,30 @@ export function PrivacyPolicyNotice({
             role="heading"
             className="text-title text-title-left"
           >
-            {formatMessage(messages.consentTitlePrivacyPolicyNotice)}
+            {formatMessage(
+              messages.consentTitlePrivacyPolicyNotice,
+              globalUiVariables,
+            )}
           </p>
         </div>
         <div>
-          <p className="paragraph"
+          <p
+            className="paragraph"
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{
-              __html: formatMessage(messages.privacyPolicyNoticeDescription),
+              __html: formatMessage(
+                messages.privacyPolicyNoticeDescription,
+                globalUiVariables,
+              ),
             }}
           />
         </div>
       </div>
       <Button
-        primaryText={formatMessage(messages.privacyPolicyNoticeButton)}
+        primaryText={formatMessage(
+          messages.privacyPolicyNoticeButton,
+          globalUiVariables,
+        )}
         handleClick={handlePrivacyPolicyNotice}
         initialFocus
       />
diff --git a/src/components/PrivacyPolicyNoticeWithCloseButton.tsx b/src/components/PrivacyPolicyNoticeWithCloseButton.tsx
index 89019c21..b055e8be 100644
--- a/src/components/PrivacyPolicyNoticeWithCloseButton.tsx
+++ b/src/components/PrivacyPolicyNoticeWithCloseButton.tsx
@@ -1,3 +1,4 @@
+import { ObjByString } from '@transcend-io/type-utils';
 import { h, JSX } from 'preact';
 import { useIntl } from 'react-intl';
 import { CONSENT_OPTIONS } from '../constants';
@@ -13,11 +14,14 @@ import { CloseButton } from './CloseButton';
 export function PrivacyPolicyNoticeWithCloseButton({
   handleSetViewState,
   fontColor,
+  globalUiVariables,
 }: {
   /** Function to change viewState */
   handleSetViewState: HandleSetViewState;
   /** Font color */
   fontColor: string;
+  /** Global UI view state variables */
+  globalUiVariables: ObjByString;
 }): JSX.Element {
   const { airgap } = useAirgap();
   const { formatMessage } = useIntl();
@@ -30,6 +34,7 @@ export function PrivacyPolicyNoticeWithCloseButton({
           airgap.setConsent(event, {}, CONSENT_OPTIONS);
           handleSetViewState('close');
         }}
+        globalUiVariables={globalUiVariables}
         className="privacy-policy-notice-with-close-button-close"
         fontColor={fontColor}
         initialFocus
@@ -43,15 +48,18 @@ export function PrivacyPolicyNoticeWithCloseButton({
           >
             {formatMessage(
               messages.consentTitlePrivacyPolicyNoticeWithCloseButton,
+              globalUiVariables,
             )}
           </p>
         </div>
         <div>
-          <p className="paragraph"
+          <p
+            className="paragraph"
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{
               __html: formatMessage(
                 messages.privacyPolicyNoticeWithCloseButtonDescription,
+                globalUiVariables,
               ),
             }}
           />
diff --git a/src/components/QuickOptions.tsx b/src/components/QuickOptions.tsx
index 1c709c3e..fcd7d484 100644
--- a/src/components/QuickOptions.tsx
+++ b/src/components/QuickOptions.tsx
@@ -1,3 +1,4 @@
+import { ObjByString } from '@transcend-io/type-utils';
 import { h, JSX } from 'preact';
 import { useIntl } from 'react-intl';
 import { CONSENT_OPTIONS } from '../constants';
@@ -21,9 +22,12 @@ enum QuickOption {
  */
 export function QuickOptions({
   handleSetViewState,
+  globalUiVariables,
 }: {
   /** Function to change viewState */
   handleSetViewState: HandleSetViewState;
+  /** Global UI view state variables */
+  globalUiVariables: ObjByString;
 }): JSX.Element {
   const { formatMessage } = useIntl();
   const { airgap } = useAirgap();
@@ -64,19 +68,24 @@ export function QuickOptions({
         className="text-title text-title-center"
         role="heading"
       >
-        {formatMessage(messages.consentTitle)}
+        {formatMessage(messages.consentTitle, globalUiVariables)}
       </p>
       <div
         role="group"
         className="column-content"
-        aria-label={formatMessage(messages.buttonGroupAriaDescription)}
+        aria-label={formatMessage(
+          messages.buttonGroupAriaDescription,
+          globalUiVariables,
+        )}
       >
         <Button
           primaryText={formatMessage(
             quickOptionsMessages.essentialsButtonPrimary,
+            globalUiVariables,
           )}
           secondaryText={formatMessage(
             quickOptionsMessages.essentialsButtonSecondary,
+            globalUiVariables,
           )}
           handleClick={(event) =>
             handleQuickOption(event, QuickOption.Essential)
@@ -86,9 +95,11 @@ export function QuickOptions({
         <Button
           primaryText={formatMessage(
             quickOptionsMessages.functionalButtonPrimary,
+            globalUiVariables,
           )}
           secondaryText={formatMessage(
             quickOptionsMessages.functionalButtonSecondary,
+            globalUiVariables,
           )}
           handleClick={(event) =>
             handleQuickOption(event, QuickOption.Functional)
@@ -97,9 +108,11 @@ export function QuickOptions({
         <Button
           primaryText={formatMessage(
             quickOptionsMessages.analyticsButtonPrimary,
+            globalUiVariables,
           )}
           secondaryText={formatMessage(
             quickOptionsMessages.analyticsButtonSecondary,
+            globalUiVariables,
           )}
           handleClick={(event) =>
             handleQuickOption(event, QuickOption.Analytics)
@@ -108,9 +121,11 @@ export function QuickOptions({
         <Button
           primaryText={formatMessage(
             quickOptionsMessages.advertisingButtonPrimary,
+            globalUiVariables,
           )}
           secondaryText={formatMessage(
             quickOptionsMessages.advertisingButtonSecondary,
+            globalUiVariables,
           )}
           handleClick={(event) =>
             handleQuickOption(event, QuickOption.Advertising)
diff --git a/src/components/QuickOptions3.tsx b/src/components/QuickOptions3.tsx
index 6f78ba78..76e17b2b 100644
--- a/src/components/QuickOptions3.tsx
+++ b/src/components/QuickOptions3.tsx
@@ -1,3 +1,4 @@
+import { ObjByString } from '@transcend-io/type-utils';
 import { h, JSX } from 'preact';
 import { useIntl } from 'react-intl';
 import { CONSENT_OPTIONS } from '../constants';
@@ -20,9 +21,12 @@ enum QuickOption {
  */
 export function QuickOptions3({
   handleSetViewState,
+  globalUiVariables,
 }: {
   /** Function to change viewState */
   handleSetViewState: HandleSetViewState;
+  /** Global UI view state variables */
+  globalUiVariables: ObjByString;
 }): JSX.Element {
   const { formatMessage } = useIntl();
   const { airgap } = useAirgap();
@@ -66,19 +70,24 @@ export function QuickOptions3({
         role="heading"
         className="text-title text-title-center"
       >
-        {formatMessage(messages.consentTitle)}
+        {formatMessage(messages.consentTitle, globalUiVariables)}
       </p>
       <div
         className="column-content"
         role="group"
-        aria-label={formatMessage(messages.buttonGroupAriaDescription)}
+        aria-label={formatMessage(
+          messages.buttonGroupAriaDescription,
+          globalUiVariables,
+        )}
       >
         <Button
           primaryText={formatMessage(
             quickOptionsMessages.essentialsButtonPrimary,
+            globalUiVariables,
           )}
           secondaryText={formatMessage(
             quickOptionsMessages.essentialsButtonSecondary,
+            globalUiVariables,
           )}
           handleClick={(event) =>
             handleQuickOption(event, QuickOption.Essential)
@@ -88,9 +97,11 @@ export function QuickOptions3({
         <Button
           primaryText={formatMessage(
             quickOptionsMessages.functionalAnalyticsButtonPrimary,
+            globalUiVariables,
           )}
           secondaryText={formatMessage(
             quickOptionsMessages.functionalAnalyticsButtonSecondary,
+            globalUiVariables,
           )}
           handleClick={(event) =>
             handleQuickOption(event, QuickOption.AnalyticsFunctional)
@@ -99,9 +110,11 @@ export function QuickOptions3({
         <Button
           primaryText={formatMessage(
             quickOptionsMessages.advertisingButtonPrimary,
+            globalUiVariables,
           )}
           secondaryText={formatMessage(
             quickOptionsMessages.advertisingButtonSecondary,
+            globalUiVariables,
           )}
           handleClick={(event) =>
             handleQuickOption(event, QuickOption.Advertising)
diff --git a/src/components/Toggle.tsx b/src/components/Toggle.tsx
index 5aeaf6e7..ffc2bea2 100644
--- a/src/components/Toggle.tsx
+++ b/src/components/Toggle.tsx
@@ -1,3 +1,4 @@
+import { ObjByString } from '@transcend-io/type-utils';
 import { h, JSX } from 'preact';
 import { useState } from 'preact/hooks';
 import { useIntl } from 'react-intl';
@@ -14,7 +15,10 @@ export function Toggle({
   ariaLabel,
   invertLabels,
   initialFocus,
+  globalUiVariables,
 }: {
+  /** Global UI view state variables */
+  globalUiVariables: ObjByString;
   /** The name for this consent toggle */
   name: string;
   /** Based on Airgap local storage */
@@ -49,16 +53,28 @@ export function Toggle({
         ariaLabel ||
         `${
           useToggleDisable
-            ? formatMessage(completeOptionsMessages.toggleDisable)
-            : formatMessage(completeOptionsMessages.toggleEnable)
+            ? formatMessage(
+                completeOptionsMessages.toggleDisable,
+                globalUiVariables,
+              )
+            : formatMessage(
+                completeOptionsMessages.toggleEnable,
+                globalUiVariables,
+              )
         } – ${name.toLocaleLowerCase()}`
       }
       title={
         ariaLabel ||
         `${
           useToggleDisable
-            ? formatMessage(completeOptionsMessages.toggleDisable)
-            : formatMessage(completeOptionsMessages.toggleEnable)
+            ? formatMessage(
+                completeOptionsMessages.toggleDisable,
+                globalUiVariables,
+              )
+            : formatMessage(
+                completeOptionsMessages.toggleEnable,
+                globalUiVariables,
+              )
         } – ${name.toLocaleLowerCase()}`
       }
     >
diff --git a/src/playground/airgapStub.ts b/src/playground/airgapStub.ts
index ac0c547d..1bf6cf37 100644
--- a/src/playground/airgapStub.ts
+++ b/src/playground/airgapStub.ts
@@ -23,7 +23,28 @@ const AIRGAP_STATUS = {
   telemetry: false,
 };
 
+// TODO: https://transcend.height.app/T-37618 - improve stub definition for new prototypes
 export const airgapStub: AirgapAPI = {
+  isAllowed: () => Promise.resolve(false),
+  isCookieAllowed: () => Promise.resolve(false),
+  isRequestAllowed: () => Promise.resolve(false),
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  getPurposes: () => Promise.resolve({} as any),
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  getRequestPurposes: () => Promise.resolve({} as any),
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  getCookiePurposes: () => Promise.resolve({} as any),
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  export: () => ({} as any),
+  isConsented: () => true,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  override: () => ({} as any),
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  overrideCookies: () => ({} as any),
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  watch: () => ({} as any),
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  watchCookies: () => ({} as any),
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   ready: (callback) => callback(airgapStub),
diff --git a/src/tests/AcceptAll.test.tsx b/src/tests/AcceptAll.test.tsx
index 0d2fb887..0eddf3ec 100644
--- a/src/tests/AcceptAll.test.tsx
+++ b/src/tests/AcceptAll.test.tsx
@@ -6,8 +6,11 @@ import { test, expect, describe, beforeEach } from '@jest/globals';
 
 import { AcceptAll } from '../components/AcceptAll';
 import { fireEvent } from '@testing-library/preact';
-import { MOCK_PURPOSES_OPTED_OUT } from './utils/constants';
-import { init as initMockAirgap } from './utils/ag-mock'
+import {
+  MOCK_PURPOSES_OPTED_OUT,
+  MOCK_TEMPLATE_VARIABLES,
+} from './utils/constants';
+import { init as initMockAirgap } from './utils/ag-mock';
 
 describe('AcceptAll', () => {
   beforeEach(() => {
@@ -15,13 +18,23 @@ describe('AcceptAll', () => {
   });
 
   test('matches snapshot', () => {
-    const { snapshot } = render(<AcceptAll handleSetViewState={() => null} />);
+    const { snapshot } = render(
+      <AcceptAll
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
     expect(snapshot).toMatchSnapshot();
   });
 
   test('submission affects stored consent', () => {
     const prevConsent = { ...testWindow.airgap.getConsent() };
-    const { container } = render(<AcceptAll handleSetViewState={() => null} />);
+    const { container } = render(
+      <AcceptAll
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
 
     // Ensure submission reflects purpose selection in airgap
     const submitButton = container.querySelector('button');
@@ -30,7 +43,9 @@ describe('AcceptAll', () => {
     const consent = { ...testWindow.airgap.getConsent() };
 
     Object.entries(MOCK_PURPOSES_OPTED_OUT).forEach(([, purpose]) => {
-      expect(!!prevConsent.purposes?.[purpose.name]).toEqual(!consent.purposes?.[purpose.name]);
+      expect(!!prevConsent.purposes?.[purpose.name]).toEqual(
+        !consent.purposes?.[purpose.name],
+      );
     });
     expect(prevConsent.confirmed).toEqual(false);
     expect(consent.confirmed).toEqual(true);
diff --git a/src/tests/AcceptAllOrMoreChoices.test.tsx b/src/tests/AcceptAllOrMoreChoices.test.tsx
index 45f1068c..92e25090 100644
--- a/src/tests/AcceptAllOrMoreChoices.test.tsx
+++ b/src/tests/AcceptAllOrMoreChoices.test.tsx
@@ -6,8 +6,11 @@ import { test, expect, describe, beforeEach } from '@jest/globals';
 
 import { AcceptAllOrMoreChoices } from '../components/AcceptAllOrMoreChoices';
 import { fireEvent } from '@testing-library/preact';
-import { MOCK_PURPOSES_OPTED_OUT } from './utils/constants';
-import { init as initMockAirgap } from './utils/ag-mock'
+import {
+  MOCK_PURPOSES_OPTED_OUT,
+  MOCK_TEMPLATE_VARIABLES,
+} from './utils/constants';
+import { init as initMockAirgap } from './utils/ag-mock';
 import { messages } from '../messages';
 
 describe('AcceptAllOrMoreChoices', () => {
@@ -16,17 +19,26 @@ describe('AcceptAllOrMoreChoices', () => {
   });
 
   test('matches snapshot', () => {
-    const { snapshot } = render(<AcceptAllOrMoreChoices handleSetViewState={() => null} />);
+    const { snapshot } = render(
+      <AcceptAllOrMoreChoices
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
     expect(snapshot).toMatchSnapshot();
   });
 
   test('button ordering is consistent', () => {
-    const { container } = render(<AcceptAllOrMoreChoices handleSetViewState={() => null} />);
+    const { container } = render(
+      <AcceptAllOrMoreChoices
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
 
-    const domLabels = [...container.querySelectorAll('button')]
-      ?.map((span) =>
-        span.children[0].childNodes.item(0).textContent
-      )
+    const domLabels = [...container.querySelectorAll('button')]?.map(
+      (span) => span.children[0].childNodes.item(0).textContent,
+    );
 
     expect(domLabels).toStrictEqual([
       messages.acceptAllButtonPrimary.defaultMessage,
@@ -36,7 +48,12 @@ describe('AcceptAllOrMoreChoices', () => {
 
   test('submission affects stored consent', () => {
     const prevConsent = { ...testWindow.airgap.getConsent() };
-    const { container } = render(<AcceptAllOrMoreChoices handleSetViewState={() => null} />);
+    const { container } = render(
+      <AcceptAllOrMoreChoices
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
 
     // Ensure submission reflects purpose selection in airgap
     const submitButton = container.querySelector('button');
@@ -45,7 +62,9 @@ describe('AcceptAllOrMoreChoices', () => {
     const consent = { ...testWindow.airgap.getConsent() };
 
     Object.entries(MOCK_PURPOSES_OPTED_OUT).forEach(([, purpose]) => {
-      expect(!!prevConsent.purposes?.[purpose.name]).toEqual(!consent.purposes?.[purpose.name]);
+      expect(!!prevConsent.purposes?.[purpose.name]).toEqual(
+        !consent.purposes?.[purpose.name],
+      );
     });
     expect(prevConsent.confirmed).toEqual(false);
     expect(consent.confirmed).toEqual(true);
@@ -53,11 +72,18 @@ describe('AcceptAllOrMoreChoices', () => {
 
   test('that CompleteOptions is opened', () => {
     let calledArg;
-    const { container } = render(<AcceptAllOrMoreChoices handleSetViewState={(state) => { calledArg = state }} />);
+    const { container } = render(
+      <AcceptAllOrMoreChoices
+        handleSetViewState={(state) => {
+          calledArg = state;
+        }}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
 
     const moreChoicesButton = container.querySelector('button:nth-of-type(2)');
     if (moreChoicesButton) fireEvent.click(moreChoicesButton);
 
-    expect(calledArg).toEqual('CompleteOptions')
+    expect(calledArg).toEqual('CompleteOptions');
   });
 });
diff --git a/src/tests/AcceptAllRejectAllToggle.test.tsx b/src/tests/AcceptAllRejectAllToggle.test.tsx
index ec2a0c18..2e2002f6 100644
--- a/src/tests/AcceptAllRejectAllToggle.test.tsx
+++ b/src/tests/AcceptAllRejectAllToggle.test.tsx
@@ -6,12 +6,22 @@ import { test, expect, describe } from '@jest/globals';
 
 import { AcceptAllRejectAllToggle } from '../components/AcceptAllRejectAllToggle';
 import { fireEvent } from '@testing-library/preact';
-import { MOCK_PURPOSES_OPTED_IN, MOCK_PURPOSES_OPTED_OUT } from './utils/constants';
-import { init as initMockAirgap } from './utils/ag-mock'
+import {
+  MOCK_PURPOSES_OPTED_IN,
+  MOCK_PURPOSES_OPTED_OUT,
+  MOCK_TEMPLATE_VARIABLES,
+} from './utils/constants';
+import { init as initMockAirgap } from './utils/ag-mock';
 
 describe('AcceptAllRejectAllToggle', () => {
   test('matches snapshot', () => {
-    const { snapshot } = render(<AcceptAllRejectAllToggle fontColor="#000" handleSetViewState={() => null} />);
+    const { snapshot } = render(
+      <AcceptAllRejectAllToggle
+        fontColor="#000"
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
     expect(snapshot).toMatchSnapshot();
   });
 
@@ -19,7 +29,13 @@ describe('AcceptAllRejectAllToggle', () => {
     initMockAirgap(MOCK_PURPOSES_OPTED_OUT);
 
     const prevConsent = { ...testWindow.airgap.getConsent() };
-    const { container } = render(<AcceptAllRejectAllToggle fontColor="#000" handleSetViewState={() => null} />);
+    const { container } = render(
+      <AcceptAllRejectAllToggle
+        fontColor="#000"
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
 
     // Ensure submission reflects purpose selection in airgap
     const toggleCheckbox = container.querySelector('input');
@@ -29,7 +45,9 @@ describe('AcceptAllRejectAllToggle', () => {
     const consent = { ...testWindow.airgap.getConsent() };
 
     Object.entries(MOCK_PURPOSES_OPTED_OUT).forEach(([, purpose]) => {
-      expect(!!prevConsent.purposes?.[purpose.name]).toEqual(!consent.purposes?.[purpose.name]);
+      expect(!!prevConsent.purposes?.[purpose.name]).toEqual(
+        !consent.purposes?.[purpose.name],
+      );
     });
     expect(prevConsent.confirmed).toEqual(false);
     expect(consent.confirmed).toEqual(true);
@@ -39,7 +57,13 @@ describe('AcceptAllRejectAllToggle', () => {
     initMockAirgap(MOCK_PURPOSES_OPTED_IN);
 
     const prevConsent = { ...testWindow.airgap.getConsent() };
-    const { container } = render(<AcceptAllRejectAllToggle fontColor="#000" handleSetViewState={() => null} />);
+    const { container } = render(
+      <AcceptAllRejectAllToggle
+        fontColor="#000"
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
 
     // Ensure submission reflects purpose selection in airgap
     const toggleCheckbox = container.querySelector('input');
@@ -49,7 +73,9 @@ describe('AcceptAllRejectAllToggle', () => {
     const consent = { ...testWindow.airgap.getConsent() };
 
     Object.entries(MOCK_PURPOSES_OPTED_IN).forEach(([, purpose]) => {
-      expect(!!prevConsent.purposes?.[purpose.name]).toEqual(!consent.purposes?.[purpose.name]);
+      expect(!!prevConsent.purposes?.[purpose.name]).toEqual(
+        !consent.purposes?.[purpose.name],
+      );
     });
     expect(prevConsent.confirmed).toEqual(false);
     expect(consent.confirmed).toEqual(true);
diff --git a/src/tests/AcceptOrRejectAdvertising.test.tsx b/src/tests/AcceptOrRejectAdvertising.test.tsx
index 37f6870c..cf98c0ef 100644
--- a/src/tests/AcceptOrRejectAdvertising.test.tsx
+++ b/src/tests/AcceptOrRejectAdvertising.test.tsx
@@ -6,24 +6,37 @@ import { test, expect, describe } from '@jest/globals';
 
 import { AcceptOrRejectAdvertising } from '../components/AcceptOrRejectAdvertising';
 import { fireEvent } from '@testing-library/preact';
-import { MOCK_PURPOSES_OPTED_IN, MOCK_PURPOSES_OPTED_OUT } from './utils/constants';
-import { init as initMockAirgap } from './utils/ag-mock'
+import {
+  MOCK_PURPOSES_OPTED_IN,
+  MOCK_PURPOSES_OPTED_OUT,
+  MOCK_TEMPLATE_VARIABLES,
+} from './utils/constants';
+import { init as initMockAirgap } from './utils/ag-mock';
 import { messages } from '../messages';
 
 describe('AcceptOrRejectAdvertising', () => {
   test('matches snapshot', () => {
-    const { snapshot } = render(<AcceptOrRejectAdvertising handleSetViewState={() => null} />);
+    const { snapshot } = render(
+      <AcceptOrRejectAdvertising
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
     expect(snapshot).toMatchSnapshot();
   });
 
   test('button ordering is consistent', () => {
     initMockAirgap(MOCK_PURPOSES_OPTED_OUT);
-    const { container } = render(<AcceptOrRejectAdvertising handleSetViewState={() => null} />);
+    const { container } = render(
+      <AcceptOrRejectAdvertising
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
 
-    const domLabels = [...container.querySelectorAll('button')]
-      ?.map((span) =>
-        span.children[0].childNodes.item(0).textContent
-      )
+    const domLabels = [...container.querySelectorAll('button')]?.map(
+      (span) => span.children[0].childNodes.item(0).textContent,
+    );
 
     expect(domLabels).toStrictEqual([
       messages.acceptAdvertising.defaultMessage,
@@ -34,7 +47,12 @@ describe('AcceptOrRejectAdvertising', () => {
   test('submission affects stored consent (opted out)', () => {
     initMockAirgap(MOCK_PURPOSES_OPTED_OUT);
     const prevConsent = { ...testWindow.airgap.getConsent() };
-    const { container } = render(<AcceptOrRejectAdvertising handleSetViewState={() => null} />);
+    const { container } = render(
+      <AcceptOrRejectAdvertising
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
 
     // Ensure submission reflects purpose selection in airgap
     const acceptButton = container.querySelector('button');
@@ -42,7 +60,9 @@ describe('AcceptOrRejectAdvertising', () => {
 
     const consent = { ...testWindow.airgap.getConsent() };
 
-    expect(!!prevConsent.purposes?.Advertising).toEqual(!consent.purposes?.Advertising);
+    expect(!!prevConsent.purposes?.Advertising).toEqual(
+      !consent.purposes?.Advertising,
+    );
     expect(prevConsent.confirmed).toEqual(false);
     expect(consent.confirmed).toEqual(true);
   });
@@ -50,7 +70,12 @@ describe('AcceptOrRejectAdvertising', () => {
   test('submission affects stored consent (opted in)', () => {
     initMockAirgap(MOCK_PURPOSES_OPTED_IN);
     const prevConsent = { ...testWindow.airgap.getConsent() };
-    const { container } = render(<AcceptOrRejectAdvertising handleSetViewState={() => null} />);
+    const { container } = render(
+      <AcceptOrRejectAdvertising
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
 
     // Ensure submission reflects purpose selection in airgap
     const rejectButton = container.querySelector('button:nth-of-type(2)');
@@ -58,7 +83,9 @@ describe('AcceptOrRejectAdvertising', () => {
 
     const consent = { ...testWindow.airgap.getConsent() };
 
-    expect(!!prevConsent.purposes?.Advertising).toEqual(!consent.purposes?.Advertising);
+    expect(!!prevConsent.purposes?.Advertising).toEqual(
+      !consent.purposes?.Advertising,
+    );
     expect(prevConsent.confirmed).toEqual(false);
     expect(consent.confirmed).toEqual(true);
   });
diff --git a/src/tests/AcceptOrRejectAll.test.tsx b/src/tests/AcceptOrRejectAll.test.tsx
index dc8693eb..762df8ac 100644
--- a/src/tests/AcceptOrRejectAll.test.tsx
+++ b/src/tests/AcceptOrRejectAll.test.tsx
@@ -6,24 +6,37 @@ import { test, expect, describe } from '@jest/globals';
 
 import { AcceptOrRejectAll } from '../components/AcceptOrRejectAll';
 import { fireEvent } from '@testing-library/preact';
-import { MOCK_PURPOSES_OPTED_IN, MOCK_PURPOSES_OPTED_OUT } from './utils/constants';
-import { init as initMockAirgap } from './utils/ag-mock'
+import {
+  MOCK_PURPOSES_OPTED_IN,
+  MOCK_PURPOSES_OPTED_OUT,
+  MOCK_TEMPLATE_VARIABLES,
+} from './utils/constants';
+import { init as initMockAirgap } from './utils/ag-mock';
 import { messages } from '../messages';
 
 describe('AcceptOrRejectAll', () => {
   test('matches snapshot', () => {
-    const { snapshot } = render(<AcceptOrRejectAll handleSetViewState={() => null} />);
+    const { snapshot } = render(
+      <AcceptOrRejectAll
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
     expect(snapshot).toMatchSnapshot();
   });
 
   test('button ordering is consistent', () => {
     initMockAirgap(MOCK_PURPOSES_OPTED_OUT);
-    const { container } = render(<AcceptOrRejectAll handleSetViewState={() => null} />);
+    const { container } = render(
+      <AcceptOrRejectAll
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
 
-    const domLabels = [...container.querySelectorAll('button')]
-      ?.map((span) =>
-        span.children[0].childNodes.item(0).textContent
-      )
+    const domLabels = [...container.querySelectorAll('button')]?.map(
+      (span) => span.children[0].childNodes.item(0).textContent,
+    );
 
     expect(domLabels).toStrictEqual([
       messages.acceptAllButtonPrimary.defaultMessage,
@@ -34,7 +47,12 @@ describe('AcceptOrRejectAll', () => {
   test('submission affects stored consent (opted out)', () => {
     initMockAirgap(MOCK_PURPOSES_OPTED_OUT);
     const prevConsent = { ...testWindow.airgap.getConsent() };
-    const { container } = render(<AcceptOrRejectAll handleSetViewState={() => null} />);
+    const { container } = render(
+      <AcceptOrRejectAll
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
 
     // Ensure submission reflects purpose selection in airgap
     const acceptButton = container.querySelector('button');
@@ -43,7 +61,9 @@ describe('AcceptOrRejectAll', () => {
     const consent = { ...testWindow.airgap.getConsent() };
 
     Object.entries(MOCK_PURPOSES_OPTED_OUT).forEach(([, purpose]) => {
-      expect(!!prevConsent.purposes?.[purpose.name]).toEqual(!consent.purposes?.[purpose.name]);
+      expect(!!prevConsent.purposes?.[purpose.name]).toEqual(
+        !consent.purposes?.[purpose.name],
+      );
     });
     expect(prevConsent.confirmed).toEqual(false);
     expect(consent.confirmed).toEqual(true);
@@ -52,7 +72,12 @@ describe('AcceptOrRejectAll', () => {
   test('submission affects stored consent (opted in)', () => {
     initMockAirgap(MOCK_PURPOSES_OPTED_IN);
     const prevConsent = { ...testWindow.airgap.getConsent() };
-    const { container } = render(<AcceptOrRejectAll handleSetViewState={() => null} />);
+    const { container } = render(
+      <AcceptOrRejectAll
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
 
     // Ensure submission reflects purpose selection in airgap
     const rejectButton = container.querySelector('button:nth-of-type(2)');
@@ -61,7 +86,9 @@ describe('AcceptOrRejectAll', () => {
     const consent = { ...testWindow.airgap.getConsent() };
 
     Object.entries(MOCK_PURPOSES_OPTED_IN).forEach(([, purpose]) => {
-      expect(!!prevConsent.purposes?.[purpose.name]).toEqual(!consent.purposes?.[purpose.name]);
+      expect(!!prevConsent.purposes?.[purpose.name]).toEqual(
+        !consent.purposes?.[purpose.name],
+      );
     });
     expect(prevConsent.confirmed).toEqual(false);
     expect(consent.confirmed).toEqual(true);
diff --git a/src/tests/AcceptOrRejectAllOrMoreChoices.test.tsx b/src/tests/AcceptOrRejectAllOrMoreChoices.test.tsx
index e75ad44d..415c4224 100644
--- a/src/tests/AcceptOrRejectAllOrMoreChoices.test.tsx
+++ b/src/tests/AcceptOrRejectAllOrMoreChoices.test.tsx
@@ -6,24 +6,37 @@ import { test, expect, describe } from '@jest/globals';
 
 import { AcceptOrRejectAllOrMoreChoices } from '../components/AcceptOrRejectAllOrMoreChoices';
 import { fireEvent } from '@testing-library/preact';
-import { MOCK_PURPOSES_OPTED_IN, MOCK_PURPOSES_OPTED_OUT } from './utils/constants';
-import { init as initMockAirgap } from './utils/ag-mock'
+import {
+  MOCK_PURPOSES_OPTED_IN,
+  MOCK_PURPOSES_OPTED_OUT,
+  MOCK_TEMPLATE_VARIABLES,
+} from './utils/constants';
+import { init as initMockAirgap } from './utils/ag-mock';
 import { messages } from '../messages';
 
 describe('AcceptOrRejectAllOrMoreChoices', () => {
   test('matches snapshot', () => {
-    const { snapshot } = render(<AcceptOrRejectAllOrMoreChoices handleSetViewState={() => null} />);
+    const { snapshot } = render(
+      <AcceptOrRejectAllOrMoreChoices
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
     expect(snapshot).toMatchSnapshot();
   });
 
   test('button ordering is consistent', () => {
     initMockAirgap(MOCK_PURPOSES_OPTED_OUT);
-    const { container } = render(<AcceptOrRejectAllOrMoreChoices handleSetViewState={() => null} />);
+    const { container } = render(
+      <AcceptOrRejectAllOrMoreChoices
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
 
-    const domLabels = [...container.querySelectorAll('button')]
-      ?.map((span) =>
-        span.children[0].childNodes.item(0).textContent
-      )
+    const domLabels = [...container.querySelectorAll('button')]?.map(
+      (span) => span.children[0].childNodes.item(0).textContent,
+    );
 
     expect(domLabels).toStrictEqual([
       messages.acceptAllButtonPrimary.defaultMessage,
@@ -35,7 +48,12 @@ describe('AcceptOrRejectAllOrMoreChoices', () => {
   test('submission affects stored consent (opted out)', () => {
     initMockAirgap(MOCK_PURPOSES_OPTED_OUT);
     const prevConsent = { ...testWindow.airgap.getConsent() };
-    const { container } = render(<AcceptOrRejectAllOrMoreChoices handleSetViewState={() => null} />);
+    const { container } = render(
+      <AcceptOrRejectAllOrMoreChoices
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
 
     // Ensure submission reflects purpose selection in airgap
     const acceptButton = container.querySelector('button');
@@ -44,7 +62,9 @@ describe('AcceptOrRejectAllOrMoreChoices', () => {
     const consent = { ...testWindow.airgap.getConsent() };
 
     Object.entries(MOCK_PURPOSES_OPTED_OUT).forEach(([, purpose]) => {
-      expect(!!prevConsent.purposes?.[purpose.name]).toEqual(!consent.purposes?.[purpose.name]);
+      expect(!!prevConsent.purposes?.[purpose.name]).toEqual(
+        !consent.purposes?.[purpose.name],
+      );
     });
     expect(prevConsent.confirmed).toEqual(false);
     expect(consent.confirmed).toEqual(true);
@@ -53,7 +73,12 @@ describe('AcceptOrRejectAllOrMoreChoices', () => {
   test('submission affects stored consent (opted in)', () => {
     initMockAirgap(MOCK_PURPOSES_OPTED_IN);
     const prevConsent = { ...testWindow.airgap.getConsent() };
-    const { container } = render(<AcceptOrRejectAllOrMoreChoices handleSetViewState={() => null} />);
+    const { container } = render(
+      <AcceptOrRejectAllOrMoreChoices
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
 
     // Ensure submission reflects purpose selection in airgap
     const rejectButton = container.querySelector('button:nth-of-type(2)');
@@ -62,7 +87,9 @@ describe('AcceptOrRejectAllOrMoreChoices', () => {
     const consent = { ...testWindow.airgap.getConsent() };
 
     Object.entries(MOCK_PURPOSES_OPTED_IN).forEach(([, purpose]) => {
-      expect(!!prevConsent.purposes?.[purpose.name]).toEqual(!consent.purposes?.[purpose.name]);
+      expect(!!prevConsent.purposes?.[purpose.name]).toEqual(
+        !consent.purposes?.[purpose.name],
+      );
     });
     expect(prevConsent.confirmed).toEqual(false);
     expect(consent.confirmed).toEqual(true);
@@ -70,11 +97,18 @@ describe('AcceptOrRejectAllOrMoreChoices', () => {
 
   test('that CompleteOptions is opened', () => {
     let calledArg;
-    const { container } = render(<AcceptOrRejectAllOrMoreChoices handleSetViewState={(state) => { calledArg = state }} />);
+    const { container } = render(
+      <AcceptOrRejectAllOrMoreChoices
+        handleSetViewState={(state) => {
+          calledArg = state;
+        }}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
 
     const moreChoicesButton = container.querySelector('button:nth-of-type(3)');
     if (moreChoicesButton) fireEvent.click(moreChoicesButton);
 
-    expect(calledArg).toEqual('CompleteOptions')
+    expect(calledArg).toEqual('CompleteOptions');
   });
 });
diff --git a/src/tests/AcceptOrRejectAnalytics.test.tsx b/src/tests/AcceptOrRejectAnalytics.test.tsx
index 378426e9..e6c21aed 100644
--- a/src/tests/AcceptOrRejectAnalytics.test.tsx
+++ b/src/tests/AcceptOrRejectAnalytics.test.tsx
@@ -6,24 +6,37 @@ import { test, expect, describe } from '@jest/globals';
 
 import { AcceptOrRejectAnalytics } from '../components/AcceptOrRejectAnalytics';
 import { fireEvent } from '@testing-library/preact';
-import { MOCK_PURPOSES_OPTED_IN, MOCK_PURPOSES_OPTED_OUT } from './utils/constants';
-import { init as initMockAirgap } from './utils/ag-mock'
+import {
+  MOCK_PURPOSES_OPTED_IN,
+  MOCK_PURPOSES_OPTED_OUT,
+  MOCK_TEMPLATE_VARIABLES,
+} from './utils/constants';
+import { init as initMockAirgap } from './utils/ag-mock';
 import { messages } from '../messages';
 
 describe('AcceptOrRejectAnalytics', () => {
   test('matches snapshot', () => {
-    const { snapshot } = render(<AcceptOrRejectAnalytics handleSetViewState={() => null} />);
+    const { snapshot } = render(
+      <AcceptOrRejectAnalytics
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
     expect(snapshot).toMatchSnapshot();
   });
 
   test('button ordering is consistent', () => {
     initMockAirgap(MOCK_PURPOSES_OPTED_OUT);
-    const { container } = render(<AcceptOrRejectAnalytics handleSetViewState={() => null} />);
+    const { container } = render(
+      <AcceptOrRejectAnalytics
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
 
-    const domLabels = [...container.querySelectorAll('button')]
-      ?.map((span) =>
-        span.children[0].childNodes.item(0).textContent
-      )
+    const domLabels = [...container.querySelectorAll('button')]?.map(
+      (span) => span.children[0].childNodes.item(0).textContent,
+    );
 
     expect(domLabels).toStrictEqual([
       messages.acceptAnalytics.defaultMessage,
@@ -34,7 +47,12 @@ describe('AcceptOrRejectAnalytics', () => {
   test('submission affects stored consent (opted out)', () => {
     initMockAirgap(MOCK_PURPOSES_OPTED_OUT);
     const prevConsent = { ...testWindow.airgap.getConsent() };
-    const { container } = render(<AcceptOrRejectAnalytics handleSetViewState={() => null} />);
+    const { container } = render(
+      <AcceptOrRejectAnalytics
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
 
     // Ensure submission reflects purpose selection in airgap
     const acceptButton = container.querySelector('button');
@@ -42,7 +60,9 @@ describe('AcceptOrRejectAnalytics', () => {
 
     const consent = { ...testWindow.airgap.getConsent() };
 
-    expect(!!prevConsent.purposes?.Analytics).toEqual(!consent.purposes?.Analytics);
+    expect(!!prevConsent.purposes?.Analytics).toEqual(
+      !consent.purposes?.Analytics,
+    );
     expect(prevConsent.confirmed).toEqual(false);
     expect(consent.confirmed).toEqual(true);
   });
@@ -50,7 +70,12 @@ describe('AcceptOrRejectAnalytics', () => {
   test('submission affects stored consent (opted in)', () => {
     initMockAirgap(MOCK_PURPOSES_OPTED_IN);
     const prevConsent = { ...testWindow.airgap.getConsent() };
-    const { container } = render(<AcceptOrRejectAnalytics handleSetViewState={() => null} />);
+    const { container } = render(
+      <AcceptOrRejectAnalytics
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
 
     // Ensure submission reflects purpose selection in airgap
     const rejectButton = container.querySelector('button:nth-of-type(2)');
@@ -58,7 +83,9 @@ describe('AcceptOrRejectAnalytics', () => {
 
     const consent = { ...testWindow.airgap.getConsent() };
 
-    expect(!!prevConsent.purposes?.Analytics).toEqual(!consent.purposes?.Analytics);
+    expect(!!prevConsent.purposes?.Analytics).toEqual(
+      !consent.purposes?.Analytics,
+    );
     expect(prevConsent.confirmed).toEqual(false);
     expect(consent.confirmed).toEqual(true);
   });
diff --git a/src/tests/CompleteOptions.test.tsx b/src/tests/CompleteOptions.test.tsx
index b5ee1805..92f01f92 100644
--- a/src/tests/CompleteOptions.test.tsx
+++ b/src/tests/CompleteOptions.test.tsx
@@ -7,11 +7,18 @@ import { test, expect, describe, beforeEach } from '@jest/globals';
 
 import { CompleteOptions } from '../components/CompleteOptions';
 import { fireEvent } from '@testing-library/preact';
-import { MOCK_PURPOSES_OPTED_IN } from './utils/constants';
+import {
+  MOCK_PURPOSES_OPTED_IN,
+  MOCK_TEMPLATE_VARIABLES,
+} from './utils/constants';
 import { DEFAULT_PURPOSE_TO_MESSAGE_KEY } from '../components/constants';
 import { sortByPurposeOrder } from '../helpers';
-import { getPurposeEntries, getPurposeMessage, getPurposeValues } from './utils/purposes';
-import { init as initMockAirgap } from './utils/ag-mock'
+import {
+  getPurposeEntries,
+  getPurposeMessage,
+  getPurposeValues,
+} from './utils/purposes';
+import { init as initMockAirgap } from './utils/ag-mock';
 
 describe('CompleteOptions', () => {
   beforeEach(() => {
@@ -19,12 +26,22 @@ describe('CompleteOptions', () => {
   });
 
   test('matches snapshot', () => {
-    const { snapshot } = render(<CompleteOptions handleSetViewState={() => null} />);
+    const { snapshot } = render(
+      <CompleteOptions
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
     expect(snapshot).toMatchSnapshot();
   });
 
   test('purpose ordering is consistent', () => {
-    const screen = render(<CompleteOptions handleSetViewState={() => null} />);
+    const screen = render(
+      <CompleteOptions
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
     const { container } = screen;
 
     const sortedNamesToLabels = [
@@ -49,7 +66,12 @@ describe('CompleteOptions', () => {
   });
 
   test('defaults are honored', () => {
-    const screen = render(<CompleteOptions handleSetViewState={() => null} />);
+    const screen = render(
+      <CompleteOptions
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
     getPurposeEntries().forEach(([key, purpose]) => {
       const label = getPurposeMessage(purpose);
       expect(getPurposeCheckState(screen, label)).toEqual(
@@ -60,7 +82,12 @@ describe('CompleteOptions', () => {
 
   test('check states change when clicked, submission affects stored consent', () => {
     const prevConsent = { ...testWindow.airgap?.getConsent() };
-    const screen = render(<CompleteOptions handleSetViewState={() => null} />);
+    const screen = render(
+      <CompleteOptions
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
     const { container } = screen;
     getPurposeEntries().forEach(([key, purpose]) => {
       const label = getPurposeMessage(purpose);
@@ -77,14 +104,21 @@ describe('CompleteOptions', () => {
     const consent = { ...testWindow.airgap?.getConsent() };
 
     Object.entries(MOCK_PURPOSES_OPTED_IN).forEach(([, purpose]) => {
-      expect(!!prevConsent.purposes?.[purpose.name]).toEqual(!consent.purposes?.[purpose.name]);
+      expect(!!prevConsent.purposes?.[purpose.name]).toEqual(
+        !consent.purposes?.[purpose.name],
+      );
     });
     expect(prevConsent.confirmed).toEqual(false);
     expect(consent.confirmed).toEqual(true);
   });
 
   test('purposes rerender on remount', () => {
-    let screen = render(<CompleteOptions handleSetViewState={() => null} />);
+    let screen = render(
+      <CompleteOptions
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
     let { container, unmount } = screen;
     getPurposeValues().forEach((purpose) => {
       const label = getPurposeMessage(purpose);
@@ -97,7 +131,12 @@ describe('CompleteOptions', () => {
 
     unmount();
 
-    screen = render(<CompleteOptions handleSetViewState={() => null} />);
+    screen = render(
+      <CompleteOptions
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
     ({ container, unmount } = screen);
 
     // Ensure we rerender the ui with the new consent when unmounting and remounting ui
diff --git a/src/tests/CompleteOptionsInverted.test.tsx b/src/tests/CompleteOptionsInverted.test.tsx
index 96e17cfd..9d9f1360 100644
--- a/src/tests/CompleteOptionsInverted.test.tsx
+++ b/src/tests/CompleteOptionsInverted.test.tsx
@@ -7,11 +7,18 @@ import { test, expect, describe, beforeEach } from '@jest/globals';
 
 import { CompleteOptionsInverted } from '../components/CompleteOptionsInverted';
 import { fireEvent } from '@testing-library/preact';
-import { MOCK_PURPOSES_OPTED_IN } from './utils/constants';
+import {
+  MOCK_PURPOSES_OPTED_IN,
+  MOCK_TEMPLATE_VARIABLES,
+} from './utils/constants';
 import { DEFAULT_PURPOSE_TO_INVERTED_MESSAGE_KEY } from '../components/constants';
 import { sortByPurposeOrder } from '../helpers';
-import { getPurposeEntries, getPurposeMessageInverted, getPurposeValues } from './utils/purposes';
-import { init as initMockAirgap } from './utils/ag-mock'
+import {
+  getPurposeEntries,
+  getPurposeMessageInverted,
+  getPurposeValues,
+} from './utils/purposes';
+import { init as initMockAirgap } from './utils/ag-mock';
 
 describe('CompleteOptionsInverted', () => {
   beforeEach(() => {
@@ -19,12 +26,22 @@ describe('CompleteOptionsInverted', () => {
   });
 
   test('matches snapshot', () => {
-    const { snapshot } = render(<CompleteOptionsInverted handleSetViewState={() => null} />);
+    const { snapshot } = render(
+      <CompleteOptionsInverted
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
     expect(snapshot).toMatchSnapshot();
   });
 
   test('purpose ordering is consistent', () => {
-    const screen = render(<CompleteOptionsInverted handleSetViewState={() => null} />);
+    const screen = render(
+      <CompleteOptionsInverted
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
     const { container } = screen;
 
     const sortedNamesToLabels = [
@@ -33,7 +50,8 @@ describe('CompleteOptionsInverted', () => {
         .sort(sortByPurposeOrder)
         .map(([purposeName]) =>
           purposeName in DEFAULT_PURPOSE_TO_INVERTED_MESSAGE_KEY
-            ? DEFAULT_PURPOSE_TO_INVERTED_MESSAGE_KEY[purposeName].defaultMessage
+            ? DEFAULT_PURPOSE_TO_INVERTED_MESSAGE_KEY[purposeName]
+                .defaultMessage
             : purposeName,
         ),
     ];
@@ -48,7 +66,12 @@ describe('CompleteOptionsInverted', () => {
   });
 
   test('defaults are honored', () => {
-    const screen = render(<CompleteOptionsInverted handleSetViewState={() => null} />);
+    const screen = render(
+      <CompleteOptionsInverted
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
     getPurposeEntries().forEach(([key, purpose]) => {
       const label = getPurposeMessageInverted(purpose);
       expect(getPurposeCheckState(screen, label)).toEqual(
@@ -60,7 +83,12 @@ describe('CompleteOptionsInverted', () => {
   test('check states change when clicked, submission affects stored consent', () => {
     const prevConsent = { ...testWindow.airgap?.getConsent() };
     // console.log(prevConsent)
-    const screen = render(<CompleteOptionsInverted handleSetViewState={() => null} />);
+    const screen = render(
+      <CompleteOptionsInverted
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
     const { container } = screen;
     getPurposeEntries().forEach(([key, purpose]) => {
       const label = getPurposeMessageInverted(purpose);
@@ -78,14 +106,21 @@ describe('CompleteOptionsInverted', () => {
     // console.log(consent)
 
     Object.entries(MOCK_PURPOSES_OPTED_IN).forEach(([, purpose]) => {
-      expect(!!prevConsent.purposes?.[purpose.name]).toEqual(!consent.purposes?.[purpose.name]);
+      expect(!!prevConsent.purposes?.[purpose.name]).toEqual(
+        !consent.purposes?.[purpose.name],
+      );
     });
     expect(prevConsent.confirmed).toEqual(false);
     expect(consent.confirmed).toEqual(true);
   });
 
   test('purposes rerender on remount', () => {
-    let screen = render(<CompleteOptionsInverted handleSetViewState={() => null} />);
+    let screen = render(
+      <CompleteOptionsInverted
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
     let { container, unmount } = screen;
     getPurposeValues().forEach((purpose) => {
       const label = getPurposeMessageInverted(purpose);
@@ -98,7 +133,12 @@ describe('CompleteOptionsInverted', () => {
 
     unmount();
 
-    screen = render(<CompleteOptionsInverted handleSetViewState={() => null} />);
+    screen = render(
+      <CompleteOptionsInverted
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
     ({ container, unmount } = screen);
 
     // Ensure we rerender the ui with the new consent when unmounting and remounting ui
diff --git a/src/tests/CompleteOptionsToggles.test.tsx b/src/tests/CompleteOptionsToggles.test.tsx
index 50ee57df..e9c23863 100644
--- a/src/tests/CompleteOptionsToggles.test.tsx
+++ b/src/tests/CompleteOptionsToggles.test.tsx
@@ -7,11 +7,18 @@ import { test, expect, describe, beforeEach } from '@jest/globals';
 
 import { CompleteOptionsToggles } from '../components/CompleteOptionsToggles';
 import { fireEvent } from '@testing-library/preact';
-import { MOCK_PURPOSES_OPTED_IN } from './utils/constants';
+import {
+  MOCK_PURPOSES_OPTED_IN,
+  MOCK_TEMPLATE_VARIABLES,
+} from './utils/constants';
 import { DEFAULT_PURPOSE_TO_MESSAGE_KEY } from '../components/constants';
 import { sortByPurposeOrder } from '../helpers';
-import { getPurposeEntries, getPurposeMessage, getPurposeValues } from './utils/purposes';
-import { init as initMockAirgap } from './utils/ag-mock'
+import {
+  getPurposeEntries,
+  getPurposeMessage,
+  getPurposeValues,
+} from './utils/purposes';
+import { init as initMockAirgap } from './utils/ag-mock';
 
 describe('CompleteOptionsToggles', () => {
   beforeEach(() => {
@@ -19,12 +26,24 @@ describe('CompleteOptionsToggles', () => {
   });
 
   test('matches snapshot', () => {
-    const { snapshot } = render(<CompleteOptionsToggles fontColor="#000" handleSetViewState={() => null} />);
+    const { snapshot } = render(
+      <CompleteOptionsToggles
+        fontColor="#000"
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
     expect(snapshot).toMatchSnapshot();
   });
 
   test('purpose ordering is consistent', () => {
-    const screen = render(<CompleteOptionsToggles fontColor="#000" handleSetViewState={() => null} />);
+    const screen = render(
+      <CompleteOptionsToggles
+        fontColor="#000"
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
     const { container } = screen;
 
     const sortedNamesToLabels = [
@@ -39,7 +58,11 @@ describe('CompleteOptionsToggles', () => {
         ),
     ];
 
-    const domLabels = [...container.querySelectorAll('div.complete-options-toggle-interface label')]
+    const domLabels = [
+      ...container.querySelectorAll(
+        'div.complete-options-toggle-interface label',
+      ),
+    ]
       ?.map((label) =>
         [...label.childNodes].find((child) => child.nodeType === 3),
       )
@@ -49,25 +72,37 @@ describe('CompleteOptionsToggles', () => {
   });
 
   test('defaults are honored', () => {
-    const screen = render(<CompleteOptionsToggles fontColor="#000" handleSetViewState={() => null} />);
+    const screen = render(
+      <CompleteOptionsToggles
+        fontColor="#000"
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
     getPurposeEntries().forEach(([key, purpose]) => {
       const label = getPurposeMessage(purpose);
-      expect(getPurposeCheckState(screen, label, { selector: 'label' })).toEqual(
-        MOCK_PURPOSES_OPTED_IN[key].defaultConsent,
-      );
+      expect(
+        getPurposeCheckState(screen, label, { selector: 'label' }),
+      ).toEqual(MOCK_PURPOSES_OPTED_IN[key].defaultConsent);
     });
   });
 
   test('check states change when clicked, submission affects stored consent', () => {
     const prevConsent = { ...testWindow.airgap?.getConsent() };
-    const screen = render(<CompleteOptionsToggles fontColor="#000" handleSetViewState={() => null} />);
+    const screen = render(
+      <CompleteOptionsToggles
+        fontColor="#000"
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
     const { container } = screen;
     getPurposeEntries().forEach(([key, purpose]) => {
       const label = getPurposeMessage(purpose);
       clickPurposeCheckbox(screen, label, { selector: 'label' });
-      expect(getPurposeCheckState(screen, label, { selector: 'label' })).toEqual(
-        !MOCK_PURPOSES_OPTED_IN[key].defaultConsent,
-      );
+      expect(
+        getPurposeCheckState(screen, label, { selector: 'label' }),
+      ).toEqual(!MOCK_PURPOSES_OPTED_IN[key].defaultConsent);
     });
 
     // Ensure submission reflects purpose selection in airgap
@@ -77,14 +112,22 @@ describe('CompleteOptionsToggles', () => {
     const consent = { ...testWindow.airgap?.getConsent() };
 
     Object.entries(MOCK_PURPOSES_OPTED_IN).forEach(([, purpose]) => {
-      expect(!!prevConsent.purposes?.[purpose.name]).toEqual(!consent.purposes?.[purpose.name]);
+      expect(!!prevConsent.purposes?.[purpose.name]).toEqual(
+        !consent.purposes?.[purpose.name],
+      );
     });
     expect(prevConsent.confirmed).toEqual(false);
     expect(consent.confirmed).toEqual(true);
   });
 
   test('purposes rerender on remount', () => {
-    let screen = render(<CompleteOptionsToggles fontColor="#000" handleSetViewState={() => null} />);
+    let screen = render(
+      <CompleteOptionsToggles
+        fontColor="#000"
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
     let { container, unmount } = screen;
     getPurposeValues().forEach((purpose) => {
       const label = getPurposeMessage(purpose);
@@ -97,15 +140,21 @@ describe('CompleteOptionsToggles', () => {
 
     unmount();
 
-    screen = render(<CompleteOptionsToggles fontColor="#000" handleSetViewState={() => null} />);
+    screen = render(
+      <CompleteOptionsToggles
+        fontColor="#000"
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
     ({ container, unmount } = screen);
 
     // Ensure we rerender the ui with the new consent when unmounting and remounting ui
     getPurposeEntries().forEach(([key, purpose]) => {
       const label = getPurposeMessage(purpose);
-      expect(getPurposeCheckState(screen, label, { selector: 'label' })).toEqual(
-        !MOCK_PURPOSES_OPTED_IN[key].defaultConsent,
-      );
+      expect(
+        getPurposeCheckState(screen, label, { selector: 'label' }),
+      ).toEqual(!MOCK_PURPOSES_OPTED_IN[key].defaultConsent);
     });
   });
 });
diff --git a/src/tests/DoNotSellDisclosure.test.tsx b/src/tests/DoNotSellDisclosure.test.tsx
index 10fc23ea..4cae2c0f 100644
--- a/src/tests/DoNotSellDisclosure.test.tsx
+++ b/src/tests/DoNotSellDisclosure.test.tsx
@@ -5,24 +5,43 @@ import { render, testWindow } from './utils/render';
 import { test, expect, describe } from '@jest/globals';
 
 import { DoNotSellDisclosure } from '../components/DoNotSellDisclosure';
-import { MOCK_PURPOSES_OPTED_IN } from './utils/constants';
-import { init as initMockAirgap } from './utils/ag-mock'
+import {
+  MOCK_PURPOSES_OPTED_IN,
+  MOCK_TEMPLATE_VARIABLES,
+} from './utils/constants';
+import { init as initMockAirgap } from './utils/ag-mock';
 
 describe('DoNotSellDisclosure', () => {
   test('matches snapshot', () => {
-    const { snapshot } = render(<DoNotSellDisclosure modalOpenAuth={null} handleSetViewState={() => null} />);
+    const { snapshot } = render(
+      <DoNotSellDisclosure
+        modalOpenAuth={null}
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
     expect(snapshot).toMatchSnapshot();
   });
 
   test('opts you out of sale of info on render', async () => {
     initMockAirgap(MOCK_PURPOSES_OPTED_IN);
     const prevConsent = { ...testWindow.airgap.getConsent() };
-    render(<DoNotSellDisclosure modalOpenAuth={null} handleSetViewState={() => null} />);
+    render(
+      <DoNotSellDisclosure
+        modalOpenAuth={null}
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
 
-    await (new Promise((resolve) => { setTimeout(resolve, 5) }))
+    await new Promise((resolve) => {
+      setTimeout(resolve, 5);
+    });
 
     const consent = { ...testWindow.airgap.getConsent() };
-    expect(!!prevConsent.purposes?.SaleOfInfo).toEqual(!consent.purposes?.SaleOfInfo);
+    expect(!!prevConsent.purposes?.SaleOfInfo).toEqual(
+      !consent.purposes?.SaleOfInfo,
+    );
     expect(prevConsent.confirmed).toEqual(false);
     expect(consent.confirmed).toEqual(true);
   });
diff --git a/src/tests/DoNotSellExplainer.test.tsx b/src/tests/DoNotSellExplainer.test.tsx
index 97542013..a9c49e40 100644
--- a/src/tests/DoNotSellExplainer.test.tsx
+++ b/src/tests/DoNotSellExplainer.test.tsx
@@ -6,12 +6,22 @@ import { test, expect, describe } from '@jest/globals';
 
 import { DoNotSellExplainer } from '../components/DoNotSellExplainer';
 import { fireEvent } from '@testing-library/preact';
-import { MOCK_PURPOSES_OPTED_IN, MOCK_PURPOSES_OPTED_OUT } from './utils/constants';
-import { init as initMockAirgap } from './utils/ag-mock'
+import {
+  MOCK_PURPOSES_OPTED_IN,
+  MOCK_PURPOSES_OPTED_OUT,
+  MOCK_TEMPLATE_VARIABLES,
+} from './utils/constants';
+import { init as initMockAirgap } from './utils/ag-mock';
 
 describe('DoNotSellExplainer', () => {
   test('matches snapshot', () => {
-    const { snapshot } = render(<DoNotSellExplainer fontColor="#000" handleSetViewState={() => null} />);
+    const { snapshot } = render(
+      <DoNotSellExplainer
+        fontColor="#000"
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
     expect(snapshot).toMatchSnapshot();
   });
 
@@ -19,7 +29,13 @@ describe('DoNotSellExplainer', () => {
     initMockAirgap(MOCK_PURPOSES_OPTED_OUT);
 
     const prevConsent = { ...testWindow.airgap.getConsent() };
-    const { container } = render(<DoNotSellExplainer fontColor="#000" handleSetViewState={() => null} />);
+    const { container } = render(
+      <DoNotSellExplainer
+        fontColor="#000"
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
 
     // Ensure submission reflects purpose selection in airgap
     const toggleCheckbox = container.querySelector('input');
@@ -27,7 +43,9 @@ describe('DoNotSellExplainer', () => {
     if (toggleCheckbox) fireEvent.click(toggleCheckbox);
 
     const consent = { ...testWindow.airgap.getConsent() };
-    expect(!!prevConsent.purposes?.SaleOfInfo).toEqual(!consent.purposes?.SaleOfInfo);
+    expect(!!prevConsent.purposes?.SaleOfInfo).toEqual(
+      !consent.purposes?.SaleOfInfo,
+    );
     expect(prevConsent.confirmed).toEqual(false);
     expect(consent.confirmed).toEqual(true);
   });
@@ -36,7 +54,13 @@ describe('DoNotSellExplainer', () => {
     initMockAirgap(MOCK_PURPOSES_OPTED_IN);
 
     const prevConsent = { ...testWindow.airgap.getConsent() };
-    const { container } = render(<DoNotSellExplainer fontColor="#000" handleSetViewState={() => null} />);
+    const { container } = render(
+      <DoNotSellExplainer
+        fontColor="#000"
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
 
     // Ensure submission reflects purpose selection in airgap
     const toggleCheckbox = container.querySelector('input');
@@ -44,7 +68,9 @@ describe('DoNotSellExplainer', () => {
     if (toggleCheckbox) fireEvent.click(toggleCheckbox);
 
     const consent = { ...testWindow.airgap.getConsent() };
-    expect(!!prevConsent.purposes?.SaleOfInfo).toEqual(!consent.purposes?.SaleOfInfo);
+    expect(!!prevConsent.purposes?.SaleOfInfo).toEqual(
+      !consent.purposes?.SaleOfInfo,
+    );
     expect(prevConsent.confirmed).toEqual(false);
     expect(consent.confirmed).toEqual(true);
   });
diff --git a/src/tests/NoticeAndDoNotSell.test.tsx b/src/tests/NoticeAndDoNotSell.test.tsx
index b60fe8e0..f9a50a1d 100644
--- a/src/tests/NoticeAndDoNotSell.test.tsx
+++ b/src/tests/NoticeAndDoNotSell.test.tsx
@@ -6,8 +6,11 @@ import { test, expect, describe, beforeEach } from '@jest/globals';
 
 import { NoticeAndDoNotSell } from '../components/NoticeAndDoNotSell';
 import { fireEvent } from '@testing-library/preact';
-import { MOCK_PURPOSES_OPTED_OUT } from './utils/constants';
-import { init as initMockAirgap } from './utils/ag-mock'
+import {
+  MOCK_PURPOSES_OPTED_OUT,
+  MOCK_TEMPLATE_VARIABLES,
+} from './utils/constants';
+import { init as initMockAirgap } from './utils/ag-mock';
 
 describe('NoticeAndDoNotSell', () => {
   beforeEach(() => {
@@ -15,13 +18,23 @@ describe('NoticeAndDoNotSell', () => {
   });
 
   test('matches snapshot', () => {
-    const { snapshot } = render(<NoticeAndDoNotSell handleSetViewState={() => null} />);
+    const { snapshot } = render(
+      <NoticeAndDoNotSell
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
     expect(snapshot).toMatchSnapshot();
   });
 
   test('submission affects stored consent', () => {
     const prevConsent = { ...testWindow.airgap.getConsent() };
-    const { container } = render(<NoticeAndDoNotSell handleSetViewState={() => null} />);
+    const { container } = render(
+      <NoticeAndDoNotSell
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
 
     // Ensure submission reflects purpose selection in airgap
     const submitButton = container.querySelector('button');
@@ -30,7 +43,9 @@ describe('NoticeAndDoNotSell', () => {
     const consent = { ...testWindow.airgap.getConsent() };
 
     Object.entries(MOCK_PURPOSES_OPTED_OUT).forEach(([, purpose]) => {
-      expect(!!prevConsent.purposes?.[purpose.name]).toEqual(!!consent.purposes?.[purpose.name]);
+      expect(!!prevConsent.purposes?.[purpose.name]).toEqual(
+        !!consent.purposes?.[purpose.name],
+      );
     });
     expect(prevConsent.confirmed).toEqual(false);
     expect(consent.confirmed).toEqual(true);
diff --git a/src/tests/OptOutDisclosure.test.tsx b/src/tests/OptOutDisclosure.test.tsx
index fadc3c66..e7199f3f 100644
--- a/src/tests/OptOutDisclosure.test.tsx
+++ b/src/tests/OptOutDisclosure.test.tsx
@@ -5,25 +5,44 @@ import { render, testWindow } from './utils/render';
 import { test, expect, describe } from '@jest/globals';
 
 import { OptOutDisclosure } from '../components/OptOutDisclosure';
-import { MOCK_PURPOSES_OPTED_IN } from './utils/constants';
-import { init as initMockAirgap } from './utils/ag-mock'
+import {
+  MOCK_PURPOSES_OPTED_IN,
+  MOCK_TEMPLATE_VARIABLES,
+} from './utils/constants';
+import { init as initMockAirgap } from './utils/ag-mock';
 
 describe('OptOutDisclosure', () => {
   test('matches snapshot', () => {
-    const { snapshot } = render(<OptOutDisclosure modalOpenAuth={null} handleSetViewState={() => null} />);
+    const { snapshot } = render(
+      <OptOutDisclosure
+        modalOpenAuth={null}
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
     expect(snapshot).toMatchSnapshot();
   });
 
   test('opts you out of all purposes on render', async () => {
     initMockAirgap(MOCK_PURPOSES_OPTED_IN);
     const prevConsent = { ...testWindow.airgap.getConsent() };
-    render(<OptOutDisclosure modalOpenAuth={null} handleSetViewState={() => null} />);
+    render(
+      <OptOutDisclosure
+        modalOpenAuth={null}
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
 
-    await (new Promise((resolve) => { setTimeout(resolve, 5) }))
+    await new Promise((resolve) => {
+      setTimeout(resolve, 5);
+    });
 
     const consent = { ...testWindow.airgap.getConsent() };
     Object.entries(MOCK_PURPOSES_OPTED_IN).forEach(([, purpose]) => {
-      expect(!!prevConsent.purposes?.[purpose.name]).toEqual(!consent.purposes?.[purpose.name]);
+      expect(!!prevConsent.purposes?.[purpose.name]).toEqual(
+        !consent.purposes?.[purpose.name],
+      );
     });
     expect(prevConsent.confirmed).toEqual(false);
     expect(consent.confirmed).toEqual(true);
diff --git a/src/tests/PrivacyPolicyNotice.test.tsx b/src/tests/PrivacyPolicyNotice.test.tsx
index 7a9b4d9e..37df0d52 100644
--- a/src/tests/PrivacyPolicyNotice.test.tsx
+++ b/src/tests/PrivacyPolicyNotice.test.tsx
@@ -5,20 +5,33 @@ import { render, testWindow } from './utils/render';
 import { test, expect, describe } from '@jest/globals';
 
 import { PrivacyPolicyNotice } from '../components/PrivacyPolicyNotice';
-import { MOCK_PURPOSES_OPTED_IN } from './utils/constants';
-import { init as initMockAirgap } from './utils/ag-mock'
+import {
+  MOCK_PURPOSES_OPTED_IN,
+  MOCK_TEMPLATE_VARIABLES,
+} from './utils/constants';
+import { init as initMockAirgap } from './utils/ag-mock';
 import { fireEvent } from '@testing-library/preact';
 
 describe('PrivacyPolicyNotice', () => {
   test('matches snapshot', () => {
-    const { snapshot } = render(<PrivacyPolicyNotice handleSetViewState={() => null} />);
+    const { snapshot } = render(
+      <PrivacyPolicyNotice
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
     expect(snapshot).toMatchSnapshot();
   });
 
   test('confirms purposes on submission', () => {
     initMockAirgap(MOCK_PURPOSES_OPTED_IN);
     const prevConsent = { ...testWindow.airgap.getConsent() };
-    const { container } = render(<PrivacyPolicyNotice handleSetViewState={() => null} />);
+    const { container } = render(
+      <PrivacyPolicyNotice
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
 
     // Ensure submission reflects purpose confirmation in airgap
     const submitButton = container.querySelector('button');
@@ -26,7 +39,9 @@ describe('PrivacyPolicyNotice', () => {
 
     const consent = { ...testWindow.airgap.getConsent() };
     Object.entries(MOCK_PURPOSES_OPTED_IN).forEach(([, purpose]) => {
-      expect(!!prevConsent.purposes?.[purpose.name]).toEqual(!!consent.purposes?.[purpose.name]);
+      expect(!!prevConsent.purposes?.[purpose.name]).toEqual(
+        !!consent.purposes?.[purpose.name],
+      );
     });
     expect(prevConsent.confirmed).toEqual(false);
     expect(consent.confirmed).toEqual(true);
diff --git a/src/tests/PrivacyPolicyNoticeWithCloseButton.test.tsx b/src/tests/PrivacyPolicyNoticeWithCloseButton.test.tsx
index fbb402e3..9648904b 100644
--- a/src/tests/PrivacyPolicyNoticeWithCloseButton.test.tsx
+++ b/src/tests/PrivacyPolicyNoticeWithCloseButton.test.tsx
@@ -5,20 +5,35 @@ import { render, testWindow } from './utils/render';
 import { test, expect, describe } from '@jest/globals';
 
 import { PrivacyPolicyNoticeWithCloseButton } from '../components/PrivacyPolicyNoticeWithCloseButton';
-import { MOCK_PURPOSES_OPTED_IN } from './utils/constants';
-import { init as initMockAirgap } from './utils/ag-mock'
+import {
+  MOCK_PURPOSES_OPTED_IN,
+  MOCK_TEMPLATE_VARIABLES,
+} from './utils/constants';
+import { init as initMockAirgap } from './utils/ag-mock';
 import { fireEvent } from '@testing-library/preact';
 
 describe('PrivacyPolicyNoticeWithCloseButton', () => {
   test('matches snapshot', () => {
-    const { snapshot } = render(<PrivacyPolicyNoticeWithCloseButton fontColor="#000" handleSetViewState={() => null} />);
+    const { snapshot } = render(
+      <PrivacyPolicyNoticeWithCloseButton
+        fontColor="#000"
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
     expect(snapshot).toMatchSnapshot();
   });
 
   test('confirms purposes on submission', () => {
     initMockAirgap(MOCK_PURPOSES_OPTED_IN);
     const prevConsent = { ...testWindow.airgap.getConsent() };
-    const { container } = render(<PrivacyPolicyNoticeWithCloseButton fontColor="#000" handleSetViewState={() => null} />);
+    const { container } = render(
+      <PrivacyPolicyNoticeWithCloseButton
+        fontColor="#000"
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
 
     // Ensure submission reflects purpose confirmation in airgap
     const submitButton = container.querySelector('button');
@@ -26,7 +41,9 @@ describe('PrivacyPolicyNoticeWithCloseButton', () => {
 
     const consent = { ...testWindow.airgap.getConsent() };
     Object.entries(MOCK_PURPOSES_OPTED_IN).forEach(([, purpose]) => {
-      expect(!!prevConsent.purposes?.[purpose.name]).toEqual(!!consent.purposes?.[purpose.name]);
+      expect(!!prevConsent.purposes?.[purpose.name]).toEqual(
+        !!consent.purposes?.[purpose.name],
+      );
     });
     expect(prevConsent.confirmed).toEqual(false);
     expect(consent.confirmed).toEqual(true);
diff --git a/src/tests/QuickOptions.test.tsx b/src/tests/QuickOptions.test.tsx
index 9c1864df..bc10ab70 100644
--- a/src/tests/QuickOptions.test.tsx
+++ b/src/tests/QuickOptions.test.tsx
@@ -6,24 +6,36 @@ import { test, expect, describe } from '@jest/globals';
 
 import { QuickOptions } from '../components/QuickOptions';
 import { fireEvent } from '@testing-library/preact';
-import { MOCK_PURPOSES_OPTED_OUT } from './utils/constants';
-import { init as initMockAirgap } from './utils/ag-mock'
+import {
+  MOCK_PURPOSES_OPTED_OUT,
+  MOCK_TEMPLATE_VARIABLES,
+} from './utils/constants';
+import { init as initMockAirgap } from './utils/ag-mock';
 import { quickOptionsMessages } from '../messages';
 
 describe('QuickOptions', () => {
   test('matches snapshot', () => {
-    const { snapshot } = render(<QuickOptions handleSetViewState={() => null} />);
+    const { snapshot } = render(
+      <QuickOptions
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
     expect(snapshot).toMatchSnapshot();
   });
 
   test('button ordering is consistent', () => {
     initMockAirgap(MOCK_PURPOSES_OPTED_OUT);
-    const { container } = render(<QuickOptions handleSetViewState={() => null} />);
+    const { container } = render(
+      <QuickOptions
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
 
-    const domLabels = [...container.querySelectorAll('button')]
-      ?.map((span) =>
-        span.children[0].childNodes.item(0).textContent
-      )
+    const domLabels = [...container.querySelectorAll('button')]?.map(
+      (span) => span.children[0].childNodes.item(0).textContent,
+    );
 
     expect(domLabels).toStrictEqual([
       quickOptionsMessages.essentialsButtonPrimary.defaultMessage,
@@ -36,7 +48,12 @@ describe('QuickOptions', () => {
   test('submission affects stored consent (essential)', () => {
     initMockAirgap(MOCK_PURPOSES_OPTED_OUT);
     const prevConsent = { ...testWindow.airgap.getConsent() };
-    const { container } = render(<QuickOptions handleSetViewState={() => null} />);
+    const { container } = render(
+      <QuickOptions
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
 
     // Ensure submission reflects purpose selection in airgap
     const essentialButton = container.querySelector('button:nth-of-type(1)');
@@ -45,7 +62,9 @@ describe('QuickOptions', () => {
     const consent = { ...testWindow.airgap.getConsent() };
 
     Object.entries(MOCK_PURPOSES_OPTED_OUT).forEach(([, purpose]) => {
-      expect(!!prevConsent.purposes?.[purpose.name]).toEqual(!!consent.purposes?.[purpose.name]);
+      expect(!!prevConsent.purposes?.[purpose.name]).toEqual(
+        !!consent.purposes?.[purpose.name],
+      );
     });
     expect(prevConsent.confirmed).toEqual(false);
     expect(consent.confirmed).toEqual(true);
@@ -54,7 +73,12 @@ describe('QuickOptions', () => {
   test('submission affects stored consent (functional)', () => {
     initMockAirgap(MOCK_PURPOSES_OPTED_OUT);
     const prevConsent = { ...testWindow.airgap.getConsent() };
-    const { container } = render(<QuickOptions handleSetViewState={() => null} />);
+    const { container } = render(
+      <QuickOptions
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
 
     // Ensure submission reflects purpose selection in airgap
     const functionalButton = container.querySelector('button:nth-of-type(2)');
@@ -62,9 +86,15 @@ describe('QuickOptions', () => {
 
     const consent = { ...testWindow.airgap.getConsent() };
 
-    expect(!!prevConsent.purposes?.Functional).toEqual(!consent.purposes?.Functional);
-    expect(!!prevConsent.purposes?.Analytics).toEqual(!!consent.purposes?.Analytics);
-    expect(!!prevConsent.purposes?.Advertising).toEqual(!!consent.purposes?.Advertising);
+    expect(!!prevConsent.purposes?.Functional).toEqual(
+      !consent.purposes?.Functional,
+    );
+    expect(!!prevConsent.purposes?.Analytics).toEqual(
+      !!consent.purposes?.Analytics,
+    );
+    expect(!!prevConsent.purposes?.Advertising).toEqual(
+      !!consent.purposes?.Advertising,
+    );
     expect(prevConsent.confirmed).toEqual(false);
     expect(consent.confirmed).toEqual(true);
   });
@@ -72,7 +102,12 @@ describe('QuickOptions', () => {
   test('submission affects stored consent (analytics)', () => {
     initMockAirgap(MOCK_PURPOSES_OPTED_OUT);
     const prevConsent = { ...testWindow.airgap.getConsent() };
-    const { container } = render(<QuickOptions handleSetViewState={() => null} />);
+    const { container } = render(
+      <QuickOptions
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
 
     // Ensure submission reflects purpose selection in airgap
     const analyticsButton = container.querySelector('button:nth-of-type(3)');
@@ -80,9 +115,15 @@ describe('QuickOptions', () => {
 
     const consent = { ...testWindow.airgap.getConsent() };
 
-    expect(!!prevConsent.purposes?.Functional).toEqual(!consent.purposes?.Functional);
-    expect(!!prevConsent.purposes?.Analytics).toEqual(!consent.purposes?.Analytics);
-    expect(!!prevConsent.purposes?.Advertising).toEqual(!!consent.purposes?.Advertising);
+    expect(!!prevConsent.purposes?.Functional).toEqual(
+      !consent.purposes?.Functional,
+    );
+    expect(!!prevConsent.purposes?.Analytics).toEqual(
+      !consent.purposes?.Analytics,
+    );
+    expect(!!prevConsent.purposes?.Advertising).toEqual(
+      !!consent.purposes?.Advertising,
+    );
     expect(prevConsent.confirmed).toEqual(false);
     expect(consent.confirmed).toEqual(true);
   });
@@ -90,7 +131,12 @@ describe('QuickOptions', () => {
   test('submission affects stored consent (advertising)', () => {
     initMockAirgap(MOCK_PURPOSES_OPTED_OUT);
     const prevConsent = { ...testWindow.airgap.getConsent() };
-    const { container } = render(<QuickOptions handleSetViewState={() => null} />);
+    const { container } = render(
+      <QuickOptions
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
 
     // Ensure submission reflects purpose selection in airgap
     const advertisingButton = container.querySelector('button:nth-of-type(4)');
@@ -98,9 +144,15 @@ describe('QuickOptions', () => {
 
     const consent = { ...testWindow.airgap.getConsent() };
 
-    expect(!!prevConsent.purposes?.Functional).toEqual(!consent.purposes?.Functional);
-    expect(!!prevConsent.purposes?.Analytics).toEqual(!consent.purposes?.Analytics);
-    expect(!!prevConsent.purposes?.Advertising).toEqual(!consent.purposes?.Advertising);
+    expect(!!prevConsent.purposes?.Functional).toEqual(
+      !consent.purposes?.Functional,
+    );
+    expect(!!prevConsent.purposes?.Analytics).toEqual(
+      !consent.purposes?.Analytics,
+    );
+    expect(!!prevConsent.purposes?.Advertising).toEqual(
+      !consent.purposes?.Advertising,
+    );
     expect(prevConsent.confirmed).toEqual(false);
     expect(consent.confirmed).toEqual(true);
   });
diff --git a/src/tests/QuickOptions3.test.tsx b/src/tests/QuickOptions3.test.tsx
index 4480d19a..72bafb5f 100644
--- a/src/tests/QuickOptions3.test.tsx
+++ b/src/tests/QuickOptions3.test.tsx
@@ -6,24 +6,36 @@ import { test, expect, describe } from '@jest/globals';
 
 import { QuickOptions3 } from '../components/QuickOptions3';
 import { fireEvent } from '@testing-library/preact';
-import { MOCK_PURPOSES_OPTED_OUT } from './utils/constants';
-import { init as initMockAirgap } from './utils/ag-mock'
+import {
+  MOCK_PURPOSES_OPTED_OUT,
+  MOCK_TEMPLATE_VARIABLES,
+} from './utils/constants';
+import { init as initMockAirgap } from './utils/ag-mock';
 import { quickOptionsMessages } from '../messages';
 
 describe('QuickOptions3', () => {
   test('matches snapshot', () => {
-    const { snapshot } = render(<QuickOptions3 handleSetViewState={() => null} />);
+    const { snapshot } = render(
+      <QuickOptions3
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
     expect(snapshot).toMatchSnapshot();
   });
 
   test('button ordering is consistent', () => {
     initMockAirgap(MOCK_PURPOSES_OPTED_OUT);
-    const { container } = render(<QuickOptions3 handleSetViewState={() => null} />);
+    const { container } = render(
+      <QuickOptions3
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
 
-    const domLabels = [...container.querySelectorAll('button')]
-      ?.map((span) =>
-        span.children[0].childNodes.item(0).textContent
-      )
+    const domLabels = [...container.querySelectorAll('button')]?.map(
+      (span) => span.children[0].childNodes.item(0).textContent,
+    );
 
     expect(domLabels).toStrictEqual([
       quickOptionsMessages.essentialsButtonPrimary.defaultMessage,
@@ -35,7 +47,12 @@ describe('QuickOptions3', () => {
   test('submission affects stored consent (essential)', () => {
     initMockAirgap(MOCK_PURPOSES_OPTED_OUT);
     const prevConsent = { ...testWindow.airgap.getConsent() };
-    const { container } = render(<QuickOptions3 handleSetViewState={() => null} />);
+    const { container } = render(
+      <QuickOptions3
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
 
     // Ensure submission reflects purpose selection in airgap
     const essentialButton = container.querySelector('button:nth-of-type(1)');
@@ -44,7 +61,9 @@ describe('QuickOptions3', () => {
     const consent = { ...testWindow.airgap.getConsent() };
 
     Object.entries(MOCK_PURPOSES_OPTED_OUT).forEach(([, purpose]) => {
-      expect(!!prevConsent.purposes?.[purpose.name]).toEqual(!!consent.purposes?.[purpose.name]);
+      expect(!!prevConsent.purposes?.[purpose.name]).toEqual(
+        !!consent.purposes?.[purpose.name],
+      );
     });
     expect(prevConsent.confirmed).toEqual(false);
     expect(consent.confirmed).toEqual(true);
@@ -53,7 +72,12 @@ describe('QuickOptions3', () => {
   test('submission affects stored consent (functional)', () => {
     initMockAirgap(MOCK_PURPOSES_OPTED_OUT);
     const prevConsent = { ...testWindow.airgap.getConsent() };
-    const { container } = render(<QuickOptions3 handleSetViewState={() => null} />);
+    const { container } = render(
+      <QuickOptions3
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
 
     // Ensure submission reflects purpose selection in airgap
     const functionalButton = container.querySelector('button:nth-of-type(2)');
@@ -61,9 +85,15 @@ describe('QuickOptions3', () => {
 
     const consent = { ...testWindow.airgap.getConsent() };
 
-    expect(!!prevConsent.purposes?.Functional).toEqual(!consent.purposes?.Functional);
-    expect(!!prevConsent.purposes?.Analytics).toEqual(!consent.purposes?.Analytics);
-    expect(!!prevConsent.purposes?.Advertising).toEqual(!!consent.purposes?.Advertising);
+    expect(!!prevConsent.purposes?.Functional).toEqual(
+      !consent.purposes?.Functional,
+    );
+    expect(!!prevConsent.purposes?.Analytics).toEqual(
+      !consent.purposes?.Analytics,
+    );
+    expect(!!prevConsent.purposes?.Advertising).toEqual(
+      !!consent.purposes?.Advertising,
+    );
     expect(prevConsent.confirmed).toEqual(false);
     expect(consent.confirmed).toEqual(true);
   });
@@ -71,7 +101,12 @@ describe('QuickOptions3', () => {
   test('submission affects stored consent (advertising)', () => {
     initMockAirgap(MOCK_PURPOSES_OPTED_OUT);
     const prevConsent = { ...testWindow.airgap.getConsent() };
-    const { container } = render(<QuickOptions3 handleSetViewState={() => null} />);
+    const { container } = render(
+      <QuickOptions3
+        handleSetViewState={() => null}
+        globalUiVariables={MOCK_TEMPLATE_VARIABLES}
+      />,
+    );
 
     // Ensure submission reflects purpose selection in airgap
     const advertisingButton = container.querySelector('button:nth-of-type(3)');
@@ -79,9 +114,15 @@ describe('QuickOptions3', () => {
 
     const consent = { ...testWindow.airgap.getConsent() };
 
-    expect(!!prevConsent.purposes?.Functional).toEqual(!consent.purposes?.Functional);
-    expect(!!prevConsent.purposes?.Analytics).toEqual(!consent.purposes?.Analytics);
-    expect(!!prevConsent.purposes?.Advertising).toEqual(!consent.purposes?.Advertising);
+    expect(!!prevConsent.purposes?.Functional).toEqual(
+      !consent.purposes?.Functional,
+    );
+    expect(!!prevConsent.purposes?.Analytics).toEqual(
+      !consent.purposes?.Analytics,
+    );
+    expect(!!prevConsent.purposes?.Advertising).toEqual(
+      !consent.purposes?.Advertising,
+    );
     expect(prevConsent.confirmed).toEqual(false);
     expect(consent.confirmed).toEqual(true);
   });
diff --git a/src/tests/utils/constants.ts b/src/tests/utils/constants.ts
index 079624cc..889858e2 100644
--- a/src/tests/utils/constants.ts
+++ b/src/tests/utils/constants.ts
@@ -57,14 +57,20 @@ const MOCK_PURPOSES_BASE = {
     trackingType: 'UniquePurpose',
     optOutSignals: [],
   },
-}
+};
+
+export const MOCK_TEMPLATE_VARIABLES = { labelName: 'Test Label' };
 
 export const MOCK_PURPOSES_OPTED_OUT = Object.fromEntries(
-  Object.entries(MOCK_PURPOSES_BASE)
-    .map(([key, purpose]) => [key, { ...purpose, defaultConsent: false }])
+  Object.entries(MOCK_PURPOSES_BASE).map(([key, purpose]) => [
+    key,
+    { ...purpose, defaultConsent: false },
+  ]),
 );
 
 export const MOCK_PURPOSES_OPTED_IN = Object.fromEntries(
-  Object.entries(MOCK_PURPOSES_BASE)
-    .map(([key, purpose]) => [key, { ...purpose, defaultConsent: true }])
+  Object.entries(MOCK_PURPOSES_BASE).map(([key, purpose]) => [
+    key,
+    { ...purpose, defaultConsent: true },
+  ]),
 );
diff --git a/src/types.ts b/src/types.ts
index 99f3ec55..ac31b330 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -5,6 +5,7 @@ import type {
   ConsentManagerConfig,
 } from '@transcend-io/airgap.js-types';
 import { ConsentManagerLanguageKey } from '@transcend-io/internationalization';
+import { ObjByString } from '@transcend-io/type-utils';
 
 /**
  * Disclosure of a tracking purpose
@@ -60,6 +61,11 @@ export type HandleSetViewState = (
  */
 export type HandleSetLanguage = (language: ConsentManagerLanguageKey) => void;
 
+/**
+ * Handler for changing UI variables
+ */
+export type HandleChangeUiVariables = (variables: ObjByString) => void;
+
 /**
  * Handler for changing the privacy policy link
  */
diff --git a/src/utils/compile.ts b/src/utils/compile.ts
new file mode 100644
index 00000000..569c3224
--- /dev/null
+++ b/src/utils/compile.ts
@@ -0,0 +1,35 @@
+import type { ObjByString } from '@transcend-io/type-utils';
+
+/**
+ * Render a template linked to handlebars
+ *
+ * @example <caption>Example usage of render</caption>
+ * // The template string
+ * const template = 'here there {{firstName}}';
+ * // The parameters to fill the template with
+ * const props = { firstName: 'Mason' };
+ * // Returns
+ * render(template, props);
+ *
+ * Note: the usage of this function is not recommended. It is better
+ * to use react-intl on the frontend or handlebars on the backend, but
+ * if you find yourself in a situation where you want to use handlebars
+ * on the frontend with a dynamic message, this function can be used.
+ * @param template - The template string
+ * @param props - The parameters to fill the template with
+ * @returns The template rendered
+ */
+export function compile(template: string, props: ObjByString): string {
+  let res = template;
+  Object.keys(props).forEach((prop) => {
+    // loosely handlebars syntax
+    res = res.split(`{{{${prop}}}}`).join(props[prop]);
+    res = res.split(`{{{ ${prop} }}}`).join(props[prop]);
+    res = res.split(`{{${prop}}}`).join(props[prop]);
+    res = res.split(`{{ ${prop} }}`).join(props[prop]);
+
+    // loosely react-intl syntax
+    res = res.split(`{${prop}}`).join(props[prop]);
+  });
+  return res;
+}
diff --git a/src/utils/getTranscendPolicies.ts b/src/utils/getTranscendPolicies.ts
new file mode 100644
index 00000000..ace5b497
--- /dev/null
+++ b/src/utils/getTranscendPolicies.ts
@@ -0,0 +1,125 @@
+import type {
+  GetTranscendPolicies,
+  TranscendPolicy,
+} from '@transcend-io/airgap.js-types';
+import type {
+  ConsentManagerLanguageKey,
+  LanguageKey,
+} from '@transcend-io/internationalization';
+import type { ObjByString } from '@transcend-io/type-utils';
+import { compile } from './compile';
+
+/**
+ * Update a translation for a particular message
+ *
+ * @param translations - Translations
+ * @param locale - The language to fetch
+ * @returns The message with the translation updated or created
+ */
+function getTranslation(
+  translations: {
+    /** Language of translation */
+    locale: LanguageKey;
+    /** Value of translation */
+    value: string;
+  }[],
+  locale: LanguageKey,
+): string {
+  return (
+    translations.find((translation) => translation.locale === locale)?.value ||
+    ''
+  );
+}
+
+/**
+ * Fetch a set of policy documents defined in Transcend.
+ *
+ * Pull the proper translation for the specified policies, and inject any template variables.
+ *
+ * @param input - Input for fetching policies
+ * @param cdnLocation - Location of the CDN to fetch the policy from
+ * @param activeLocale - The currently active locale
+ * @param activeVariables - Active global variables
+ * @returns the fetched policies
+ */
+export async function getTranscendPolicies(
+  input: GetTranscendPolicies,
+  cdnLocation: string,
+  activeLocale: ConsentManagerLanguageKey,
+  activeVariables: ObjByString,
+): Promise<TranscendPolicy[]> {
+  // The URL to pull the translation from
+  const resolvedUrl = `${cdnLocation}/privacyCenterPolicies-${
+    input.locale || activeLocale
+  }.json`;
+
+  // Fetch the content
+  const response = await fetch(resolvedUrl);
+
+  // Check if the response is ok (status code 200-299)
+  if (!response.ok) {
+    throw new Error(`Network response was not ok ${response.statusText}`);
+  }
+
+  // Parse the JSON data from the response
+  const parsed = await response.json();
+
+  // Grab all variables
+  const allVariables = {
+    ...activeVariables,
+    ...input.variables,
+  };
+
+  // TODO: https://transcend.height.app/T-39372 - enforce API shape with codec
+  // Convert the parsed data into the expected format
+  const formatted: TranscendPolicy[] = parsed.map(
+    (policy: {
+      /** ID of policy  */
+      id: string;
+      /** Title of policy */
+      title: {
+        /** Default message of title */
+        defaultMessage: string;
+      };
+      /** Versions of policy */
+      versions: {
+        /** Content of policy */
+        content: {
+          /** Default message of content */
+          defaultMessage: string;
+          /** Translations */
+          translations: {
+            /** Language of translation */
+            locale: LanguageKey;
+            /** Value of translation */
+            value: string;
+          }[];
+        };
+      }[];
+    }): TranscendPolicy => {
+      const content =
+        getTranslation(policy.versions[0].content.translations, activeLocale) ||
+        getTranslation(
+          policy.versions[0].content.translations,
+          activeLocale.split('-')[0] as LanguageKey,
+        ) ||
+        policy.versions[0].content.defaultMessage;
+      return {
+        id: policy.id,
+        title: policy.title.defaultMessage,
+        content: Object.keys(allVariables).length
+          ? compile(content, allVariables)
+          : content,
+      };
+    },
+  );
+
+  // Filter by IDs of titles
+  return input.policyIds || input.policyTitles
+    ? formatted.filter(
+        (policy) =>
+          (input.policyIds || []).includes(policy.id) ||
+          (input.policyTitles || []).includes(policy.title),
+      )
+    : formatted;
+}
diff --git a/yarn.lock b/yarn.lock
index c4c1388e..5de9dbb9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1123,14 +1123,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@transcend-io/airgap.js-types@npm:^10.12.5":
-  version: 10.15.0
-  resolution: "@transcend-io/airgap.js-types@npm:10.15.0"
+"@transcend-io/airgap.js-types@npm:^12.2.0":
+  version: 12.2.0
+  resolution: "@transcend-io/airgap.js-types@npm:12.2.0"
   dependencies:
     "@transcend-io/type-utils": ^1.2.0
     fp-ts: ^2.16.1
     io-ts: ^2.2.21
-  checksum: 681251cdccd4dd54fb0bef2c0423afd030d33b84ad63723c6034f0fb00d4ff3d7dc67d906ebdbd29a619779ee22c30827db0d4aff50fca6e0336be32d41feed5
+  checksum: a0c92b7a5a218caf1ddca4e6793e793ecdf371e94ab2ba5d12beb93fecadb55bc8678cef59876ccbd7eed42046fc1f5f4392dc38e38ae9363ad8d5bfea7ed961
   languageName: node
   linkType: hard
 
@@ -1155,7 +1155,7 @@ __metadata:
     "@prettier/sync": ^0.5.2
     "@testing-library/jest-dom": ^6.4.6
     "@testing-library/preact": ^3.2.4
-    "@transcend-io/airgap.js-types": ^10.12.5
+    "@transcend-io/airgap.js-types": ^12.2.0
     "@transcend-io/internationalization": ^1.6.0
     "@transcend-io/logger": ^1.1.0
     "@transcend-io/type-utils": ^1.0.7