Starting a website?

Purpose-Built Templates

ZU2B Blueprints

Business in a Box

Reference

ZU2B Pulse™

See what visitors experience before they leave — paste any public URL and get a plain-English performance report in seconds.

Scan Your URL Free
FAQ • Support
,

Why a Button Can Be Visible But Do Nothing When You Click It

Field Note #145
🔬 Generalized 🟡 Intermediate ⏱ 30 Minutes ✓ Observation from Experience
You’ve got a chat widget, a booking button, or some other embedded tool on a page. It’s right there, fully visible, styled correctly — but clicking it does absolutely nothing. No error, no console warning you’d notice, just silence.
This one’s rarely a broken script. Far more often, it’s two copies of the same script quietly fighting over the same page.

What’s actually happening
Embedded widgets almost always rely on unique IDs in their code — something like id=”chat-button” — so their JavaScript knows exactly which element on the page to attach a click event to. That works perfectly as long as there’s only one of that ID anywhere on the page.
But if the same embed code ends up pasted in two places — say, once site-wide through a footer or plugin, and a second time hand-pasted directly onto a specific page from before that site-wide version existed — you now have two elements sharing the same ID. Browsers don’t block this (though it’s technically invalid HTML), and JavaScript’s standard way of finding an element by ID always grabs whichever one appears first in the page. Depending on which one happens to load first, the visible button you see and the one JavaScript is actually listening to can end up being two different elements entirely.

How to tell the difference
Right-click the page and choose View Page Source, then search (Ctrl+F or Cmd+F) for a distinctive piece of text from the widget — its ID, or a unique phrase from its button label. If it shows up more than once, that’s your answer: two copies exist on this one page.

The fix
Identify which copy is the current, correct one (usually the site-wide version managed through your theme, footer, or a plugin).
Remove the other, older copy entirely from this specific page’s own content.
Refresh and test the click again — with only one copy present, the ID conflict disappears and the button starts working as expected.

How to avoid it next time
Whenever you add an embed code globally — through a site-wide footer, header, or plugin — take a few minutes to check your older pages, especially anything built early on like a contact page or a landing page from before that global setup existed. Hand-pasted embed codes from “the old way of doing it” are easy to forget once a better, centralized version is in place.

Tagged in :

,

More from the field