How to Add a Lightbox

Lightbox is an effective feature for showcasing images, videos, or HTML content in a "popup" overlay directly on the webpage. This functionality captures user attention by spotlighting particular content while keeping them on the same page. Follow the help article for detailed instructions on implementing Lightbox in your knowledge base.

By leveraging Lightbox on your knowledge base site, you can:

• Seamlessly Share Information: Effortlessly display select content from a private knowledge base directly onto an external webpage, making it accessible to the general public.
• Minimize Navigation: Eliminate the need for users to navigate to additional pages. Lightbox lets users view important information without being redirected elsewhere, streamlining their browsing experience.
• Enhance User Engagement: Capture and retain user attention by highlighting critical content on the page they are viewing, ensuring they stay focused and engaged.

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: Access the Lightbox Feature

• In your PropProfs Knowledge Base Editor, navigate to the page or folder where you wish to add a lightbox.
• Locate and click the "Lightbox" icon in the extreme right corner of the page editor. 

Step 2: Configure Your Lightbox

• Click to expand the Lightbox menu, and set the width and height for your Lightbox, e.g., 500 pixels wide by 700 pixels high.

• For secure content delivery, ensure the 'Use HTTPS' option is checked, especially if your site runs on HTTPS. Copy the JavaScript code.

• To add a background overlay, select the 'Background Overlay' option for an 80% transparent color, enhancing focus on the lightbox content.

• Choose 'Use Page ID' to maintain lightbox functionality even if the page URL changes, as the page ID remains constant. 

Step 3: Open the page editor of the knowledge base site where you wish to display the Lightbox. 

Step 4: Paste the copied JavaScript code into the editor and save your changes to implement the Lightbox.

A link or a button that triggers the Lightbox will now be visible on your page. Customize this element to match your site's design for a seamless user experience.

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.

 To Add Multiple Lightboxes to a Webpage

Step 1: Repeat the initial steps in the Lightbox menu, but select and copy the JavaScript snippet designed for multiple lightboxes.

Step 2: paste the JavaScript code for the multiple lightboxes.

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

This is all about adding lightboxes to web pages.