diff --git a/web/wp-content/mu-plugins/wp-mu-plugins/lf-mu/admin/partials/lf-mu-admin-display.php b/web/wp-content/mu-plugins/wp-mu-plugins/lf-mu/admin/partials/lf-mu-admin-display.php
index 9db161805..112721dba 100644
--- a/web/wp-content/mu-plugins/wp-mu-plugins/lf-mu/admin/partials/lf-mu-admin-display.php
+++ b/web/wp-content/mu-plugins/wp-mu-plugins/lf-mu/admin/partials/lf-mu-admin-display.php
@@ -191,6 +191,21 @@
+
+
+
+
+ |
+
+
+ Use the below script on CNCF subsites to embed the Hello Bar.
+
+ |
+
diff --git a/web/wp-content/themes/cncf-twenty-two/source/js/on-demand/hello-bar-embed.js b/web/wp-content/themes/cncf-twenty-two/source/js/on-demand/hello-bar-embed.js
new file mode 100644
index 000000000..d1efca736
--- /dev/null
+++ b/web/wp-content/themes/cncf-twenty-two/source/js/on-demand/hello-bar-embed.js
@@ -0,0 +1,127 @@
+/**
+ * Used on CNCF subsites to embed the hello bar on the top of the page.
+ *
+ * @package WordPress
+ * @since 1.0.0
+ */
+
+(function() {
+ document.addEventListener('DOMContentLoaded', function() {
+
+ const cacheKey = 'helloBarCache';
+ const cacheDuration = 3600 * 1000; // 1 hour in milliseconds
+
+ // Check if we have a cached response and if it's still valid
+ const cachedData = localStorage.getItem(cacheKey);
+ if (cachedData) {
+ const parsedData = JSON.parse(cachedData);
+ const now = new Date().getTime();
+
+ // If the cache is still valid, use the cached data
+ if (now - parsedData.timestamp < cacheDuration) {
+ insertHelloBar(parsedData.data);
+ return; // Exit since we don't need to fetch the API
+ } else {
+ // Cache expired, remove it
+ localStorage.removeItem(cacheKey);
+ }
+ }
+
+ // Fetch the API if no valid cache is found
+ fetch('https://www.cncf.io/wp-json/lf/v1/get_hello')
+ .then(response => response.json())
+ .then(data => {
+ // Cache the response with a timestamp
+ localStorage.setItem(cacheKey, JSON.stringify({
+ data: data,
+ timestamp: new Date().getTime()
+ }));
+ insertHelloBar(data);
+ })
+ .catch(error => console.error('Error fetching the API:', error));
+ });
+
+
+ // Function to insert the hello bar
+ function insertHelloBar(data) {
+ if (data.show_hello_bar !== 1) {
+ return;
+ }
+
+ const hello_bar_bg = data.hello_bar_bg;
+ const hello_bar_text = data.hello_bar_text;
+
+ var hB = document.createElement('div');
+ hB.classList.add('cncf-hello-bar');
+ hB.style.cssText = `
+ position: relative;
+ top: 0;
+ left: 0;
+ width: 100%;
+ background-color: ${hello_bar_bg};
+ color: ${hello_bar_text};
+ text-align: center;
+ padding: 6.4px;
+ font-family: Clarity City,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Roboto,Ubuntu,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+ font-weight: 400;
+ font-size: 14.4px;
+ letter-spacing: 0.24px;
+ line-height: 1.15;
+ opacity: 0;
+ z-index: 9999;
+ transition: opacity 0.5s ease;
+ `;
+
+ // Replace instances of "utm_source=www" with "utm_source=subdomain"
+ const subdomain = window.location.hostname.split('.')[0];
+ const updatedContent = data.hello_bar_content.replace(/utm_source=www/g, `utm_source=${subdomain}`);
+ hB.innerHTML = updatedContent;
+
+ document.body.insertBefore(hB, document.body.firstChild);
+ var fixedNav = document.querySelector('.td-navbar');
+ var isNavFixed = function() {
+ return window.getComputedStyle(fixedNav).position === 'fixed';
+ };
+ var updateNavPosition = function() {
+ if (!fixedNav) return;
+ if (isNavFixed()) {
+ var hBHeight = hB.offsetHeight;
+ if (window.scrollY > 0 && window.scrollY <= hBHeight) {
+ fixedNav.style.top = hBHeight - window.scrollY + 'px';
+ } else if (window.scrollY > hBHeight) {
+ fixedNav.style.top = '0';
+ } else {
+ fixedNav.style.top = hBHeight + 'px';
+ }
+ } else {
+ fixedNav.style.top = '0';
+ }
+ };
+ var resizeObserver = new ResizeObserver(function() {
+ updateNavPosition();
+ });
+ resizeObserver.observe(hB);
+ window.addEventListener('resize', () => updateNavPosition());
+ window.addEventListener('scroll', () => updateNavPosition());
+ updateNavPosition();
+ var style = document.createElement('style');
+ style.innerHTML = `
+ .cncf-hello-bar a {
+ color: inherit;
+ font-weight: 400;
+ text-decoration: underline;
+ text-underline-position: under;
+ transition: all 0.1s ease;
+ }
+ .cncf-hello-bar a:hover, .cncf-hello-bar a:focus {
+ text-decoration: none;
+ text-underline-position: unset;
+ }
+ `;
+ document.head.appendChild(style);
+ setTimeout(function() {
+ hB.style.opacity = '1';
+ }, 5);
+ }
+
+})();
\ No newline at end of file