Float Any – Documentation

On this page hopefully we help you with all the answers you may have with Float Any plugin.

Installation

Pro version works as an addon over the basic plugin. So, in anyway you have to install the basic (free) version.

Basic version (Automated Installation)
Search for the plugin and install it

From your WordPress dashboard, navigate to the Plugins -> Add New, then search for the “Float Any”. Install a plugin and then you’ll be prompted with a new button to activate the plugin.

Premium version installation
Upload a plugin through the WordPress interface

We sell the plugin over the Codecanyon market place. Download the purchased plugin from the Codecanyon. Go to the “Plugins” section of your WordPress admin dashboard. Click on the “Add new” and chose “Upload plugin” button.

Manual Alternative

Alternatively, install the plugin(s) by uploading the files manually to your server. This is for developers and those comfortable working in such environments:

  • Download the plugin
  • Then, upload the files to the plugin directory of your WordPress installation

Activate the plugin(s)

Activate a plugin

Now, go to the dashboard of your site and visit the Plugins section. Activate Float Any Pro. If not already done, activate the basic plugin as well.

Global settings

Navigate to the Float Any -> Settings. From this section, obviously, you can determine the common settings, i.e. those you would like to act as default. Later, from each created Float Any panel, you can override options for the particular item.

Approach Float Any global settings

These settings should be self explanatory from their titles and the most of them have further explanation accessible by hovering a mouse over a question mark in each option’s top-right corner.

Create Float Any panel

In the WordPress admin area go to the Float Any -> Panels.

Once you’re in the Panels section, there you can start by clicking on the button “Add new”.

Create a new Float Any panel
Add a new Float Any panel

In the panel’s post area you should add content and adjust the panel’s settings.

Publish a new Float Any panel

What ever you add as a content will appear in the Float any panel. After you have added the content, simply hit the “Publish” button just like with the regular WordPress’ post.

You see, what you create here can be a common menu, info bar, call to action message, newsletter popup panel, etc.

Display a panel

With the basic plugin’s version all the panels are loaded instantly over the whole site. On the other hand with the plugin’s Pro version there are other options, so let’s explore them.

Enable/disable instant loading over the site

1. Site Overall Loading – enabled is the default behavior and the only conduct with the free version of the plugin, while with the Pro version you can disable this option which gives you the opportunity to use other displaying options and to load the Float Any panel on a single page or on the template

Publish float any through the WordPress block interface

2. WordPress editor (Block) – Use the WordPress’ block interface and search for the “Float Any”, then simply select previously created panel. This will generate the shortode serving all the settings you have already set for that Float Any panel

publish with shortcode

3. Shortcode – use the shortcode {floatany id=""} to insert the Float Any’s panel even outside the WordPress’ block interface. Just make sure to use square brackets instead of the curly


Basic settings

FloatAny settings - basic settings

The simple interface guides you to complete the FloatAny panel’s settings. Reach all the basic options through the panel tabs. We’ll explore one by one.

Basic settings > tab: Start (General)

FloatAny settings - general tab

Set the most basic and the most important options at the same time.

