Popup Toolkit User's Manual

1. Introduction

Welcome to Popup Toolkit Software!

Popup Toolkit Software generates the Standard old-style Popups, Unblockable DHTML Popups and Unblockable text only Popups (Unblockable OnExit Popups). All generated popups are compatible with ALL BROWSERS:

Internet Explorer,

Firefox,

Netscape,

Mozilla,

Google Chrome,

Safari,

Opera!

You may choose the Popups behavior, looks, content and triggering mode along with other features using the controls in the application's user interface. The user interface is organized in tabs and sections. The tabs (screens) of the interface are covered comprehensively in manual section 3. User Interface.

The software application has menus used to manipulate projects and access help. You may save and load popup projects using the 'File' menu and open different help topics using the 'Help' menu, while in the 'Tools' menu there are settings and options. The menus are covered in manual section 2. Menu.

Anywhere using the interface, at anytime, you may click on a help icon

to receive immediate help on the control at that icon.

While working on your popups you may use the Preview Buttons at the bottom of the interface to preview your current work in different browsers (if you have them installed). The minimum is Internet Explorer (IE), which is installed on all Windows systems. Click the 'Preview in IE (main)' button to see your popup in the quick preview window (Internet Explorer browser control). In this preview window you may also watch any immidate changes to your popup when you edit it using the interface. For this purpose the 'Refresh main preview on editing' checkbox in the bottom of the interface must be checked.

Note: When you open a web page file from your hard disk in Internet Explorer browser you will see a message saying:

When you upload this web page file to a web server and test it, no message will appear. This message is not connected with any popups inside the web page file and will be issue by Internet Explorer when opening web pages from the hard disk containing any kind of script. Again, once uploaded to a web server the web page will no longer issue this message when viewed in IE. In order to run the web page file from your hard disk click on the message and ALLOW the execution of scripts.

2. Menu

Use the 'File' menu to save and load popup projects. You may start a new popup project by selecting the 'New Popup Project' menu command. Always you will be asked to save your unsaved projects.

