MaxBoxy Demo. See The Most Options Of The Plugin
On this page, you can take a look at the most of MaxBoxy plugin’s possibilities. If you have been browsing our site, you may have noticed floating boxes on particular pages and that’s a great way to see the plugin the action. However, below you’ll be able to activate specific demos and see most of the available options and fully functioning MaxBoxy demos.
Explore MaxBoxy Demo
You can select more than one MaxBoxy demo at the same time, which is simulating the real usage as well since the plugin does not limit the number of panels’ appearing on one page. However, it’s best if you first explore demos one by one. Simply select one and deselect the others. Certainly, you can try multiple selections simultaneously, however, some of them may overlap.
Demo selector
Panel Types:
Triggered from content:
InjectAny:
Note: You can achieve the same thing with Synced Patterns if extended with MaxBoxy.
More options:
More content:
Further, you can embed chatbots like you can see on our site. You are able to set a toggling icon and adjust additional options.
Panel type – Toggler
Set a panel to behave in a toggle manner. It means that a panel is initially open, and site visitors can toggle it between the open and closed regime.
DEMO: Join our Newsletter
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien ligula, porttitor in aliquam nec, condimentum vitae nisi.
Panel type – Igniter
This demonstrates the igniter option of the FloatAny panel, i.e. the panel is initially closed with the trigger button available to open it. In this demo, it is located centrally on the browser’s left side and the panel is appearing from aside at full height.
Panel type – Close with click
This is a panel type set as a closing with a click. Further, it’s set as 100% width and height. This means you can easily make a panel in full-screen size.
NEW SEASON STARTING WITH A CONFERENCE
The best time to join is now!
15% OFF
Panel type – Close with hover our
This is a panel type set as a closing with a hover out from the panel. You should notice it on the right side of the screen.
This is an example of a panel type with “Closing with hover out”.
- First the mouse has to enter the box
- When the mouse abandons the box, it will automatically close
From content panels (linked)
By default, FloatAny panels appear on the page load. Still, another option is to show the panels triggered from the content. The following examples show how it can be set. Click on each link element to see panels popup, while their positions are set from the panels’ settings.
From the image:
“Do you see over yonder, friend Sancho, thirty or forty hulking giants? I intend to do battle with them and slay them.”
— Don Quixote
Link in the paragraph:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis, velit malesuada convallis. Nunc vitae nibh vitae nulla cursus tempus.
From the button:
From content panels (on hover)
By default FloatAny panels appear on page load. Still, another option is to show the panels triggered from the content. The following examples show how it can be set. Hover on over each link element to see panels popup, while their positions are set from the panels’ settings.
From the image:
This on is closed with hover out from the panel.
Link in the paragraph:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis, velit malesuada convallis. Nunc vitae nibh vitae nulla cursus tempus.
This one is closed with a click.
From the button:
Your title here…
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This one is closed with a click.
From content panels (inline position + linked)
Position FloatAny panels inline, i.e. next to the trigger element. Click on each link element to see panels popup.
From the image:
Note: You have to close the panel in order for new position to take effect.
Link in the paragraph:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis, velit malesuada convallis.
- number 1
- number 2
- number 3
- number 4
Your title here…
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This one is set with a full row. Still, you can set the panel to take, for example, 90% of the row.
From the button:
Your title here…
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This one is set with a position on the left.
From content panels (inline position + on hover)
Position FloatAny panels inline, i.e. next to the trigger element. Hover on over each link element to see panels popup.
From the image:
This one is closed with a hover out from the panel.
Link in the paragraph:
Lorem ipsum dolor sit amet, consectetur adipiscing malesuada convallis. Nunc vitae nibh vitae nulla cursus tempus.
This one is closed with a click.
From the button:
Your title here…
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This one is set with a full row. Still, panel is set to take 50% width.
In content – dismiss a note
Note: You can achieve the same thing with Synced Patterns if extended with MaxBoxy.
With InjectAny you can place a panel inside the content while keeping the features of MaxBoxy. Here we have the example, which is a simple note and is dismissive inside the content now.
Reusable Block – the note in a lightbox
Note: You can achieve the same thing with Synced Patterns if extended with MaxBoxy.
Here we utilize the InjectAny panel inside the content which main purpose is to demonstrate a lightbox effect. Though this isn’t easy to represent in this way, i.e. triggered from the sidebar’s option, hopefully you get the point. It would be much better perceived if bumped on through scrolling the content instead of triggered.
However, the main point with the lightbox turned on with injectAny panel is that it’s appearing when you encounter the panel while scrolling the page. You can turn it off with a click or keep scrolling to get it off once the panel exits the view-port.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
In content toggler/igniter
Note: You can achieve the same thing with Synced Patterns if extended with MaxBoxy.
^ Here we have another InjectAny example. We’ve used a navigation block inside the InjectAny panel, which is actually utilizing a “Toggler” panel type and is set with “igniter” role. Click on the button above to open the panel. It could be easily the other way around, with initially open panel, but for this demo we’ve had to chose one of the options. Off course, it doesn’t has to be a navigation menu, you can toggle any content based on WordPress blocks.
It also has a sticky option enabled, so when the page is scrolled down it sticks on the browser pane’s top edge. Still, this option is relevant to the parent element’s container and since this panel is the part of the group block, i.e. part of page’s section “In content toggler/igniter”, its stickiness is only present until this group container is viewable. So there has to be enough content beneath the sticky element to represent this option. If we placed this panel outside of the group block, it would be sticking as long as there is content inside the post area. You get the point… Also, it may be useful to enable another demo beneath this one if there’s not enough content to get sticky effect.
Conditional panel
You can make any FloatAny panel conditional. Various conditions are available (like particular pages condition, User logged-in/logged-out status, events on time or scrolling, date campaign, etc.). You can see all available options in the documentations.
Example:
This is an example of the FloatAny panel’s appearance based on the condition to show it “Beneath element’s viewpoint”. You see, we have a dummy content just beneath this paragraph. While you’re scrolling down, FloatAny panel is set to appear once the image element goes out of view.
START DUMMY CONTENT
This image is the conditional trigger
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien ligula, porttitor in aliquam nec, condimentum vitae nisi. Morbi viverra dolor et sodales mattis. Proin at placerat eros, et interdum dolor. Donec id libero non metus elementum pellentesque. Ut non elit sapien. Proin lobortis rhoncus ipsum, eu lacinia ligula tincidunt in. Sed dui mi, ullamcorper vitae mi et, mollis sodales turpis. Donec at fermentum massa. Donec sollicitudin tempus sollicitudin. In congue dolor et tortor vehicula, facilisis pellentesque lorem sollicitudin. Vestibulum quis sollicitudin orci. Proin lobortis purus id augue mattis viverra. Praesent ante tellus, venenatis quis scelerisque non, mattis ac ante. Pellentesque dignissim lectus sit amet auctor commodo. Nulla quis commodo felis. Curabitur nec metus blandit, ornare erat elementum, pharetra mauris.
Pellentesque ac vehicula augue. Quisque finibus velit felis, in pharetra dolor egestas ac. Praesent eu mi odio. Phasellus non vulputate massa. Sed a diam sed odio condimentum dapibus at sed metus. Proin gravida massa quis odio porttitor gravida. Aenean nec varius lectus, vitae iaculis felis. Nunc in erat vel ligula varius sollicitudin eu a enim. Maecenas vitae pharetra sem. Sed porta, dui vel porta fringilla, enim ipsum tempus purus, a congue elit lacus quis urna. Donec sed massa volutpat, condimentum tortor vitae, tempor tellus. Phasellus iaculis tortor dui, non tincidunt sapien vulputate sit amet.
Donec bibendum ipsum sapien, vel gravida enim tristique in. Aliquam bibendum sed risus sed semper. Aenean posuere leo quis dui sollicitudin, et mollis diam tempor. Nullam vestibulum magna in malesuada auctor. Ut sit amet volutpat risus, vitae semper lectus. Phasellus lacinia efficitur nibh, sit amet volutpat leo pellentesque non. Praesent interdum purus quis nulla congue, et maximus arcu pharetra. Vestibulum libero sem, posuere at malesuada et, viverra a nisi. Sed ullamcorper, sapien at maximus semper, nisi elit vestibulum dui, ut consequat purus velit feugiat elit. Vestibulum non quam at nisl aliquet tristique sed non lectus. Nullam viverra ornare nisl, quis gravida urna gravida at.
Nunc eget est ligula. Suspendisse at mi posuere, maximus erat quis, mattis erat. Fusce porta orci eu tellus vehicula viverra. Curabitur porta vestibulum erat ut tempus. Curabitur aliquam maximus nisi, ac dignissim magna bibendum eu. Maecenas lacinia ornare ante, eu vestibulum nisi dignissim ut. Nullam ante ligula, pulvinar et leo id, aliquam euismod urna. Vivamus sit amet ultricies tortor. Phasellus quis ante aliquam, luctus neque sit amet, vestibulum odio. Etiam commodo ante ut felis laoreet pellentesque. Nullam lobortis arcu ut ligula lobortis, vel imperdiet lorem fermentum.
END DUMMY CONTENT
Rotator (notification system)
You can enable the rotation role for any FloatAny panel. With the following example there are 3 notification items, which are set to stay 5 seconds live each, while the off time span is adjusted to 3 seconds. All these options are configurable from the user interface, along with enabling/disabling close button or showing style.
Copy coupons
In the page content, you can easily set coupon codes to be copied on the click. This is a logical addition to the FloatAny’s panels and it’s meant to be used in panels usually, but nothing can stop you from using it outside of the FloatAny scope. Copy coupon examples:
This text is a coupon code
Af234X
Mailchimp and Sendinblue examples
These are “real” newsletter examples. This means that we have created the test forms at these newsletter providers, copied the generated form codes and pasted it as the FloatAny panel’s content. The purpose here is to show you how easy is to establish the newsletter signup form in a popup manner with FloatAny panel:
- with Sendinblue we literally pasted the generated form’s code from the provider in the WordPress’ custom HTML block. With FloatAny settings, “Panel Type” is set as a “Closer” option, lightbox is checked on and as a final touch padding is set to 0.
- with Mailchimp the process is almost the same, the main difference is that instead of the custom HTML block, we used existing FloatAny signup pattern with 2 columns. The first column is occupied by an image and form code from the Mailchimp is pasted in the other column.
Additional content with block plugins
Basically, there’s no limit in what you can include in FloatAny panel as long as it’s WordPress block or shortcode based. In this example we used the countdown block plugin. See the countdown in a FloatAny popup:
Limited time offer
Sections navigation
Create documentation pages or one-pager scrolling pages. Use native WordPress blocks like navigation or buttons and set it in vertical or horizontal alignment. There’s also an option to mark each link from the navigation while its section is in the view.
In this demo, its position is on the top-centered.