This article guides you through launching your Lightbox experience on your website. Configure the launch settings to display the pop-up experience live.
Before you begin
Confirm that you have already built and styled your Lightbox unit with Jebbit.
Verify the experience is published.
Configure lightbox settings
1. Behavior
Navigate back to the Launch tab.
Click on Website > Lightbox.
Determine when to display the lightbox under Behavior. Select either Page load or Action based. Page load shows right after a user opens a page. With Action based you can:
a. Delay appearance: Set the time limit to delay when the lightbox appears.b. Set scroll depth: Trigger the lightbox when a visitor scrolls a specific percentage of the page. Select the desired percentage.
c. Configure exit intent: Trigger the lightbox when the visitor's cursor exits a designated area of the page.
d. Set on click trigger: Trigger the lightbox when a visitor clicks a button on your website.Copy the code for the On Click trigger to add a new button to your site or to add it to an existing button on your site.
Determine How often to display the Lightbox.
a. Trigger at Most, which sets a limit on how often a visitor can see your lightbox, or,
b. Traffic Percentage, which only shows the lightbox to a % of visitors.
The On Click snippet is an attribute added to the opening tag of the element. Your code would look like the example below.
<button data-jebbit-start-experience type="submit" class="Form__Submit Button Button-primary">Check it out!</button>
2. Preferences
Determine the devices on which the lightbox will be visible. Select All, Mobile or Desktop.
Manage the Privacy Policy link by selecting Jebbit, Custom URL or Don't Show.
Enable or disable the help feature with the 'What is this?' setting.
3. Placement
Select All Pages to display the lightbox on every page of your site.
Select Specific URLs to define rules for showing the lightbox on particular pages.
Set rules using ALL conditions match (and) or ANY conditions match (or) logic. Most users use ANY.
(Optional) Add as many rules as you'd like.
To save time, copy and paste multiple URLs, separated by commas or from a spreadsheet by clicking on Add Multiple URLs.
Add the global snippet code
Click on your brand name in the upper right corner and select Settings from the drop-down.
Click Onsite Deployment from the left panel.
Click Copy Snippet.
Add it to your website by embedding it directly within the
<head>or<body>tags.
Enable lightbox
Toggle the Disabled switch to Enabled. This will make your lightbox live on your website.
Configure lightbox on Shopify
Log into the Shopify admin.
Select Online Store > Themes.
Next to the theme that you want to edit, click the three dots to open the actions menu.
Click Edit code.
Navigate to the Assets folder.
Locate the global.js file.
Paste the Jebbit code snippet to the bottom of the global.js page to turn on the lightbox.
Configure lightbox via Google Tag manager
Google Tag Manager provides an alternative method for deploying the Jebbit Global Code Snippet. By using Tag Manager, you gain greater control over when and where the Jebbit code is executed on your pages.
Log into your Google Tag Manager account.
Create a new tag and set the tag type to Custom HTML.
Navigate to your brand name in the upper right corner and select Settings from the drop-down. Select Onsite Deployment on the left panel.
Locate Global Snippet Code from the Onsite Deployment menu.
Click Copy Snippet.
Return to Google Tag Manager.
Paste the copied Global Snippet Code into the HTML field of the tag you created in Step 2. Click Save.
Use Google Tag Manager to indicate which pages on your site the code in the tag should fire on. Additionally, you can accomplish the same thing within Jebbit platform from the Launch page for your lightbox.
Next steps
Monitor the lightbox performance using the Channel Analytics dashboard.
Test the lightbox thoroughly in your development environment before launching in production.
FAQ
Can I have more than one lightbox on the same page?
No. The Jebbit platform currently supports only one lightbox per page. Attempting to use multiple lightboxes can lead to unexpected behavior and is not recommended. If you attempt to deploy multiple lightboxes (e.g., one on page load and one on-click), only the first lightbox triggered will function correctly. For additional use cases, consider using a standard experience with a Launch URL or embed code.
Where should I place the Global Snippet Code on my site?
The snippet must be placed on any page where you want the Lightbox to potentially launch. For maximum flexibility, it is recommended to add the snippet globally within the
<head> tag of your website.
Should I wrap the Global Snippet Code in <script> tags when I paste it into another system?
The most common issue that users run into is not adding <script> tags around the Global Snippet Code. They are not included in the snippet that you grab from Jebbit because they are not needed when pasting the snippet onsite within the <head> or <body> tags. But if you are pasting the Global Snippet Code into another system, like Google Tag Manager, then you will need to make sure you wrap the code in <script> tags.
Can I combine settings from Step 1 (Behavior) on the launch page?
You can combine some of the options from Step 1 on the Lightbox launching page to work together; for instance, you can set both delay of appearance and scroll depth to have your Lightbox tigger 5 seconds after a user has scrolled 25%.
Can I launch Lightbox when users click on a button on site?
One of the Action Based rules is that you can set is triggering your Lightbox through a button click. This is the On Click option within the Action Based settings.
How does UTM Tracking work with Lightbox units?
Lightbox units are not deployed through a standard url or iframe and as such, we don't support UTM tracking with Lightbox units.