Flyouts - Off Canvas Custom Content for WordPress

Flyouts - Off Canvas Custom Content for WordPress

BNE Flyouts is a premium WordPress plugin that adds hidden off-canvas content that is displayed by pushing or sliding over your page content. Flyouts or “panels” can display any type of content such as contact forms, social links, testimonials, images, social feeds, display banners, custom menus, biography, or even custom data using a shortcode you’ve created elsewhere. The possibilities are endless!

Unlimited Flyouts From Any Side

Flyout Triggers and panels can be placed on all four sides of the browser window. You can create as many as you want. The Triggers, floating buttons and images, can be hidden based on screen size or not shown at all. You can also call a Flyout using the provided classnames on any element with your page content area such as a theme button, link, image, etc.

Slide or Push to Show

Each Flyout can be shown either by “Pushing” the page content or by “Sliding” over it from any side. Use what is best for your theme design or style.

Set the Size for Each Flyout

You can set the size of each Flyout — width for Left and Right, height for Top and Bottom. Worried about it being too large on mobile? Don’t worry, if the size is larger than the screen, it will automatically go to a max-width/height of 100%.

Style each Flyout Individually

Make each Flyout unique and styled to your website design or personality. You can style the background with a solid color or image, including adjusting the font colors.

Trigger From Anywhere

Each Flyout has a unique classname allowing you to use any element on your website as a trigger. This could be a mobile nav button, image, theme button, text link, or even a menu link. All you need to do is include the classname on your element.


  • Add any type of content, HTML, text, images, iframe, Google Maps, and most shortcodes.
  • Display Custom Menus that you have created from Appearance > Menu
  • Hide Flyout trigger buttons/images based on screen sizes (mobile, tablet, desktop).
  • Restrict display of Flyouts to certain pages, post, user roles with ability to extend to further customizations with the included bne_flyout_custom_restrictions() filter. See FAQ here to get you started.
  • Link triggers (floating buttons) to other pages instead of Flyouts.
  • Automatic Updates from the WordPress Dashboard.


We will answer basic support questions on CodeCanyon. If you have any issues with running Flyouts on your website, please contact us. We cannot guarantee that there will not be any conflicts with your theme or other plugins; however, we will do our best to help you solve any issues. Download includes a pdf support document and online documentation is always available at

Plugin Requirements

  • WordPress Version: 4.0+
  • Your theme must provide wp_head() and wp_footer() hooks. These are usually found in header.php and footer.php respectively and 90% of the time already there as it’s a standard inclusion in themes.
  • Browser Support: IE 9+, Safari, Google Chrome, Firefox.


You can update BNE Flyouts automatically from your WP Dashboard or by re-downloading your purchase files.

= 1.3.5 ( October 22, 2017 ) =
* Updated: CMB2 Library to v2.2.5.3
* Updated: CMB2 Select2 library to v3.0.3
* Fix: Changed the output crop used for trigger images to full from large. 
* Fix: On iOS, the close button was going wonkers due to a webkit/iOS bug with absolute positions.
* Enhancement: compatibility with BNE Theme Framework v1.4.8+
* Enhancement: Move inline JS to the footer using wp_add_inline_script().

= 1.3.4 ( August 3, 2016 ) =
* Update: CMB2 library to v2.2.1.
* Fix: If using a Flyout trigger as a link to a page, the closing container div was missing.
* Enhance: Replace the close button within the Flyout from an anchor to a div tag to prevent possible conflicts with ajax plugins.
* Enhance: Adjust where core files are included on admin and frontend pages.

= 1.3.3 ( February 13, 2016 ) =
* New: Replaced the Flyout and Trigger color background options with an RGBA color picker allowing transparency in the background color.
* Enhance: Adjust conditional logic in admin fields, specifically in regards to the trigger type option.

== 1.3.2 ( November 21, 2015 ) ==
* Fix a bug where oembeds were not showing in the flyout.

== 1.3.1 (November 5, 2015) ==
* Correct an issue that caused a few users experiencing a server 500 (white screen) when activating the plugin.

View the rest of the changelog here.