Advanced Floating Content

Plugin Overview

Advanced Floating Content gives you the power to create eye-catching banners, announcements, and promotions that appear anywhere on your WordPress site. With its intuitive, redesigned interface, you can build professional floating content—like sticky headers, sidebars, or popups—in just minutes, without any coding.

It’s the simplest way to boost engagement, highlight offers, and guide your visitors, perfect for any website that wants to make a bigger impact.

What's New in Version 4.0

Welcome to our biggest update yet! Advanced Floating Content v4.0 delivers a completely redesigned admin experience that makes creating and managing floating content faster, clearer, and more enjoyable than ever before.

Installation

Follow these simple steps to install the plugin on your WordPress site:

License Validation

Before using the plugin, you must validate your purchase code to unlock all features and receive updates.

Steps to Validate Your License:

1. Go to your WordPress Dashboard
2. Find and click on Advanced Floating Content in the left sidebar menu
3. Click on the "Settings" panel or tab
4. Enter your Email Address, CodeCanyon Username, and Purchase Code
5. Click the "Validate License" button

License Validation Screen Example

Important fields to fill:

• Email: The email used for purchase
• CodeCanyon Username: Your account username
• Purchase Code: Found in your CodeCanyon downloads
• Validate License: Click this button after filling all fields

Where to find your Purchase Code? Log into your CodeCanyon account, go to "Downloads" tab, find Advanced Floating Content, and click "License Certificate" to view your purchase code.

Create New Floating Content

Creating floating content takes just minutes! Follow these simple steps to get started:

1

Access the Content Creator

In your WordPress Dashboard, go to Advanced Floating Content → Add New.

Quick Tip: You can also click the "Add New" button from the main floating content list page.

2

Add Your Title & Content

Enter a Title (for your reference only, won't appear on the front-end) and add your content using either:

Gutenberg Editor

Use the modern block editor to add text, images, buttons, or any content blocks.

Classic Editor

Use the familiar TinyMCE editor with formatting toolbar.

3

Save & Configure

Click "Publish" (Gutenberg) or "Publish" → "Publish" (Classic) to save your content.

Note: After saving, use the settings panels on the right sidebar to configure positioning, styling, and display rules.

Live Preview

Instantly see how your floating content will appear on your website before publishing.

Live Preview Button Location

Content Positioning & Placement

Control exactly where and how your floating content appears on the screen with precision positioning options.

Position Margins

Fine-tune the exact distance between your floating content and the screen edges. Set margins in pixels (0-500px).

Positioning Settings Interface

Key interface elements:

• Position Type dropdown - Fixed/Absolute/Scroll
• Vertical/Horizontal position - Top/Bottom & Left/Right
• Margin number inputs - Set distance from edges (0-500px)

Design & Appearance

Customize the visual style of your floating content with complete control over colors, spacing, borders, and typography.

<a href="javascript:void(0);" class="afc_std_close">Close</a>

Layout & Dimensions

Border Settings

Typography

Design Settings Interface

Key design controls:

• Close Button Settings - Type, position, and color
• Layout Controls - Width, padding, and spacing
• Border Customization - Width, style, color, radius
• Background Options - Color, image, or none
• Color Pickers - Text, background, and button colors
• Typography - Font size and color

Advanced Display Rules & Targeting

Take complete control over where, when, and to whom your floating content appears with these powerful targeting options. Fine-tune visibility based on user status, page types, devices, locations, and more.

Custom CSS Styling

Add your own custom CSS to fine-tune the appearance of your floating content beyond the standard settings.

/* Example: Custom button styling */
.afc-floating-content .custom-button {
	background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
	border-radius: 25px;
	padding: 12px 30px;
	font-weight: 600;
	text-transform: uppercase;
	box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
	transition: all 0.3s ease;
}

/* Example: Hover effects */
.afc-floating-content .custom-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(79, 172, 254, 0.4);
}

