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 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.

This is all about adding lightboxes to web pages.