bluenotes supports this item


This author's response time can be up to 2 business days.

218 comments found.

Okay, so I am gonna put your feet to the fire here knowing that you appreciate every new customer and sale here on Codecanyon, right? I am ready to purchase a flyout plugin right now today and would like to know your answer to the following question:

1. What features set Flyouts apart from the competition? Specifically, what advantages does Flyouts have over competing plugins such as Ultimate Modal windows by DayesDesign and Nest by BonfireThemes? All plugins are for sale here on the Codecanyon marketplace and all around a few dollars less in price in comparison ($19-$20 respectively)?

That’s the only question I have remaining. Feel free to add ‘customer support’ as an advantage if you like but I am already convinced BlueNotes has top marks in that category given your customer reviews and how fast & straight you answered my query yesterday (nicely done, btw).

I would really like to hear your thoughts however in respect to how Flyouts compares to similar products here on CodeCanyon.

Convince me and I am your newest and most loyal customer today.

Thanks for considering my question and I hope you’re up to the challenge!

Awaiting, Cash-in-Hand… :)

Honestly, I’m not going to answer that because I feel it’s always bias to praise ones own work. I rather you look at the reviews, responses to comments, and the demo to give you an honest opinion of why something might be better or worst than the other. Besides that, I have not looked at the other plugins to justify an answer in either direction.

Fair enough. :)

From a customer standpoint, its so challenging to compare competing plugins to find out which works best for our given requirements. Without having the opportunity to get “hands-on” with the products without first committing to the purchase makes it really difficult to make a buying decision without making a few inquires first. Theres lots of trial & error with a generally abrasive and lengthy refund policy so you can understand why my question is so forward. It can get pretty extranuous and costly based on how many plugins us customers usually need for our projects, how many fall flat from being over-hyped or over-sold and how many fall to the wayside by defunct authors. I am positive sellers too have more than their fair share of sales challenges too (like pesky customers with their annoying pre-sales questions ;)

I’ve done my diligence on your product as well as the competing products to the best of my ability, and all with the information you’ve provided so I do know many of the differences between them all. I ask your thoughts in comparison not because I do not know but simply b/c YOU know your product best and may present me with additional information I didnt know about that may help me further in a decision. And…it never hurts to ask.

It’d be nice if there were a convenient answer to my question though I do accept your candor and honesty. I shall continue on my journey for the best flyout plugin that fits my needs and hope my quest finds me be back here as your newest customer soon.

Thank you for considering my question!

p.s. I have no reservations of you praising your own work as to be considered bias. I did ask you too :)


romanzy Purchased


You can set a Link color, but not a Link “Hover” color. I was trying different kinds of CSS snippets to make the Link Hover color work, but to no avail.

Can you help me out?


Hi there,

You may have to be more specific with your css. Try the following if you want to target only a particular Flyout. Change the ID to what you need it to be.
/* Flyout #240 Only */
#flyout-content-id-240 .flyout-content a:hover {
    color: blue !important;

Or this one if you want to target all of them.

/* All Flyouts */
.flyout-content a:hover {
    color: blue !important;

romanzy Purchased

Yes, that helped. Thank you very much!

Is it possible to have the push down open in it’s own Div tag? So, instead of pushing down the page elements, it just opens the flyout over the other elements on the page. Like the signup tab at the top right just under the menu on this site:

If you set the Flyout to slide over content instead of push then it won’t move the page content down. As far as repositioning the hidden flyout itself away from browser edge, that’s not possible unless you use JS and/or CSS to reposition it. This would be a customization you would need to make. The trigger on the other hand can be anywhere and anything which opens the Flyout. So you could do a custom button, or html element, like in your example add the needed flyout classname to it then it will open the targeted flyout.

Pre-sales qustion – Is it possible to have a flyout “open” and shown by default when showing the page? All of the demos show them closed and requiring action before they open up. Thanks.

There is not an option for that but can be achieved using a small JS script.

Hi, I have a pre-sale question: on your demo site there is a red tab on the left side called “Use as a Menue”. The height of this tab is maybe 1,5 inch. Question: would it be possible to make set the height of the to 100% of the page height, so that I get a bar on the left side, which is e.g. 1 inch width and as high as the page/browser window high is? Hope you know what I mean!?

Edit: maybe this helps to explains what I’m looking for: if you go to you see a white bar on the left. I would like to make my tab look like this white bar and when you click on it, the side-panel opens. Would that be possible?

It is possible, you would have to add custom CSS to reposition the existing button. Another option you have is to build out a new trigger in your theme and position it with CSS that way you have full control over it. Then apply the flyout trigger classname to it so that It will open the Flyout menu. I can help you with either approach.

Hi! Loving your plugin! 1) Is there a way that the HTML content can be fit to the browser’s full dimensions so that there’s no scrolling involved (would be super helpful as I have a long table of content that I would love not to scroll down to- coming from a visual composer design)?

