loading Loading...
add chat to your website

Lightbox

A lightbox is a JavaScript overlay. Lightboxes are great for displaying help content. Lightboxes are not pop-ups; rather, they are an overlay on top of the current page. Sites like Facebook and Amazon make heavy use of lightboxes to display content. To add a lightbox to your website or application, all you have to do is copy and paste a small code snippet.


 

How to Add a Lightbox to Your Site

Step 1 - Generate the lightbox

You can turn any ProProfs page into a lightbox.

  1. Locate the page in ProProfs you want to add to your website or web application.
  2. In the toolbar, click Pop-Up & Lightbox.
  3. Click on the Lightbox tab.


Specify the following:

  • Width. Enter in the width of the lightbox window. The default is 500 pixels.
  • Height.  Enter in the height of the lightbox window. The default is 700 pixels.
  • Use https. If your website or web application runs on https:// (SSL) then check this box. This will update the link in the code from http:// to https://
  • Background Overlay. Click if you want the lightbox to have a transparent (80%) background overlay color.  
  • Use Page ID. By default the embed code will use the page's URL. However, if you later change the page URL the lightbox will no longer work. The page ID will never change so this option is ideal if you plan on changing the page URL later. 
  • Test. Clicking the Test button will open the lightbox so you can test it before you copy the code.

 

Step 2 - Copy the code snippet

The next step is to copy the code snippet from ProProfs and paste it into your website.


  1. Right-click inside the input box, and select Copy.

 

Step 3 - Paste the code into your website or web application

The next step is to add the code to your website.  To do this, simply copy and paste the code snippet to your website wherever you want the lightbox to appear. It will insert a hyperlink to open the lightbox.

If you work with a developer, simply copy the code, and email it to the developer.

 

Here is an example of lightbox code in a basic HTML webpage:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<!-- Start lightbox code -->
<script src="http://www.helpdocsonline.com/jquery-1.7.2.min.js"></script>
<script src="http://www.helpdocsonline.com/v2/lightbox.js"></script>
<a id="679" href="javascript:;">Adding a Profile Photo</a>
<script type="text/javascript">
var lb = new TopicLightBox({
            baseUrl: 'http://emailmarketingco.helpdocsonline.com/',
            id:679,
            title:"Adding a Profile Photo",
            background: true,
            width:700,
            height:500
            });
</script>
</body>
</html>

 

Step 4 - Save and preview

After you add the code to your webpage, save the webpage, and preview it.

The Code Snippet

We have added //comments next to each line to help explain this sample code snippet.

 

<script src="http://www.helpdocsonline.com/jquery-1.7.2.min.js"></script>
<script src="http://www.helpdocsonline.com/v2/lightbox.js"></script>//this is the link to the javascript file. You can move this to your pages <head> 
<a id="679" href="javascript:;">Profile Photo</a> //link name and can be changed
<script type="text/javascript">
var lb = new TopicLightBox({
      baseUrl: 'http://emailmarketingco.helpdocsonline.com/', //do not change this
      id:679,  //this is the ID of the page do not change.
      title:"Adding a Profile Photo", //lighboxes title, delete it for a blank title
      background: true, //change to false if you do not want a background overlay
      anchor: "name of anchor" //Add this manually to target a specfic anchor target on a page
      width:700, //width of the lightbox
      height:500 //height of the lightbox
            });
</script>

 

Adding Multiple Lightboxes to a Website

If you are adding multiple lightboxes to a single webpage, you will not want to load the JavaScript file more than once. The solution is to move the JavaScript script file to the head of your webpage.

 

Here is an example of a webpage with two lightboxes:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<script src="http://www.helpdocsonline.com/jquery-1.7.2.min.js"></script> //moved to head of page
<script src="http://www.helpdocsonline.com/v2/lightbox.js"></script>  //moved to head of page
</head>
<body>
<!--Lightbox 1-->
<a id="679" href="javascript:;">Adding a Profile Photo</a>
<script type="text/javascript">
var lb = new TopicLightBox({
        baseUrl: 'http://emailmarketingco.helpdocsonline.com/',
        id:679,
        title:"Adding a Profile Photo",
        background: true,
        width:700,
        height:500
    });
</script>
<!--Lightbox 2-->
<a id="518" href="javascript:;">Email Checklist and Scheduled Delivery - Step 6</a>
<script type="text/javascript">
var lb = new TopicLightBox({
        baseUrl: 'http://emailmarketingco.helpdocsonline.com/',
        id:518,
        title:"Email Checklist and Scheduled Delivery - Step 6",
        background: true,
        width:700,
        height:500
    });
</script>
</body>
</html>

 

Adding a Lightbox to a ProProfs page

You can also add a lightbox on a ProProfs page. You will need to insert this hyperlink in the pages source. To do this click on 'Source' from the editors toolbar and paste in the below code where you want the link. Then update the link name and click the 'Source' icon again to view the page.

 

Choose any of the link formats below. You can open a lightbox by page name, page ID, or URL. You can also open to a specific anchor point on the page

page-name$anchor

 

Page url:

This will open the lightbox by the page URL name. For example if you have a page site.helpdocsoline.com.com/how-to-reset-password you would copy how-to-reset-password and update that section in the link code. You can also target a specific anchor point on that page how-to-reset-password$anchor

 

<a href="how-to-reset-password" rel="lightbox">Link</a>
<a href="how-to-reset-password$anchor" rel="lightbox">Link</a>
<a href="how-to-reset-password&amp;width=600&amp;height=500&amp;bg=true" rel="lightbox">Link</a>

 

Url from another site:

You may want to include a lightbox from another one of your sites. Just copy the URL of the page and update that section of the link code. 
 

<a href="http://site.helpdocsonline.com/pagename" rel="lightbox">Link</a>
<a href="http://site.helpdocsonline.com/pagename$anchor" rel="lightbox">Link</a>
<a href="http://site.helpdocsonline.com/pagename&amp;width=600&amp;height=500&amp;bg=true" rel="lightbox">Link</a>

 

Page ID:

The page ID never changes so you do not have to worry about later updating a page URL and having it break your links. To find the page ID just view a page, and from the toolbar select Print > Page Links. Copy the ID and update the link code.
 

<a href="ID123" rel="lightbox">Link</a>
<a href="ID123$anchor1" rel="lightbox">Link</a>
<a href="ID123&amp;width=600&amp;height=500&amp;bg=true" rel="lightbox">Link</a>

 

Page Style and CSS

The page's style and formatting are defined by your site's CSS.  At this time, you cannot change the style of the actual lightbox window.

Updating Content

Once you have added the code snippet to your webpage or web application, you do not have to worry about making any updates on your webpage. You do not have to copy and paste the code to your webpage each time you make an update in ProProfs. Any updates you make in ProProfs to a page's content will instantly update the lightbox on your webpage. Our goal is to make help content management easy for you.