Quick Start Guide
This is a quick guide to get you started fast.

If you are simply looking around to see if this system is worth your time exploring further, click the Template button [Where?] and have fun trying out different templates. Edit them using the widget Designer [Where?]. Change the animation using the Animation Editor [Where?]. Click on Demo Full [Where?] to see them in action.

If you are ready to create a working widget, follow the following steps:

1) Log in to your LeadsLeap account (free sign up if you are not yet a member) [Where?]. You can create a widget without an account, but having an account allows you to save your work, track the performance of the widget and use other advanced settings.

2) Start designing your widget using our proprietary designing tools. 3) If you are creating an opt-in form, you will need to fill up the Form Settings in the submit button editor [Where?] , as well as the settings in the button and input field editors.

If you are not sure of what to fill in, you can use the Import Form Details feature [Where?]. Simply login to your list management system, such as Aweber, Mailchimp etc, copy the HTML form code (the one that starts with <form ....> and ends with </form>, not the javascript version) and follow the instruction after clicking the Import Form Details button [Where?]. (Note: the number of input fields in your widget should match those in the mail form. Otherwise, you may end up with extra or missing fields.)

4) Click Get Code [Where?] to get the code for your website. The code generated will depend on the platform of your website and where you wish to place the code. Just follow the instruction given.

5) Advanced step: The system allows you to show different widgets for different devices. It is advisable that you create one widget for PC and one for mobile devices for better conversion rate. You can also split test different widgets and see which one converts better. All these can be done in the PopupXpert Manager.
Widget Designer Guide
The Widget Designer [Where?] allows you to add different kinds of HTML elements, including Text [Where?], Link [Where?], Icon [Where?], Background Block [Where?], Image [Where?] or videos, iframe, social network plugins through the use of Custom Code [Where?].

If you are creating an opt-in form, you can also add a submit button [Where?] and input fields [Where?].

Try adding a new element now and see what happen...



Once a html element is added to the widget, an editor for that element will be added. Styling the element is as easy as changing the parameters in the editor.

For each added "element editor", you will see these icons:
Below is an explanation of these icons:

- Sort the position of the html elements. Sorting them is only for better organization. It will not affect the layering of the element like what you see in graphic editors like Photoshop. To change the layering of the element, you'll have to edit a parameter called z-index, which can be found in the editor.
- Duplicate the element, so that you don't have to style a similar element all over again.
- Delete the element.
- Lock several elements together so that you can move them at the same time. You can set up to 9 different lock groups.



You may notice that some element editors cannot be sorted, duplicated, locked nor deleted. These elements are the Widget Base Dimension [Where?], Close Button [Where?] and Credit [Where?]. Below is an explanation of what these elements are:

Widget Base Dimension [Where?] - This is an important section for you to set up the base dimension of the widget. (A note about the widget dimension: The widget base dimension is denoted by a faint dashed box. It is okay to place elements outside this box. The purpose of a dimension is for the widget placement during animation.)

Close Button [Where?] - This is the editor for the widget close button. A close button is only visible for Widget Type: lightbox, slidebar and cornerblock [Where?]. It is hidden for static widget because a static widget is part of the website content, hence should not be closed.

Credit [Where?] - This is the editor for the credit that links back to us. If you are a LeadsLeap member, this link will be embedded with your affiliate link.



Below are the basic operations:

Move an element 1) Change the Top Offset and Left Offset parameters in the element editor, or
2) Drag and move the element, or
3) Click on and mouseover the element, then move it using the directional buttons on the keyboard.
Group move elements Lock the elements together by clicking the button. Then move any of the elements using method 2 or 3 above. The other elements in the same group will move at the same time.

(Note: Changing the Top Offset and Left Offset parameters will only affect the position of that element, even if it is group locked.)
Cancel group move Unlock the element by clicking the  button before moving it.
Resize an element 1) Change the Width and Height parameters in the element editor, or
2) Resize the element by dragging the corners. (If this option is available, you will see that the cursor will change to move arrow.)
Group resize elements Not possible.
Open element editor 1) Click on the element editor itself, or
2) Double-click on the html element.
Identify html element and its editor Simply mouseover the html element and its editor will also be highlighted, vice versa.
Move an element in front of / behind another element Change the z-index parameter in the element editor.
2 ways to start creating stunning popup widgets...
1
Choose a template to start.

Blank

Optin box

Optin box

Optin with video

Optin unusual

Slidebar Optin

Cornerblock

Cornerblock

Sidebar optin
2
Import JS code previously created.
Widget Base Dimension
px [?]
px
Close Button
Position & Sizing
px
px
px
px
Setting & Styling
px
px
px
Credit
Position & Sizing
px
px
Setting & Styling
px
Processing...
Initializing...