AT-Float Bar — FAQ & Troubleshooting

Table of Contents

Installation & Setup
WhatsApp Button
Display & Position
Mobile & Tablet
Dark Mode
Icons & Colours
Animations & Effects
Conflicts & Compatibility
Performance & SEO
Settings & Data

1. Installation & Setup # #

The bar is not showing on my website after activation. What should I check? # #

Work through this checklist in order:

Go to Float Bar → Visibility tab and confirm the Global Switch is turned on.
Confirm at least one button is enabled on the Contact, Social, or Custom tabs. The bar does not render if zero buttons are active.
Check that the current page is not listed in the Excluded Pages field.
Check that Hide on mobile or Hide on desktop is not hiding it on your current device.
Hard-refresh your browser (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) to clear browser cache.
If you use a caching plugin (WP Rocket, LiteSpeed Cache, W3 Total Cache, etc.), clear the cache after saving settings.

This usually means the activation did not complete fully. Try the following:

Deactivate and reactivate the plugin from the Plugins page.
Confirm your WordPress user account has the Administrator role — the menu is only visible to users with manage_options capability.
If you are on a WordPress Multisite installation, activate the plugin for the individual site, not just network-wide.

After upgrading to a newer version, the Button Size cards look like plain text with no styling. # #

This is a browser cache issue. The admin stylesheet was updated but your browser is serving the old cached version. Fix it by:

Hard-refreshing the admin page: Ctrl+Shift+R (Windows) / Cmd+Shift+R (Mac).
If that does not help, clear your browser cache fully, then reload.
If you use a WordPress caching plugin, clear the cache and reload.

Does the plugin work with page builders like Elementor, Divi, or WPBakery? # #

Yes. The floating bar is injected directly into wp_footer and is completely independent of page builder content. It works with all major page builders and themes.

2. WhatsApp Button # #

What format should I enter the WhatsApp number in? # #

Enter the number in full international format using digits only — no plus sign, no spaces, no dashes, no brackets.

Examples:

India (+91 98765 43210) → 919876543210
USA (+1 212 555 0100) → 12125550100
UK (+44 7700 900123) → 447700900123

The plugin strips all non-digit characters automatically when saving, but entering the correct format avoids confusion.

The WhatsApp button opens the web browser instead of the WhatsApp app on my phone. # #

This happens when the WhatsApp app is not installed on the device, or the number format is incorrect. Verify your number is in the correct international format (see above). If the app is installed and the format is correct, the operating system should intercept the wa.me link and open the app directly.

On desktop, I want the button to open the app, not the web version. Is that possible? # #

By design, the plugin opens web.whatsapp.com on non-touch (desktop) devices for a better user experience — the WhatsApp desktop app does not reliably handle deep links on all systems. This behaviour is built into frontend-script.js and is not currently configurable from the admin panel. If you need to change this, you can override it by adding the following to your theme's custom JavaScript:

document.querySelector('.afb-btn-wa')?.removeEventListener('click', null);

Note: this is an advanced override and may require a custom JavaScript snippet plugin.

The pre-filled WhatsApp message is not appearing when the chat opens. # #

Pre-filled messages require the WhatsApp app or web interface to support the text= URL parameter. This works reliably on:

WhatsApp for Android (all recent versions)
WhatsApp for iPhone (iOS 10+)
web.whatsapp.com (desktop)

It may not work on very old app versions. Also check that your message does not contain special characters that might break the URL — the plugin URL-encodes the message on save.

The WhatsApp pulse animation is not showing. # #

The pulse ring animation is automatically hidden in Edge Panel (Right/Left) and Mobile Bottom Bar modes — it does not render well in those layouts. It is only visible in Float Right, Float Left, and Bottom Row positions. If you are using a floating position and it still does not show, confirm the Pulse Ring Animation toggle is enabled in the WhatsApp section and that prefers-reduced-motion is not active in your browser or OS accessibility settings.

3. Display & Position # #

What is the difference between Float Right and Edge Panel Right? # #

Float Right shows rounded buttons stacked vertically, floating with a gap from the right edge of the screen. The buttons have a box shadow and appear to float above the content.

Edge Panel Right shows a frosted-glass sidebar that sits flush against the right edge of the screen — no gap. Icons are shown in the button's brand colour against the panel surface (light or dark). It looks like a built-in browser sidebar.

Use Float positions for a classic contact button look. Use Edge Panel for a more minimal, integrated appearance.

The bar renders with z-index: 9000. If another element appears on top of it, increase the bar's z-index in your theme's custom CSS:

#afb-wrap { z-index: 99999; }

If the bar is covering another element (like a cookie notice), either increase the cookie notice's z-index or adjust the Bottom Offset setting in Appearance → Offset & Effects to move the bar higher up the screen.

Can I change the z-index of the floating bar? # #

