-
Issue description: Widget is not showing up at all. I tried both embedding on my site and using the provided link to share. It worked fine in the editor. I followed the directions for adding code to a Squarespace site to a tee.
-
Link to the page with the widget in question: https://97ecf62f476b44278d04f789eb2cc6a8.elf.site (I’m just providing the share link because I’m not going to enable the page on my site without it working properly.)
2 Likes
Hi there and welcome to the Community, @Danielle_Mullon 
I am so sorry about this inconvenience!
I totally understand your point regarding publishing the widget. However, since the issue occurs only upon publication, we need to see the widget on the live page to understand what causes the issue.
Could you please add the widget to the test page and share a link to this page with us? We’ll gladly look into this for you 
1 Like
Okay, I went ahead and published it: https://www.inflowbehavioral.com/tadbit-locator-trial
2 Likes
Hi there, @Danielle_Mullon
Thank you for sharing a link!
I’ve checked your website and the widget appears on my end:
Could you please check your website in incognito mode and let me know if the widget appears there?
If the widget is displayed in incognito mode, there is a chance that some browser extensions (like Adblockers) may block the widget from displaying. Please try to disable the extensions to troubleshoot the issue.
If the widget still didn’t appear, please specify the browser you’re using and provide a screenshot of the Dev Console. This would help us understand the reason for the issue 
1 Like
Thanks so much! I tried it on the other browsers I use and it worked. Microsoft Edge is the one that’s not working. Nothing shows up at all, not even a message letting people know that something is missing. I’m worried this could happen for an end user. Is there anything I can add to prompt someone to check their settings if it’s not working?
2 Likes
Hi there, @Danielle_Mullon
Thanks for sharing the details
This issue occurs if a strict mode is enabled in the Edge settings. Please try to disable it. It should resolve the issue:
Meanwhile, I’d like to assure you that we haven’t made any changes on our end, and this behavior occurred after the latest update to Edge
1 Like
Thanks! I’m wondering if there’s anything I can add to the code that would have a statement display for those who might have a browser with the wrong settings, such as Edge on strict, so that they would know there is something that’s meant to be displayed there and could have a prompt to adjust their browser settings. Right now there is nothing to alert them that something is missing, just blank space. Any ideas?
2 Likes
Since the strict mode completely blocks the widget from displaying, there’s nothing can be done on our end. Even if the statement is added, it won’t show up since it’s a part of the widget. I am really sorry 
According to ChatGPT response, it’s possible to display an announcement only for users who open your site in Microsoft Edge. However, it’s not possible to detect whether they have the Strict mode enabled. Because of that, the announcement will be shown to all Edge users.
To implement this, ChatGPT suggested adding the script below in Settings → Advanced → Code Injection → Footer in your Squarespace admin settings.
<script>
(function () {
// --- 1) Detect Microsoft Edge ---------------------------------------------
const isEdge = (() => {
const ua = navigator.userAgent || "";
const ch = (navigator.userAgentData && navigator.userAgentData.brands) || [];
// Prefer User-Agent Client Hints (newer browsers)
if (ch.length) return ch.some(b => /Edge|Microsoft Edge|Edg/i.test(b.brand));
// Fallback UA sniff; skip Android/iOS flavors if you want desktop only
return /Edg\//.test(ua) && !/EdgA|EdgiOS/.test(ua);
})();
// (Optional) Only show when privacy signals are present (NOT equal to Edge "Strict", just a hint)
// const hasGPC = typeof navigator.globalPrivacyControl === "boolean" && navigator.globalPrivacyControl;
// const dntOn = ["1","yes"].includes(
// (navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack || "").toString().toLowerCase()
// );
// const shouldShow = isEdge && (hasGPC || dntOn);
const shouldShow = isEdge; // Show to all Edge users for now
if (!shouldShow) return;
// --- 2) Message + CTA ------------------------------------------------------
const messageHTML = `
<span>
If the Store Locator isn't displayed on your end, please disable the strict mode in your Edge browser's settings
</span>
`;
const ctaText = "OK";
// --- 3) Helper: add styles once for the fallback bar -----------------------
const injectOnce = (id, css) => {
if (document.getElementById(id)) return;
const s = document.createElement("style");
s.id = id; s.textContent = css;
document.head.appendChild(s);
};
// --- 4) Try to use the native Squarespace Announcement Bar -----------------
const showNativeBar = () => {
// Common selectors across modern Squarespace templates
const nativeBar =
document.querySelector(".sqs-announcement-bar") ||
document.querySelector('[data-section-id="announcement-bar"]') ||
document.querySelector('[data-test="announcement-bar"]');
if (!nativeBar) return false;
// Find where text usually lives; if missing, we’ll replace the entire content
let content = nativeBar.querySelector(".sqs-announcement-bar-content") || nativeBar;
// Save original content to restore when dismissed
if (!nativeBar.__originalHTML) {
nativeBar.__originalHTML = content.innerHTML;
}
// Build inner content with a button that matches site fonts
content.innerHTML = `
<div class="edge-annc-inner" style="display:flex;gap:.75rem;align-items:center;justify-content:center;flex-wrap:wrap;">
${messageHTML}
<button type="button" class="edge-annc-close" aria-label="Dismiss" style="
cursor:pointer;padding:.4rem .8rem;border:0;border-radius:999px;
font:inherit;line-height:1;background:currentColor;color:var(--edge-annc-btn-fg, #fff);
">${ctaText}</button>
</div>
`;
// Make sure bar is visible (some templates collapse it when empty)
nativeBar.style.display = "";
nativeBar.hidden = false;
// Button behavior: restore original content and optionally hide
content.querySelector(".edge-annc-close")?.addEventListener("click", () => {
// If you prefer to keep the bar area but clear message, restore:
content.innerHTML = nativeBar.__originalHTML;
// Or, to hide completely, uncomment the next line:
// nativeBar.style.display = "none";
});
return true;
};
// --- 5) Fallback: render a look-alike fixed bar at the top -----------------
const showFallbackBar = () => {
injectOnce("edge-annc-fallback-styles", `
.edge-announcement-bar {
position: fixed; inset: 0 0 auto 0; z-index: 99999;
display: flex; justify-content: center; align-items: center; gap: .75rem; flex-wrap: wrap;
padding: .65rem 1rem; text-align: center;
/* Try to blend with the site — inherits fonts/colors if possible */
background: var(--announcement-bar-background-color, #111);
color: var(--announcement-bar-text-color, #fff);
font-family: var(--font-family, inherit);
font-size: clamp(14px, 1.6vw, 16px);
line-height: 1.4;
}
.edge-announcement-bar button {
cursor: pointer; padding: .45rem .9rem; border: 0; border-radius: 999px;
background: currentColor; color: #fff; font: inherit; line-height: 1;
}
body.edge-annc-padding {
/* Avoid content jump under fixed bar */
padding-top: var(--edge-annc-height, 48px);
}
@media (max-width: 640px){
.edge-announcement-bar { padding: .6rem .8rem; }
}
`);
const bar = document.createElement("div");
bar.className = "edge-announcement-bar";
bar.setAttribute("role", "region");
bar.setAttribute("aria-label", "Announcement");
bar.innerHTML = `
${messageHTML}
<button type="button" aria-label="Dismiss">${ctaText}</button>
`;
// Insert and adjust body padding to prevent layout shift
document.body.prepend(bar);
// Measure height and set a CSS var so we can pad the body nicely
requestAnimationFrame(() => {
const h = Math.ceil(bar.getBoundingClientRect().height);
document.documentElement.style.setProperty("--edge-annc-height", h + "px");
document.body.classList.add("edge-annc-padding");
});
// Close behavior
bar.querySelector("button")?.addEventListener("click", () => {
bar.remove();
document.body.classList.remove("edge-annc-padding");
document.documentElement.style.removeProperty("--edge-annc-height");
});
};
// --- 6) Run after DOM is ready --------------------------------------------
const onReady = (fn) => {
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", fn, { once: true });
} else {
fn();
}
};
onReady(() => {
// Try native bar first; fallback if not present
if (!showNativeBar()) showFallbackBar();
});
})();
</script>
We can’t guarantee that this solution will definitely work, but you’re very welcome to try it out. If it doesn’t work or if you have any further question on this matter, we recommend you contacting the Squarespace Support. Hopefully they’ll be able to help
1 Like