/* Example: Custom text styling */
.afc-floating-content h3 {
	font-family: 'Arial', sans-serif;
	letter-spacing: 1px;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
								

/* Mobile-specific adjustments */
@media (max-width: 767px) {
.afc-floating-content {
width: 90% !important;
max-width: 300px;
font-size: 14px;
}

/* Larger buttons for touch screens */
.afc-floating-content .custom-button {
padding: 15px 25px;
font-size: 16px;
min-height: 50px;
}

/* Adjust spacing for mobile */
.afc-floating-content h3 {
font-size: 18px;
margin-bottom: 15px;
}

/* Hide elements on mobile */
.afc-floating-content .desktop-only {
display: none;
}
}
							

.afc-floating-content {
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

								

@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}

.afc-floating-content {
animation: pulse 2s infinite;
}

								

.afc-floating-content {
background: linear-gradient(135deg, 
#667eea 0%, 
#764ba2 100%);
}

								

@media (max-width: 767px) {
.afc-floating-content {
font-family: -apple-system, 
BlinkMacSystemFont, sans-serif;
}
}

								

Custom CSS Interface

Key interface elements:

• Desktop CSS Textarea - For desktop/tablet styles
• Mobile CSS Textarea - For mobile-specific styles
• Syntax Highlighting - Color-coded CSS editing
• Live Preview Integration - See changes immediately

Animation & Motion Effects

Add engaging entrance and exit animations to your floating content with 80+ animation options across 14 categories.

<!-- Your content will automatically get these classes -->
<div class="afc-floating-content animated bounceIn">
<!-- Your content here -->
</div>

							

Animation Settings Interface

Key interface elements:

• Entrance Animation dropdown - 80+ options in 14 categories
• Exit Animation dropdown - Matching exit animations
• Category groupings - Organized by animation type
• Preview capability - See animations in Live Preview

Display Scheduling & Timing

Control exactly when your floating content appears and disappears with date-based scheduling and timing controls.

Scheduling Settings Interface

Key interface elements:

• Start Date Picker - Calendar with date/time selection
• End Date Picker - Calendar for automatic end date
• Delay Input - Seconds delay after start (0-86400)
• Calendar Icons - Click to open date picker
• Clear Formatting - Easy date entry and clearing

Countdown Timer & Urgency

Add urgency and time sensitivity to your floating content with automatic display timing and auto-close functionality.

Countdown Timer Settings Interface

Key interface elements:

• Show content after (seconds) - Delay before displaying content
• Automatically close after (seconds) - Auto-hide timer after showing
• Number inputs - Enter time in seconds (0 = disabled)

Show content after: 5
Automatically close after: 30

// Result:
// 1. Page loads → 5 second delay
// 2. Content appears → 30 second countdown starts
// 3. Content auto-closes → Total: 35 seconds from page load

							

Sticky Header & Footer Behavior

Create persistent sticky headers or footers that remain visible while users scroll through your content.

Sticky Header & Footer Settings Interface

Key interface elements:

• Sticky Mode - Enable/Disable toggle (radio buttons)
• Sticky Position - Top (Header) or Bottom (Footer) selection
• Sticky Height - Height input in pixels (0 = auto)

User Role & Access Targeting

Control exactly which users can see your floating content based on their WordPress user roles and permissions. The plugin automatically detects all user roles on your site.

Dynamic User Role Settings Interface

Key interface elements:

• Dynamic dropdown - Automatically populated with your site's roles
• "No User Roles" option - Always available for guest targeting
• Multiple selection - Hold Ctrl/Cmd to select multiple roles
• Plugin roles included - WooCommerce, membership, LMS roles appear automatically

Dynamic Latest Posts Display

Automatically display your most recent blog posts or specific selected posts within your floating content to drive engagement and increase readership.

Latest Posts Settings Interface

Key interface elements:

• Enable/Disable toggle - Turn latest posts feature on or off
• Placement options - Show before or after main content
• Posts count - Number of posts to display
• Custom post selection - Choose specific posts by ID
• Link styling - Font size and color customization

WooCommerce Product Display

Showcase your products directly within floating content to boost sales, promote offers, and increase customer engagement. Perfect for e-commerce stores using WooCommerce.

WooCommerce Product Display Settings

Key interface elements:

• Enable/Disable toggle - Turn product display on or off
• Product Type dropdown - Latest, Featured, On-Sale, etc.
• Custom Product IDs field - Manually select specific products
• Product count - Number of products to display (1-20)
• Display elements checkboxes - Image, Title, Price, Button
• Layout style - Stacked or inline display

Frequently Asked Questions

Quick answers to the most common questions about Advanced Floating Content.

Contact Support

Get direct assistance from our support team for issues not covered in the documentation.

Rating & Review Guide

Share your experience and help other WordPress users make informed decisions.