Consumers are landing on your website for a more personalized experience. Why not embed a piece of evergreen content directly on one of your most popular channels? Jebbit campaigns can be embedded on any webpage using an HTML iframe.
Step by Step Guide
Within the "Launch" menu, select the "Website" tab on the left side panel as your channel. Click on "Embed on Site."
2. Within that section click “Create Embed Code" to generate the iframe code snippet to copy and paste the code in your website manager.
3. To create a custom link, select "Add custom Embed On Site launch link." Add in the custom link title and click on "Save."
4. If you have screens that vary in volume of content you can toggle on the "Use iframe Resizer" toggle. The Iframe Resizer tool will generate a specific additional snippet of code that will adjust the height of your iframe dynamically for screens with more content. After enabling the iframe resizer tool, copy and paste the code to your website manager.
Frequently Asked Questions
Q: How do I design my embedded experience campaign?
A: We recommend designing the experience to be on-brand with your website.
Q: How do I test an embedded campaign before going live?
A: Ideally, you should add the HTML snippet from Jebbit into a staging environment so you can 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, you can add the HTML snippet to your production site.
Q: Where do I place the experience iframe on my website?
A: Embedding a Jebbit experience above the fold has 3x the engagement rate as an experience below the fold. An additional popular execution of an on-site Jebbit experience is to add a specific tab to your website specifically with the experience. Check it out here! However, if you are linking out with a launch link URL, ensure you have a strong Call-To-Action (CTA) and it’s in a visible location on the site.
Q: Some users are having to scroll inside the iframe to see my complete experience! What should I do?
A: 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.
Q: Are there other options for getting my campaign displayed on my site?
A: Yes. In addition to linking directly to a launch link, you also have the option of displaying your experience as a Companion or Lightbox. Check out those links for more details on setting these up for your own campaign.
Q: What are tips for styling my embedded campaign?
A: By default, the Jebbit <iframe> has a minimum height of 600px and a width of 100%. You’ll want to make sure your iframe is wide enough to display all of its contents. Since every website is different, for the best appearance you may need to adjust the height and width of embedded campaigns. Be sure to test the embedded experience before launching.
Q: Is it possible to set a dynamic height?
A: 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. You can also use the "Iframe Resizer" tool to dynamically resize iframes based on the device type.
Q: How do I accomplish UTM Tracking with an iframe?
A: 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.
Check out this sample code to see what that looks like! Be sure to loop in your web development team when doing so, as two steps are required: 1) updating the iframe snippet that is copied from Jebbit and 2) pasting a JavaScript snippet onsite. Both of these things are shown in the sample code linked above:
There you have it! Now that you know how to map attributes onto your experiences, hop back into the XP platform and make sure you map attributes to all of your experiences!