Available options:

  • Location – set in which part of the browser, the panel will be shown: left topped, left centered, left bottomed, center topped, center, center bottomed, right topped, right centered, right bottomed
  • Showing style – adjust in which way the panel is revealed on the site. Options:
    • Bump in (default) – The panel appears abruptly
    • Fade in – The panel is shown slowly by fading in
    • Slide in horizontally – On its appearance, the panel is transitioned from aside to its location
    • Slide in vertically – On its appearance, the panel is transitioned from top/bottom to its location
  • Z-index – determine the stacking order of the panel considering other elements on the site. Useful if something is overlapping the panel, simply give it higher z-index to override it in this regard
  • Panel type – Basically, set the way the panel is opened and closed. Options:
    • Toggler – Panel comes along with the toggle-button, which allows revealing and hiding a panel, while the toggle-button always stays visible
    • Igniter – similar to Toggler option, toggler-button will reveal and hide the panel. The difference is that, here with Igniter, the panel is initially closed
    • Closer (on click) – A panel can be closed with a click on the button which appears along or inside the panel
    • Closer (on mouse out) – first the mouse’s pointer has to enter the panel and once it’s out, the panel will be closed
      • Label mark for closing – this is the sub-option of the Closer (on mouse out), means that closing label (“Move out to close”) will be added once the mouse pointer enters the panel.
  • Panel roles – set additional behavior for the panel. Options:
    • Hidden – The panel won’t be visible on the page’s load, you have to trigger it with a button (Pro version) or use it in combination with the next option – ExiterThis option is available as a subordinate with panel type options “Closer (on click)” and “Closer (on mouse out)”
    • Exiter – The panel will be shown once the user’s mouse approaches its browser’s address bar or tab’s closing button – This option is available as a subordinate with panel type options “Closer (on click)” and “Closer (on mouse out)”
    • Banish – Once the panel is dismissed, it won’t be shown again until the user clears its browser’s cache. Useful for the Cookies notice or similar – This option is available as a subordinate with panel type options “Closer (on click)” and “Closer (on mouse out)”
    • Rotator – works as a notification system by rotating the top level items inside the panel. You can set unlimited items and all items you set one beneath each previous as a top item, no matter is it a group block, gallery block or a simple paragraph block, will be considered as a notification item.
      • Note 1: There’s one exception to the top level item rotation rule, or more precisely an addition. You can parse the query block, e.g. “latest posts”, to show each post item as a notification. This will also apply to Woocommerce blocks, e.g. “Best selling products” block. Actually it will work for any block that has a HTML structure “.some-block > ul > li“, e.g. “.wp-block-product-best-sellers > ul > li” or “.wp-block-query > ul > li” – all you have to do is add a class “fany-rotator-parentor” to the block you wish to parse, again Woocommerce’s “best selling products” block or core WordPress’ query block are excellent examples and they actually become “.wp-block-product-best-sellers.fany-rotator-parentor > ul > li” or “.wp-block-query.fany-rotator-parentor > ul > li”. If you aren’t a developer or a web designer, you do not need to know all these things regarding the HTML, you just need to know that the targeted block is a list. In essence, just add a class “fany-rotator-parentor” to the block (e.g. WordPress query block or Woocommerce block) you wish to parse. This marks the block as one that has children items to rotate
      • Note 2: From the Appear restriction options tab, you cannot use scrolling events when the “Rotator” role is selected, it isn’t compatible
      • Note 3: If you’re embedding some HTML, e.g. 3rd party form, using the core WordPress’ custom HTML block, usually it is the best to encompass the code within the div, e.g. <div class=”mydiv”>embed code</div>. This is to bypass some silly popup interfering by marking the embedded code as a whole, i.e. one notification item
      • Rotation – on timeThis is the Rotator’s subordinate option. Set how long each notification item will be kept as visible until switched by the next one (in seconds)
      • Rotation – off timeThis is Rotator’s subordinate option. The time between the two notification items (in seconds)
      • Rotation – user’s closing pauseThis is the Rotator’s subordinate option. Optionally, expend the “Rotation off time” if the Website visitor is closing the notification item (in seconds) – This option is available as a subordinate with panel type options “Closer (on click)” and “Closer (on mouse out)”
      • Repeat rotationThis is the Rotator’s subordinate option. Set would the notification items will keep showing all over again in an endless circle. Default is disabled, i.e. the last notification item will close the rotation

Advanced options (Pro version):

  • Site Overall Loaded (Enabled/Disabled) – Here you can disable the appearance of the panel over the site, which allows you to use the panel in particular areas of the site, e.g. embedding a shortcode in a template part or inserting it for a particular page
  • Add classes – if you’re a developer, you may want to assign additional classes

Basic settings > tab: Colors

FloatAny settings - Colors tab

Set the colors/backgrounds for the panel.

Color options:

  • Panel’s background
  • Panel’s text color
  • Closer/toggler background
  • Closer/toggler color

Basic settings > tab: Sizes

Float any settings- Sizes tab

Set the panel sizes and dimensions.

Sizes options:

  • Width – Optionally, set the width of the panel in px, em, rem or %. If left empty the panel will take content’s width
  • 100% height – Set the panel to extend to the browser’s 100% in height, otherwise it will take content’s height
  • Width (large screens) – Optionally, overwrite the width for the large screens
  • 100% height (large screens) – Optionally, overwrite the height for the large screens
  • Padding – increase, decrease or eliminate the spacing encompassing the panel. Default is 1.5em
  • Border – set each border size, color and style
  • Border radius – shape the panel’s corners by setting the size of the border radius

Basic settings > tab: Toggler

FloatAny settings - toggler tab

