IABTechLab · eiman-eltigani-ttd · Dec 1, 2025 · Dec 1, 2025 · Dec 1, 2025
diff --git a/web-integrations/google-secure-signals/client-side/html/index.html b/web-integrations/google-secure-signals/client-side/html/index.html
@@ -22,7 +22,7 @@ <h1>Client-Side ${IDENTITY_NAME} Integration with Google Secure Signals</h1>
 
         <h2>${IDENTITY_NAME} Integration Status</h2>
 
-        <table id="uid2_state">
+        <table id="uid_state">
           <tr>
             <td class="label">
               <div class="tooltip-wrapper">
@@ -184,7 +184,7 @@ <h4>Step 3: View Video Ad</h4>
         <div class="section">
           <h4>Step 4: Test Opt-Out</h4>
           <ul>
-            <li>Try the special email: <code>[email protected]</code></li>
+            <li>Try the special email: <strong>[email protected]</strong></li>
             <li>Observe "Has opted out?" changes to "yes"</li>
             <li>No advertising token is generated</li>
           </ul>

diff --git a/web-integrations/google-secure-signals/client-side/html/styles/app.css b/web-integrations/google-secure-signals/client-side/html/styles/app.css
@@ -1,6 +1,40 @@
-/* Two-Column Layout with Sidebar - Modern Design */
-/* Import centralized color variables */
-@import url('../styles/colors.css');
+/* Color Variables */
+:root {
+  /* Brand Colors */
+  --primary-orange: #FF6B35;
+  --primary-dark: #2D3748;
+  --accent-teal: #0D9488;
+  --accent-yellow: #FBBF24;
+
+  /* Text Colors */
+  --text-dark: #1A202C;
+  --text-gray: #718096;
+
+  /* Background Colors */
+  --bg-white: #FFFFFF;
+  --bg-light: #F7FAFC;
+  --sidebar-bg: #FFF7ED;
+
+  /* Border Colors */
+  --border-color: #E2E8F0;
+
+  /* Button Colors */
+  --button-navy: rgba(2, 10, 64, 1);
+  --button-navy-hover: rgba(2, 10, 64, 0.9);
+
+  /* Link Colors */
+  --link-color: #06B6D4;
+  --link-hover: #06B6D4;
+
+  /* Tooltip Colors */
+  --tooltip-bg: #1F2937;
+  --tooltip-trigger: #3B82F6;
+  --tooltip-trigger-hover: #2563EB;
+
+  /* Shadows */
+  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
 
 * {
   box-sizing: border-box;
@@ -128,7 +162,7 @@ a:hover {
 }
 
 /* State Table */
-#uid2_state {
+#uid_state {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
@@ -141,19 +175,19 @@ a:hover {
   overflow: visible;
 }
 
-#uid2_state tr {
+#uid_state tr {
   border-bottom: 1px solid var(--border-color);
 }
 
-#uid2_state tr:last-child {
+#uid_state tr:last-child {
   border-bottom: none;
 }
 
-#uid2_state tr:nth-child(even) {
+#uid_state tr:nth-child(even) {
   background-color: var(--bg-light);
 }
 
-#uid2_state td {
+#uid_state td {
   padding: 1rem;
   vertical-align: top;
 }
