A lightbox, also known as a pop-up modal, allows you to engage your audience, collect valuable first-party data, and foster genuine interactions. By turning a standard pop-up into a dynamic experience, you can offer discounts, ask questions, or build complete quizzes.
Create a lightbox
Navigate to the Template Gallery from the Builder tab dropdown menu.
Within the Template Gallery, select lightbox from the left-hand menu to view lightbox labeled templates.
Hover your mouse over the desired lightbox template and click "Use Template".
You will be prompted to name your lightbox and select a Style Guide, after which you will be directed to the Builder Map.
You can edit and style your lightbox using the full capabilities of the Jebbit Builder. The building area will be within a smaller box on the editor screen; the gray background is not visible to users.
Add various elements such as text boxes, image buttons, images, and form elements to collect information.
Modify your lightbox
Within the Builder, customize the content and design of your lightbox.
Adjust the size of text boxes and other elements as needed.
To optimize for smaller screens, especially on mobile, consider reducing font sizes and arranging buttons in columns by adding a Container element. Avoid split-screen layouts for mobile as they are not recommended.
Save your changes. You can preview the lightbox to ensure it looks as intended.
Once satisfied with the look and feel, publish the lightbox and proceed to configure launch settings on the Launch page.
Capture a UID with lightbox
Unlike standard experiences launched via a direct URL or iframe, lightbox and companion deployments are launched via JavaScript. This requires a different approach for capturing a User ID (UID).
Place the Global Snippet Code on your website as you normally would. Instructions for launching lightbox or companion can be reviewed as needed prior to this step.
Add the JavaScript Snippet: Directly below the Global Snippet Code on your website, insert the following line of JavaScript:
window.JebbitObject.userId = 'your-dynamic-user-id-tag';
Replace the Placeholder: Substitute 'your-dynamic-user-id-tag' with the actual tag that will dynamically capture the UID for recognized users. Your team will determine the appropriate tag to use.
By implementing this JavaScript, you are associating the captured UID with the specific lightbox deployment and the associated campaign.
Consequently, when you later pull your analytics, the captured UID will be visible, allowing you to track and analyze the behavior of known users interacting with the lightbox.
Convert a standard experience to a lightbox experience
Find the experience campaign that you want to convert in the Experience Library.
Hover your mouse over the experience tile, and click on the three dots that appear in the upper right corner.
From the menu that opens, select ‘Duplicate’.
Give the copy that you are creating a name.
Make sure that you select ‘lightbox’ as the 'Deployment Type' you are converting this copy into before selecting 'Done'. You can check which Campaign Properties you want to retain in the dropdown.
It may take a few moments for the copy to load. Once processing is complete, you will be brought to the Jebbit Editor.
After converting, you may need to adjust the size of your text to be smaller and move buttons into columns. You might also want to remove split-screen background images to optimize the content for the smaller lightbox screen.
Next Steps
Test your lightbox on your website to ensure it appears and functions correctly according to your configured settings and targeting. Monitor the performance of your lightbox in the Jebbit reporting dashboard.
FAQ
There's too much scrolling in my experience. How do I optimize my design for lightbox?
To reduce scrolling in your lightbox design, try decreasing the font size and tightening the layout. One effective way to do this is by using a Container element to group your buttons into columns, which helps make better use of the horizontal space. If your buttons weren’t originally placed inside a Container, you’ll need to delete the old ones after recreating them within the new layout. These small changes can go
Can the size of the lightbox be changed?
The lightbox unit size can't be manually adjusted. However, all Experiences by Jebbit are responsive and automatically scale to fit the user's screen.
Can I allow users to skip the Lead Form if we have captured their UID?
In lightbox and companion deployments, the Lead Form can't be skipped—even if you’ve already captured a UID. This limitation doesn’t apply to standard experiences, where you can add URL parameters to identify known users.
If I intend to target both known and unknown users, should I include a Lead Form?
Yes. If your lightbox or companion experience targets both known and unknown users, include a Lead Capture screen. This ensures all visitors are properly identified. If you're only targeting known users and capturing UIDs, you can skip the Lead Form.