Adjust the toggler/closer button options for the panel.

While in the Start tab you can define a “Panel type” which lays the role of the toggler/closer button and determines does it appear at all, however, here you set the way the toggler/closer button is showing and its style.

Togler/closer options:

  • Unset toggler/closer – remove the default toggle/close button from the panel. The common usage would be with “Closer” panel types, since you can utilize the in-content closer button. It isn’t recommended to unset the default button with Toggler/Igniter panel types, unless you come with some unique solution
  • Opener icon – icon of the button that opens the panel (chose among the hamburger, arrows, plus signs) – this option requires Toggler or Igniter set as Panel Type
  • Closer icon – icon of the button that closes the panel (chose among the hamburger, arrows, minus signs) – this option requires Toggler or Igniter set as Panel Type
  • Size – set among the mini, small, normal, large, huge
  • Position – Direction – it determines the position of the toggler/closer button relative to its adjacent content panel
  • Position – Reverse order – switch the position with the content box
  • Position – Alignment – In essence, alignment takes different course in regards to the “Direction”. This means, if “Direction” is set as “Horizontal”, “Alignment” will take vertical course. And vice-versa, if “Direction” is set to “Vertical”, “Alignment” will take horizontal course
  • Toggler/closer style – additional styling options for the button. Chose among Squared, Rounded, Inside, Bordered, Increased, Decreased
  • Trigger animation – (soon) button (icon) will rotate when clicked

Goals

FloatAny settings - Goals

The purpose of the goals is to trigger another action and to measure their accomplishment through the analytics.

Available options:

  • soon!

Conditionals

FloatAny settings - conditionals

Panels can be shown conditionally base for particular pages, specific triggers, etc. We’ll explore those options bellow.

Conditionals > tab: Particular pages

FloatAny conditionals - Pages tab

With Premium version
Limit Float Any’s panel just for the particular pages (for a single page, multiple pages, post type, archive type, etc.).

Available options (Pro version):

Apply to:

  • Post Type(s) e.g. Product
  • Post(s)
  • Page(s)
  • Blog page
  • Archive pages
  • Particular categories
  • Particular tag(s).

Conditionals > tab: Triggers

FloatAny conditionals - Triggers tab

With Premium version
Set the appearance campaign, i.e. show the Float Any’s panel based on the specific criteria.