@@ -340,7 +374,6 @@ a:hover {
   .sidebar {
     position: static;
     max-height: none;
-    order: -1;
   }
 
   body {

diff --git a/web-integrations/javascript-sdk/client-side/html/index.html b/web-integrations/javascript-sdk/client-side/html/index.html
@@ -90,7 +90,7 @@ <h1>Client-Side ${IDENTITY_NAME} Integration Example using JavaScript SDK</h1>
             >Client-Side Integration Guide for JavaScript</a>.
         </p>
         <h2>${IDENTITY_NAME} Integration Status</h2>
-        <table id="uid2_state">
+        <table id="uid_state">
       <tr>
         <td class="label">
           <div class="tooltip-wrapper">
@@ -212,7 +212,7 @@ <h4>Step 3: Monitor Updates</h4>
         <div class="section">
           <h4>Step 4: Test Opt-Out</h4>
           <ul>
-            <li>Try the special email: <code>[email protected]</code></li>
+            <li>Try the special email: <strong>[email protected]</strong></li>
             <li>Observe "Has opted out?" changes to "yes"</li>
             <li>No advertising token is generated</li>
           </ul>

diff --git a/web-integrations/javascript-sdk/client-side/html/stylesheets/app.css b/web-integrations/javascript-sdk/client-side/html/stylesheets/app.css
@@ -1,5 +1,40 @@
-/* Import centralized color variables */
-@import url('../styles/colors.css');
+/* Color Variables */
+:root {
+  /* Brand Colors */
+  --primary-orange: #FF6B35;
+  --primary-dark: #2D3748;
+  --accent-teal: #0D9488;
+  --accent-yellow: #FBBF24;
+
+  /* Text Colors */
+  --text-dark: #1A202C;
+  --text-gray: #718096;
+
+  /* Background Colors */
+  --bg-white: #FFFFFF;
+  --bg-light: #F7FAFC;
+  --sidebar-bg: #FFF7ED;
+
+  /* Border Colors */
+  --border-color: #E2E8F0;
+
+  /* Button Colors */
+  --button-navy: rgba(2, 10, 64, 1);
+  --button-navy-hover: rgba(2, 10, 64, 0.9);
+
+  /* Link Colors */
+  --link-color: #06B6D4;
+  --link-hover: #06B6D4;
+
+  /* Tooltip Colors */
+  --tooltip-bg: #1F2937;
+  --tooltip-trigger: #3B82F6;
+  --tooltip-trigger-hover: #2563EB;
+
+  /* Shadows */
+  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
 
 * {
   box-sizing: border-box;
@@ -127,7 +162,7 @@ a:hover {
 }
 
 /* State Table */
-#uid2_state {
+#uid_state {
   width: 100%;
   border-collapse: collapse;
   margin: 2rem 0;
@@ -137,19 +172,19 @@ a:hover {
   overflow: hidden;
 }
 
-#uid2_state tr {
+#uid_state tr {
   border-bottom: 1px solid var(--border-color);
 }
 
-#uid2_state tr:nth-child(even) {
+#uid_state tr:nth-child(even) {
   background-color: var(--bg-light);
 }
 
-#uid2_state tr:last-child {
+#uid_state tr:last-child {
   border-bottom: none;
 }
 
-#uid2_state td {
+#uid_state td {
   padding: 1rem;
   vertical-align: top;
 }
@@ -332,7 +367,7 @@ a:hover {
 }
 
 /* Ensure table doesn't clip tooltips */
-#uid2_state {
+#uid_state {
   position: relative;
   overflow: visible;
 }

diff --git a/web-integrations/prebid-integrations/client-side/app.css b/web-integrations/prebid-integrations/client-side/app.css
@@ -1,6 +1,40 @@
-/* Two-Column Layout with Sidebar - Modern Design */
-/* Import centralized color variables */
-@import url('../styles/colors.css');
+/* Color Variables */
+:root {
+  /* Brand Colors */
+  --primary-orange: #FF6B35;
+  --primary-dark: #2D3748;
+  --accent-teal: #0D9488;
+  --accent-yellow: #FBBF24;
+
+  /* Text Colors */
+  --text-dark: #1A202C;
+  --text-gray: #718096;
+
+  /* Background Colors */
+  --bg-white: #FFFFFF;
+  --bg-light: #F7FAFC;
+  --sidebar-bg: #FFF7ED;
+
+  /* Border Colors */
+  --border-color: #E2E8F0;
+
+  /* Button Colors */
+  --button-navy: rgba(2, 10, 64, 1);
+  --button-navy-hover: rgba(2, 10, 64, 0.9);
+
+  /* Link Colors */
+  --link-color: #06B6D4;
+  --link-hover: #06B6D4;
+
+  /* Tooltip Colors */
+  --tooltip-bg: #1F2937;
+  --tooltip-trigger: #3B82F6;
+  --tooltip-trigger-hover: #2563EB;
+
+  /* Shadows */
+  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
 
 * {
   box-sizing: border-box;
@@ -128,7 +162,7 @@ a:hover {
 }
 
 /* State Table */
-#identity_state {
+#uid_state {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
@@ -141,19 +175,19 @@ a:hover {
   overflow: visible;
 }
 
-#identity_state tr {
+#uid_state tr {
   border-bottom: 1px solid var(--border-color);
 }
 
-#identity_state tr:last-child {
+#uid_state tr:last-child {
   border-bottom: none;
 }
 
