Popup Toolkit - JS File Install Tutorial

This tutorial will show you how to install the popup code using JS (JavaScript) files.

Once you have your popup setup and you like how it looks and behaves in the preview window(s) you need to install the popup code to your web page(s). The preferred way to do this is by saving the popup code into JS (JavaScript) file. Thus your popup code may be reused in several web pages by just adding one line of code to each web page where you want your popup to appear.

For full explanation of the 'Popup Installation' section and all automatic methods of installing popups to your web pages see the User's Manual/'Popup Installation' section.

Open Popup Toolkit software and go to 'Popup Code' tab:

fig.1 - 'Popup Code' tab in Popup Toolkit software.

In the 'Popup Installation' section on the right you will see the select box 'How to install the popup code:'. You have three options:

1. 'Directly into a web page file' option - the popup code will be installed in the chosen web page file.
   
   This method is not recommended, because you will not be able to reuse this popup code in several web pages. You may, of course, install the popup into several web pages using this method but the popup code will be replicated in all web pages, which has the following draw backs:
   • When you decide to change the popup code you will have to reinstall it in all web pages where it was previously installed.
   • You will get increased bandwidth from your visitors to your server - the popup code will be downloaded from each web page where you have installed it.
   
   
2. 'Externally using a JS file' option - the popup code will be installed in the chosen web page file using only one line of code. The full popup code will be saved in an external JS (JavaScript) file.
   
   This method is recommended, because you will be able to reuse this popup code in several web pages. You get the following benefits:
   • When you decide to change the popup code you will need to only regenerate and re-upload the JS file. 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).
   Using this method you may install the same popup in several web pages without replicating the popup code. If all web pages holding the popup are located in the same folder (directory) on your web server then you will need to upload the JS file only once in that folder and this JS file will serve for all web pages that include it. Later, when you change the popup you will have to only regenerate the JS file and upload it (see the next option). The changed popup will appear automatically in all web pages where it was installed.
   
   To create a JS file only see the next option.
   
   
3. '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. 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.

For further details on specific features and effects, refer to the User's Manual.

Finally, if you encounter any problem or need help, contact me (see bottom of page for contacts).

Enjoy!