Short answer: A chat widget lets visitors ask a question without leaving the page. Add it with care: many widgets load their code with every page, and an open button or window can hide links. Load the real chat only when someone uses it, and keep it clear of the content and the cookie notice.
Why a chat widget can slow your pages
Many chat widgets are third-party embeds that load their code with the page, even if nobody opens the chat. web.dev notes that many popular embeds include over 100 KB of JavaScript, sometimes up to 2 MB. Chrome’s developer docs list chat widgets among the embeds that can use the facade pattern.
A facade is a static element that looks like the embed but doesn’t work yet, so it is much less taxing on the page load. The real widget loads when the visitor interacts with it. web.dev gives the same advice for chat widgets, video players and social media widgets.
That has a cost. Chrome’s docs note that a facade doesn’t have every feature of the real embed: a badge with the number of new messages, for example, appears only once the real widget loads.
| What can go wrong | Why it happens | What to do |
|---|---|---|
| Slower pages | The widget’s code loads with every page, even when nobody opens it | Show a light facade and load the real chat on interaction |
| Hidden links and buttons | The button or the open window sits over the page | Keep a clear corner and check a focused item is never fully hidden |
| Two layers on a phone | The chat button and the cookie notice compete for the same space | Show the chat once the notice is answered |
| Late features | With a facade, some features wait for the real widget | Check what your chat shows before anyone opens it |
Based on Chrome for Developers, web.dev and W3C, read November 4, 2026.
Don’t let the chat cover the page
A chat button stays on screen as visitors scroll, so it can sit over links and buttons near the bottom. WCAG’s Focus Not Obscured (Minimum) criterion asks that when an item receives keyboard focus, it isn’t entirely hidden by content the site added.
W3C notes that a chat window that stays open until the visitor closes it can fail this rule. It adds that such patterns can be designed to pass, for example by letting the visitor move between layers with a key.
The cookie notice is the other layer to watch. W3C says a cookie banner built as sticky content fails the same rule if it entirely hides a focused item. Our cookie consent banner guide covers how to keep it out of the way.
How to add a chat widget the right way
- Decide what the chat is for and who will answer it.
- Put the button in a corner where it doesn’t cover links, buttons or the cookie notice.
- Load the real widget with a facade, so its code downloads only when a visitor uses it.
- Check what the facade can’t show, such as a count of new messages.
- On phones, show the chat after the visitor answers the cookie notice.
- Tab through the page with the chat open and check the focused item stays visible.
- Run Lighthouse before and after, and compare.
Our website speed guide covers how to measure the load, and our keyboard navigation guide covers how to test with the Tab key.
How our own chat behaves
Our site has its own chat, a button in the bottom right corner: 150 by 52 pixels on a computer and 56 by 56 on a phone. On November 4, 2026 we opened our pages as a new visitor to see how it behaves.
On a phone, the button stays hidden while the cookie notice is open and appears once the visitor answers it, so the two never cover the screen at once. On a computer it sits above the open notice without covering it and moves back down once the visitor answers.
On October 28, 2026 we fixed a case we had missed: on first visits, with the notice open, the button covered the Back to top link at the bottom of our pages on screens 600 pixels and wider. Extra space under the footer while the notice is open cleared it in all 32 views we checked.
Until the evening of November 4, every page also downloaded the chat in its first two seconds, about 29 to 30 KB over the wire, before anyone touched the page. Now it loads on the first scroll, tap or key press, or right before its automatic greeting is due. In the first two seconds on our home page, a new visitor gets only the chat’s settings, 1.7 KB. The script, about 24.5 KB, comes with the first scroll, and the button keeps the same size and place throughout.
Before you switch on a chat widget
- Someone will answer, and visitors know when.
- The button doesn’t cover links or buttons.
- It doesn’t sit on top of the cookie notice.
- The real widget loads only when someone uses it.
- Keyboard focus stays visible with the chat open.
- You measured the page before and after.
RememberA chat should help visitors, not stand in their way. Keep it light until someone uses it and keep it off the content.
Adding chat to a site without slowing it down is part of our web design service.
Quick answers about chat widgets
Does a chat widget slow down my website?
It can, because many chat widgets load their code with every page. Chrome’s developer docs list chat widgets among the embeds that can use a facade, a light stand-in that loads the real widget only when the visitor interacts with it.
What is a facade for a chat widget?
A static element that looks like the chat button but doesn’t work until the visitor uses it. Chrome’s docs say it’s much less taxing on the page load than the real embed, which loads when the visitor interacts.
Do I lose anything by loading the chat later?
Some features wait. Chrome’s docs give an example: a chat bubble’s badge with the number of new messages appears only when the real widget loads. Check which features your chat shows before anyone opens it.
Can a chat window be an accessibility problem?
It can. W3C notes that a chat window that stays open until the visitor closes it can fail Focus Not Obscured if it fully hides the item that has keyboard focus. It adds that such patterns can be designed to pass.
Should the chat button sit on top of the cookie notice?
Better not. W3C says a cookie banner that is sticky content fails Focus Not Obscured if it fully hides a focused item. Keep the chat button clear of the banner, or show it once the visitor has answered.
Sources
Read on November 4, 2026. Chrome for Developers: Lazy load third-party resources with facades. web.dev: Best practices for using third-party embeds. W3C: Understanding SC 2.4.11. Our case: our website chat, opened as a new visitor on November 4, 2026, and the fix we made on October 28, 2026.