The z-index is not configurable from the admin panel in v1.x. Override it in your theme's Additional CSS (Appearance → Customize → Additional CSS):

/* Lower z-index if bar conflicts with a modal */
#afb-wrap { z-index: 8000; }

The bar is visible in the WordPress admin pages too. # #

The plugin only renders on the public frontend. If you are seeing it in the admin area, it is likely a different plugin or theme element. AT-Float Bar explicitly checks is_admin() and only enqueues frontend assets on public pages.

How do I hide the bar on my homepage only? # #

Find your homepage's post/page ID (edit the page in WordPress — the ID is in the URL: ?post=123), then enter that ID in Visibility → Excluded Pages.

If your homepage is set as a "static front page" in WordPress Settings → Reading, it will have a standard page ID that can be excluded the same way.

4. Mobile & Tablet # #

What exactly does the "Mobile & Tablet Override" toggle do? # #

When this toggle is enabled, any screen with a width of 768 px or less (smartphones and most tablets in portrait mode) will show a full-width bottom navigation bar instead of the desktop position you have selected. The desktop position (Edge Panel, Float Right, etc.) is completely unaffected — it continues to show exactly as configured on larger screens.

Think of it as two separate layouts for two separate screen sizes, controlled by a single toggle.

I enabled the mobile bottom bar but it is covering content at the bottom of my pages. # #

Add approximately 80 px of bottom padding to your page body. In WordPress Appearance → Customize → Additional CSS:

@media (max-width: 768px) {
    body { padding-bottom: 80px; }
}

Adjust the value based on your button size setting (Small = ~65 px, Medium = ~75 px, Large = ~85 px).

How many buttons should I use in the mobile bottom bar? # #

3 to 5 buttons is the recommended range. At 6 or more buttons, each icon becomes too narrow and labels get cut off on standard phone screens. The ideal setup for most businesses is 3–4 buttons: WhatsApp, Phone, and 1–2 key social or custom links.

The mobile bottom bar shows on my iPad but I want it to show only on phones. # #

The breakpoint is currently fixed at 768 px. Most iPads in portrait mode are 768 px wide (iPad mini, older iPads) or slightly above (iPad Pro). To target phones only, override the CSS breakpoint in your theme's Additional CSS:

/* Override: show mobile bar only below 480px instead of 768px */
@media (min-width: 481px) {
    .afb-mobile-bottom {
        /* Reset mobile bar back to desktop position styles */
        position: fixed;
        bottom: var(--afb-bottom);
        left: auto;
        width: auto;
    }
}

This is an advanced override. A configurable breakpoint option is planned for a future release.

5. Dark Mode # #

I set Dark Mode to Auto but the panel is still showing in light mode on my dark website. # #

The Auto setting follows the operating system or browser dark mode preference — not your website's colour scheme. If the visitor's OS is set to light mode, the panel surface will be light even if your website is dark.

If you want the panel to always match your dark website, set Dark Mode to Always Dark instead of Auto.

Does Dark Mode affect the floating buttons? # #

No. Floating button colours are set individually per button (WhatsApp green, Facebook blue, etc.) and are not changed by the dark mode setting. Dark mode only affects the surface backgrounds of Edge Panels and the Mobile Bottom Bar, plus tooltip colours.

The frosted glass effect is not showing on the Edge Panel. # #

The frosted glass effect uses the CSS backdrop-filter: blur() property. It is supported in Chrome 76+, Safari 9+, and Edge 79+, but is not supported in Firefox by default (users can enable it in about:config). In Firefox without the setting, the panel background will appear as a solid colour instead of blurred glass — this is expected behaviour and still fully readable.

6. Icons & Colours # #

The icons on the floating buttons are invisible — I can only see the coloured circle. # #

This is a known issue fixed in v1.2.0. If you are on an earlier version, update to v1.2.1 or later. The cause was an inline color: style on the button element that set the icon colour to the same colour as the background, making it invisible. The fix removes the inline color: property so the CSS color: #fff rule correctly applies to icons in floating positions.

Can I use my own custom SVG icon for a button? # #

Not in the current version. Custom buttons (C1 and C2) offer a selection of 6 preset icons: Map/Location, Info, Link, Star, Heart, Bell. Support for custom SVG upload is planned for a future release.

I entered a hex colour code in the colour field but the button is not changing colour. # #

Make sure the hex code includes the # symbol (e.g. #FF5733) and is a valid 6-character hex colour. The text field is synced to the colour picker — you can also click the colour swatch to use the visual picker. After entering the colour, click Save Settings and hard-refresh the frontend page.

7. Animations & Effects # #

The entrance animation is not playing. # #

Check the following:

Confirm Entrance animation is enabled in Appearance → Offset & Effects.
The animation plays only once on each page load. Refresh the page to see it again.
If your OS or browser has Reduce Motion accessibility setting enabled, all animations are disabled by the plugin out of respect for that preference.
Some aggressive caching or JS-deferring plugins may delay the animation trigger. Try temporarily disabling your caching plugin to test.