-#identity_state tr:nth-child(even) {
+#uid_state tr:nth-child(even) {
   background-color: var(--bg-light);
 }
 
-#identity_state td {
+#uid_state td {
   padding: 1rem;
   vertical-align: top;
 }
@@ -338,7 +372,6 @@ a:hover {
   .sidebar {
     position: static;
     max-height: none;
-    order: -1;
   }
 
   body {

diff --git a/web-integrations/prebid-integrations/client-side/index.html b/web-integrations/prebid-integrations/client-side/index.html
@@ -89,7 +89,7 @@
         pbjs.que.push(function() {
           pbjs.onEvent('userIds', updateGuiElements);
           // Also update immediately in case IDs are already loaded
-          updateGuiElements();
+        updateGuiElements();
         });
       }
 
@@ -201,13 +201,13 @@
       <!-- Main Content Area -->
       <div class="main-content">
         <h1>Client-Side ${IDENTITY_NAME} Integration with Prebid.js</h1>
-        <p class="intro">
+    <p class="intro">
           This example demonstrates how a content publisher can integrate ${IDENTITY_NAME} with <strong>Prebid.js</strong> for header bidding, using client-side token generation. For documentation, see the <a href="${DOCS_BASE_URL}/guides/integration-prebid-client-side">${IDENTITY_NAME} Client-Side Integration Guide for Prebid.js</a>.
         </p>
 
         <h2>${IDENTITY_NAME} Integration Status</h2>
 
-        <table id="identity_state">
+        <table id="uid_state">
           <tr>
             <td class="label">
               <div class="tooltip-wrapper">
@@ -219,9 +219,9 @@ <h2>${IDENTITY_NAME} Integration Status</h2>
                 </div>
               </div>
             </td>
-            <td class="value"><pre id="targeted_advertising_ready"></pre></td>
-          </tr>
-          <tr>
+        <td class="value"><pre id="targeted_advertising_ready"></pre></td>
+      </tr>
+      <tr>
             <td class="label">
               <div class="tooltip-wrapper">
                 Advertising Token:
@@ -233,8 +233,8 @@ <h2>${IDENTITY_NAME} Integration Status</h2>
                 </div>
               </div>
             </td>
-            <td class="value"><pre id="advertising_token"></pre></td>
-          </tr>
+        <td class="value"><pre id="advertising_token"></pre></td>
+      </tr>
           <tr>
             <td class="label">
               <div class="tooltip-wrapper">
@@ -263,21 +263,21 @@ <h2>${IDENTITY_NAME} Integration Status</h2>
             </td>
             <td class="value"><pre id="prebid_storage"></pre></td>
           </tr>
-        </table>
+    </table>
 
-        <div id="login_form" style="display: none" class="form">
-          <div class="email_prompt">
-            <input
-              type="text"
-              id="email"
-              name="email"
-              placeholder="Enter an email address"
-            />
+    <div id="login_form" style="display: none" class="form">
+      <div class="email_prompt">
+        <input
+          type="text"
+          id="email"
+          name="email"
+          placeholder="Enter an email address"
+        />
             <button type="button" class="button" id="login">Generate ${IDENTITY_NAME}</button>
-          </div>
-        </div>
-        <div id="clear_storage_form" style="display: none" class="form">
-          <button type="button" class="button" id="clear_storage">Clear ${IDENTITY_NAME}</button>
+      </div>
+    </div>
+    <div id="clear_storage_form" style="display: none" class="form">
+        <button type="button" class="button" id="clear_storage">Clear ${IDENTITY_NAME}</button>
         </div>
       </div>
 
@@ -324,7 +324,7 @@ <h4>What's Happening?</h4>
 
         <div class="note">
           <strong>Note:</strong> This is a test-only environment. Do not use real user data.
-        </div>
+    </div>
       </aside>
     </div>
   </body>