Use the 'Help' menu to access different help topics, either from your Popup Toolkit local installation (as this current user's manual is) or an online topic.

3. User Interface

The Popup Toolkit's user interface consists of five tabs with controls used to set various popup features. The tabs are described below in detail.

Note: Sliders do not restrict the maximum value of positive (negative) number fields. If a slider is pushed to limit and the corresponding field shows "100", then you may enter manually in the field value of "200". The slider will stay on its maximum limit.

'General Settings' tab

The 'General Settings' tab consists of several sections with controls used to set up the most general popup features.

'General Settings' tab -> 'Popup Type' section

Here you can setup the Popup type. You may choose between four different types.

DHTML Popups.
Popup Toolkit supports DHTML popups based on JavaScript, CSS and other Modern Web Technologies. These popups are not blockable by the current popup blocking software. The DHTML technological approach lets Popup Toolkit produce extremely effective popups with a large number of effects and exceptional design flexibility. DHTML popups are shown in the web browser window. They possess titlebar, close and minimize buttons, border, content area and shadow. All these elements, except the content area, can be switched on and off. Various attributes of the DHTML popup window may be set up and adjusted. Attributes are divided into four user interface tabs - see User Interface.

Standard (Regular) Popups.
Along with the DHTML type of popups, the software is capable of generating standard (regular) popups. These are blockable by popup blockers, but when opened on click event they are NOT BLOCKED! They support a limited design looks and behavior capabilities compared to DHTML popups. When you choose a Regular popup all features and controls in the user interface that are not supported will be disabled to let you know what features are available for this popup type.
Although in some cases blockable and with limitations, you may always need a standard popup - it opens in a new browser window and thus isn't "connected" with the web page opening it. It stays alive after closing the main web page. If you need, you can always "backup" your standard popup with a DHTML one. See "If the popup gets blocked..." checkbox.

Standart (Regular) Popunders.
The popunder popup is a standard popup that pops behind the main window and thus effectively hides itself right after the moment it was opened. These are blockable by popup blockers, but when opened on click event they are NOT blocked! They support a limited design looks and behavior capabilities compared to DHTML popups. When you choose a popunder all features and controls in the user interface that are not supported will be disabled to let you know what features are available for this popup type. Chrome browser does not allow popunder showing behind the main window, hence on Chrome browser the popunder will show as a Standard popup.
Although in some cases blockable and with limitations, you may always need a popunder - it opens in a new browser window and thus isn't "connected" with the web page opening it. It stays alive after closing the main web page. If you need, you can always "backup" your popunder with a DHTML one. See "If the popup gets blocked..." checkbox.

Unblockable Text Only Popups
The Unblockable text only popup is not blocked by any popup blocker. It is text only popup and has two buttons at the bottom - "OK" and "Cancel" or with similar texts among different web browsers. You can set onclick actions for both the "OK" and the "Cancel" buttons. If may set action for the "OK" button only if the Unblockable popup is opened NOT on exit. If opened ON EXIT the Unblockable popup supports only the "Cancel" button action. This is a restriction of all browsers due to security reasons. The actions available are executing a JavaScript code when a button is clicked and/or navigating to a specified URL when a button is clicked.
Click here to open the tutorial on using Unblockable popups The link will open in a new window

Click here to open a test on a Fully Unblockable OnExit Popup The link will open in a new window

'If the popup gets blocked open DHTML popup instead' checkbox
This is the special Popup Type feature mentioned above. You may set up your popup as a non-DHTML type (Regular popup), but if it gets blocked by a popup blocker a similar DHTML popup will open instead. This is very useful when you need the capabilities of the Standard popups but would like all visitors to see your popup even if they have a popup blocker active.

'General Settings' tab -> 'Popup Triggering' section

Triggering mode of the popup enables you to choose under what condition and when your Popup will enter the screen. You may trigger the popup automatically when the page is opened or closed (the browser navigated away), or you may choose a user action dependant triggering. See the triggering modes below for further information.
Note: If you use the 'Delay opening' option the popup will show after the given period of time counted from the moment the triggering event has taken place.
Note: If you use the 'Auto close' option the popup will hide after the given period of time counted from the moment the popup was opened.

'Trigger the popup on enter (on page opened)' checkbox
The popup will be triggered on opening the web page. This means that when the web visitor opens the web page containing the popup (or navigates to that page), the popup will enter the screen with the chosen behavior. It is not needed the whole page to load, but just the popup code to load in order the popup to appear.

'Trigger the popup on exit (on page closed or navigated away)' checkbox
The popup will be triggered on navigating away from the web page or on closing the browser window. All popups allow this triggering mode. When you select DHTML popup type heuristic on exit algorithm will be implemented to analyse visitor's behavior and predict when they are about to leave the web page or navigate away so the popup will trigger.

'Which links should trigger the on exit popup' radio buttons
You may choose between two possible modes:

'All links leading away from the current web page' radio button
'Only specific links' radio button

Note that DHTML on exit popups are triggered by the heuristic on exit algorith and, hence are not triggered by clicking on links. Thus the 'Which links should trigger the on exit popup' radio buttons are not applicable to DHTML heuristic on exit popups.

'All links leading away from the current web page' radio button
When you select this option you will be able to choose which links should NOT open an on exit popups when clicked.
Example:

  <a href="http://www.some-url.com" 
     onClick="DontShowWin_myid()">

This link, when clicked, will NOT show the on exit popup.
Every popup is UNIQUE, because you may have more than one popup on one and the same web page. You will need to specify the exact popup (from all popups) you are working with. So you need a unique identifier to tell this specific popup what to do. Here, in the "DontShowWin_myid()" code, the "myid" identifier is the unique popup identifier called Popup ID. For more information on setting the Popup ID of the current popup see 'Popup Trigger Codes' section found in the 'Popup Code' tab.
In the example above the unique command based on the Popup ID "myid" onClick="DontShowWin_myid()" tells this specific popup NOT to show when the given link was clicked. You will find this unique code piece for the current popup, along with other codes, in the 'Popup Triggering Codes' section found in the 'Popup Code' tab. There you may copy any of the available codes by clicking on the 'Select & Copy' button next to each code field. You may put the above code piece on any HTML element that would navigate to another web page (or would close the browser window). See the following example for a button HTML element:

  Submit button:
  <INPUT type="submit" value="Submit the Form"
         onClick="DontShowWin_myid()'>

  Normal button:
  <INPUT type="button" value="Open Some Web Page"
         onClick="DontShowWin_myid();OpenPage()'>

If you have several popups on one and the same web page set with the triggering mode 'Triggering the popup on exit (on page closed or navigated away)' and the radio button 'All links leading away from the current web page' selected and you wish to have a link, that when clicked, will SET ALL these popups NOT to show on exit, then there is a special code piece to accomplish this:

  <a href="http://www.some-url.com" 
     onClick="DontShowOnExit=true'>

'Only specific links' radio button
When you select this option you will be able to select which links SHOULD open an on exit popup when they are clicked. To specify these links you will have to put the following code piece at those links.
Example:

  <a href="http://www.some-url.com" 
     onClick="ShowWin_myid()">

In the example above the unique code onClick="ShowWin_myid()" tells the popup TO SHOW when the given link is clicked. You will find this unique code piece for the current popup in the 'Popup Triggering Codes' section found in the 'Popup Code' tab. There you may copy the code by clicking on the 'Select & Copy' button next to the code field. You may put this code piece on any HTML element that would navigate to another web page (or would close the browser window). See the following example for a button HTML element:

  Submit button:
  <INPUT type="submit" value="Submit the Form"
         onClick="ShowWin_myid()">

  Normal button:
  <INPUT type="button" value="Open Some Web Page"
         onClick="ShowWin_myid();OpenPage()">

If you have several popups on one and the same web page set with the triggering mode 'Triggering the popup on exit (on page closed or navigated away)' and the radio button 'Only specific links' selected and you wish to have a link that when clicked will SET ALL these popups to SHOW on exit, then there is a special code piece to accomplish this:

  <a href="http://www.some-url.com" 
     onClick="DontShowOnExit=false'>

'Trigger the popup through user actions or script actions' checkbox
If you need your popup to be triggered when the web visitor clicks on a link, button or HTML element you can use the code piece onClick="OpenWin_myid()".
As mentioned earlier, every popup is UNIQUE, because you may have more than one popup on a web page. You will need to specify which popup from all on the page you are working with. So you need a unique code piece to tell the specific popup what to do. Here, in the "OpenWin_myid()" code, the "myid" piece is the unique popup identifier called Popup ID. For more information on setting the Popup ID of the current popup see 'Popup Triggering Codes' section found in the 'Popup Code' tab.
If you use JavaScript you may utilize the function OpenWin_myid() and open the given popup whenever you need to.
Analogically, to close the popup use the code piece onClick="CloseWin_myid()".

Examples:

  <BUTTON type="button"
     onClick="OpenWin_myid()">

  <IMG src="myimage.jpg"
     onClick="OpenWin_myid()">

  <A href="http://www.some-url.com" 
     onClick="CloseWin_myid()">

In the example above the unique code onClick="OpenWin_myid()" tells the popup to open when the given HTML element is clicked. You will find this unique code piece for the popup in the 'Popup Triggering Codes' section found in the 'Popup Code' tab. There you may copy the code by clicking on the 'Select & Copy' button next to the code field.
You may put this code piece on any HTML element. Here are some more examples:

  Pseduo-link:
  <a href="javscript: OpenWin_myid()">Click Here</a>
  
  Submit button:
  <INPUT type="submit" value="Submit the Form"
         onClick="OpenWin_myid()">

  Normal button:
  <INPUT type="button" value="Open Some Web Page"
         onClick="OpenWin_myid(); DoSomething()">

  HTML element:
  <DIV onClick="CloseWin_myid(); DoSomething()">
    Hello
  </DIV>

  From JavaScript:
  OpenWin_myid(); and
  CloseWin_myid();

Using these code pieces you have full flexibility and control on how and when to open a given popup. The function OpenWin_myid() allows even more flexibility with its two parameters:

  OpenWin_myid(immediate,exiting)

immediate - true/false. This parameter sets whether to delay the popup with the 'Delay opening' timeout or not (see 'Delay opening' option found in the 'Behavior Settings' tab). This parameter will have an effect only if the 'Delay opening' feature is used for the current popup. If you specify true for this parameter the popup will NOT be delayed and will show immediatly. If you specify false - the popup WILL be delayed with the given timeout.
exiting - true/false. This parameter tells the popup if the web page will close or will be navigated to a different URL right after opening the popup. If you use the OpenWin_myid() function on a link that navigates away from the current page, set this parameter to true.
NOTE: Omitting both parameters will result in a delayed popup opening on a NON exiting web page. (both values will be assumed false).
Examples:

  Pseduo-link that delays the popup and is not exiting the web page:
  <a href="javscript: OpenWin_myid()">Click Here</a>
  
  Pseduo-link that does NOT delay the popup and is not exiting
  the web page:
  <a href="javscript: OpenWin_myid(true)">Click Here</a>

  Link that does NOT delay the popup and IS exiting the web page:
  <a href="http://some-url.com"
     onClick="OpenWin_myid(true,true)">Click Me</a>

Finally, a special case is when you need to place closing code inside the popup content. For example you have a form in your popup content and when the form is submitted, the user is directed to a "Thank you" page. Then you need there to be a close link on the "Thank you" page that, when clicked, would close the popup. To achieve this behavior place the following code in the "Thank you" page:

  <A href='javascript: parent.CloseWin ( )'>Close the Popup</A>

If you use JavaScript, to close the popup through script located inside the popup content call the function parent.CloseWin().

'General Settings' tab -> 'How Often to Show the Popup' section

Some of the setting in this section are cookie dependant (cookie settings), i.e. they use cookies to work.

'Always show the popup in the preview windows' checkbox
When this checkbox is checked the settings in this section will not take effect in the preview windows (the popup will always show), but will always take effect when the popup is installed.

'Select cookie type' combo box
For the cookie settings you may choose between two cookie types: 'Side wide cookie' and 'Directory restricted cookie'. The 'Side wide cookie' option will make the cookie visible from all sub directories of a given domain, thus if you install one and the same popup code in several web pages in different sub directories then the cookie will be visible from all web pages and the popup on any given web page will show only once for the given period or will not show on any web page for the given initial period (see below).

On the other hand, when choosing the 'Directory restricted cookie' option the cookie will be visible only in the directory of the currently visited web page with the popup and from its sub directories, but will not be visible from parent directories.

'For each visitor forbid popup opening for the first:' checkbox
This is a cookie setting. Check this checkbox to make the popup NOT to show for an initial period for each visitor.

This feature is based on the browser cookie capabilities, so if the visitor's browser has no cookie support or the cookies are disabled, the popup will show every time, no matter what option you choose from the combo box (see 'Disable popups for non-cookie browsers' checkbox below).

The initial period starts for each visitor when the visitor visits for the first time a web page holding this popup. For example you may have several web pages with the same popup code inside. When a visitor comes to one of these web pages for the first time the initial period will start to count for this visitor (the popup will NOT appear yet). Until this period elapses the popup will not show for this visitor on any web page where it is installed.

'For each visitor show the popup' combo box
This is a cookie setting. Using this combo box you can determine how often the popup would show for every given visitor.

This feature is based on the browser cookie capabilities, so if the visitor's browser has no cookie support or the cookies are disabled, the popup will show every time, no matter what option you choose from the combo box (see 'Disable popups for non-cookie browsers' checkbox below).

You may choose the popup to show every time, once only, once per session only (until the browser window is closed), once per day and once per period. The latter option will let you enter the period length (days/hours/minutes/seconds) in the fields right below the combo box.

'Disable Popups for non-Cookie Browsers' check box
This option will ensure that your popup won't annoy those visitors who do not have cookies enabled or their browser does not support cookies. This is a very small group of users - most users have their cookies working. So, if you check this checkbox, these visitors will see no popup at all rather than having the popup appear every time, because the cookie settings were not enabled on their computers.

'Time based settings are using:' select box
Through this select box choose between two options for the time base. You may select between 'server time' and 'client time'. All time based settings will use this time to calculate their time intervals.

'Show on these days of week' check boxes
To constraint the popup to be visible only on certain days of the week, select from these check boxes the days of week the popup should show on.

'Forbid popup opening in this time interval (daily)' check box
Check this check box so you could forbid opening the popup in a certain time interval every day.

'Show the popup with probability' field
You may select the probability with which the popup should appear to each visitor. By default this probability is 100%, i.e. show always. A probability of 0% would not show the popup ever.

'Design Settings' tab

The 'Design Settings' tab consists of sections with controls used to set up the looks of the popup.

'Design Settings' tab -> 'Popup Size' section

In this section you can setup the popup dimensions.

Popup 'Width' and 'Height' fields
In these two fields you can enter the width and height of the popup window you want to create. Enter these dimensions in pixels.
Checking the 'Full available width' and/or 'Full available height' checkboxes will make the popup size in the given dimention occupy the whole available size of the web browser window or screen. Thus, you may create bottom line popups or right-hand side column banners for example. To create a fullscreen popup check both check boxes.

'Design Settings' tab -> 'Popup Background' section

All background characteristics are settable only for internal content. When you select external content the background characteristics are set inside the external content web page.

'Background color' control
You may set the background color of your popup. In the case when you use external content (an external web page as content) you will not be allowed to setup the background color. In that case the background color will be specified by the web page itself. Use the 'Pick' button or simply click on the colored field to open a color picker dialog for easy color selection.

'Transparent background color' checkbox
Check this checkbox if you like the background color of your popup to be transparent. In that case the background color set with the 'Background color' control will be ignored (the latter will be disabled). If you want to make a popup with a non-rectangular shape then you may use the help of this feature. Once you have checked this checkbox the background color will be transparent and you could make use of the background image to make your popup for example with a round shape (see setting the background image below). Also you will need to switch off the titlebar, shadow and border to make a round shaped popup or a chromeless popup in the general case. Sticky notes are another case of the chromeless popups.

'Background transparency' field
You may use the slider or enter a number between 0 and 100 (%) to set the background transparency level. If you have checked the 'Transparent background color' checkbox then the background color will always be 100% transparent and you will be setting only the background image transparency. If the 'Transparent background color' checkbox is NOT checked then you will be setting the transparency of both the background color and background image.

'Background image' settings
To show a background image in your popup check the checkbox 'Show background image'. Then you may specify a URL for a background image (either an absolute or a relative URL) in the field 'Background image URL'. The image will appear as background of your popup. In the areas of the image where there are transparent pixels (GIF images for example) you will see the background color you have selected in the 'Background color' control above. If you making the background color transparent checking the 'Transparent background color' checkbox only the background image will be visible as background and if the image has for example a round form, and you switch off the titlebar, border and shadow, then the popup will get the shape of the background image, i.e. round shape.

'Design Settings' tab -> 'Border Setting' section

This section contains controls for setting the popup border (frame) properties. It is available only for DHTML popups.

'Show border' checkbox
Check this checkbox to switch the border on (show the border).

'Border thickness' field
Choose the border thickness in pixels.

'Border style' combo box
Choose your border's style.

'Border color' control
You may set the border color. Use the 'Pick' button or just click the colored field to open a color select dialog box.

'Design Settings' tab -> 'Shadow Settings' section

This section contains controls for setting the popup shadow properties. It is available only for DHTML popups.

'Show shadow' checkbox
Check this checkbox to switch the shadow on (show the shadow).

'Shadow thickness' field
Use the field to enter the shadow thickness in pixels.

'Shadow intensity' field
Use this field to enter the shadow intensity (opaque) in %. Or use the slider for easy adjusting.

'Shadow color' control
You may set the shadow color. Use the 'Pick' button or just click the colored field to open a color select dialog box.

'Design Settings' tab -> 'Titlebar Setting' section

'Show titlebar' checkbox
Checking this checkbox will show the titlebar. This option is available only for DHTML popups because the other types of popup do not allow hiding their titlebars.

'Titlebar text' field
Use this field to set the titlebar text.

Titlebar font settings
Use the font combo box and check boxes in the 'Titlebar Settings' section to adjust the titlebar font, font size and font styles.

'Fore color' control
You may set the titlebar text (fore) color. Use the 'Pick' button or just click the colored field to open a color select dialog box.

'Back color' control
You may set the titlebar background color. Use the 'Pick' button or just click the colored field to open a color select dialog box.

'Background gradient' combo box
Using this combo box you may set the titlebar color gradient or switch it off. If you select a background gradient then you wiil be able to choose the two colors of the gradient in the fields below.

'Design Settings' tab -> 'Titlebar Buttons' section In this section you may setup the popup titlebar buttons.
'Buttons type' combo box
Use this drop down select box to specify the technology used to visualize the titlebar buttons:

'Use simple buttons (no images)'. This options lets you visualize the buttons without images thus flee away from the care of selecting images for the buttons. This option also generates the smallest popup code.
'Use external button images'. This option will let you choose image URLs for the buttons.

'Show minimize button' checkbox and minimize button fields
Check this checkbox to have a minimize button in your popup titlebar. According to the chosen button image technology in the 'Buttons type' combo box (described above) you will be able to select button colors and shape (in case of 'Use simple buttons (no images)') or you will have to enter an image file URL (in case of 'Use external button images (URLs)') in the corresponding field(s) below.

'Show close button' checkbox and close button fields
Check this checkbox to have a close button in your popup titlebar. According to the chosen button image technology in the 'Buttons type' combo box (described above) you will be able to select button colors and shape (in case of 'Use simple buttons (no images)') or you will have to enter an image file URL (in case of 'Use external button images (URLs)') in the corresponding field(s) below.

'Design Settings' tab -> 'Popup Scrollbars' section

In this section you may setup the presence of scrollbars in the popup content area. When you check the 'Show scrollbars' checkbox your popup will have scrollbars and you will be able to specify the scrollbar color. When you use external content (an external web page as content) you will not be allowed to setup the scrollbar colors. In this case the scrollbar color is specified by the web page itself. Use the 'Pick' button or simply click on the colored field to open a color picker dialog for easy color selection.

'Design Settings' tab -> 'Additional Popup Elements' section
These checkboxes are available for Standard popup only. You can specify which bars of the popup browser window should be visible. Checking an option means that the given bar will be visible.

Toolbar - These are browser window buttons like Forward, Back, etc.
Location Bar - This is the browser's address bar. The locationbar holds the current web page URL.
Statusbar - This is the bottom bar that show some specific info about the page like if the web page is being loaded and so on.
Directorybar - This is the Internet Explorer's Directories' bar.
Menubar - The menus of the web browser window.

'Behavior Settings' tab

The 'Behavior Settings' tab lets you specify the behavior your popup will exhibit when opening, closing and while being opened.

'Behavior Settings' tab -> 'Popup Position' section
Here you may set the popup position. First of all, you can choose different positioning modes for the X and Y coordinates separately.

'X position from' select box.

The X position may be set from the browser window's left, right or center points. If the popup is not a DHTML one then the X coordinate is set in respect to screen's left, right or center points. In order to make the popup keep its X position when the web page is scrolled, use these first three options for the X position type.

Also, you may choose from the next three options for the X position type. They will set the popup position in respect to document's left, right or center points. The latter three options are valid only for DHTML popups, which are shown inside a web page and, hence, inside its document. In order to make the popup scroll horizontally along with the web page content when the web page is scrolled, use these three options. Have in mind that the document of the web page may be larger than the browser window. Specifying the X position from document's right edge may hide the popup from the visible area of the browser window.

'X position' field.

In this field set the X position in pixels.

'Y position from' select box.

The Y position may be set from the browser window's top, bottom or center points. If the popup is not a DHTML one then the Y coordinate is set in respect to screen's top, bottom or center points. In order to make the popup keep its Y position when the web page is scrolled, use these three options for the Y position type.

Also, you may choose from the next three options for the Y position type. They will set the popup position from the document's top, bottom or center points. The latter three options are valid only for DHTML popups, which are shown inside a web page and, hence, inside its document. In order to make the popup scroll vertically along with the web page content when the web page is scrolled, use these three options. Have in mind that the document of the web page may be larger than the browser window. Specifying the Y position from document's bottom edge may hide the popup from the visible area of the browser window.

'Y position' field.

In this field set the Y position in pixels.

'Behavior Settings' tab -> 'Time Related Behavior' section

'Delay opening' checkbox and 'Delay with' field
Check the 'Delay opening' check box to delay the opening of your popup. You will have to enter the delay of the opening in seconds in the 'Delay with' field below.

'Auto close' checkbox and 'Auto close after' field
Check the 'Auto close' check box to auto close the popup after a given time period. You will have to enter this time period in seconds in the 'Auto close after' field. The time duration for the auto close action is counted from the moment the popup was opened, not loaded.

'Behavior Settings' tab -> 'Modal Behavior' section

'Popup is modal' checkbox
This option is available only for DHTML popups. Check this checkbox to make the DHTML popup modal, i.e. all user actions will be captured by the popup and the underlying web page will be unaccessible behind the popup. A darkened (colored) background around the popup will note the visitor that the web page behind the popup is not accessible until the popup is closed.

'Modal back color' control
Choose the color of the modal background mask behind the popup. The web page around the popup will be colored with this color mask.

'Modal back transparency' field
Select the transparency level of the modal background mask.

'Behavior Settings' tab -> 'Mouse Related Behavior' section

'Popup can be resized with the mouse' checkbox
Check this checkbox to make the popup resizable with the mouse.

'Popup can be dragged with the mouse' checkbox
Check this checkbox to make the popup draggable with the mouse.

'Behavior Settings' tab -> 'Browser Related Behavior' section

'Don't show the popup on mobile devices' checkbox
Check this checkbox to make the popup not show on mobile devices (mobile browsers).

'Behavior Settings' tab -> 'Motion and Visual Effects' section

Here you can choose the motion and visual effect type. You may choose between seven different global effects, many of which encompass plenty sub-effect:

Just pop - no effect.
Sliding + Bouncing + Fading effect - Slide in and out of the screen with optional fade, bounce and dizzing sub-effects.
Rolling effect - Roll in and roll out.
Caterpillar effect - Caterpillar like behavior.
Jumping effect - Jump in the screen and drop out.
Fading effect - Fade in and out.
Unfolding + Exploding + Spinning effect - Unfold or explode and fold or implode with optional spinning.

When you choose a given effect the corresponding section on the right will expand.

'Behavior Settings' tab -> 'Sliding+ Effect Settings' section

Sliding+ effect settings
When you choose the sliding effect, the 'Sliding+ Effect Settings' section will be expanded and enabled. Here you can setup your popup slide-in and slide-out settings. You can choose whether the popup should slide out or it should just popout (disappear at once). For both behaviors you need to specify the direction of movement. Use the corresponding combo boxes. Then you may set the speed of sliding and also switch on the slide-in deceleration and slide-out acceleration options. These two settings will make the popup's sliding movement smooth. You may also choose slide-in and slide-out dizziness sub-effect selecting its magnitude from 0% to 100%. Slide-in bouncing sub-effect is also available. There is the possibility to switch on slide-in fade-in sub-effect and slide-out fade-out sub-effect.

'Behavior Settings' tab -> 'Rolling Effect Settings' section

Rolling effect settings
Under the Rolling effect you can choose whether the popup should also roll out of the screen or it should just popout (disappear at once). You may set the directions of rolling into the screen and rolling out of the screen. Then you may set the speed of movement in both phases.

'Behavior Settings' tab -> 'Caterpillar Effect Settings' section

Caterpillar effect settings
Under the Caterpillar effect you can also choose whether the popup should exit the screen using caterpillar effect or it should only enter the screen with the caterpillar effect, i.e. on exit it should just popout (disappear at once). You may set the directions of caterpillar entering effect and caterpillar exiting effect. Then you may set the speed of movement in both phases.

'Behavior Settings' tab -> 'Jumping Effect Settings' section

Jumping effect settings
In the Jumping effect section you can choose where the popup should jump in from. Use the 'Jump In From' combo box. Then you should set the 'Earth Acceleration'. This value, if set with higher magnitude, will make the popup fall faster. Also you may enter a negative value that will make the popup fly up to the ceiling instead of falling down. Thus you could realize a balloon like effect for example. Similarly, you may use the 'Horizontal Acceleration' field. Setting a horizontal acceleration different from 0.0 will force the popup to fall against the wall, either the left one (negative horizontal acceleration) or the right one (positive). The 'Elasticity' field lets you setup the popup's elasticity. The elasticity may be between 0% and 100%. The meaning of this feature is that if the popup has 100% elasticity it will never loose speed and will jump around forever. If the elasticity is 0% then the popup will loose all of its speed upon the first contact with a wall, floor or ceiling. Finally, you may choose whether the popup should drop out of the screen when closed or should just disappear. For the first option check the 'Drop Out' checkbox.

'Behavior Settings' tab -> 'Fading Effect Settings' section

Fading effect settings
Fading behavior lets your popup fade-in and fade-out of the screen. You may choose the time in seconds the fade-in and the fade-out effects take. You can also choose whether the popup should fade-out or it should just popout (disappear at once).

'Behavior Settings' tab -> 'Unfolding+ Effect Settings' section

Unfolding+ effect settings
Unfolding the popup may be realized in three modes - horizontally, vertically and in all directions (exploding). The same three options are valid for the folding effect. You may choose the time in seconds the unfolding and folding effects will take. You may also choose whether the popup should fold or it should just popout (disappear at once).
A sub-effect of unfolding effect is the spinning sub-effect. You may specify the spinning direction (to the left or to the right) in both unfolding and folding stages and also you may select the number of full turns the popup should do while spinning.

'Behavior Settings' tab -> '3D Rotation Effect Settings' section

3D Rotation effect settings
This 3D effect shows the popup using 3D animation, based on 3D rotations and an optional fading sub-effect. You may select the time duration for the 3D rotation effect on enter and on exit (on close), if the popup should 3D rotate on exit (on close) also or just pop out, and if an optional fading sub-effect should accompany the main 3D rotation effects on entry and on exit (on close).

'Popup Content' tab

The 'Popup Content' tab lets you enter the popup content.

'Popup Content' tab -> 'Popup Content Type' section

Here you can choose the popup content type. You may select between internal content that you enter using the build-in HTML editor and external content - a web page that will show as popup content.

'Popup Content' tab -> 'Popup Content Loading Mode' section
In this section you may select the popup content loading mode. You may choose between three loading modes:

'Load content on first opening of the popup' - the content will be loaded on first opening of the popup, not before that. This option will load the content of the popup only once and will not destroy the content when the popup is closed.
'Preload content before opening of the popup' - the content will be preloaded when the web page is loaded. The popup may stay hidden before it is open, but its content will be loaded, thus when the popup is opened all the content will be already loaded and the visitor won't see the popup content loading in progress, such as loading pictures and so on. This option will load the content of the popup only once and will not destroy the content when the popup is closed.
'Load content on each opening of the popup' - the content will be reloaded on each opening of the popup. The content will also be destroyed each time the popup is closed. If the popup is opened again during one browser session (before closing the browser window) then the popup content will be loaded again. This is useful if you have movies in your popup. The movie will start playing when the popup is opened and will stop playing when the popup is closed.
'Preload and load content on each opening of the popup' - this feature is the same as the previous on, but it will also preload the popup content on page load.

'Popup Content' tab -> 'Internal Content' section

HTML Editor
Here you can enter the popup content as formatted text copying it from your favorite text editor, or you may enter HTML content for your popup. The HTML editor lets you edit your popup content right inside Popup Toolkit's interface. You have an editing area and a toolbar with tools, which are described below.

             4.                        7.                    8.                     9.                12.            13.              14.

           1.                      2.                     3.                5.                   6.            10.              11.         15.

Toolbar elements:

Font combo box - use this combo box to set the font of the selected text or the font you would like to write with from now on.
Font size combo box - use this combo box to set the font size of the selected text or the font size you would like to write with from now on.
Use these three icons to set the text style - bold, italic or underlined.
With these tools you can set the text justification.
Create numbered list.
Create bulleted list.
Adjust indent.
Set text color.
Set text background color.
Insert horizontal rule.
Insert web link.
Insert image.
Insert table.
Switch between HTML source editing mode and normal HTML editing mode.
Enlarge editor in a new window.

'Popup Content' tab -> 'Content Buttons' section

In this section you may add a "close" link or button in the popup content. Just write [close] in the content area in the WYSIWIG internal editor and check the checkbox 'Add close link/button in content'. Use the fields in the section to setup your close link or button. The field names suggest directly their application and meaning. If you need a custom close button or close code in your popup content you may use the close triggering code - see 'Triggering the popup on user actions' and look for parent.CloseWin() triggering code.

'Popup Content' tab -> 'Unblockable Popup Buttons' section

Here you may setup the two buttons found at the bottom of the Unblockable popup. These two buttons are named "OK" and "Cancel" or something similar in different browsers. You may set actions for these two buttons. The actions will be executed when a button is clicked. There are two kinds of actions: a JavaScript command and a URL that is to be followed. The "OK" button actions will be executed only if the Unblockable popup is opened NOT on exit. When the unblockable popup is opened ON EXIT only the "Cancel" actions will be executed.

'Popup Content' tab -> 'Count Down Timer' section

In this section you may add a Countdown timer in your popup. Just write [count] in the content area in the WYSIWIG internal editor and check the checkbox 'Include a count down timer in the popup content'. Use the fields below to setup your countdown timer.

'Popup Content' tab -> 'Instant Mail Send' section

The Mail-Send Buttons features let the visitor easily send you an e-mail.
NOTE: Mail-Send buttons are available only if you have choosen to create the popup content using the internal HTML editor (internal content).
The Mail-Send Buttons let the popup viewer easily send you an e-mail just by clicking a button at the bottom of the popup. For example, the visitor will read the popup, that offers him/her to subscribe to your e-Zine or Autoresponder system. The visitor will fill your form in the popup and click the "OK" button thus confirming they would like to send you an e-mail. There is another button for canceling the send process. Clicking on both buttons will close the popup. You may choose the teext of both buttons so this texts may be different from "OK" and "Cancel".
Also, by letting your viewer send you an e-mail, you will obtain his/her e-mail address, because when they click the "OK" button an e-mail is sent from their default e-mail account to your subscription address. Instant Mail-Send feature is very useful for increasing your subscribers rate significantly. Your visitor sees your offer and then he/she may act simply using the buttons at the bottom of the popup.

Send method:
There are two e-mail send methods:

Default. This send method will (on most PCs) ask the user to confirm that they want to send the e-mail. Once the user has confirmed, the email be sent directly without any further notice.
Note: On some systems, depending also on the local setup, a second confirmation may be needed.
Show e-mail. This send method will show to the visitor the actual e-mail being sent. The visitor then just has to click the 'Send' button to send the e-mail.

Note: The Default method does not work with the Netscape browser. Netscape users will experience the Show e-mail method.

E-mail address(es):
In this field you have to enter the e-mail address where your visitor will send the e-mail to. For example this will be the subscription e-mail address for your e-Zine or Autoresponder system. You can enter more than one e-mail address. Separate e-mail addresses with ; (semicolon). This is useful if you would like to subscribe your visitor to several services at once.

E-mail subject:
Here you may enter the text of the e-mail subject. For example, "subscribe me".

E-mail body:
Here you may enter the text of the e-mail subject.
This field is available if you have chosen the "Show e-mail" Send method (see below). Here you can set the text that will appear in the body of the e-mail being sent by your visitor. For example:
"Click 'Send' and you will shortly receive on your e-mail latest info on how to setup a simple web page".
You can enter at most 420 characters.

"OK" and "Cancel" buttons setup
Set the texts for the two buttons in these fields.

'Popup Content' tab -> 'External Content' section

'Show this Web Page in the Popup' field
If you choose to use a URL of a web page as your popups content then this field will be enabled and you will have to specify a valid URL for the web page that will appear in your popup. You can use either absolute or relative URLs.

'Popup Code' tab

The 'Popup Code' tab lets you install your popup code to a desired web page of yours.

'Popup Code' tab -> 'Popup Code' section

Popup Code
Here you can copy the popup code using the 'Select & copy the code' button. Check the 'Add script tags' checkbox to add script tags to the popup code. The edit box below will show you the actual popup code. Use this section if you would like to install your popup code manually using your favorite HTML editor for example.

'Popup Code' tab -> 'Popup Installation' section

If you need to install your popup automatically (recommended) to an existing HTML document, rather than manually, you can use this section.

'How to install the popup code' select box - select the popup code insertion method
Using this select box you can choose between three different install methods:

'Directly into a web page file' option. The entire popup code will be inserted in the webpage file of your choice. You will be able to select where in the webpage file the code should be inserted using the 'Insert the code in section' select box below.
'Externally using a JS file' option. This method is recommended. The popup code will be saved in a separate JS file (JavaScript file). You will be able to select the name of the JS file or leave the automatically generated name. The automatically generated name is dynamically generated using the Popup ID (see Popup ID in the 'Popup Triggering Codes' section below). Whenever you change the Popup ID the JS file name will be regenerated. By selecting this install method you will insert in the webpage file only one line of code. You will be able to select where in the webpage file the code should be inserted using the 'Insert the code in section' select box below. This line of code will load the JS file with the popup. Be sure to upload both the JS file along with your HTML webpage file to your web server after you install the popup. Using this method you may install the popup to several web pages that are in the same folder (directory) on your web server - all web pages with the same popup inside will share the same JS file, so you will need to upload only one JS file for all web pages that have this popup inside. This method has the following benefits:
- When you decide to change the popup code you will need to regenerate your popup and upload ONLY the JS file to your web server, not the webpage file(s) again as the latter will not have any changes - the one line of code loading the JS file will not change if you don't change the Popup ID. Once the JS file is uploaded all web pages using this JS file will automatically start showing the new popup.
- You will get decreased bandwidth from your visitors to your server - the popup code will be downloaded only once for each visitor, no matter how many web pages with this popup inside he or she is visiting (browsers will cache the JS file).
'Only create a JS file' option - the full popup code will be saved in an external JS (JavaScript) file.
This method is also recommended, because:
- You may regenerate a popup saved in a JS file easily without altering the web pages where the popup is included.
- You will be able to use the JS file to install popups in web pages that are not situated in the same folder on your web server.
You get the same benefits as with the previous popup installation method. If you want to install a popup saved in a JS file to web pages located in different folders in your web server then you will need to add the following one line of code to your web pages where you want your popup to appear:
<script type='text/javascript' src='http://mysite.com/popup-myid.js'></script>
The URL above that is in bold http://mysite.com/popup-myid.js is the URL to the JS file holding the popup code. Here mysite.com is the domain of your site, while popup-myid.js is the JS file name. You may upload this JS file anywhere on your server and then insert the popup in any web page on your server using this one line of code. Isn't it neat?

Now you can install the generated popup into WordPress and Joomla web sites. You need to upload the generated JS file to your server and remember the URL to this JS file. Then you read the WordPress plugin tutorial, the Joomla 1.5 plugin tutorial or the Joomla 2.5 plugin tutorial to see how to install popups into content management systems very easily and quickly.

Path to webpage file text field and 'Browse' button
Using this browse button you can select the webpage file to which you need your popup installed. After install of the popup code be sure to upload the webpage file to your web server. If you have chosen the 'Externally using a JS file' option in the 'How to install the popup code' select box above you will need to upload the created JS file to your web server too.

Path for the JS file text field and 'Browse' button
Using this browse button you can select the path (directory) where you want your JS file created. Be sure to upload the created JS file to your web server. For instuctions on how to insert JS file popups to web pages see the JS file install tutorial The link will open in a new window

. For instuctions on how to insert JS file popups to WordPress websites see the WordPress plugin tutorial The link will open in a new window

. For instuctions on how to insert JS file popups to Joomla websites see the Joomla 1.5 plugin tutorial The link will open in a new window

or the Joomla 2.5 plugin tutorial The link will open in a new window

.

'Insert the code in section:' select box
Use this select box to choose where in the webpage file to install the popup code. You may choose between the <BODY></BODY> and <HEAD></HEAD> sections. The popup code will be inserted just before the closing HTML tag of the chosen section. The <BODY></BODY> section is recommended, becuase search engines will read the popup code last in the webpage file, which is good SEO practice.

Insert code and delete code buttons
You have seven buttons that you may use to install and delete popup code. If you have selected the 'Directly into web page file' install method then only the first two buttons will be enabled.

'Insert the popup code into the web page file' button
Click this button to insert the popup code into the chosen web page file. If a popup with the same ID is already present in the web page file then you will be asked to confirm replacing the existing popup with the new one. Everytime you regenerate an old popup you will be asked to confirm overwrite of the popup code, thus you will not have to delete the old popup code before reinstalling it. The software will do this overwrite automatically.

'Delete the popup code from the web page file' button
On the other hand, you may delete a popup from a web page file. Click this button to delete the popup with the given Popup ID from the selected web page file. Even if the popup was installed using an external JS file, this button will delete it. IMPORTANT: This button will not delete a JS file associated with the deleted popup! IT will only remove the code form the web page file that isntall the popup into this web page file.

If you choose the 'Externally using a JS file' install method then only three buttons will be enabled and the first two and last two - disabled.

'Insert the popup code into the web page file and create the JS file' button
Using this button you may insert a popup into a separate JS file and install it to the selected web page file by clicking the. The JS file will be created in the same folder (directory) where the web page file is located. Again, if a popup with the same ID and/or the same JS file has been already inserted in the selected web page document you will be prompted to overwrite it.

'Delete the JS file and the popup code from the web page file' button
Click this button to delete the popup with the given ID and/or JS file from the selected web page file. The JS file will also be deleted!

'Delete popup from web page file, but leave the JS file' button
To remove the popup install code from the web page file only, but leave the JS file, use this button.

If you choose the 'Only create a JS file' install method you will have the lower two buttons enabled. Thus you will be able to create and delete a JS file holding popup code, but without installing or uninstalling the popup code to/from a web page file. This method is useful if you want to save popup code in a JS file that is to be used later in one or several web pages or content managemen systems. For instuctions on how to insert JS file popups to web pages see the JS file install tutorial The link will open in a new window

. For instuctions on how to insert JS file popups to WordPress websites see the WordPress plugin tutorial The link will open in a new window

. For instuctions on how to insert JS file popups to Joomla websites see the Joomla 1.5 plugin tutorial The link will open in a new window

or the Joomla 2.5 plugin tutorial The link will open in a new window

.

'Create the JS file only' button
Click this button to create the JS file in the selected folder (directory). 'Delete the JS file only' button
You may delete a JS file holding popup code using this button.

'Popup Code' tab -> 'Popup Trigger Codes' section

Each popup is unique. This is done to avoid confusion when you have more than one popup installed in a given web page and you need some unique piece of code to tell each individual popup what to do. To make each popup unique you need to set a unique Popup ID. Set the Popup ID to "Manually set" (recommended) and enter an ID using letters, numbers and the underscore character.
If you choose "Auto-Generated" (not recommended) for the Popup ID type, Popup Toolkit will generate a different and unique ID every time you change any setting in your current popup project, thus avoiding ID duplications. On any change you will get a different Popup ID and this will make it difficult to use Auto-Generated Popup IDs to control your popups. Also Auto-Generated Popup IDs don't have any sense and are hard to read and remember.
Below the Popup ID settings you will find any available unique triggering codes for your current popup. Here you will see some examples on how to use these triggering codes too.
The triggering codes available for the current popup are dependant on the chosen popup type and specified popup triggering mode. For further information on triggering codes please read the 'Popup Triggering' section found in the 'General Settings' tab.

Popup Toolkit User's Manual
Help Contents: Introduction Menu User Interface General Settings tab Choose the Popup Type Select the Popup Triggering mode Select How Often to Show the Popup Design Settings tab Popup Size Popup Background Settings Border Settings Shadow Settings Titlebar Settings Titlebar Buttons Popup Scrollbars Additional Popup Elements Behavior Settings tab Popup Position Time Related Behavior Modal DHTML Mask Mouse Related Behavior Motion and Visual Effect Sliding Behavior Rolling and Caterpillar Behavior Rolling and Caterpillar Behavior Jumping Behavior Fading Behavior Explodin (Unfolding) Behavior Popup Content tab Choosing Your Popup's Content Type Content Loading Mode HTML Content Editor Content Buttons Unblockable Popup Buttons Countdown Timer Instant E-Mail Send Buttons Choosing a specific Web Page as content Popup Code tab Popup Code section Popup Installation section Popup Trigger Codes section	1. Introduction Welcome to Popup Toolkit Software! Popup Toolkit Software generates the Standard old-style Popups, Unblockable DHTML Popups and Unblockable text only Popups (Unblockable OnExit Popups). All generated popups are compatible with ALL BROWSERS: Internet Explorer, Firefox, Netscape, Mozilla, Google Chrome, Safari, Opera! You may choose the Popups behavior, looks, content and triggering mode along with other features using the controls in the application's user interface. The user interface is organized in tabs and sections. The tabs (screens) of the interface are covered comprehensively in manual section 3. User Interface. The software application has menus used to manipulate projects and access help. You may save and load popup projects using the 'File' menu and open different help topics using the 'Help' menu, while in the 'Tools' menu there are settings and options. The menus are covered in manual section 2. Menu. Anywhere using the interface, at anytime, you may click on a help icon to receive immediate help on the control at that icon. While working on your popups you may use the Preview Buttons at the bottom of the interface to preview your current work in different browsers (if you have them installed). The minimum is Internet Explorer (IE), which is installed on all Windows systems. Click the 'Preview in IE (main)' button to see your popup in the quick preview window (Internet Explorer browser control). In this preview window you may also watch any immidate changes to your popup when you edit it using the interface. For this purpose the 'Refresh main preview on editing' checkbox in the bottom of the interface must be checked. Note: When you open a web page file from your hard disk in Internet Explorer browser you will see a message saying: When you upload this web page file to a web server and test it, no message will appear. This message is not connected with any popups inside the web page file and will be issue by Internet Explorer when opening web pages from the hard disk containing any kind of script. Again, once uploaded to a web server the web page will no longer issue this message when viewed in IE. In order to run the web page file from your hard disk click on the message and ALLOW the execution of scripts. 2. Menu Use the 'File' menu to save and load popup projects. You may start a new popup project by selecting the 'New Popup Project' menu command. Always you will be asked to save your unsaved projects. Use the 'Help' menu to access different help topics, either from your Popup Toolkit local installation (as this current user's manual is) or an online topic. 3. User Interface The Popup Toolkit's user interface consists of five tabs with controls used to set various popup features. The tabs are described below in detail. Note: Sliders do not restrict the maximum value of positive (negative) number fields. If a slider is pushed to limit and the corresponding field shows "100", then you may enter manually in the field value of "200". The slider will stay on its maximum limit. 'General Settings' tab The 'General Settings' tab consists of several sections with controls used to set up the most general popup features. 'General Settings' tab -> 'Popup Type' section Here you can setup the Popup type. You may choose between four different types. DHTML Popups. Popup Toolkit supports DHTML popups based on JavaScript, CSS and other Modern Web Technologies. These popups are not blockable by the current popup blocking software. The DHTML technological approach lets Popup Toolkit produce extremely effective popups with a large number of effects and exceptional design flexibility. DHTML popups are shown in the web browser window. They possess titlebar, close and minimize buttons, border, content area and shadow. All these elements, except the content area, can be switched on and off. Various attributes of the DHTML popup window may be set up and adjusted. Attributes are divided into four user interface tabs - see User Interface. Standard (Regular) Popups. Along with the DHTML type of popups, the software is capable of generating standard (regular) popups. These are blockable by popup blockers, but when opened on click event they are NOT BLOCKED! They support a limited design looks and behavior capabilities compared to DHTML popups. When you choose a Regular popup all features and controls in the user interface that are not supported will be disabled to let you know what features are available for this popup type. Although in some cases blockable and with limitations, you may always need a standard popup - it opens in a new browser window and thus isn't "connected" with the web page opening it. It stays alive after closing the main web page. If you need, you can always "backup" your standard popup with a DHTML one. See "If the popup gets blocked..." checkbox. Standart (Regular) Popunders. The popunder popup is a standard popup that pops behind the main window and thus effectively hides itself right after the moment it was opened. These are blockable by popup blockers, but when opened on click event they are NOT blocked! They support a limited design looks and behavior capabilities compared to DHTML popups. When you choose a popunder all features and controls in the user interface that are not supported will be disabled to let you know what features are available for this popup type. Chrome browser does not allow popunder showing behind the main window, hence on Chrome browser the popunder will show as a Standard popup. Although in some cases blockable and with limitations, you may always need a popunder - it opens in a new browser window and thus isn't "connected" with the web page opening it. It stays alive after closing the main web page. If you need, you can always "backup" your popunder with a DHTML one. See "If the popup gets blocked..." checkbox. Unblockable Text Only Popups The Unblockable text only popup is not blocked by any popup blocker. It is text only popup and has two buttons at the bottom - "OK" and "Cancel" or with similar texts among different web browsers. You can set onclick actions for both the "OK" and the "Cancel" buttons. If may set action for the "OK" button only if the Unblockable popup is opened NOT on exit. If opened ON EXIT the Unblockable popup supports only the "Cancel" button action. This is a restriction of all browsers due to security reasons. The actions available are executing a JavaScript code when a button is clicked and/or navigating to a specified URL when a button is clicked. Click here to open the tutorial on using Unblockable popups Click here to open a test on a Fully Unblockable OnExit Popup 'If the popup gets blocked open DHTML popup instead' checkbox This is the special Popup Type feature mentioned above. You may set up your popup as a non-DHTML type (Regular popup), but if it gets blocked by a popup blocker a similar DHTML popup will open instead. This is very useful when you need the capabilities of the Standard popups but would like all visitors to see your popup even if they have a popup blocker active. 'General Settings' tab -> 'Popup Triggering' section Triggering mode of the popup enables you to choose under what condition and when your Popup will enter the screen. You may trigger the popup automatically when the page is opened or closed (the browser navigated away), or you may choose a user action dependant triggering. See the triggering modes below for further information. Note: If you use the 'Delay opening' option the popup will show after the given period of time counted from the moment the triggering event has taken place. Note: If you use the 'Auto close' option the popup will hide after the given period of time counted from the moment the popup was opened. 'Trigger the popup on enter (on page opened)' checkbox The popup will be triggered on opening the web page. This means that when the web visitor opens the web page containing the popup (or navigates to that page), the popup will enter the screen with the chosen behavior. It is not needed the whole page to load, but just the popup code to load in order the popup to appear. 'Trigger the popup on exit (on page closed or navigated away)' checkbox The popup will be triggered on navigating away from the web page or on closing the browser window. All popups allow this triggering mode. When you select DHTML popup type heuristic on exit algorithm will be implemented to analyse visitor's behavior and predict when they are about to leave the web page or navigate away so the popup will trigger. 'Which links should trigger the on exit popup' radio buttons You may choose between two possible modes: 'All links leading away from the current web page' radio button 'Only specific links' radio button Note that DHTML on exit popups are triggered by the heuristic on exit algorith and, hence are not triggered by clicking on links. Thus the 'Which links should trigger the on exit popup' radio buttons are not applicable to DHTML heuristic on exit popups. 'All links leading away from the current web page' radio button When you select this option you will be able to choose which links should NOT open an on exit popups when clicked. Example: <a href="http://www.some-url.com" onClick="DontShowWin_myid()"> This link, when clicked, will NOT show the on exit popup. Every popup is UNIQUE, because you may have more than one popup on one and the same web page. You will need to specify the exact popup (from all popups) you are working with. So you need a unique identifier to tell this specific popup what to do. Here, in the "DontShowWin_myid()" code, the "myid" identifier is the unique popup identifier called Popup ID. For more information on setting the Popup ID of the current popup see 'Popup Trigger Codes' section found in the 'Popup Code' tab. In the example above the unique command based on the Popup ID "myid" onClick="DontShowWin_myid()" tells this specific popup NOT to show when the given link was clicked. You will find this unique code piece for the current popup, along with other codes, in the 'Popup Triggering Codes' section found in the 'Popup Code' tab. There you may copy any of the available codes by clicking on the 'Select & Copy' button next to each code field. You may put the above code piece on any HTML element that would navigate to another web page (or would close the browser window). See the following example for a button HTML element: Submit button: <INPUT type="submit" value="Submit the Form" onClick="DontShowWin_myid()'> Normal button: <INPUT type="button" value="Open Some Web Page" onClick="DontShowWin_myid();OpenPage()'> If you have several popups on one and the same web page set with the triggering mode 'Triggering the popup on exit (on page closed or navigated away)' and the radio button 'All links leading away from the current web page' selected and you wish to have a link, that when clicked, will SET ALL these popups NOT to show on exit, then there is a special code piece to accomplish this: <a href="http://www.some-url.com" onClick="DontShowOnExit=true'> 'Only specific links' radio button When you select this option you will be able to select which links SHOULD open an on exit popup when they are clicked. To specify these links you will have to put the following code piece at those links. Example: <a href="http://www.some-url.com" onClick="ShowWin_myid()"> In the example above the unique code onClick="ShowWin_myid()" tells the popup TO SHOW when the given link is clicked. You will find this unique code piece for the current popup in the 'Popup Triggering Codes' section found in the 'Popup Code' tab. There you may copy the code by clicking on the 'Select & Copy' button next to the code field. You may put this code piece on any HTML element that would navigate to another web page (or would close the browser window). See the following example for a button HTML element: Submit button: <INPUT type="submit" value="Submit the Form" onClick="ShowWin_myid()"> Normal button: <INPUT type="button" value="Open Some Web Page" onClick="ShowWin_myid();OpenPage()"> If you have several popups on one and the same web page set with the triggering mode 'Triggering the popup on exit (on page closed or navigated away)' and the radio button 'Only specific links' selected and you wish to have a link that when clicked will SET ALL these popups to SHOW on exit, then there is a special code piece to accomplish this: <a href="http://www.some-url.com" onClick="DontShowOnExit=false'> 'Trigger the popup through user actions or script actions' checkbox If you need your popup to be triggered when the web visitor clicks on a link, button or HTML element you can use the code piece onClick="OpenWin_myid()". As mentioned earlier, every popup is UNIQUE, because you may have more than one popup on a web page. You will need to specify which popup from all on the page you are working with. So you need a unique code piece to tell the specific popup what to do. Here, in the "OpenWin_myid()" code, the "myid" piece is the unique popup identifier called Popup ID. For more information on setting the Popup ID of the current popup see 'Popup Triggering Codes' section found in the 'Popup Code' tab. If you use JavaScript you may utilize the function OpenWin_myid() and open the given popup whenever you need to. Analogically, to close the popup use the code piece onClick="CloseWin_myid()". Examples: <BUTTON type="button" onClick="OpenWin_myid()"> <IMG src="myimage.jpg" onClick="OpenWin_myid()"> <A href="http://www.some-url.com" onClick="CloseWin_myid()"> In the example above the unique code onClick="OpenWin_myid()" tells the popup to open when the given HTML element is clicked. You will find this unique code piece for the popup in the 'Popup Triggering Codes' section found in the 'Popup Code' tab. There you may copy the code by clicking on the 'Select & Copy' button next to the code field. You may put this code piece on any HTML element. Here are some more examples: Pseduo-link: <a href="javscript: OpenWin_myid()">Click Here</a> Submit button: <INPUT type="submit" value="Submit the Form" onClick="OpenWin_myid()"> Normal button: <INPUT type="button" value="Open Some Web Page" onClick="OpenWin_myid(); DoSomething()"> HTML element: <DIV onClick="CloseWin_myid(); DoSomething()"> Hello </DIV> From JavaScript: OpenWin_myid(); and CloseWin_myid(); Using these code pieces you have full flexibility and control on how and when to open a given popup. The function OpenWin_myid() allows even more flexibility with its two parameters: OpenWin_myid(immediate,exiting) immediate - true/false. This parameter sets whether to delay the popup with the 'Delay opening' timeout or not (see 'Delay opening' option found in the 'Behavior Settings' tab). This parameter will have an effect only if the 'Delay opening' feature is used for the current popup. If you specify true for this parameter the popup will NOT be delayed and will show immediatly. If you specify false - the popup WILL be delayed with the given timeout. exiting - true/false. This parameter tells the popup if the web page will close or will be navigated to a different URL right after opening the popup. If you use the OpenWin_myid() function on a link that navigates away from the current page, set this parameter to true. NOTE: Omitting both parameters will result in a delayed popup opening on a NON exiting web page. (both values will be assumed false). Examples: Pseduo-link that delays the popup and is not exiting the web page: <a href="javscript: OpenWin_myid()">Click Here</a> Pseduo-link that does NOT delay the popup and is not exiting the web page: <a href="javscript: OpenWin_myid(true)">Click Here</a> Link that does NOT delay the popup and IS exiting the web page: <a href="http://some-url.com" onClick="OpenWin_myid(true,true)">Click Me</a> Finally, a special case is when you need to place closing code inside the popup content. For example you have a form in your popup content and when the form is submitted, the user is directed to a "Thank you" page. Then you need there to be a close link on the "Thank you" page that, when clicked, would close the popup. To achieve this behavior place the following code in the "Thank you" page: <A href='javascript: parent.CloseWin ( )'>Close the Popup</A> If you use JavaScript, to close the popup through script located inside the popup content call the function parent.CloseWin(). 'General Settings' tab -> 'How Often to Show the Popup' section Some of the setting in this section are cookie dependant (cookie settings), i.e. they use cookies to work. 'Always show the popup in the preview windows' checkbox When this checkbox is checked the settings in this section will not take effect in the preview windows (the popup will always show), but will always take effect when the popup is installed. 'Select cookie type' combo box For the cookie settings you may choose between two cookie types: 'Side wide cookie' and 'Directory restricted cookie'. The 'Side wide cookie' option will make the cookie visible from all sub directories of a given domain, thus if you install one and the same popup code in several web pages in different sub directories then the cookie will be visible from all web pages and the popup on any given web page will show only once for the given period or will not show on any web page for the given initial period (see below). On the other hand, when choosing the 'Directory restricted cookie' option the cookie will be visible only in the directory of the currently visited web page with the popup and from its sub directories, but will not be visible from parent directories. 'For each visitor forbid popup opening for the first:' checkbox This is a cookie setting. Check this checkbox to make the popup NOT to show for an initial period for each visitor. This feature is based on the browser cookie capabilities, so if the visitor's browser has no cookie support or the cookies are disabled, the popup will show every time, no matter what option you choose from the combo box (see 'Disable popups for non-cookie browsers' checkbox below). The initial period starts for each visitor when the visitor visits for the first time a web page holding this popup. For example you may have several web pages with the same popup code inside. When a visitor comes to one of these web pages for the first time the initial period will start to count for this visitor (the popup will NOT appear yet). Until this period elapses the popup will not show for this visitor on any web page where it is installed. 'For each visitor show the popup' combo box This is a cookie setting. Using this combo box you can determine how often the popup would show for every given visitor. This feature is based on the browser cookie capabilities, so if the visitor's browser has no cookie support or the cookies are disabled, the popup will show every time, no matter what option you choose from the combo box (see 'Disable popups for non-cookie browsers' checkbox below). You may choose the popup to show every time, once only, once per session only (until the browser window is closed), once per day and once per period. The latter option will let you enter the period length (days/hours/minutes/seconds) in the fields right below the combo box. 'Disable Popups for non-Cookie Browsers' check box This option will ensure that your popup won't annoy those visitors who do not have cookies enabled or their browser does not support cookies. This is a very small group of users - most users have their cookies working. So, if you check this checkbox, these visitors will see no popup at all rather than having the popup appear every time, because the cookie settings were not enabled on their computers. 'Time based settings are using:' select box Through this select box choose between two options for the time base. You may select between 'server time' and 'client time'. All time based settings will use this time to calculate their time intervals. 'Show on these days of week' check boxes To constraint the popup to be visible only on certain days of the week, select from these check boxes the days of week the popup should show on. 'Forbid popup opening in this time interval (daily)' check box Check this check box so you could forbid opening the popup in a certain time interval every day. 'Show the popup with probability' field You may select the probability with which the popup should appear to each visitor. By default this probability is 100%, i.e. show always. A probability of 0% would not show the popup ever. 'Design Settings' tab The 'Design Settings' tab consists of sections with controls used to set up the looks of the popup. 'Design Settings' tab -> 'Popup Size' section In this section you can setup the popup dimensions. Popup 'Width' and 'Height' fields In these two fields you can enter the width and height of the popup window you want to create. Enter these dimensions in pixels. Checking the 'Full available width' and/or 'Full available height' checkboxes will make the popup size in the given dimention occupy the whole available size of the web browser window or screen. Thus, you may create bottom line popups or right-hand side column banners for example. To create a fullscreen popup check both check boxes. 'Design Settings' tab -> 'Popup Background' section All background characteristics are settable only for internal content. When you select external content the background characteristics are set inside the external content web page. 'Background color' control You may set the background color of your popup. In the case when you use external content (an external web page as content) you will not be allowed to setup the background color. In that case the background color will be specified by the web page itself. Use the 'Pick' button or simply click on the colored field to open a color picker dialog for easy color selection. 'Transparent background color' checkbox Check this checkbox if you like the background color of your popup to be transparent. In that case the background color set with the 'Background color' control will be ignored (the latter will be disabled). If you want to make a popup with a non-rectangular shape then you may use the help of this feature. Once you have checked this checkbox the background color will be transparent and you could make use of the background image to make your popup for example with a round shape (see setting the background image below). Also you will need to switch off the titlebar, shadow and border to make a round shaped popup or a chromeless popup in the general case. Sticky notes are another case of the chromeless popups. 'Background transparency' field You may use the slider or enter a number between 0 and 100 (%) to set the background transparency level. If you have checked the 'Transparent background color' checkbox then the background color will always be 100% transparent and you will be setting only the background image transparency. If the 'Transparent background color' checkbox is NOT checked then you will be setting the transparency of both the background color and background image. 'Background image' settings To show a background image in your popup check the checkbox 'Show background image'. Then you may specify a URL for a background image (either an absolute or a relative URL) in the field 'Background image URL'. The image will appear as background of your popup. In the areas of the image where there are transparent pixels (GIF images for example) you will see the background color you have selected in the 'Background color' control above. If you making the background color transparent checking the 'Transparent background color' checkbox only the background image will be visible as background and if the image has for example a round form, and you switch off the titlebar, border and shadow, then the popup will get the shape of the background image, i.e. round shape. 'Design Settings' tab -> 'Border Setting' section This section contains controls for setting the popup border (frame) properties. It is available only for DHTML popups. 'Show border' checkbox Check this checkbox to switch the border on (show the border). 'Border thickness' field Choose the border thickness in pixels. 'Border style' combo box Choose your border's style. 'Border color' control You may set the border color. Use the 'Pick' button or just click the colored field to open a color select dialog box. 'Design Settings' tab -> 'Shadow Settings' section This section contains controls for setting the popup shadow properties. It is available only for DHTML popups. 'Show shadow' checkbox Check this checkbox to switch the shadow on (show the shadow). 'Shadow thickness' field Use the field to enter the shadow thickness in pixels. 'Shadow intensity' field Use this field to enter the shadow intensity (opaque) in %. Or use the slider for easy adjusting. 'Shadow color' control You may set the shadow color. Use the 'Pick' button or just click the colored field to open a color select dialog box. 'Design Settings' tab -> 'Titlebar Setting' section 'Show titlebar' checkbox Checking this checkbox will show the titlebar. This option is available only for DHTML popups because the other types of popup do not allow hiding their titlebars. 'Titlebar text' field Use this field to set the titlebar text. Titlebar font settings Use the font combo box and check boxes in the 'Titlebar Settings' section to adjust the titlebar font, font size and font styles. 'Fore color' control You may set the titlebar text (fore) color. Use the 'Pick' button or just click the colored field to open a color select dialog box. 'Back color' control You may set the titlebar background color. Use the 'Pick' button or just click the colored field to open a color select dialog box. 'Background gradient' combo box Using this combo box you may set the titlebar color gradient or switch it off. If you select a background gradient then you wiil be able to choose the two colors of the gradient in the fields below. 'Design Settings' tab -> 'Titlebar Buttons' section In this section you may setup the popup titlebar buttons. 'Buttons type' combo box Use this drop down select box to specify the technology used to visualize the titlebar buttons: 'Use simple buttons (no images)'. This options lets you visualize the buttons without images thus flee away from the care of selecting images for the buttons. This option also generates the smallest popup code. 'Use external button images'. This option will let you choose image URLs for the buttons. 'Show minimize button' checkbox and minimize button fields Check this checkbox to have a minimize button in your popup titlebar. According to the chosen button image technology in the 'Buttons type' combo box (described above) you will be able to select button colors and shape (in case of 'Use simple buttons (no images)') or you will have to enter an image file URL (in case of 'Use external button images (URLs)') in the corresponding field(s) below. 'Show close button' checkbox and close button fields Check this checkbox to have a close button in your popup titlebar. According to the chosen button image technology in the 'Buttons type' combo box (described above) you will be able to select button colors and shape (in case of 'Use simple buttons (no images)') or you will have to enter an image file URL (in case of 'Use external button images (URLs)') in the corresponding field(s) below. 'Design Settings' tab -> 'Popup Scrollbars' section In this section you may setup the presence of scrollbars in the popup content area. When you check the 'Show scrollbars' checkbox your popup will have scrollbars and you will be able to specify the scrollbar color. When you use external content (an external web page as content) you will not be allowed to setup the scrollbar colors. In this case the scrollbar color is specified by the web page itself. Use the 'Pick' button or simply click on the colored field to open a color picker dialog for easy color selection. 'Design Settings' tab -> 'Additional Popup Elements' section These checkboxes are available for Standard popup only. You can specify which bars of the popup browser window should be visible. Checking an option means that the given bar will be visible. Toolbar - These are browser window buttons like Forward, Back, etc. Location Bar - This is the browser's address bar. The locationbar holds the current web page URL. Statusbar - This is the bottom bar that show some specific info about the page like if the web page is being loaded and so on. Directorybar - This is the Internet Explorer's Directories' bar. Menubar - The menus of the web browser window. 'Behavior Settings' tab The 'Behavior Settings' tab lets you specify the behavior your popup will exhibit when opening, closing and while being opened. 'Behavior Settings' tab -> 'Popup Position' section Here you may set the popup position. First of all, you can choose different positioning modes for the X and Y coordinates separately. 'X position from' select box. The X position may be set from the browser window's left, right or center points. If the popup is not a DHTML one then the X coordinate is set in respect to screen's left, right or center points. In order to make the popup keep its X position when the web page is scrolled, use these first three options for the X position type. Also, you may choose from the next three options for the X position type. They will set the popup position in respect to document's left, right or center points. The latter three options are valid only for DHTML popups, which are shown inside a web page and, hence, inside its document. In order to make the popup scroll horizontally along with the web page content when the web page is scrolled, use these three options. Have in mind that the document of the web page may be larger than the browser window. Specifying the X position from document's right edge may hide the popup from the visible area of the browser window. 'X position' field. In this field set the X position in pixels. 'Y position from' select box. The Y position may be set from the browser window's top, bottom or center points. If the popup is not a DHTML one then the Y coordinate is set in respect to screen's top, bottom or center points. In order to make the popup keep its Y position when the web page is scrolled, use these three options for the Y position type. Also, you may choose from the next three options for the Y position type. They will set the popup position from the document's top, bottom or center points. The latter three options are valid only for DHTML popups, which are shown inside a web page and, hence, inside its document. In order to make the popup scroll vertically along with the web page content when the web page is scrolled, use these three options. Have in mind that the document of the web page may be larger than the browser window. Specifying the Y position from document's bottom edge may hide the popup from the visible area of the browser window. 'Y position' field. In this field set the Y position in pixels. 'Behavior Settings' tab -> 'Time Related Behavior' section 'Delay opening' checkbox and 'Delay with' field Check the 'Delay opening' check box to delay the opening of your popup. You will have to enter the delay of the opening in seconds in the 'Delay with' field below. 'Auto close' checkbox and 'Auto close after' field Check the 'Auto close' check box to auto close the popup after a given time period. You will have to enter this time period in seconds in the 'Auto close after' field. The time duration for the auto close action is counted from the moment the popup was opened, not loaded. 'Behavior Settings' tab -> 'Modal Behavior' section 'Popup is modal' checkbox This option is available only for DHTML popups. Check this checkbox to make the DHTML popup modal, i.e. all user actions will be captured by the popup and the underlying web page will be unaccessible behind the popup. A darkened (colored) background around the popup will note the visitor that the web page behind the popup is not accessible until the popup is closed. 'Modal back color' control Choose the color of the modal background mask behind the popup. The web page around the popup will be colored with this color mask. 'Modal back transparency' field Select the transparency level of the modal background mask. 'Behavior Settings' tab -> 'Mouse Related Behavior' section 'Popup can be resized with the mouse' checkbox Check this checkbox to make the popup resizable with the mouse. 'Popup can be dragged with the mouse' checkbox Check this checkbox to make the popup draggable with the mouse. 'Behavior Settings' tab -> 'Browser Related Behavior' section 'Don't show the popup on mobile devices' checkbox Check this checkbox to make the popup not show on mobile devices (mobile browsers). 'Behavior Settings' tab -> 'Motion and Visual Effects' section Here you can choose the motion and visual effect type. You may choose between seven different global effects, many of which encompass plenty sub-effect: Just pop - no effect. Sliding + Bouncing + Fading effect - Slide in and out of the screen with optional fade, bounce and dizzing sub-effects. Rolling effect - Roll in and roll out. Caterpillar effect - Caterpillar like behavior. Jumping effect - Jump in the screen and drop out. Fading effect - Fade in and out. Unfolding + Exploding + Spinning effect - Unfold or explode and fold or implode with optional spinning. When you choose a given effect the corresponding section on the right will expand. 'Behavior Settings' tab -> 'Sliding+ Effect Settings' section Sliding+ effect settings When you choose the sliding effect, the 'Sliding+ Effect Settings' section will be expanded and enabled. Here you can setup your popup slide-in and slide-out settings. You can choose whether the popup should slide out or it should just popout (disappear at once). For both behaviors you need to specify the direction of movement. Use the corresponding combo boxes. Then you may set the speed of sliding and also switch on the slide-in deceleration and slide-out acceleration options. These two settings will make the popup's sliding movement smooth. You may also choose slide-in and slide-out dizziness sub-effect selecting its magnitude from 0% to 100%. Slide-in bouncing sub-effect is also available. There is the possibility to switch on slide-in fade-in sub-effect and slide-out fade-out sub-effect. 'Behavior Settings' tab -> 'Rolling Effect Settings' section Rolling effect settings Under the Rolling effect you can choose whether the popup should also roll out of the screen or it should just popout (disappear at once). You may set the directions of rolling into the screen and rolling out of the screen. Then you may set the speed of movement in both phases. 'Behavior Settings' tab -> 'Caterpillar Effect Settings' section Caterpillar effect settings Under the Caterpillar effect you can also choose whether the popup should exit the screen using caterpillar effect or it should only enter the screen with the caterpillar effect, i.e. on exit it should just popout (disappear at once). You may set the directions of caterpillar entering effect and caterpillar exiting effect. Then you may set the speed of movement in both phases. 'Behavior Settings' tab -> 'Jumping Effect Settings' section Jumping effect settings In the Jumping effect section you can choose where the popup should jump in from. Use the 'Jump In From' combo box. Then you should set the 'Earth Acceleration'. This value, if set with higher magnitude, will make the popup fall faster. Also you may enter a negative value that will make the popup fly up to the ceiling instead of falling down. Thus you could realize a balloon like effect for example. Similarly, you may use the 'Horizontal Acceleration' field. Setting a horizontal acceleration different from 0.0 will force the popup to fall against the wall, either the left one (negative horizontal acceleration) or the right one (positive). The 'Elasticity' field lets you setup the popup's elasticity. The elasticity may be between 0% and 100%. The meaning of this feature is that if the popup has 100% elasticity it will never loose speed and will jump around forever. If the elasticity is 0% then the popup will loose all of its speed upon the first contact with a wall, floor or ceiling. Finally, you may choose whether the popup should drop out of the screen when closed or should just disappear. For the first option check the 'Drop Out' checkbox. 'Behavior Settings' tab -> 'Fading Effect Settings' section Fading effect settings Fading behavior lets your popup fade-in and fade-out of the screen. You may choose the time in seconds the fade-in and the fade-out effects take. You can also choose whether the popup should fade-out or it should just popout (disappear at once). 'Behavior Settings' tab -> 'Unfolding+ Effect Settings' section Unfolding+ effect settings Unfolding the popup may be realized in three modes - horizontally, vertically and in all directions (exploding). The same three options are valid for the folding effect. You may choose the time in seconds the unfolding and folding effects will take. You may also choose whether the popup should fold or it should just popout (disappear at once). A sub-effect of unfolding effect is the spinning sub-effect. You may specify the spinning direction (to the left or to the right) in both unfolding and folding stages and also you may select the number of full turns the popup should do while spinning. 'Behavior Settings' tab -> '3D Rotation Effect Settings' section 3D Rotation effect settings This 3D effect shows the popup using 3D animation, based on 3D rotations and an optional fading sub-effect. You may select the time duration for the 3D rotation effect on enter and on exit (on close), if the popup should 3D rotate on exit (on close) also or just pop out, and if an optional fading sub-effect should accompany the main 3D rotation effects on entry and on exit (on close). 'Popup Content' tab The 'Popup Content' tab lets you enter the popup content. 'Popup Content' tab -> 'Popup Content Type' section Here you can choose the popup content type. You may select between internal content that you enter using the build-in HTML editor and external content - a web page that will show as popup content. 'Popup Content' tab -> 'Popup Content Loading Mode' section In this section you may select the popup content loading mode. You may choose between three loading modes: 'Load content on first opening of the popup' - the content will be loaded on first opening of the popup, not before that. This option will load the content of the popup only once and will not destroy the content when the popup is closed. 'Preload content before opening of the popup' - the content will be preloaded when the web page is loaded. The popup may stay hidden before it is open, but its content will be loaded, thus when the popup is opened all the content will be already loaded and the visitor won't see the popup content loading in progress, such as loading pictures and so on. This option will load the content of the popup only once and will not destroy the content when the popup is closed. 'Load content on each opening of the popup' - the content will be reloaded on each opening of the popup. The content will also be destroyed each time the popup is closed. If the popup is opened again during one browser session (before closing the browser window) then the popup content will be loaded again. This is useful if you have movies in your popup. The movie will start playing when the popup is opened and will stop playing when the popup is closed. 'Preload and load content on each opening of the popup' - this feature is the same as the previous on, but it will also preload the popup content on page load. 'Popup Content' tab -> 'Internal Content' section HTML Editor Here you can enter the popup content as formatted text copying it from your favorite text editor, or you may enter HTML content for your popup. The HTML editor lets you edit your popup content right inside Popup Toolkit's interface. You have an editing area and a toolbar with tools, which are described below. 4. 7. 8. 9. 12. 13. 14. 1. 2. 3. 5. 6. 10. 11. 15. Toolbar elements: Font combo box - use this combo box to set the font of the selected text or the font you would like to write with from now on. Font size combo box - use this combo box to set the font size of the selected text or the font size you would like to write with from now on. Use these three icons to set the text style - bold, italic or underlined. With these tools you can set the text justification. Create numbered list. Create bulleted list. Adjust indent. Set text color. Set text background color. Insert horizontal rule. Insert web link. Insert image. Insert table. Switch between HTML source editing mode and normal HTML editing mode. Enlarge editor in a new window. 'Popup Content' tab -> 'Content Buttons' section In this section you may add a "close" link or button in the popup content. Just write [close] in the content area in the WYSIWIG internal editor and check the checkbox 'Add close link/button in content'. Use the fields in the section to setup your close link or button. The field names suggest directly their application and meaning. If you need a custom close button or close code in your popup content you may use the close triggering code - see 'Triggering the popup on user actions' and look for parent.CloseWin() triggering code. 'Popup Content' tab -> 'Unblockable Popup Buttons' section Here you may setup the two buttons found at the bottom of the Unblockable popup. These two buttons are named "OK" and "Cancel" or something similar in different browsers. You may set actions for these two buttons. The actions will be executed when a button is clicked. There are two kinds of actions: a JavaScript command and a URL that is to be followed. The "OK" button actions will be executed only if the Unblockable popup is opened NOT on exit. When the unblockable popup is opened ON EXIT only the "Cancel" actions will be executed. 'Popup Content' tab -> 'Count Down Timer' section In this section you may add a Countdown timer in your popup. Just write [count] in the content area in the WYSIWIG internal editor and check the checkbox 'Include a count down timer in the popup content'. Use the fields below to setup your countdown timer. 'Popup Content' tab -> 'Instant Mail Send' section The Mail-Send Buttons features let the visitor easily send you an e-mail. NOTE: Mail-Send buttons are available only if you have choosen to create the popup content using the internal HTML editor (internal content). The Mail-Send Buttons let the popup viewer easily send you an e-mail just by clicking a button at the bottom of the popup. For example, the visitor will read the popup, that offers him/her to subscribe to your e-Zine or Autoresponder system. The visitor will fill your form in the popup and click the "OK" button thus confirming they would like to send you an e-mail. There is another button for canceling the send process. Clicking on both buttons will close the popup. You may choose the teext of both buttons so this texts may be different from "OK" and "Cancel". Also, by letting your viewer send you an e-mail, you will obtain his/her e-mail address, because when they click the "OK" button an e-mail is sent from their default e-mail account to your subscription address. Instant Mail-Send feature is very useful for increasing your subscribers rate significantly. Your visitor sees your offer and then he/she may act simply using the buttons at the bottom of the popup. Send method: There are two e-mail send methods: Default. This send method will (on most PCs) ask the user to confirm that they want to send the e-mail. Once the user has confirmed, the email be sent directly without any further notice. Note: On some systems, depending also on the local setup, a second confirmation may be needed. Show e-mail. This send method will show to the visitor the actual e-mail being sent. The visitor then just has to click the 'Send' button to send the e-mail. Note: The Default method does not work with the Netscape browser. Netscape users will experience the Show e-mail method. E-mail address(es): In this field you have to enter the e-mail address where your visitor will send the e-mail to. For example this will be the subscription e-mail address for your e-Zine or Autoresponder system. You can enter more than one e-mail address. Separate e-mail addresses with ; (semicolon). This is useful if you would like to subscribe your visitor to several services at once. E-mail subject: Here you may enter the text of the e-mail subject. For example, "subscribe me". E-mail body: Here you may enter the text of the e-mail subject. This field is available if you have chosen the "Show e-mail" Send method (see below). Here you can set the text that will appear in the body of the e-mail being sent by your visitor. For example: "Click 'Send' and you will shortly receive on your e-mail latest info on how to setup a simple web page". You can enter at most 420 characters. "OK" and "Cancel" buttons setup Set the texts for the two buttons in these fields. 'Popup Content' tab -> 'External Content' section 'Show this Web Page in the Popup' field If you choose to use a URL of a web page as your popups content then this field will be enabled and you will have to specify a valid URL for the web page that will appear in your popup. You can use either absolute or relative URLs. 'Popup Code' tab The 'Popup Code' tab lets you install your popup code to a desired web page of yours. 'Popup Code' tab -> 'Popup Code' section Popup Code Here you can copy the popup code using the 'Select & copy the code' button. Check the 'Add script tags' checkbox to add script tags to the popup code. The edit box below will show you the actual popup code. Use this section if you would like to install your popup code manually using your favorite HTML editor for example. 'Popup Code' tab -> 'Popup Installation' section If you need to install your popup automatically (recommended) to an existing HTML document, rather than manually, you can use this section. 'How to install the popup code' select box - select the popup code insertion method Using this select box you can choose between three different install methods: 'Directly into a web page file' option. The entire popup code will be inserted in the webpage file of your choice. You will be able to select where in the webpage file the code should be inserted using the 'Insert the code in section' select box below. 'Externally using a JS file' option. This method is recommended. The popup code will be saved in a separate JS file (JavaScript file). You will be able to select the name of the JS file or leave the automatically generated name. The automatically generated name is dynamically generated using the Popup ID (see Popup ID in the 'Popup Triggering Codes' section below). Whenever you change the Popup ID the JS file name will be regenerated. By selecting this install method you will insert in the webpage file only one line of code. You will be able to select where in the webpage file the code should be inserted using the 'Insert the code in section' select box below. This line of code will load the JS file with the popup. Be sure to upload both the JS file along with your HTML webpage file to your web server after you install the popup. Using this method you may install the popup to several web pages that are in the same folder (directory) on your web server - all web pages with the same popup inside will share the same JS file, so you will need to upload only one JS file for all web pages that have this popup inside. This method has the following benefits: When you decide to change the popup code you will need to regenerate your popup and upload ONLY the JS file to your web server, not the webpage file(s) again as the latter will not have any changes - the one line of code loading the JS file will not change if you don't change the Popup ID. Once the JS file is uploaded all web pages using this JS file will automatically start showing the new popup. You will get decreased bandwidth from your visitors to your server - the popup code will be downloaded only once for each visitor, no matter how many web pages with this popup inside he or she is visiting (browsers will cache the JS file). 'Only create a JS file' option - the full popup code will be saved in an external JS (JavaScript) file. This method is also recommended, because: You may regenerate a popup saved in a JS file easily without altering the web pages where the popup is included. You will be able to use the JS file to install popups in web pages that are not situated in the same folder on your web server. You get the same benefits as with the previous popup installation method. If you want to install a popup saved in a JS file to web pages located in different folders in your web server then you will need to add the following one line of code to your web pages where you want your popup to appear: <script type='text/javascript' src='http://mysite.com/popup-myid.js'></script> The URL above that is in bold http://mysite.com/popup-myid.js is the URL to the JS file holding the popup code. Here mysite.com is the domain of your site, while popup-myid.js is the JS file name. You may upload this JS file anywhere on your server and then insert the popup in any web page on your server using this one line of code. Isn't it neat? Now you can install the generated popup into WordPress and Joomla web sites. You need to upload the generated JS file to your server and remember the URL to this JS file. Then you read the WordPress plugin tutorial, the Joomla 1.5 plugin tutorial or the Joomla 2.5 plugin tutorial to see how to install popups into content management systems very easily and quickly. Path to webpage file text field and 'Browse' button Using this browse button you can select the webpage file to which you need your popup installed. After install of the popup code be sure to upload the webpage file to your web server. If you have chosen the 'Externally using a JS file' option in the 'How to install the popup code' select box above you will need to upload the created JS file to your web server too. Path for the JS file text field and 'Browse' button Using this browse button you can select the path (directory) where you want your JS file created. Be sure to upload the created JS file to your web server. For instuctions on how to insert JS file popups to web pages see the JS file install tutorial. For instuctions on how to insert JS file popups to WordPress websites see the WordPress plugin tutorial. For instuctions on how to insert JS file popups to Joomla websites see the Joomla 1.5 plugin tutorial or the Joomla 2.5 plugin tutorial. 'Insert the code in section:' select box Use this select box to choose where in the webpage file to install the popup code. You may choose between the <BODY></BODY> and <HEAD></HEAD> sections. The popup code will be inserted just before the closing HTML tag of the chosen section. The <BODY></BODY> section is recommended, becuase search engines will read the popup code last in the webpage file, which is good SEO practice. Insert code and delete code buttons You have seven buttons that you may use to install and delete popup code. If you have selected the 'Directly into web page file' install method then only the first two buttons will be enabled. 'Insert the popup code into the web page file' button Click this button to insert the popup code into the chosen web page file. If a popup with the same ID is already present in the web page file then you will be asked to confirm replacing the existing popup with the new one. Everytime you regenerate an old popup you will be asked to confirm overwrite of the popup code, thus you will not have to delete the old popup code before reinstalling it. The software will do this overwrite automatically. 'Delete the popup code from the web page file' button On the other hand, you may delete a popup from a web page file. Click this button to delete the popup with the given Popup ID from the selected web page file. Even if the popup was installed using an external JS file, this button will delete it. IMPORTANT: This button will not delete a JS file associated with the deleted popup! IT will only remove the code form the web page file that isntall the popup into this web page file. If you choose the 'Externally using a JS file' install method then only three buttons will be enabled and the first two and last two - disabled. 'Insert the popup code into the web page file and create the JS file' button Using this button you may insert a popup into a separate JS file and install it to the selected web page file by clicking the. The JS file will be created in the same folder (directory) where the web page file is located. Again, if a popup with the same ID and/or the same JS file has been already inserted in the selected web page document you will be prompted to overwrite it. 'Delete the JS file and the popup code from the web page file' button Click this button to delete the popup with the given ID and/or JS file from the selected web page file. The JS file will also be deleted! 'Delete popup from web page file, but leave the JS file' button To remove the popup install code from the web page file only, but leave the JS file, use this button. If you choose the 'Only create a JS file' install method you will have the lower two buttons enabled. Thus you will be able to create and delete a JS file holding popup code, but without installing or uninstalling the popup code to/from a web page file. This method is useful if you want to save popup code in a JS file that is to be used later in one or several web pages or content managemen systems. For instuctions on how to insert JS file popups to web pages see the JS file install tutorial. For instuctions on how to insert JS file popups to WordPress websites see the WordPress plugin tutorial. For instuctions on how to insert JS file popups to Joomla websites see the Joomla 1.5 plugin tutorial or the Joomla 2.5 plugin tutorial. 'Create the JS file only' button Click this button to create the JS file in the selected folder (directory). 'Delete the JS file only' button You may delete a JS file holding popup code using this button. 'Popup Code' tab -> 'Popup Trigger Codes' section Each popup is unique. This is done to avoid confusion when you have more than one popup installed in a given web page and you need some unique piece of code to tell each individual popup what to do. To make each popup unique you need to set a unique Popup ID. Set the Popup ID to "Manually set" (recommended) and enter an ID using letters, numbers and the underscore character. If you choose "Auto-Generated" (not recommended) for the Popup ID type, Popup Toolkit will generate a different and unique ID every time you change any setting in your current popup project, thus avoiding ID duplications. On any change you will get a different Popup ID and this will make it difficult to use Auto-Generated Popup IDs to control your popups. Also Auto-Generated Popup IDs don't have any sense and are hard to read and remember. Below the Popup ID settings you will find any available unique triggering codes for your current popup. Here you will see some examples on how to use these triggering codes too. The triggering codes available for the current popup are dependant on the chosen popup type and specified popup triggering mode. For further information on triggering codes please read the 'Popup Triggering' section found in the 'General Settings' tab.
Copyright © 2006- , www.Popup-Toolkit.com, All rights reserved.