AT-Float Bar — User Guide

Table of Contents

1. Introduction & Key Features
2. System Requirements
3. Installation
4. First-Time Setup
5. Contact Tab — WhatsApp, Phone & Email
6. Social Tab — Facebook, Instagram, LinkedIn & Twitter/X
7. Custom Buttons
8. Appearance Tab
9. Visibility & Page Exclusions
10. Saving Settings
11. Uninstallation

1. Introduction & Key Features # #

AT-Float Bar is a lightweight, high-performance WordPress plugin developed by Altechmind Technologies (OPC) Pvt. Ltd. It adds a beautiful floating contact and navigation bar to any WordPress website — letting visitors reach you on WhatsApp, phone, email, and social media with a single tap, from any page.

The plugin requires zero coding, has no external dependencies, and does not make any third-party network requests.

Key Features # #

• 9 button types — WhatsApp, Phone, Email, Facebook, Instagram, LinkedIn, Twitter/X, and 2 fully custom buttons
• 5 desktop positions — Float Right, Float Left, Bottom Row, Edge Panel Right, Edge Panel Left
• Mobile & tablet app-style bottom bar — independent override, displays like an iOS/Android nav bar on screens ≤ 768 px
• Dark mode — Auto (follows OS), Always Light, Always Dark
• Per-button hex colour picker with live preview
• WhatsApp with pre-filled message and pulse ring animation
• Hover tooltip labels, auto-positioned per layout
• Slide-in entrance animation on page load
• 3 button shapes (Circle, Pill, Square) and 3 sizes (Small, Medium, Large)
• Device visibility control — hide on mobile, hide on desktop
• Page exclusions — hide bar on specific posts or pages by ID
• WhatsApp opens web.whatsapp.com on desktop, native app on mobile
• Zero jQuery, zero CDN, zero external fonts, zero tracking
• Fully accessible — ARIA labels, focus rings, reduced-motion support
• Safe uninstall — removes all data on plugin deletion

Use Cases # #

• Small business contact bar — WhatsApp + Phone + Email visible on every page
• Academic journal or institutional website — social links and contact in one place
• Mobile app-style navigation for service businesses (Home, Store, Contact, About)
• E-commerce stores — WhatsApp support + direct store link
• Professional services — quick call and email access for client-facing websites

2. System Requirements # #

3. Installation # #

Method A — Upload via WordPress Admin # #

1. Log in to your WordPress admin dashboard.
2. Navigate to Plugins → Add New → Upload Plugin.
3. Click Choose File and select at-float-bar.zip.
4. Click Install Now and wait for the upload to complete.
5. Click Activate Plugin.

Method B — Manual FTP/SFTP Upload # #

1. Extract at-float-bar.zip on your local machine.
2. Upload the at-float-bar/ folder to /wp-content/plugins/ on your server.
3. In WordPress admin, go to Plugins and click Activate under AT-Float Bar.

Post-Installation Verification # #

• Float Bar menu item appears in the WordPress admin sidebar (below Appearance).
• Admin page loads with 5 tabs: Contact, Social, Custom, Appearance, Visibility.
• Default settings are created automatically on first activation — WhatsApp, Phone, and Email buttons are pre-enabled (but require your details to display).

Deactivating and reactivating the plugin preserves all your settings.

4. First-Time Setup # #

After activation, go to Float Bar in the WordPress admin sidebar. You will see the admin panel with 5 tabs across the top.

Recommended setup order for a new installation:

1. Open the Contact tab — enable WhatsApp and enter your number.
2. Open the Appearance tab — choose your preferred position and dark mode setting.
3. Click Save Settings (or press Ctrl+S / Cmd+S).
4. Visit your website's frontend — the floating bar should be visible immediately.
5. Return to the admin panel to fine-tune colours, add more buttons, and configure visibility as needed.

5. Contact Tab — WhatsApp, Phone & Email # #

Each contact button has an enable/disable toggle at the top right of its section. The section expands when enabled, revealing its configuration fields.

WhatsApp # #

Desktop behaviour: On non-touch devices, clicking the WhatsApp button opens web.whatsapp.com instead of the app. On mobile and tablet, it opens the native WhatsApp app directly.

Phone # #

Enter your phone number in any format (e.g. +91 98765 43210). The button generates a tel: link. On desktop, this opens the system default calling app. On mobile, it initiates a direct call.

Email # #

Enter a valid email address and an optional pre-filled subject line. The button generates a mailto: link that opens the visitor's default email client with the subject already populated.

6. Social Tab — Facebook, Instagram, LinkedIn & Twitter/X # #

All four social buttons are disabled by default. Enable each one individually and paste your profile or page URL. Each button has its own colour picker — defaults match each platform's official brand colour.

All social links open in a new tab with rel="noopener noreferrer" for security.

7. Custom Buttons # #

Two fully customisable buttons are available under the Custom tab. Use these for any URL — your store, booking page, directions, portfolio, or anything else.

Tip: If you are using the mobile bottom bar as a navigation bar, set one custom button's icon to Map/Location with a link to your Contact page, and another to Link for your main service page.

8. Appearance Tab # #

Select Position # #

Choose where the bar appears on desktop and larger screens. Five options are available:

Mobile & Tablet Override # #

Enable this toggle to show a full-width app-style bottom navigation bar on all screens ≤ 768 px — regardless of which desktop position you have selected. The bar uses a frosted glass surface, shows icon + label stacked, and includes safe-area padding for iPhone home indicator.

Design recommendation: This layout looks best with 3–5 buttons. With more than 5 enabled buttons, icons become too small and labels get cut off. A typical setup is WhatsApp + Phone + 1–2 social links.

Content overlap: The bar sits over page content at the very bottom. If your theme has important content near the footer, add approximately 80 px of bottom padding to your page body (via your theme's custom CSS) so nothing is hidden behind the bar.

Dark Mode # #

Controls the surface colour of Edge Panels and the Mobile Bottom Bar:

• Auto — Follows the visitor's OS/browser dark mode preference automatically.
• Always Light — White/frosted glass surface regardless of OS setting.
• Always Dark — Dark slate surface regardless of OS setting.

Note: Individual floating buttons keep their brand colours in all dark mode settings.

Button Style # #

Applies to floating button positions (Float Right, Float Left, Bottom Row). Does not affect Edge Panel or Mobile Bottom Bar.

• Circle — Fully round buttons.
• Pill — Rounded rectangle with large radius.
• Square — Rectangular with subtle rounding.

Button Size # #

• Small — 42 px
• Medium — 52 px (default)
• Large — 62 px

Offset & Effects # #

9. Visibility & Page Exclusions # #

10. Saving Settings # #

Click the green Save Settings button in the sticky bar at the bottom of the admin page. You can also press Ctrl+S (Windows/Linux) or Cmd+S (Mac) from anywhere on the settings page.

A confirmation message will appear: "✓ Saved!". Changes take effect immediately on the frontend — no cache clearing needed for the settings themselves (though a CDN cache clear may be needed if you use one).

11. Uninstallation # #

Deactivation (Plugins → Deactivate) — All settings and configuration are preserved. Reactivating the plugin restores everything exactly as you left it.

Deletion (Plugins → Delete) — Permanently removes the plugin files and deletes all settings from the WordPress database (afb_settings option). This action cannot be undone.

If you plan to reinstall later, only deactivate. Do not delete if you want to preserve your configuration.