This guide provides a comprehensive breakdown of how to deploy and customize your first Floating Action Button (FAB) hub using Surface Kit.

1. Overview of Floating Actions #

Floating Actions in Surface Kit are designed to provide a “zero-friction” communication layer for your visitors. Instead of static contact pages, these buttons travel with the user, offering immediate access to WhatsApp, Phone, or Social channels.

• Unified Delivery: All 11+ action types are served via a single 50KB asset to maintain high performance.
• Modular Activation: You only toggle the specific channels you need, preventing unnecessary code execution.

2. Step-by-Step Activation #

Step 1: Enable the Surface #

Navigate to your Surface Kit Dashboard in the WordPress sidebar.

• Locate the “Floating Actions” module.
• Switch the toggle to Active. This initializes the lightweight script required to render the button hub.

Step 2: Choose Your Primary Action #

Surface Kit supports over 11 different action types. For your first button, select a primary channel:

• Direct Chat: WhatsApp, Messenger, or Telegram.
• Direct Contact: Click-to-Call or Email.
• Social Hub: Links to Instagram, X (Twitter), or LinkedIn.

Step 3: Configure Connection Details #

Enter the specific handle or number for your chosen action:

• For WhatsApp: Enter your full phone number with the country code (e.g., +977...).
• For Social: Enter your full profile URL or username as prompted by the specific field.

3. Design & UI Customization #

Using the No-Code Visual Builder, you can match the button to your brand aesthetic without writing CSS.

• Placement: Choose the screen corner (typically Bottom-Right or Bottom-Left).
• Styling: * Colors: Select your brand primary color (e.g., Surface Kit Teal) or use a gradient.
  • Icons: Choose from a library of minimalist icons or upload a custom SVG.
  • Shape: Adjust the border-radius for a sharp square look or a modern rounded circle.
• Animations: Enable subtle “entrance” animations (Fade, Slide, or Bounce) to draw the eye without being intrusive.

4. Visibility & Trigger Rules (Pro Feature) #

Available in Surface Kit Pro.

To ensure the button only appears when relevant, configure your Visibility Rules:

• Page-Level Rules: Show the “Call” button only on Service pages and the “WhatsApp” hub on the Homepage.
• Scroll Depth: Set the button to appear only after a user has scrolled 30% of the page.
• Exit-Intent: Trigger the hub when a user moves their cursor to leave the site.

5. Performance & Analytics #

Once live, you can monitor the performance of your first button directly in the Analytics Dashboard.

• Track Impressions: See how many times the button was rendered.
• Track Clicks: Identify which channels (e.g., WhatsApp vs. Call) are most effective for your audience.
• Zero Impact: Rest assured that even with multiple actions enabled, your Core Web Vitals remain protected by our unified asset delivery.

Pro Tip: For a “Smarter Engagement” experience, pair your Floating Action Button with a Surface Kit AI Chatbot to qualify leads before they reach your WhatsApp.