8 Degree Notification bar Pro
Table of Contents
- Installing Instructions
- Notification Bar Lists
- Building Notification Bar Using Pre Available Templates
- Building Notification Bar by Custom Design
- Notification Settings
- Constant Contact API Settings
- OptIn Settings
- Page/Posts Wise Settings
In our new updates version , we have added following extra features:
- Right Components(Custom Html)
- Right Components(RSS FEED)
- Custom CSS Implementation
- Custom JS Implementation
- Smtp Configuration Setup
- Mailchimp API Setup
- Other Shortcode Implementation
A) Installing Instructions – top
- Unzip 8-degree-notification-bar-pro.zip
- Upload all the files to the /wp-content/plugins/8-degree-notification-bar-pro
- Activate the plugin through the ‘Plugins’ menu in WordPress.
- 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 Lists – top
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 Templates – 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 4 section while adding new notification bar which are described below more briefly:
1) Notification Bar Layout
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:
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:
Pre available Social Icons on click “Select Icon” button:
Right Components Image View:
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:
Add Static Content with Call to action button options:
Static Right Section IN popup form : Contact Form 7 Implementation Process:
Add any shortcode On popup form on right side of bar:
Right Components: Multiple Content Display Steps:
Step 1:
Step 2:
- 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:
- 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:
Step 2:
In Notification Bar Effects For Right Components:
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
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
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
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
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
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 Settings – top
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 Settings – top
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 Settings – top
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 Settings – top
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 Settings – top
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 Feature – top
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 CSS – top
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 JS – top
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 CONFIGURATION – top
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 Implementation – top
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