FUSION BUILDER LIVE  Compatibility Underway!

Ticket Support Hours: Monday-Friday 9am-5pm Eastern
Please note ticket response may take up to 24-hours.

Okay
  Print

Home    Articles    Notifications & Pop-ups

Documentation: Notification & Pop-up Element

Table of Contents

  1. Software Requirements
  2. Recommended PHP Configuration Limits
  1. Installation
  2. Registration
  3. User Guide

i. Software Requirements

  • WordPress 4.6 or higher
  • PHP 5.3 or higher (5.6 recommended)
  • MySQL 5.6 or higher

ii. Recommended PHP Configurations Limits

  • max_execution_time 180
  • memory_limit 128M
  • post_max_size 32M
  • upload_max_filesize 32M

1. Installation

  1. Download the plugin from your CodeCanyon "Downloads" page
  2. Open WordPress, go to plugins, then "Add New"
  3. Click "Upload Plugin"
  4. Upload the plugin .ZIP downloaded from CodeCanyon, then click "Install Now"
  5. Activate the plugin.
  6. Go to Fusion Builder > Settings
  7. Make sure the "Notification & Pop-up" element is checked. Click Save Settings.

The element will now be available to add to your pages!

2. Registration

To enable updates including new features and bug fixes, you’ll need to register the plugin. 

After the plugin is activated in the WordPress plugin list, a notification bar will appear near the top of the screen with registration instructions. Once that process is complete, plugin updates will be activated. 

If for whatever reason the notification bar does not show up, you can also register by clicking "Registration" underneath the plugin name. This registration link will only show up if the plugin is activated. 

You can check for updates by going to the WordPress plugin list, and clicking "Check for updates" below the plugin description. 

3. User Guide

This element is designed to be used with the Fusion Builder page builder interface. 

Quick Start Guide

  1. Click the "+ Element" button, then "Notification & Pop-up"
  2. Open the element's settings
  3. Use the fields provided to add the popup content, and customize other settings as needed. Note there is an "Animation" tab where you can set an intro animation to draw attention to the element when it comes in to view.
  4. Click "Save" to apply the changes
  5. Update the page and view it to see the results!

Positioning the Notification

  1. Open the element's settings
  2. Under the "General" tab, select an option from the "Position" dropdown. "Inline" will display the notification alongside page content. All the other options will float the element in a fixed position above the page content.
  3. Click "Save" to apply the changes
  4. Update the page and view it to see the results!
  5. See also "How to Use Custom Dimensions" below

Smart Hide Feature

  1. Open the element's settings
  2. Under the "General" tab, set "Enable Smart Hiding" to "Yes"
  3. Next to "Smart Hide Duration", enter the number of days you want the notification to hide after the user has closed it. This feature stores a cookie in the user's browser to track how long the notification should stay hidden for.
  4. Click "Save" to apply the changes
  5. Update the page and view it to see the results!

Open via Link Feature

You can open notifications by clicking a link that matches the element's CSS ID setting. This is useful for triggering popups from buttons. This feature opens up a huge array of possibilities; for example, you could add a thumbnail to your page, link it to the notification, and insert a YouTube video in the element's content.

  1. Open the element's settings
  2. Under the "General" tab, fill in the CSS ID field with a unique name. Do not use any spaces.
  3. Set "Show Automatically?" to "No"
  4. Click "Save" to apply the changes
  5. Add a link somewhere else on the page. This could be from a text link, linked image, or button. Set the link to match your CSS ID, and prefix it with a hash (#). For example, if you entered "mypopup" as the CSS ID, you would set the link to #mypopup.
  6. Update the page and view it to see the results!

Walkthrough: Create a Full Width/Height Pop-up

You can override the default width and height and specify your own sizing. In this example we'll be creating a pop-up with full width and height.

  1. Click the "+ Element" button, then "Notification & Pop-up"
  2. Open the element's settings
  3. Set the "Position" to "Center"
  4. Switch to the "Design" tab
  5. Set "Show Overlay" to "Yes" and customize the "Overlay Color" if you'd like
  6. Set "Override Dimensions" to "Yes"
  7. Set "Width" to "100%"
  8. Set "Height" to "100vh" - note that percentage values are not currently supported for height. Use vh units instead.
  9. Click "Save" to apply the changes
  10. Update the page and view it to see the results!

Responsive behaviour

Sizing note: the Notification & Pop-up element is responsive, and will scale to fit the width of its container if position is set to inline. Floating elements will scale to fit the width of the browser if custom dimensions are not set.