This article explains how to embed a Jebbit campaign directly onto your website using an HTML iframe. Embedding evergreen content on popular channels can provide a more personalized experience for consumers visiting your site.
Before you begin
Consider the design of your Jebbit experience to ensure it aligns with your website's branding.
Determine where on your webpage you will embed the experience.
Preview and publish the experience campaign to save the version.
Create the embed code
To embed a Jebbit campaign on your site:
Navigate to the Launch tab.
Click on Website > Embed on Site.
Select Create Embed Code button to generate the iframe code snippet.
Click on the Copy icon to copy the generated iframe code snippet.
Paste the code into your website manager where you want the Jebbit experience to appear.
(Optional) Select Add another custom Embed On Site launch link to create a custom link. Click Save.
Note: You must publish your experience before embedding it. If you haven't published yet, you'll be prompted to name and publish your current iteration.
Enable iframe resizer
If your website has screens with varying content volume, you can enable the iframe resizer. This tool generates an additional code snippet that dynamically adjusts the height of your iframe.
Toggle the Use iframe Resizer to on.
Copy and paste the code to your website manager after enabling the iframe resizer.
If your experience is already embedded, you will need to update your embed code for this to work
Enable user ID
This feature will append the 'uid' parameter onto the end of the launch link. You can use the query parameter to pass your known users (i.e. logged-in users, an identifier tied to a customer's email).
Toggle the User ID to on.
Best practices for driving traffic
There are three main types of on-site distribution methods in Experiences by Jebbit.
Hyperlink
This functions like launching on a social channel or through email, simply link a CTA button to the standard launch link.
We recommend opening the experience in a new browser tab or window rather than redirecting in the same tab.
Place above the fold to maximize visibility and eliminate the need for scrolling.
Embedded
This method displays the experience directly on your site via iframe and feels native to the consumer experience.
Toggle on the Embed Code in the Launch Link tab to generate an iframe. Customize dimensions as needed.
For best performance, embed the experience above the fold.
Companion
Start with one basic companion experience (e.g., segmentation & navigation to capture motivation) on a moderately trafficked area to understand your site's unique traffic behavior.
Include a strong CTA and highlight the incentive or subject matter.
Keep content brief due to limited space.
Ideal for high-traffic areas to ensure visibility.
Next Steps
Test your embedded campaign in a staging environment before going live to ensure the settings like height and width are optimal for your site.
Verify that the complete experience is visible and users do not need to scroll within the iframe unnecessarily.
Consider making the container for the iframe responsive, as Jebbit experiences are optimized for mobile devices.
FAQ
How do I test an embedded campaign before going live?
Add the HTML snippet into a staging environment to ensure that you have configured the settings within the iframe (like height and width) to look optimal on your site. Then, once you are certain that everything looks good, add the HTML snippet to your production site.
Where do I place the experience iframe on my website?
Embedding a Jebbit experience above the fold has 3x the engagement rate as an experience below the fold. Another popular way to use an on-site Jebbit experience is to add a specific tab to your website with the experience. However, if you are linking out with a launch link URL, ensure you have a strong Call-To-Action (CTA) in a visible location on the site.
Some users are having to scroll inside the iframe to see my complete experience. What should I do?
In this case, you can either toggle on dynamic iframe resizing or change the pixel width from the default 600px to 800px, or some other value depending on what looks best. Playing around with these values will yield the best result for your particular site.
What are tips for styling my embedded campaign?
By default, the Experiences by Jebbit iframe has a minimum height of 600px and a width of 100%. Make sure your iframe is wide enough to display all of its contents. Since every website is different, for the best appearance, you might need to adjust the height and width of embedded campaigns. Be sure to test the embedded experience before launching.
Is it possible to set a dynamic height?
We recommend maintaining a minimum height and making the iframe’s width grow and shrink with the window. The experiences are optimized for mobile devices, so keep in mind that you might need to make the container you place the iframe in responsive.
How do I accomplish UTM Tracking with an iframe?
By default, the iframe snippet that is generated from the platform will host a Full Page launch URL with standard Jebbit parameters for Channel Tracking. If you want to add additional UTM tracking parameters, you can do so by manually modifying the iframe snippet after you copy it from the Jebbit launch page. The easiest thing to do is append static UTM parameters to the iframe URL. However, it is possible to configure the URL within the iframe snippet to dynamically capture UTM parameters from the parent page too. Coordinate with your web development team to update the iframe, modify the Jebbit iframe snippet and paste the JavaScript snippet onsite. Some sample code can be found here.
If I toggle on the iframe resizer in Jebbit, do I need to replace the old snippet on my site?
Toggling on the iframe resizer just adds an extra piece of JavaScript to the embed code in the platform. You will need to re-copy and re-paste the new snippet on your website to ensure that the iframe resizer code is implemented properly onsite.
What is the intended user experience when moving between a longer screen to a shorter screen?
In the experience, if the user is moving from a longer screen to a shorter screen, we will scroll them to the top to keep the next screen's contents in view.
Why aren't my redirect links working within my embedded campaign?
Redirect links within embedded (iframe) campaigns do not automatically redirect the entire webpage due to security measures against clickjacking and phishing. However, you can enable a "popout redirect" in the Outcome URL settings within the Builder Map (by clicking the URL node). This option will open the redirect link in a new browser tab.