Trigger options (Pro version):

  • Appear if element is present – Only show the panel if the element is present on the page. You have to know the id or the class of the page’s element e.g. #header, #footer, #ad-1, .banner-1 etc.
  • Appear after event – The panel will be revealed after specific event. Options:
    • time – The panel will be shown on page’s load after specified time
    • scrolling – The panel is revealed after the page is scrolled to the entered value (page’s position from the top in pixel, e.g. 400px)
    • Element enters viewpoint – The panel is shown when the specified page’s element appears is in the browser’s viewpoint
    • Beneath element’s viewpoint – The panel is shown after the determined page’s element falls out of the user’s viewpoint
      • Repeat – For the options “Element in viewpoint” and “Beneath the element in viewpoint” you can set to repeat the behavior on the same trigger element, otherwise the feature will work just once
      • Note: With “Element in viewpoint” and “Beneath the element in viewpoint” you have to set the id or the class of the page’s element e.g. #header, #footer, #ad-1.
  • On page views – set the campaign for the new Website visitors:
    • Until the (x) times – The panel will be shown until the site visitor has visited the specified number of pages. – i.e. for the first (x) page views.
    • After the (x) times – The panel will be shown after the site visitor has visited the specified number of pages – i.e. after the (x) page views.
  • User status – show the panel to “Logged in” or “Logged out” users
  • User roles – show the panel for certain user role(s) e.g. Administrator, Author, Editor, Support Agent, etc.
  • Appear for devices – determine whether to show the panel just for the mobile, desktop or all devices
  • Appear by referrer – set the campaign by domain(s) or the particular URL(s), i.e. show the panel if a site visitor is coming from specified web addresses, e.g. google.com or facebook.com – make sure to include the “www” if the referrer is including this web address prefix
  • Appear for country – name the country or countries you wish the panel to appear for
    • Appear for city – This is the subordinate option of the “Appear for country”. You can narrow down the criteria to the city, just make sure that the stated city belongs to the specified country
    • Important: The recognition of the country/city is received by utilizing the 3rd party API.
      • There are two options, Hostip and Geoplugin. You can pick the one from these two from the plugin settings (your WordPress dashboard -> Float Any -> Settings (Appear tab). Everything is communicated between your server and selected service, we do not collect any data. Which service you use is up to you, Hostip is free, while Geoplugin is free for certain usage volume, i.e. concrete geoPlugin is free within the limit of 120 lookups per minute. Your Website’s IP may be blocked if it is requesting more than this. You should look at their Website for more information if you are considering their premium services.
      • While entering the country/city name, make sure you set the value as it is named with selected service (the same country can be named differently e.g. at Hostip, we have “SERBIA AND MONTENEGRO” while at the geoPlugin for the same IP it will read “Serbia”. Also for the city, for the same IP, Hostip displays “Beograd” i.e. in Serbian language, while geoPlugin uses English and displays “Belgrade”). Make sure you check from their Websites on how they are naming the country/city you are targeting.

Conditionals > tab: Schedule

FloatAny conditionals - Schedule tab

With Premium version
Schedule the campaign, i.e. define the date and time span or either the starting point or ending point for the panel’s appearance.

Schedule options (Pro version):

  • Date start – Pick a day from the calendar
    • Time (hour & minute)
  • Date end – Pick a day from the calendar
    • Time (hour & minute)

Note: The time zone is set from the overall plugin options (Admin Dashboard > FloatAny > Settings)


Additional functions (free version)

Here are some options you can use additionally for the Float Any panel.

In panel toggler/closer

To use the in-content buttons, just add a class to the element which is placed inside a panel. For example, this can be a button which purpose is to close a panel instead of the default Float Any’s panel closer.

close a Float Any panel with a button inside the content

Available options:

  • fany-closer – closes the panel. Recommended use is with “Closer (on click)” panel type.
  • fany-toggler – toggles the panel. Recommended use is with “Toggler” or “Igniter” panel type. You shouldn’t be unsetting the default toggler, since when this in-content class is present the appearance of the default toggler will be done automatically, i.e. while the panel is on, the default toggler will be hidden and visible when the panel is off

Add styling classes

We have added some classes that can be utilized over the site. While the additional output of the css is very small, the reason we have decided to do so is because theme can differently style basic blocks which can add unwanted spacing to the blocks or the panel itself.

WordPress block - add styling class

Those classes can be added to:

  • regular WordPress blocks
  • Float Any panel – add classes option (Pro version)

Available options:

  • fany-mt0 – force margin top 0
  • fany-mb0 – force margin bottom 0
  • fany-ml0 – force margin left 0
  • fany-mr0 – force margin right 0

Disable showing on small/large screens

Here we have classes that you can utilize over the site to hide elements for the small or large screen. Worth underlining, you can change large screen breaking point from the global settings with option Large screen breaking point.

WordPress block - disable for small screen

Those classes can be added to:

  • regular WordPress blocks
  • Float Any panel – add classes option (Pro version)

Available options:

  • dis-screen-small – disable for small screens
  • dis-screen-large – disable for large screens

Patterns

Pre-designed templates that you can insert and edit to your needs.

Access the patterns with the regular block inserter, just switch from the Block to the Patterns section. At this moment, you can pick Float Any patterns among the defaults.

With the free plugin version there are more than dozen Float Any patterns. We admit, it’s just a teaser, with the Premium version there’s much more added.


Additional functions (Pro version)

With Pro version there are few more options you can apply.

Exclude individual post/page

Here we are talking about excluding a Float Any’s panel while you are editing a certain post/page. So, while you are editing a post/page, you have the option to exclude previously created Float Any panel(s) based on their locations.

Exclude a Float Any panel from appearing on a current page

Open a panel from the content with a click/hover on element

While setting a panel, you can determine how it’s revealing on the page. Still, here’s another way to trigger a Float Any’s panel, i.e. from the page’s content either by clicking or hovering an adjusted trigger.

Open Float Any panel from the content with a click

Either set it as:

  • Linker – by adding a class “fany-linker” to an element (e.g. button, link, image, menu item), which has to be clicked to open a panel
  • Drifter – by adding a class “fany-drifter” to an element (e.g. button, link, image, menu item), which has to be hovered over to trigger a panel
add fany-linker class to set a triggering element

Note: Further you have to link to the particular Float Any panel – in details explained beneath.

Option 1 – bind to the panel’s name:

  1. Previously, you have to publish Float Any’s panel and note its name. In this example “My panel“. Make sure the panel is loading on the page, either by loading it instantly over the whole site, or inserting a shortcode on the particular page (see publishing options above). Further, most likely you’ll want to set panel role to “Hidden” so that the panel is loading on the page but it isn’t opened initially
  2. In page content, on a specific element (e.g. button, link, image, menu item) add a class “fany-linker” or “fany-drifter” and set it as an internal link to the panel, i.e “#my-panel” (the same as it was named, just with a slash instead of the space)

Option 2 – change the panel’s name (ID):

Alternatively, if you’re displaying a Float Any’s panel through the WordPress’ block interface you can give it another name, i.e. ID to the panel:

  1. Publish the panel, but make sure to disable Site Overall Loading from it’s options
  2. On the specific post/page through the WordPress’ block inserting interface search for the Float Any. Here, you’ll be presented with another option to change the panel’s default ID. Enter the name, e.g. “my new panel name”. This way the panel will be loading on this page with its new ID.
  3. Now, create a link from a page element (button, paragraph’s link, image, menu item) by linking to the panel with a new anchor “#my-new-panel-name” and add a class “fany-linker” or “fany-drifter” to this element

Position inline

While triggering a panel from the content, you can set its position to inline, i.e. next to the element (e.g. button or menu item) that invokes the panel.

Panel set inline to the triggering block

Important: First, you have to mark the element as a panel’s trigger, either as a “linker” or “drifter”. This is done by adding a class “fany-linker” or “fany-drifter” to it. Further you can add additional classes which determine panel’s direction.

Classes can be added to any WordPress block from a block’s Advanced options (native WordPress feature).

Setting a Float Any panel inline by adding a class to the WordPress' image block

Options:

  • Position inline – Just add a class “fany-inline” to set the panel close to the triggering element
  • Push to left – add additional class “fany-push-left” to push a panel to the left side of the triggering element
  • Push to right – add additional class “fany-push-right” to push a panel to the right side of the triggering element
  • Push to top – add additional class “fany-push-top” to push a panel above
  • Push to bottom – add additional class “fany-push-bottom” to push a panel beneath
  • Full row – add additional class “fany-inline-fullrow” to force displaying a panel in a full row – usually used along “Push to bottom
  • Closing mark – add additional class “fany-mark-close” to set a closing icon (x) over the triggered button once the panel gets opened

In content context (dismissive note)

You can disable floating aspect of the panel, which placed in content produces dismissive note:

Positioning in content, Float Any panel can be set a a dismissible note

Here’s how to do it:

  1. On the single page, generate the panel by inserting it from the WordPress’ block interface – search for the Float Any and select it (already described from the publishing options)
  2. Now, you’ll be presented with additional interface. Notice the option “In content context”. That’s it, switch on this option

Options:

  • In content context – place the panel in the current editing content’s context. The most common usage would be as a dismissive note

Copy coupons

In the page content, you can easily set coupon codes to be copied on the click. This is the logical addition to Float Any panels since it’s a common usage together.

There are two steps to set a coupon:

  1. set a coupon’s text – create a paragraph block containing a text. You can place it anywhere on the page, but for your reference it’s advised to be positioned next to its trigger
    • add a class to this block – “fany-coupon-text“. This is done from a block’s Advanced options (native WordPress feature)
    • from the Advanced block’s options, add a HTML anchor, e.g. “coupon-1” (Note this anchor, you’ll need it for the next step)
  2. set a coupon trigger – (e.g. a button)
    • add a class to it “fany-coupon-trigger”
    • add a link to it which starts with a sign “#” – this marks it as an internal link. Just make sure that the text after this sign is the same as the anchor of the coupon’s text block, e.g. “#coupon-1

Patterns

A collection of pre-designed templates that you can insert and edit to your needs.

The way to place a Float Any’s pattern is already described within the free patterns section. With the Premium plugin version there’s just much more patterns available.

Available Float Any pattern sections:

  • Buttons
  • Contact
  • Cookies & GDPR notices
  • CTA (Call to actions)
  • Media
  • Promo
  • Signups
  • Menus (soon – when WordPress releases the core navigation block, we’ll provide some patterns around it – should be in December 2021.)

By using our site you comply with our privacy policy. Our site is using Website cookies and those are only default cookies used by our content management system. You can read more from the privacy policy page.