Install the plugin

files
When you download the plugin from codecanyon you should have these 2 items. Documentation is the documentation for the plugin and roots-popups.zip is the actual plugin
install
Go to the Plugins menu in your admin section, select Add new, then Upload. Click Choose file and select the roots-popups.zip file you downloaded from codecanyon.

Background Options

documentation_10

Opacity (%)
With this slider you can choose the opacity level of the background layer of the popup. Value will range between 0 and 1.
Background Color
With this color-picker you can set the color of the background layer of the popup.
Image URL
With this media library integrated field you can set an image as the background layer of the popup
Repeat
With this drop-down menu you can select the repeat property of the background image.
Disable Background
By selecting this option you will choose not to display the background layer of the popup.
Backgroun URL on click
You can add a link to add to the background layer. Clicking the background layer will open a new tab/window to that link. 

Content Box Options

documentation_11

Background Image URL
This media library integrated field will allow you to select an image as background for the content box of the popup.
Background Image Repeat
This drop-down will allow you to set the repeat option of the background image.
Background Color
This color-picker field will allow you to set a background color for the content box. <em>Note</em> hat the color will be behind the background image.
Border Color
Select a color for the border of the content box.
Border Width
Select the width of the border of the content box.
Border Radius
Select the radius of the border

 

Popup Size

documentation_12

Width
This slider will allow you to select the width of the popup (this will be either pixels or percent of the total width, depending on the radio button next to it.)
px / %
Select if the width will be represented in px or %
Height
This slider will allow you to select the height of the popup (this will be either pixels or percent of the total height, depending on the radio button next to it.)
px / %
Select if the height will be represented in px or %


Popup Location

documentation_13

Position
Select between a fixed floating popup on the screen or a popup that will change position if you scroll the page.
Align By
Select the alignment related to the top or the bottom of your screen.
Offset (vertical)
Select the vertical offset. This will be in px pr % depending on the radio buttons next to it.
px / % (vertical)
Select if the vertical offset will be in px or %.
Align by (horizontal)
Select the alignment related to the left or the right of your screen.
Offset (horizontal)
Select the horizontal offset. This will be in px pr % depending on the radio buttons next to it.
px / % (horizontal)
Select if the horizontal offset will be in px or %.
Enable Opt In
Enable this to display an opt in trigger for this popup.
Trigger Width(px)
Select the width, in pixels, for the trigger.
Trigger Position (vertical)
Select the position of the trigger, vertically (top/middle/bottom).
Trigger Position (horizontal)
Select the position of the trigger, horizontally(left/center/right).
HTML Content
Add HTML content to display in your trigger.
Image Content
Select an image to be displayed as trigger for this popup.

Open/Close Event

documentation_14

Open Event
Select the event that will activate the popup. You have 7 options here: On Load Page – will trigger the popup as soon as the page is done loading; On Close/Leave Page – will trigger the popup when you close the page (click the x button in your browser, or use keyboard combinations such as Ctr+F4);  Try to Leave the Page – will trigger the popup when the mouse leaves the content of the page; Scroll Top – will trigger the popup when you scroll to the top of the page; Scroll Bottom – will trigger the popup when you scroll to the bottom of the page; Custom – will enable the use of a custom target and event (see below); Opt In – will trigger the content only by clicking the opt in trigger 
Open Effect
Select an animation effect for displaying the popup
Duration (open effect)
Select the duration of the effect (seconds)
Delay (open effect)
Select the duration before the effect starts (seconds)
Close Effect
Select the animation effect for hiding the popup.
Duration (close effect)
Select the duration of the effect (seconds)
Delay (close effect)
Select the duration before the effect starts(seconds)
Target By
Select the target type (id or class)
Target Name
Select the name of the target.
Event
Select the custom event (hover/click/double click/mouse leave)
Auto close popup
Select this option to automatically close the popup when a form inside the popup id submitted.

 


Close Button

documentation_15

Button Design
Select one of the 12 images available for the design of the close button. The size of the button will be 20px by 20px
Text button
Set a custom text as close buton
Hide close button
Select this if you do not want the close button to be displayed.
Position
Select the corner of the popup where the close button will be displayed.
Top(px)
Set the offset of the close button, relative to the top edge of the popup.
Left(px)
Set the offset of the close button, relative to the left edge of the popup.
Bottom(px)
Set the offset of the close button, relative to the bottom edge of the popup.
Right(px)
Set the offset of the close button, relative to the right edge of the popup.
Locker code
Use this code to set an element inside the popup as trigger to close the popup.


Schedule popup campaigndocumentation_16

