8 Degree Notification bar Pro

Table of Contents

  1. Installing Instructions
  2. Notification Bar Lists
  3. Building Notification Bar Using Pre Available Templates
  4. Building Notification Bar by Custom Design
  5. Notification Settings
  6. Constant Contact API Settings
  7. OptIn Settings
  8. Page/Posts Wise Settings

In our new updates version , we have added following extra features:

  1. Right Components(Custom Html)
  2. Right Components(RSS FEED)
  3. Custom CSS Implementation
  4. Custom JS Implementation
  5. Smtp Configuration Setup
  6. Mailchimp API Setup
  7. Other Shortcode Implementation

A) Installing Instructionstop

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

Once the plugin is installed and activated you will find a menu named “Notification Bar Pro” 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 3 settings in sub menu which is individually described detailly below.


B) Notification Bar Liststop

notification-main-page

Once you install the plugin, you will find the Notification Bar Pro 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 notification bars. On hover title of each notification bar inside lists table after you created one, you can edit, delete as well as copy notification bar. If you haven’t added any bar yet, then the page will show the notification bar not added yet message.

C) Building Notification Bar Using Pre Available Templatestop

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 4 section while adding new notification bar which are described below more briefly:

1) Notification Bar Layout

preavailable-templates

If you don’t want much styling in your notification bar then please create your notification bar by choosing Pre available template option in Notification Bar Layout section.There are altogether 10 available template with preview.

2) Notification Bars Components

After choosing any pre available template, there is another section “Notification Bars Components” where you can choose Notification Bars Left or Right or both Components. To choose Left Components simply check below Show/Hide checkbox whereas to choose right components, simply check below Show/ Hide checkbox of Right Components.

Also , once you checked left components show/hide options , then you can add social icons on left side of your notification bar template. Similarly, if you checked right components show/hide options , then you can add another features 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

STEPS TO ADD NEW NOTIFICATION BAR:

add-bar-components

Left Components Image View With Process steps to add Left social Icons:

ADD SOCIAL ICONS (LEFT COMPONENTS)

Follow the images screenshot steps to add left social icons on bar:

left-add-components
left-add-components

Pre available Social Icons on click “Select Icon” button:

left-components

Right Components Image View:
8degree notification bar pro bar right components

After choosing show/hide options of right components, there are 4 options:

Text(Custom Html Codes)
After choosing this text html option, you can still choose 2 options: static or multiple content.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 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, simply please input Contact Button Text and Contact Form 7 Shortcode in particular fields.

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.

Add Right Static Components Steps:

8degree notification bar pro bar right components

Add Static Content with Call to action button options:

8degree notification bar pro bar right components

Static Right Section IN popup form : Contact Form 7 Implementation Process:

8degree notification bar pro bar right components

Add any shortcode On popup form on right side of bar:

8degree notification bar pro bar right components

Right Components: Multiple Content Display Steps:
Step 1:

8degree notification bar pro bar right components

Step 2:

8degree notification bar pro bar right components

Opt-in form
In opt-in form 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 click on save button. Afetr save button is clicked on refresh, choose any lists shown below label “Lists of this form subscribes to”.Other fields are same as above custom fields.
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.

Right Components: OPt in Subscribe Form Steps:

8degree notification bar pro bar right components

Twitter Tweets
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.

Posts Title
In Posts Title, you can select posts title of particular category to show as slider, ticker or scroller effects.You can choose multiple posts title from multiple select fields.

Right Components:Posts Title Display Steps:
Step 1:

8degree notification bar pro bar right components

Step 2:

8degree notification bar pro bar right components

In Notification Bar Effects For Right Components:

notification-effects

You can choose Notification bar effects only on multiple content, twitter tweets and post title. 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.

3) Duration to Display Notification Bar

notification-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.

4) Notification Bar Position

notification-posiotion

In this section, you can display notification bar on 4 different position such as on top(header), 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.


C) Building Notification Bar by Custom Design top

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 5 section while adding new notification bar which are described below more briefly:

1) Notification Bar Layout

notification-custom-settings

If you wish to styling your notification bar by youurself then please create your notification bar by choosing Custom design instead of Pre Available Template option from below Notification Bar Layout section.

