When the Chat Button Covers Your Cookie Banner or Mobile Menu

The chat button covers other things when they share its corner. The SpideyChat launcher is fixed 20 pixels from the bottom right of the screen and stacked above almost everything, so a cookie banner's buttons, a back-to-top arrow or a sticky mobile bar in that corner ends up underneath it. Move the other element, stack it above the chat, or hide the chat on the pages where the overlap matters.

For phone layout more generally, see how to add a chatbot to your mobile site. This guide is only about collisions.

Where the widget sits on the screen

Knowing the exact footprint makes the overlap easy to diagnose:

• The launcher is a 58 pixel circle, 20 pixels from the bottom and right edges.
• The help label ("I'm here to help!" by default) sits to the left of the launcher. It's hidden automatically on screens 360 pixels wide or narrower. Shorten it with a data-help-text attribute on the script tag, or with the Launcher label setting in the WordPress plugin.
• The greeting bubble appears above the launcher a few seconds after a page loads. Once the visitor opens the chat or dismisses the bubble, it stays away for the rest of that browser session.
• The chat panel opens above the launcher and is 390 by 620 pixels, shrinking to fit smaller screens. On a phone it takes up nearly the full width.

All of these use a z-index of 2147483000. MDN's z-index documentation sums up the rule: overlapping elements with a larger z-index cover those with a smaller one. Very few site elements are set that high, which is why the chat wins.

The overlaps we see most

1. Cookie banners with buttons on the right. A full-width bottom bar puts "Accept" or "Reject" right under the launcher. On a phone the buttons often stack, and the lower one is hidden.
2. The cookie settings icon. Many consent tools leave a small round icon in a bottom corner after the visitor chooses, so they can change their mind. In the right corner it sits under the chat.
3. Back-to-top buttons, almost always bottom right.
4. Sticky mobile bars: "Call now", "Get a quote" or add-to-basket bars pinned to the bottom of the screen.
5. Bottom navigation on web apps and some mobile themes, where the rightmost tab is covered.
6. A second floating widget, such as a reviews badge or another chat tool left over from a trial.

A cookie banner is the one to fix first. Visitors need to be able to reach every choice on it, and a button they can't tap undermines the banner's purpose.

Fix 1: move or restack the cookie banner

The simplest fix is in your consent tool's settings. Most offer several layouts, such as a bar at the top, a bar at the bottom, or a box in the centre of the screen. A top bar or a centred box never meets the chat button.

If you'd rather keep a bottom bar, put it above the chat by giving the banner a higher z-index in your site's CSS, for example z-index: 2147483001 on the banner's outermost element. Two details matter:

• Raise the outermost element. MDN explains that an element with a numeric z-index starts its own stacking context, and its children's z-index values aren't compared with anything outside it. Raising a button inside the banner does nothing if the banner wrapper itself sits lower.
• The banner then covers the chat while it's open. That's the right trade: the visitor answers the banner, it disappears, and the chat is fully usable.

For the leftover cookie settings icon, most tools let you choose its corner. Pick bottom left.

Fix 2: make room for back-to-top buttons and sticky bars

For a back-to-top button, move it to the bottom left, or raise it so it sits above the launcher. The launcher's top edge is 78 pixels from the bottom of the screen, so a back-to-top button set around 90 pixels from the bottom clears it.

Sticky bars are a layout choice. Put the bar's main action in the centre or on the left so the right end can sit under the launcher harmlessly. If the bar needs its full width, raise it above the chat in the same way as a banner, accepting that the chat button is hidden while the bar shows. Or, on pages where the bar is the main action, such as a product page with an add-to-basket bar, hide the chat there entirely.

Fix 3: hide the chat on specific pages

Some pages work better without the chat: checkout, a landing page with its own fixed call to action, or a page with a full-screen app view.

• WordPress with the SpideyChat plugin: go to Settings > SpideyChat and list paths in the Hide on box, one per line, such as /checkout. The chat button is hidden on that page and everything under it. The site root can't be hidden this way, so it can't switch the chat off everywhere by accident. The WordPress integration page covers the plugin.
• Other platforms: leave the snippet out of the templates for those pages. Most builders let you add code to the whole site or to individual pages, so put it in the site-wide footer and exclude the pages you want clear, or add it page by page.

If what bothers you is the greeting bubble rather than the button, there's a lighter option. Under Proactive greeting in your chatbot's settings, "Only on these pages" limits where the greeting appears, and setting "Show after (seconds)" to 0 turns it off. The button itself stays.

Fix 4: a developer override, used sparingly

There's no dashboard setting to move the launcher to another corner. A developer can override its position with CSS that targets elements carrying the data-spideychat attribute. The widget positions its parts with inline styles, so an override needs !important, and the launcher, label, greeting bubble and panel have to move together or they'll separate. Treat it as a last resort and re-check it after any theme change. In most cases Fixes 1 to 3 are cleaner.

Test on a real phone

Desktop browsers can simulate a phone, but real phones add browser toolbars and different safe areas at the bottom of the screen. Do this on an actual phone, in a private tab so the cookie banner shows again:

1. Load your homepage. Can you tap every button on the cookie banner?
2. Make a choice, then find the cookie settings icon. Is it clear of the chat?
3. Scroll down until any sticky bar or back-to-top button appears. Is it covered?
4. Open your mobile menu. Does any menu item sit under the launcher?
5. Open the chat, send a message, close it. Does the page look right afterwards?
6. Repeat on a product or service page and on your contact page.

If the chat button doesn't show up at all on some pages, that's a different problem, covered in chat widget not showing on your website.

To change your chatbot's colour, welcome message and greeting from the dashboard without touching code, follow customize your widget. Changes reach every site where the snippet is installed, with no need to paste it again.