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.

Lightbox Preview


In this article, you'll learn:



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.


Click the Icon on the Top-right in the page editor


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.


Configure the Lightbox Settings


Note: Click Test to see how the lightbox appears on your page.


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.


Paste the Lightbox JavaScript Code in the HTML Editor of your Page


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


Lightbox Preview


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.


Open the Lightbox window 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.


Paste the code in the HTML Editor for Multiple Popups


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

Multiple Lightboxes Preview


This is all about adding lightboxes to web pages.



Was this information helpful?
© 2005 - 2024 ProProfs
add chat to your website