2) Notification Bar Components

After choosing any custom design option,In Notification Bars Components Section , you can add components same as for pre available template described above, you can choose Notification Bars Left or Right or both Components.

There are extra features and configuration setup available for custom design such as after selecting left components, add social bar you can configure each social icons font color, font size, icon background color, icon background hover color, font hover color, Header title color.
On right components,

After choosing show/hide options of right components, there are 4 options:

Text(Custom Html Codes)
After choosing this text html option, you can still choose 2 options: static or multiple content.If you choose static content, you can add only single html text with or without call to action button as described above. In custom button, you can configure Link Button Color and Link Button Text Color for custom link button.

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. In custom button here, you can also configure Link Button Color and Link Button Text Color for custom link button.Similarly, you can choose Notification Bar Effects as slider, ticker or scroller for custom design too.

Opt-in form
In opt-in form you can either choose custom subscribe form, mailchimp form or constant contact form. The fields to filled up are same as described for pre available design templates above.

Twitter Tweets
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.

Posts Title
In Posts Title, you can select posts title of particular category to show as slider, ticker or scroller effects.You can choose multiple posts title from multiple select fields.

3) Duration to Display Notification Bar

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.

4) Notification Bars Design

notification-custom-settings

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.

5) Notification Bar Position

notification-posiotion

In this section, you can display notification bar on 4 different position such as on top(header), 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.


E) Notification Settingstop

notification-settings

Once you create multiple notification bar, then you can enable or disable notification bar display from this settings. You can enable/disable notification bar on mobile version.
There are other options on this settings too such as setting default notification bar from lists of notification that you have created. And another one is to show notification bar on all pages, only on home page or on specific pages or posts. On click specific pages, you can select multiple posts or page title and click on save button.


F) Constant Contact API Settingstop

notification-constantcoantct-apisettings

Our plugin has a feature to add subscribe form by using constant contact third party subscribe in your site.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 components.


G) OptIn Settingstop

notification-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 export the details of subscribers in CSV format too.


H) Page/Posts Wise Settingstop

notification-pagewise-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 notification bar from the page /posts /custom posts page to display the particular notification bar in the particular selected page from backend. Default notification bar is set up from sub menu “Notification Settings”. If you choose default on edit page of backend then, the notification bar which is selected as default on “Notification Settings” sub menu page will be displayed in the frontend of the page or posts page.


New Version Updates with Extra Features:

A) Custom HTML Settingstop

In our new update of our plugin, there is extra feature to add custom html in your right components section.You have to fill editor area with any html content. You can even write your own custom CSS or Custom JS script for particular notification bar.


B) RSS Feed Featuretop

In our new update of our plugin, you can add rss feeds url and also select slider , ticker or scroller effect for rss feeds in right components section.


C) Custom CSStop

Similarly,you can write your own custom css in this section for available templates as well as custom designs as you like to display the layout of notification bar.


D) Custom JStop

Similarly,you can write your own custom js script in this section for available templates as well as custom designs as you like to load any script for specific notification bar.


E) SMTP CONFIGURATIONtop

Similarly,you can also setup smtp configuration for sending email setup in notification bar. You can choose encryption type SSL or TLS type and Use SMTP Authentication. You can simply enable smpt setup from Notification bar settings sub menu page and Use SMTP to send emails instead of PHP mail function.


F) Mailchimp API Settings/strong> – top

You can setup your mailchimp API settings from Notification bar Settings page and on tab mailchimp settings , you can simply connect with mailchimp by inserting api key and saving which will automatically retrieve all mailchimp accounts and list it on backend add bar page in right components of mailchimp section to choose particular or multiple accounts to send subscriber emails.

G) Other Shortcodes Implementationtop

A new features to add other shortcodes have been added in our plugin. Here , in right components, choose Text select box, and in static or mutiple content both, you can choose call to action button with Shortcode in Popup way. Where you can add any shortcodes in field and popup button text. On Frontend , popup button will appear and on click the button, the shortcode you have implemented will be displayed in popup overlay.
If you like to , you can even do some custom css for your popup area.

8Degree Themes

Go To Table of Contents

View The Full Documentation

July Months Offer