I think there’s a misunderstainding. The flyout fills the whole screen but I want the content to adjust to the dimensions of the flyout, meaning there’s no scrollbars.

Can you provide a link so I can see what you’re trying to do with the content?

I’ll send some links via the support email. Thanks.


sampra Purchased

Hi, is there a way to restrict the flyout from certain pages? The current page restriction allows the flyout to appear on certain pages, but say that one would want to run it across the website except a page or 2, how can this be done?

If you want to do the opposite of the given option, you would need to use the bne_flyout_custom_restrictions() filter and add your conditional logic there. The third example in that function is what you would want to use.


While reading the comments section, I found the code you provided to make a panel open on page load and it worked perfectly!

Howhever, I need two different panels for desktops and mobile devices, and also for the desktop panel to open on page load, but for the other one to work as a regular trigger button…

I tried to work around the issue, by hiding the desktop trigger button for lower resolutions in your plugin settings and by hiding the panel with css (changing its display to none).

It looked like it would work, but it didn’t… because even though the desktop panel doesn’t show in mobile devices it’s still active and stops the trigger button I created for that resolution from showing/working.

So, what I need to do is to deactivate the desktop panel for lower resolutions, problem is I have no idea how… will you be able to help me on this?

Thank you so much for your time!

No worries. We all have to start somewhere :).


Hopefully this is the last time I’ll come here asking for help, but after hours of trying, I just can’t make the script load on a specific page only :/

I’m not sure if you’ve updated your gist in the mean time, but I noticed and tried the following code, without any luck (after changing both ids of course).

 <?php if( is_page(22) ) { ?>
                $.sidr('open', 'flyout-content-id-9');
            <?php } ?>

How sould I go about this?

Thank you and sorry for the bother!


If I remove the part of the code that makes the flyout open on page load only for desktop resolutions, the other code does the job, so I guess one is annulling the other. Problem is, I need both to work…



I think I made it work, I’m using the following code:

