Once you're done building and styling your Lightbox unit with Jebbit, you will move on to configuring your launch settings to get the pop-up experience on your site! If you have not yet built your Lightbox, follow this guide here.
Video Tutorial
Step by Step Guide
When you are ready to launch your Lightbox experience, click the 'Launch' tab at the top of your builder map.
You will be brought into 'Lightbox' launch page directly, which is a tab within the 'Website' menu on the left. In the Lightbox menu, you will find under Preferences the following launching options:
If you want your Lightbox to appear when the designated page(s) on your website load, then you will select "Page Load."
If you want your Lightbox to appear based on specific actions then you will select "Action Based" and then customize the specific action based triggers that you want.
By default, the Lightbox will trigger once per visitor on site. But, we have some cool feature launch settings that you can configure on how the unit is deployed onsite! Check it out:
Set it to 'Trigger at Most' to adjust the number of times the Lightbox will deploy per visit. You can also select whether you want your Lightbox to be shown for all site visitors, or only for mobile traffic or desktop traffic.
The 'Traffic Percentage' allows you to control the percentage of visitors that will view the Lightbox unit onsite. This setting can be used for testing on a small portion before firing the Lightbox for all site traffic audience.
Select whether you want to use the standard Jebbit privacy URL, add your own privacy URL, or not show it.
To display your Lightbox from any page on your site, select "All Pages"
To show your Lightbox on specific URLs, then select "Specific URLs" and continue to steps 10 and 11
Most commonly, users list individual URLs on this step and use the "ANY conditions match (or)" setting
You can use the "ALL conditions match (and)" setting but it's less common. In this scenario, Jebbit will verify if the page URL contains every rule criteria, and then only show your Lightbox in that instance
Once you have the launch settings configured. In order for a Jebbit Lightbox to appear on your site, you will need to add Jebbit's global code snippet to your site. Click on your brand name in the top right corner and select 'Settings' from the menu.
Select "Onsite Deployment" from the left hand menu and the snippet that you will need to add to your site will be found at the top of the page. Embed this code directly on site or through a Tag Manager.
The final step in the Launch process is enabling your Lightbox. Navigate to your Workbench, hover your mouse over the Lightbox tile, click on the three dot menu that appears in the top right corner, and select 'Enable' from the list.
Launching a Lightbox on Shopify
This guide walks through the specific steps for launching Lightbox within a Shopify storefront.
After generating the Ligthbox code from the Onsite Deployment section in your Settings menu.
2. Navigate to your Shopify store. Select 'Themes' from the left navigation bar (under Online Store).
3. On the theme preview, select 'Actions' and 'Edit code.'
4. Navigate to the 'Assets' folder.
5. Find the 'global.js' file.
6. Paste the global code snippet from the Jebbit platform to the bottom of the 'global.js' page - this will allow you turn on the Lightbox within the Jebbit platform!
Launching a Lightbox via Google Tag Manager
When you launch a Companion or Lightbox experience, you have the option of embedding the Global Code Snippet directly onsite, or through a tag manager. In this section, we'll walk through the steps for adding the snippet to Google Tag Manager.
Set up a tag within Google Tag Manager for the Jebbit snippet in particular. Select "Custom HTML" as the "Tag Type" when you do so!
Navigate to your Brand Settings within Jebbit and grab the Global Snippet Code from the Onsite Deployment menu.
Paste the Global Snippet Code directly into the tag that you've set up. It will look like this:
Use Google Tag Manager to indicate which pages on your site the code in the tag should fire on. Or you can accomplish the same thing within Jebbit platform from the Launch page for your unit as well.
Frequently Asked Questions
Q: Where should I place the Global Snippet Code on my site?
A: The snippet must be placed on any page where you would like to launch Lightbox. For example, if you'll be launching just on the home page, add it to the <head> or <body> of the home page. But if you want more flexibility, adding the snippet globally (which means adding it to the <head> tag in most cases) will allow you to launch on any page.
Q: Should I wrap the Global Snippet Code in <script> tags when I paste it into another system?
A: 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.
Q: Can I combine settings from Step 1 on the launch page?
A: 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%.
Q: Can I launch Lightbox when users click on a button on site?
A: One of the Action Based rules that you can set is triggering your Lightbox through a button click. This is the "On Click" option within the Action Based settings. Watch the following video to see how it's done!
You can add a new button to your site that will trigger your Lightbox, or you can set up a trigger on an existing button:
New button: Copy the code snippet and paste onto the portion of your website where you want it to display. This will add a brand new button to your site. Note that you may want to update the styling of the button.
Existing button: Copy the snippet and add it to an existing button (or one you create on your own).
The snippet would be an attribute added to the opening tag of the element. So 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>
Q: How does UTM Tracking work with Lightbox units?
A: Because Lightbox units are not deployed through a standard url or iframe, we don't support UTM tracking with Lightbox units.