Apex Notification Bar – Responsive Notification Bar Plugin for WordPress – Documentation

Documentation of Apex Notification Bar

A) Installing Instructions

  1. Unzip apex-notification-bar.zip
  2. Upload all the files to the /wp-content/plugins/apex-notification-bar
  3. Activate the plugin through the ‘Plugins’ menu in WordPress.
  4. For customizing the plugin’s settings, click on Apex Notification Bar option menu in WordPress left admin menu.

Once the plugin is installed and activated you will find a menu named “Apex Notification Bar” in the left menu bar of the admin menu.Once you click on that menu , you will go to the plugin’s notification bar lists page. Basically there are 6 main settings which is individually described detaily below.
Basically there are six main settings Notification General Settings,Mailchmp API Settings,SMTP Configuration Settings,Import/Export Settings ,Constant Contact API Settings,Opt In Settings that will help you to setup the plugin default setup which is individually described below with extra notification bar components details.


B) Notification Settings

This settings helps you to control the overall plugin.This contain following main settings:

  • General Settings
  • Mailchimp API Settings
  • SMTP Configuration Settings
  • Import/Export Settings
  • 1) General Settings

    This settings helps you to control the overall plugin, you can enable or disable the plugin, enable or disable notification bar in mobile version, choose Default Top, Bottom, Left and Right Notification bar, Show notification bar on all pages or specific pages or only on home page and reset show only once bar flag to display the bar again to logged in users who have clicked the bar once.

    Apex Notification Bar General settings

    2) Mailchimp API Settings

    Apex Notification Bar Mailchimp API Settings

    In this settings, you can connect with third party subscribe form i.e to your mailchimp account where you have to set api key of your mailchimp account to get mailchimp lists data.

    3)SMTP Configuration Settings

    Notification Settings also includes SMTP Configuration Setup to send emails instead of PHP mail function.

    Apex Notification Bar SMTP Configuration Settings

    4) Import/Export Settings

    Apex Notification Bar Import/Export Settings

    In this tab you can import specific notification data from lists of bars as json file as well as export the notification bar data too.

    5) Constant Contact API Settings

    In this submenu settings of our plugin has a feature to connect with third party constant contact subscribe form to show form on your notification bar of your site.This settings helps you to connect with third party subscribe form i.e., constant contact simply creating api and access token key with your username and password as compulsory of your account in order to get lists of your subscribe form.You have to fill this sub menu form with username, password of your constant contact account and create api and token key and save the form. Then the lists of your account form will be listed on add new bar page on opt in form constant contact option of right compontents.

    Apex Notification Bar Constant Contact API Settings

    6) Opt In Subscribe Form Settings

    Our plugin has a feature to list out all the details of subscribers who have subscribes from custom subscribe form of opt in form options. Similarly,you can remove and export csv of subscriber.This settings is for managing the subscriber as well as send email to any subscriber.

    Apex Notification Bar Opt In settings


    B) Notification Bar Lists

    Once you install the plugin, you will find the Apex Notification Bar Menu on the left side admin menu bar.After you click the main menu, then you will reach at the notification bar lists page where you can find the lists of all the notification bars. On hover title of each notification bar after you created one, you can edit, delete ,copy as well as see preview of specific notification bar. If you haven’t added any bar yet, then the page will show the notification bar not added yet message.

    Apex Notification Bar  Notification Bar Lists


    C) Building Notification Bar by Pre Available Templates

    On the left side admin menu bar, you will find Add New Bar sub menu option. After you click this sub menu , you can add new notification bar.Create your new notification bar with new bar name and configure your components. There are mainly 6 toggle section on add new notification bar page which are described below more briefly:

    Apex Notification Bar  Pre Available Templates

    There are total 15 Pre Available Attractive Templates altogether which you can choose to display notification bar with different layouts, style and background color according to your site match template. Among 14 template, 1 pre available templates called Image Background provide features to display background images on notification bar. On choosing Image Background Pre Available Templates, BACKGROUND IMAGE SECTION toggle options will be shown below Logo Section toggle options where you can enable background image and upload any custom background image for specific notification bar. Whereas if choosed custom template instead of pre available template,there will be already BACKGROUND IMAGE SECTION toggle options below LOGO SECTION Toggle Options to upload background image.


    D) Building Notification Bar by Custom Design

    On the left side admin menu bar, you will find Add New Bar sub menu option. After you click this sub menu , you can add new notification bar. Create your new notification bar with new title. There are mainly 6 toggle section while adding new notification bar page which are described below more briefly:

    Apex Notification Bar Custom Design

    If you wish to styling your notification bar by urself then please create your notification bar by choosing Custom design instead of Pre Available Template options as shown on above screenshot on Notification Bar Layout Toggle Settings.
    Apex Notification Bar Custom Design2
    On choosing custom layout, extra toggle settings will be appended below DURATION TO DISPLAY NOTIFICATION BAR and above NOTIFICATION BAR POSITION toggle title named as “NOTIFICATION BARS DESIGN” where includes many customization design options such as description & read more button custom options, background color for bar, font size, font family,font color with custom preview bar and many more.

    This is main configuration settings section for custom design, you can set your own background color for notification bar, you can choose font color, font family with font size, all custom button background color with font color, success and error message color matching according to your design background color and close button or toogle button background color configuration settings.

    E) Logo Section

    Apex Notification Bar Logo Section

    Logo section is first column options where you can enable/disable logo section, upload custom logo, set custom url for logo , url target and also set custom width and height for custom logo options.

    F) Background Image Settings

    Apex Notification Bar Background Image Settings

    Among 14 pre available template, 1 pre available templates called Image Background provide features to display background images on notification bar. On choosing Image Background Pre Available Templates, BACKGROUND IMAGE SECTION toggle options will be shown below Logo Section toggle options where you can enable background image and upload any custom background image for specific notification bar.

    Whereas for Custom Design Template instead of pre available template,there will be already BACKGROUND IMAGE SECTION toggle options below LOGO SECTION Toggle Options to upload background image.

    G) Notification Components

    Apex Notification Bar  Notification Enable Components

    After choosing any pre available template or custom template option from Notification Bar Layout, there is another toggle section “Notification Bars Components” where you can choose Notification Bars Left or Right or both Components. To display left components simply check Left Components checkbox whereas to choose right components, simply check the Right Components checkbox option.

    Also , once you checked left components options , then you can add any icons on left side of your notification bar template. Similarly, if you checked right components options , then you can add another components on right side of your notification bar template. You are free to insert various components as well like social icons, email subscription form, third party such as mailchimp, constant contact ,contact us call to action with popup contact form with contact form 7 integration support, other call to action buttons such as buy now, view more button with url link etc, Twitter tweets fetch and display etc in the notification bar which enhance your influence to your visitors.

    Left Components:

    A) Add Social Icons:

    This is second components which will be shown after logo section and at left side of other right components which will be described below. In this section, you can add multiple social icons, if you have choosen pre available template on above Notification bar layout, then you can find available 20+ social icons.
    Apex Notification Bar Notification Add Social Icons Components

    a) Pre Available Font Awesome Icons:
    Apex Notification Bar Notification Pre Available Social Icons Components

    b) Custom Design Options For Custom Icons:
    Apex Notification Bar Notification Add Icons Custom Designs Components

    There is multiple options while adding custom icons for custom design templates such as

    • Social Heading Text: Fill icons header text here for specific bar such as Follow Us
    • Add Social Icon Button: Click on add social icon button in ortder to add social or any custom icons.
    • Icon Title: Fill icon title name such as facebook, twitter.
    • Select Icon: This dropdown includes available icons or custom icons for custom layout.In Available Font Icons , you can select provided font awesome icons to display whereas Custom icons will be displayed only if custom template is being choosen where you can add font awesome class such as fa fa-home.
    • Custom Design Options:
      • Social Heading Text Color: Set above header text color for custom design only.
      • Icon Size: Set each icon size for icons for custom design only.
      • Icon Background Color: Set each icon background color.
      • Icon Font Color: Set each icon font or text color.
      • Icon Background Hover Color: Set each icon background hover color.
      • Icon Font Hover Color: Set each icon font or text hover color.
    • Icon Link: Fill url link for specific choosed icon.
    • Add Icons Button: Click on add icon button to add specific icons to display it on specific bar.

    Right Components:

    B) Enable Right Components

    This is right and last section which will be shown after logo section and icons section. In this section, there are multiple components options to display on right side of notification bar such as static single content, multiple content, opt in subscribe form, twitter feeds , rss feeds , countdown timer and many more as shown on below image preview.
    Apex Notification Bar Notification Right Components

    The right components are listed below. After enabling right components, there are 9 advanced components options which are described below:

    After enabling right components, there are 9 advanced components options which are described below.

    1) Text(Custom Html Codes)

    After choosing this text html option, you can still choose 2 options: static or multiple content.

    a) Static Content Components

    Apex notification bar right components
    If you choose static content, you can add only single html text with or without call to action button which contains custom button with url link field and default contact form or contact form 7 shortcode integration or any shortcode intergration field for your notification bar. Custom button contains Link Button Text and Link Button URL field. On choosing Contact Button, Default Contact, you can input Contact Button Text,name,email,message label,placeholder,error message, success message configuration, send to mail input field to whom the details of user with their name, message and email will be send via email. Similarly, if you choose Contact Form 7 option,fill Contact Button Text and Contact Form 7 Shortcode in particular fields.

    Below is the screenshot with Call to action options for static content and full description of call to action features options:

    1) Call to action options > Custom Button:

    Apex notification bar right multiple text CTA Custom URL components
    This call to action button includes default contact form fields and contact form 7 integration as popup form display.
    This call to action option contain following fields:

    • Link Button Text: Fill valid button text such as Read More, View More etc.
    • Link Button URL: Fill valid button url link.
    • Link Button Target: Set button url target.
    • Custom Design Options:
      • Link Button Background Color: Set background color for custom button of call to action with url link.
      • Link Button Font Color: Set font color for custom button of call to action with url link.
    2) Call to action options > Contact Button:

    Apex notification bar right multiple text CTA Custom Contact form components
    This call to action button includes default contact form fields and contact form 7 integration as popup form display.
    This call to action option contain following fields:

    • Contact Button Text: Fill text for button which will work as popup contact form display.
    • Name, Email, Message Label : Fill label text for each field.
    • Name, Email, Message Placeholder: Fill Placeholder text for each field.
    • Name, Email, Message Error Message If left empty: Set error message for each field.
    • Name, Email, Message Required ?: Check enable for each field if is required.
    • Send To Email: Fill valid email address to whom users contact details to send through mail. If left empty, email will send to admin email.
    • Success Message: Set success message for frontend if user contact through this form.
    • Fail Email Message: Set error message for frontend if user contact through this form.
    Contact Form 7 Integration Options:

    Apex notification bar right multiple text CTA Custom Contact form 7 components

    This call to action option contain following fields:

    • Contact Button Text: Fill text for button which will work as popup form.
    • Contact Form 7 Shortcode: Fill Shortcode of contact form 7 which you want to display on popup form.

    3) Call to action options : Shortcode In Popup:

    Apex notification bar right multiple text CTA Custom Any shortcode components

    This call to action option contain following fields:

    • Popup Button Text: On click Popup Button Text, the shortcode implemented will be displayed on popup.
    • Shortcode: Fill any shortcode here that will be displayed on popup.
    b) Multiple Content Components

    Apex notification bar right multiple text components

    If you choose multiple content, you can add multiple html text onclick button “Add Content” with or without call to action button which contains custom button with url link field and default contact form or contact form 7 shortcode integration for your notification bar. Similary, you can choose Notification Bar Effects as slider, ticker or scroller.

    2) Opt-in form

    Apex notification bar right Opt in form components

    Opt-in form components includes 3 subscribe form. Custom Subscribe form, mailchimp form or Constant Contact Form where you can set field placeholder text, mail confirmation custom message, enable mail confirmation after user subscribed from your site. Here, you can either choose custom subscribe form, mailchimp form or constant contact form.
    In Custom Subscribe form, there are input field for form header text, button text, email placeholder, error message and success message configuration fields as well as on click Enable Check Confirmation checkbox, the email will be send to subscribers with subscribing success message and details will be send to database. You can view details on clicking sub menu “Opt-In Settings”.

    In Mailchimp form, create your api key first and fill api input field to connect to your mailchimp account at Mailchimp API Settings Tab Section of Notification Settings Page of our plugin and click on save button. After save button, Lists of mailchimp account will be listed while creating bar and choosing mailchimp opt in form as right components. Choose 1 or multiple lists shown below label “Lists of this form subscribes to”.

    Apex notification bar right Mailchimp Form components

    Similarly, In constant contact form, first of all create your constant contact account if not exist. Click on sub menu “Constant Contact API Settings” and add your account name, password, api key and access key. The information with link to create api key and access key are provided on Constant Contact API Settings” sub menu.
    Then you can choose any lists of constant contact shown below label “Lists this form subscribes to” in add form as shown on below screenshot.

    Apex notification bar right Constant Contact Form components

    Email Confirmation:

    For all subscribe form, you can find email confirmation enable section where you can enable sending email to users right after user contact us. You can fill email subject as well as email message from Write Message to Subscribe Custom Html Field to send to contact users as shown on below screenshot image.
    Apex notification bar right Email COnfirmation of Subscribe Form

    3) Twitter Tweets

    Through this components , we can display twitter feeds with different effects such as slider, ticker or scroller type on right components of notification bar. After choosing twitter tweets option, you can fill Twitter Consumer Key, Twitter Consumer Secret,Twitter Access Token,Twitter Access Token Secret,Twitter Username,Cache Period and Total Number of Feed to display your twitter tweets with any type of notification effects such as slider, ticker or scroller.

    Apex notification bar Twitter Feeds components

    4) Posts Title

    In right components section, you can even choose posts title display either by filtering by category or show recent posts according to set order. You can choose recent posts or filter by category with 3 different effects as slider, ticker or scroller effect.In Posts Title, you can select posts title of particalur category to show as slider, ticker or scroller effects.You can choose multiple posts title from multiple select fields.

    Apex notification bar Posts Title Feeds components

    Steps : Select multiple post, page from dropdown lists by filtering category and Click on ADD POSTS button. The selected posts or page lists will be displayed as shown on screenshot below which is sortable. Then save notification bar after completing all configurations.

    Apex notification bar Posts Title Feeds components

    Show Recent Posts :
    Here you can choose to show recent posts too instead on filtering category wise. You can display posts title collection with read more button and show recent posts according to set order and many other options to confiugure.

    Apex notification bar Show Recent Posts Title Feeds components

    5) RSS Feeds

    In right components section, you can even choose rss feeds posts with the help of valid rss url link.You can display rss feeds with 3 different effects as slider, ticker or scroller type.This components includes enable RSS Feeds and set valid RSS URL,text button name with url link for each rss feeds which can be shown on right components with slider, ticker or scroller effects.

    Apex notification bar RSS Feeds components

    6) CountDown Timer

    This plugin also provide features to display countdown timer as per your set time. The available options are enable/disable countdown timer, show timer description, 6 pre available beautifully designed countdown timer layouts, set timer date with animation, show custom button with url link for redirection and many more options such as show days, hours or seconds options. If you have choosed Custom Design instead of Pre available template from above Notification bar Layouts, then you can find extra custom options such as text description font color/size, options to set Timer Background Color,Font Color,Call To Action Button Background Color and Call To Action Button Font Color.

    Apex notification bar CountDown Timer components

    This components contain following options:

    • Enable CountDown Timer
    • Text Description
    • Custom Design :
      • Text Font Color
      • Text Font Size
      • Timer Background Color
      • Timer Font Color
      • Call To Action Button Background Color
      • Call To Action Button Font Color
    • Countdown Timer Layout
    • Countdown Date
    • Countdown Animation
    • Show Days/Hours/Minutes/Seconds label
    • Show Call To Action Button/ URL Link/ Link Target

    Total 6 Countdown Timer Layout Design With Screenshot:

    A) Layout 1
    Apex notification bar CountDown Timer components
    B) Layout 2
    Apex notification bar CountDown Timer components
    C) Layout 3
    Apex notification bar CountDown Timer components
    D) Layout 4
    Apex notification bar CountDown Timer components
    E) Layout 5
    Apex notification bar CountDown Timer components
    F) Layout 6
    Apex notification bar CountDown Timer components

    7) Video Popup

    This plugin also provide features to display video popup. It includes options such as video title, description,video fontawesome icon by filling class name of font awesome icon,choose video type such as youtube video, vimeo or html5 type, video url link and video popup button text. It provides 4 pre available beautifully designed video popup layouts and also extra POPUP SETTINGS such as popup animation speed for video,animation speed,theme to display video on popup and Set Width/Height for Video Popup.

    Apex notification bar Video Popup components

    Other Video Popup Settings are :

    • POPUP SETTINGS
    • POPUP CUSTOM DESIGN LAYOUT (Note: This options will only be enabled if Notification Bar Layout is choosen As Custom Design)


    Apex notification bar Video Popup components

    Total 5 Video Layout Design With Screenshot:

    A) Layout 1
    Apex notification bar Video Popup Layout 1 components
    B) Layout 2
    Apex notification bar Video Popup Layout 2 components
    C) Layout 3
    Apex notification bar Video Popup Layout 3 components
    D) Layout 4
    Apex notification bar Video Popup Layout 4 components
    E) Layout 5
    Apex notification bar Video Popup Layout 5 components

    8) Custom HTML

    This plugin also provide features to display any custom HTML that you want to display to this notification bar at right side or last column of notification bar.

    Apex notification bar Custom HTML

    9) Search Form

    This plugin also provide features to display search form. It includes options such as description,Search Input Field Placeholder,options to hide button text on search button or show only icon options, button text input field and search font icon field. It provides 5 different pre available beautifully designed Search form layout.

    Apex notification bar Search Form

    Other Search Form Settings For Custom Design are :

    • SEARCH FORM CUSTOM DESIGN LAYOUT (Note: This options will only be enabled if Notification Bar Layout is choosen As Custom Design)


    Apex notification bar Search Form Settings For Custom Design

    Total 5 Search Form Layout Design With Screenshot Preview:

    A) Layout 1
    Apex notification bar Search Form Layout 1 components
    B) Layout 2

    Without Background Image
    Apex notification bar Search Form Layout 2 components

    With Background Image
    Apex notification bar Search Form Layout 2 Background Image components

    C) Layout 3
    Apex notification bar Search Form Layout 3 components
    D) Layout 4
    Apex notification bar Search Form Layout 4 components
    E) Layout 5
    Apex notification bar Search Form Layout 5 components

    H)Notification Effects

    You can choose Notification bar effects only on multiple content, twitter tweets, post title and rss feeds. In Notification bar effects, you can make the bar more stunning with various effects. There are options for Ticker with various configurations(duration, animation, speed), Slider with various configurations(duration, animation, speed, auto) and Scroller(left, right direction) with Animation type as Reveal or fade type.You can choose any one notification bar effects to make your notification bar more attractive.

    Ticker Effect:

    Apex notificaiton bar notification bar ticker effects

    Slider Effect:

    Apex notificaiton bar notification bar slider effects

    Scroller Effect:

    Apex notificaiton bar notification bar scroller effects

    I)Advanced Feature: Open Panel Notification Bar

    This plugin provides extra advanced features to show open panel notification bar on your site. This includes enable/ disble open panel hover text,enable/disable header and footer text inside open panel section. Inside open panel section,you can add any widgets maximum availability of 3 columns section. Also if you have choosen custom templates instead of pre available template, then you can find Display Settings extra custom settings where you can set required custom options for open panel components.

    Apex notification bar Open Panel

    Custom Design For Open Panel:

    After choosing custom template instead of pre available template, you can see extra configuration options for open panel as shown on below screenshot images.
    All Configuration Options Field are:

    • Enable Hover Text
    • Hover Text
    • Open Panel Header Section:
      • Enable Header Text
      • Header Text
      • Custom Design Options:
        • Header Text Color
      • Hide Border after Header
    • Open Panel Footer Section:
      • Enable Footer Text
      • Footer Text
      • Custom Design Options:
        • Footer Text Color
      • Hide Border after Footer
    • Custom Design > Display Settings (Note: This options will be only shown if custom template has been choosed instead of pre available templates.)
      • Border Color
      • Header Tag Color
      • Background Header Color
      • Background Header Border Color
      • Description Tag Color
      • Hyperlink Color
      • Hyperlink Hover Color
    • Add Widgets Columns Settings: This section is to add widgets column wise inside open panel area.
      • Choose Columns : Choose columns for content display on panel.Maximum of 3 columns is available.
      • Add Widgets

    Apex notification bar Custom Open Panel

    Custom Design Configuration Options for Open Panel:

    Apex notification bar Open Panel

    J)Date Wise /Scheduled Notificaton Bar

    Apex notification bar datewise settings

    In this section, you can display notification bar as per date wise based. You can select start date and end date to display particular notification on specific time only.

    K)Notification Bar Positions

    Apex notification bar pro notification bar position

    In this section, you can display notification bar on 5 different position such as on top(header fixed),top absolute(not fixed), bottom(footer), left and right of your site. Top Fixed simply stick your notification bar to header even on page scroll. Top Absolute remove sticky header and simply display notification bar and will scroll out of view when page is scrolled.

    Similarly, you can choose Notification bar visibility such as Always show, show after some time with input field to Show Time Duration in milliseconds or Hide after some time with Hide time duration input field in milliseconds.

    At last, you can choose Notification bar Close Button , where you can disable, toggle(show/hide) or show close button with different layout for pre available templates.

    You can also check on Show Only Once For Logged In Users? option checkbox to enable hide notification bar forever on once click close button or on dismiss toggle button by any Logged-In Users. To reset this button enabled for all notification bar, simply go to Notification Settings and then General Settings Tab and Click on Reset Button which will reset all the saved flag or users who have once clicked the button and the bar wil be displayed again on your site for all users.


    L) Custom CSS/ Custom JS

    Here our plugin also provides features to add custom css as well as custom js for specific notification bar as per your site requirements.

    1) Custom CSS:
    Apex notification bar Custom Css
    2) Custom JS:
    Apex notification bar Custom JS

    L) Page/Posts Wise Settings

    Apex Notification bar Page wise Settings

    Our plugin has a feature to select the notification bar in your site in your page, posts page are shown on right side of edit page or posts.You can choose any notification bar or choose default top, bottom, right and left notification bar from the page /posts /custom posts page to display the particular notification bar in specific page from back-end. All Default notification bar is set up from sub menu “Notification Settings”. If you choose default on edit page here then, the page will display notification bar which is selected as default on “Notification Settings” sub menu page. You can even disable bar on any position such as select disable options on this right options of top, bottom ,left or right position too.

    This documentation tried to cover as much details about plugin to ease your plugin experience. To see screenshots of plugin backend and frontend templates, you can see them here


Available layout Screenshots

Limited Time Offer!! Get 20% discount on all our 22+ Premium Themes Valid up to 26 Septempber Only. Coupon Code: offer Limited Time Offer!! Get 20% discount on all our 22+ Premium Themes Valid up to 26 Septempber Only. Coupon Code: offer Limited Time Offer!! Get 20% discount on all our 22+ Premium Themes Valid up to 26 Septempber Only. Coupon Code: offer Limited Time Offer!! Get 20% discount on all our 22+ Premium Themes Valid up to 26 Septempber Only. Coupon Code: offer