function flyout_open_on_page_load() {

    <script type="text/javascript">
        jQuery(document).ready(function($) {

           <?php if( is_page (12720) ) { ?>
                var isMobile = window.matchMedia("only screen and (min-width: 768px)");
            if( isMobile.matches ) {
                $.sidr('open', 'flyout-content-id-13186');
           <?php } ?>


add_action( 'wp_footer', 'flyout_open_on_page_load', 99 );

Is this allowed? :P

It looks to be working to me. You’re talking about Flyout #13186? In your functions.php you have it wrapped in is_page(12720) which is the mapa-2 page. and it works. The non the home page the calendar works as the script is not loaded there.

If you still need something or you need to go into detail, send me an email instead of here so that it’s easier to follow.


How can i have a Flyout opened by default in a specific page only(home page in my case)?


Hi there,

Check out the following gist. There are a few examples there to do what you need. Only use one of them such as the is_page() example. For your case, you would replace is_page(x) with is_front_page().

hello, I am using the latest version of your plugin but notice on mobile (iOS) that when you scroll down and then back up the Flyout close box disappears. Can you please tell me how to force the close box to stay visible? Thank you in advance. PS. I try to work these things out myself but am stuck on this one!

still testing and thought I should let you know, installed plugin on completely different website with same issue? Thanks

Hello, you’ll need to send a link to your site that has it so that I can view review it.

Hi there, seems to me that your plugin would perfectly fit my needs. But some questions regarding customization: i don’t need my flyout to be at full height, for example, at the right of the main content. It would be enough for me to have a small rectangle, centered at the right, in which i could place any content. Regarding content: do you think i can place 2-3 tabs with different content in it? And: can i place anchor links? Thanks!


To force a certain height and location, if the Flyout is on the left or right, you would need to use CSS. For your tabs, yes, you can add shortcodes, or use html to create the tabs. For the anchor links, yes. You can use links to go to other pages, and within the Flyout.

Just a thought – be cool if you could do content followed by menu followed by footer content or widgets…

Reason being i would like to have a logo at the top and possibly a click to call button then the menus followed by a row of social icons…

You can do that if you incorporate the bne_flyout_content_after action hook. So you would set the Flyout display to be Content then Menu. In the content editor, add your logo and call button. it will then be followed by the custom menu. Then with the bne_flyout_content_after hook, you can add your social icons or other content you may want using HTML, shortcodes, or theme/plugin functions.

function custom_flyout_contnet_after() {
    // Get the current Flyout ID
    $flyout_id = get_the_id();

    // If Flyout #255, add additional content.
    if( '255' == $flyout_id ) {
            <h3>Photo Gallery</h3>
            <?php echo do_shortcode('[gallery link="file" ids="107,88,85,29,48"]'); ?>
            <p>Learn more about our trips, <a href="#">link</a></p>
add_action( 'bne_flyout_content_after', 'custom_flyout_contnet_after' );


hello, I installed but I don’t find plugin option in ‘setting’. We are working with beaver builder. Is there any conflict with BB? Thanks

wonderful thanks, is there user manual? the place I found seems a bit old and not much of information. I am looking for how to add button in the page I am building with BB. Thanks

The pdf file included with the download I would assume is old, but not necessarily outdated. With that said, all updated docs can be found here on our documentation site.

For your button, I assume you’re wanting to link an element from within your page content, a button, image, or text link. On the documentation page, scroll down to the Flyout Classname section, you’ll see an example there of how to set a page element to open a particular flyout.

got cha! THANK YOU This is really an awesome plugin!!!

Just wanted to say I had my doubts about this plugin because others didn’t work. I was going to buy the slide panel plugins but this is far better. You’ve done a really nice job making it easy and it worked straight out of the box with multiple panels on a single page. Even worked flawlessly with visual composer and a content block builder.



Awesome, glad to hear it Ryan. Thank you for your purchase.

Hi, presale question: Is it possible to create a flyout with Divi builder? Or VC?

You can with VC if you enable Flyouts to be public using this gist Not sure on Divi builder. In either case, you can always build the content on a draft page and then copy their shortcodes into the Flyout editor.

I have a button on our client’s site (top red). I selected Displacement: Push Content. Seems like it’s not working in the latest version of Chrome v.59.0.3071.115, specifically it pushes content starting with banner image, not the header.

How do we fix this?

I assume you mean after you have scrolled and the header then becomes fixed to the top. At this point because it’s fixed and not relative to the page body, the Flyout would not be able to move the header.


1) what can i do to change SPEED appear of button in frontend?
By now my website button cart, compare appear around 2s
Your plugin button appear sooner 1s. I want to make sure all of them to be same
2) What can i do change icon when hover or click on icon?
Example: Normal icon is heart only. Icon changed to heart+ , after hover or click on it?

1) Sound like, you guess i’m developer. Sorry i just user wordpress. Can you give complete code for all page, but except few page?
2) “You may be able to adjust this by moving the function sooner in priority.” How?

3) The css applied for all BNF flyout? What can i do, to make it work on BNF Flyout ID-9 for example?

1- I’ve updated the gist for you. The third one shows a all except page.

2- Adjust the “99” on the last line. But this may not work and depending how high/low you go. The problem is that Flyouts itself is in the footer and not the head so as I said you probably won’t be able to get this to be at the exact same time as your page is drawn.

3 – Yes it would be applied to all. You could instead possibly include it within the JS like below
<?php if( is_page( 246 ) ) { ?>
    $.sidr('open', 'flyout-content-id-255');
    // Remove Overlay
    // Remove the Scroll Lock
    $('html,body').removeClass('flyout-lock flyout-margin');
<?php } ?>

This comment is currently being reviewed.