Date Interval From
Select the start date of your popup campaign.
Date Interval to
Select the end date of your popup campaign.
Repeat every
Select this to display the popup every day, only on week days (Mon – Fri), or only on weekend days (Sat – Sun).
Time Interval From
Select to display this popup only after a particular time of the day.
Time Interval to
Select to display this popup only before a particular time of the day.


Target Audiencedocumentation_17

Only Unregistered Users
Display the popup only to unregistered users.
Only registered Users
Display the popup only to registered users.
Only First Time Visitors
Select this option only the first time someone visits you website. <em>Note! Do not miss the popup.</em>
Reset “First Time” Visitor After
Set an interval in hours when the status of first time visitor is to be reset.
Only visitor from
Select only visitors that come on your website from search engines as referrals to see the popup.
Only visitor from custom domains
Add a lilt (separated by New line – return/enter key on your keyboard) of referrals in order to filter the visitors to see the popup.
Display x times
Set a number of times to display the popup to a visitor. This number will be counted in a session with the length set by Reset First Time Visitor after.


The Content – Free HTMLcontent - 01

Editor box
This is ckEditor, the most powerful wysiwyg editor available. This will allow you to create custom HTML popups. It also comes with a built in form builder. While there are some differences between ckEditor and the default WordPress WYSIWYG editor (tiny mce) the features that allow you to build forms in ckEditor with no knowledge of HTML and CSS and PHP made this editor the one to go with. The main disadvantage of ckEditor is the interaction with media library.


The Content – IFramecontent - 02

URL
Set the URL you want to use to display in your popup.


The Content – Video Gallerycontent - 03

Player size (width)
Set the player width.
Player size (height)
Set the player height
YouTube ID
Put the youtube ID here. Note! You can add as many video ID’s as you want by clicking the + button


The Content – Image Slidercontent - 04

Bullets
Display navigation bullets for the slider.
Nav Button
Display navigation buttons for the slider.
Autoplay
Set this option to start the slider as soon as it’s loaded.
Stop Hover
Prevent the slider from changing slides while the mouse cursor is over it.
Speed
This is the duration of each slide(milliseconds).
Pagination Speed
This is the time it takes to change slides(milliseconds).
CSS3 Transitions
Select awesome animations for changing the slides.
Choose Image
Select an image to set as a slide in the slider. <em>Note!</em> You can add as many as you want by clicking the + button next to it.


The Content – Facebookcontent - 05

Like Button – click on the radio box to the right to make this the active option

URL to like
Insert an URL you want to add to like in the popup.
Width
Set the width of the box containing the like button
Layout
Select between the predefined Facebook layouts.
Action Type
Select between the predefined Facebook actions
Show Friend’s face
Display faces of the people that already liked this URL.
Include Share Button
Display a share button next to the like button.

Follow Button – click on the radio box to the right to make this the active option

Profile URL
Add a Facebook profile URL
Width
Set the width of the box.
Height
Set the height of the box.
Color Scheme
Select between the predefined Facebook color schemes.
Layout
Select between the predefined Facebook layouts.
Show Faces
Select this option to display faces of people that follow this profile.

Like Box – click on the radio box to the right to make this the active option

Facebook Page URL
Insert the URL of the Facebook page
Width
Set the width of the Facebook like box.
Height
Set the height of the Facebook like box.
Color Scheme
Select between the predefined Facebook color schemes.
Show Friend’s Face
Display face of people that like this page.
Show Header
Show the header of the Facebook like box.
Show posts
Show a posts feed from this page.
Show Border
Display the border for the like box.


The Content – Google Pluscontent - 06

Follow Buton – click on the radio box to the right to make this the active option

Google+ User
Add the URL of the user
Button Size
Select between the predefined sizes.
Annotation
Select the predefined annotation style.

Share – click on the radio box to the right to make this the active option

URL to share
Set an URL to share on G+
Size
Select between the predefined sizes.
Width
Set the width of the box containing the share button.


The Content – Linked Incontent - 07

URL to share
Set an URL you want to share on Linked in
Count mode
Select between the predefined count modes.


The Content – Google Mapscontent - 08

Zoom
Select the zoom level for the map
Auto-fit all markers
Select this option to fit all markers on the map. Will overwrite the zoom setting.
Map Type
Select the map type.
Width
Set the width of the map.
Height
Set the height of the map.
Marker Coordinates
Set the latitude and longitude – separated by , 
Show info-window
Enable the info-window for this marker
Info-window Title
Set the title of the info-window.
Info-window Content
Set the content of the info-window.

The Preview

preview
You get a live preview of the popup.

If you enjoy this plugin please rate it with 5 stars