How to Add a Lightbox

A lightbox is a JavaScript overlay. Lightboxes are great for displaying additional content. Lightboxes are not pop-ups; rather, they are overlays on the current page. Sites like Facebook and Amazon make heavy use of lightboxes to display content. You must copy and paste a small code snippet to add a lightbox to your website or application.

Lightbox is beneficial in the following use cases:

• The lightbox can display specific information from a private knowledge base to an external webpage for the general user.

• It is effective when you don't want users to load additional pages as the user need not always be directed to another page.

This is how a lightbox appears on your webpage.

In this article, you'll learn:

• How to Add a Lightbox to Your Site
• How to Add Multiple Lightboxes to a Webpage
• How to Add a Lightbox to a ProProfs Page

How to Add a Lightbox to Your Site

In your PropProfs Knowledge Base Editor,

Step 1: Navigate to the page/folder you wish to add to the lightbox.

Step 2: In the Lightbox tab.

• Specify the width and height.

• If required, check the ‘‘Use HTTPS,’’ ‘‘Background Overlay,’’ and ‘‘Use Page ID’’ options.

• Copy the JavaScript code.

Step 3: Open the page editor of the website on which you want to display the Lightbox.

Step 4: Paste the code into the HTML editor and save the changes.

A link will appear on your webpage. Click to open the lightbox.

Understanding Lightbox Settings

• Width specifies the width of the lightbox window. The default is 500 pixels.

• Height specifies the size of the lightbox window. The default is 700 pixels.

• Use HTTPS when your website or web application runs on - https:// (SSL). 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: The embed code, by default, will use the page’s URL. However, if you change the page URL later, the lightbox will no longer work. You can prevent this using the page ID, as it will never change. Hence, it becomes an ideal option if you plan on changing the page URL later.

 How to Add Multiple Lightboxes to a Webpage

Step 1: Open the Lightbox tab. Select and copy the code snippet.

Step 2: Open the page editor of the website on which you want to display the Popup window.

Step 3: Paste the JavaScript for multiple popups which you have selected. Save the changes.

This is how the multiple lightboxes will appear on your webpage.

How to Add a Lightbox to a ProProfs Page

You can add a lightbox to a ProProfs page by inserting a hyperlink in the page's source code. Follow these steps:

1. Access the Source Code

1. Open the ProProfs page where you want to add the lightbox.
2. Click on the ‘Source’ option from the editor's toolbar.
3. Paste the code snippet (provided below) where you want the link to appear.
4. Customize the link name or anchor point as needed.
5. Click the ‘Source’ icon again to return to the standard view.

2. Choose a Link Format

There are three ways to open a lightbox: by page name, page URL, or page ID. You can also target a specific anchor point on the page.

3. Opening a Lightbox by Page Name or URL

• Page URL Example
  If your page is located at site.helpdocsonline.com/how-to-reset-password, copy the last part of the URL (i.e., how-to-reset-password) and update the link code.
• Anchor Point Example
  To open a lightbox at a specific section of a page, append the anchor point to the URL, like this: how-to-reset-password$anchor.

Here are sample link formats:

4. Using a URL from Another Site

If you want to include a lightbox from a page on another site, simply copy the page URL and update the relevant part of the link code.

Here are sample link formats for external URLs:

5. Opening a Lightbox by Page ID

Using a page ID is a stable option, as it doesn’t change even if the page URL is updated. To find the page ID:

1. Open the desired page.
2. From the toolbar, select Print > Page Links.
3. Copy the page ID and update the link code.

Here are sample link formats using a page ID:

6. Page Style and CSS

The lightbox inherits its style and formatting from your website's CSS. However, at this time, you cannot customize the appearance of the lightbox window itself.

7. Updating Content

Once you've added the code snippet to your webpage or web application, there’s no need to update the code again. Any changes you make to the content within ProProfs will automatically reflect in the lightbox on your webpage.

This is all about adding lightboxes to web pages. If you encounter any issues or have any questions, feel free to contact our support team.