Can I disable the animation for specific buttons only? # #

No — the animation toggle applies to all buttons simultaneously. Selective animation is not available in v1.x.

Check that Tooltip labels is enabled in Appearance → Offset & Effects. Tooltips are automatically hidden on touch devices (smartphones, tablets) — this is intentional because hover does not exist on touch screens. Tooltips are also hidden in Mobile Bottom Bar mode because the label text is already visible below each icon.

8. Conflicts & Compatibility # #

The settings page is not saving — I click "Save Settings" but nothing happens. # #

This is almost always caused by a JavaScript conflict with another plugin or theme. Debug steps:

Open your browser's developer console (F12 → Console tab) and look for JavaScript errors.
Try deactivating other plugins one by one to identify the conflict.
Try switching to a default WordPress theme (Twenty Twenty-Four) temporarily.
Ensure your WordPress admin URL has not changed — some security plugins change the admin URL, which can break AJAX requests.
Check that your server is not blocking POST requests to admin-ajax.php (some WAF/firewall rules do this).

I use WP Rocket / LiteSpeed Cache. Do I need to configure anything? # #

After saving your Float Bar settings, clear your caching plugin's cache so the updated settings reach visitors. For most setups no special configuration is needed. However, if your caching plugin has a JavaScript minification/combine feature, and the save button stops working, try excluding at-float-bar from JS minification in your cache plugin's settings.

I use a security plugin (Wordfence, iThemes Security). The save is failing. # #

Some security plugins block AJAX requests that they consider unusual. Check your security plugin's firewall log for blocked requests containing action=afb_save and whitelist that action if present.

Does AT-Float Bar conflict with other floating button plugins? # #

It should not conflict functionally — the plugin uses a unique ID (afb-wrap) and prefixed CSS classes (afb-*). However, having two floating bars active simultaneously is a bad user experience. We recommend using only one floating bar plugin at a time.

Is AT-Float Bar compatible with WPML or Polylang? # #

The plugin is translation-ready (all strings use __( '', 'at-float-bar' ) and esc_html_e()). However, in v1.x, settings such as the pre-filled WhatsApp message and button labels are stored as single values — they cannot be set differently per language. Multi-language settings support is planned for a future Pro version.

9. Performance & SEO # #

Will the plugin slow down my website? # #

No, the impact is negligible. AT-Float Bar loads one small CSS file (~14 KB gzipped) and one small JS file (~2 KB gzipped) only on pages where the bar is active. There are no database queries on the frontend beyond the single get_option() call that WordPress automatically caches. There are no external CDN requests, no font loads, and no tracking scripts of any kind.

Does the plugin affect my Core Web Vitals (CLS, LCP, FID)? # #

The bar is injected via wp_footer at priority 100 — after the main page content has loaded. It uses position: fixed so it does not affect document flow or cause layout shifts (CLS). Because it renders after the main content, it does not affect LCP. The JS file is small and deferred, so FID/INP impact is negligible.

Does the floating bar affect SEO? # #

No negative SEO impact. The bar is rendered in the footer of every page using semantic HTML (nav with role="complementary"). The links inside it are standard anchor tags with proper aria-label attributes. Google can crawl these links normally — they will appear as outbound links to your social profiles and WhatsApp.

Does the plugin track visitors or collect any analytics? # #

No. AT-Float Bar does not collect any user data, does not use cookies, does not make external network requests, and does not integrate with any analytics platform. It is fully GDPR-neutral.

10. Settings & Data # #

Where are the plugin settings stored? # #

All settings are stored in a single WordPress option named afb_settings in your site's wp_options table. No custom database tables are created.

If I deactivate the plugin, will my settings be lost? # #

No. Deactivating the plugin preserves all settings in the database. When you reactivate, everything will be exactly as you left it.

If I delete the plugin, will my settings be removed? # #

Yes. Deleting the plugin (not just deactivating) triggers uninstall.php, which permanently removes the afb_settings option from the database. This is a clean uninstall by design. If you plan to reinstall later, only deactivate — do not delete.

Can I export and import my settings to another WordPress site? # #

Not through the admin panel in v1.x — there is no built-in import/export feature. As a manual workaround, a developer can copy the afb_settings value from wp_options on one site and insert it into the same table on the other site using phpMyAdmin or WP-CLI:

wp option get afb_settings           # On source site
wp option update afb_settings '...'  # On destination site

An import/export feature is on the roadmap for a future release.

I need help that is not covered here. How do I get support? # #

You can reach the Altechmind support team through the following channels:

When reporting an issue, please include your WordPress version, PHP version, plugin version, and a brief description of the problem along with any browser console errors if applicable.

Website Design & Development

Software & App Development

Advanced IT Management Solutions

Cloud-Based Solutions & Services