Overview
Native Embed mounts any BlueConic Experience directly into your webpage without an iframe, using only one line of HTML and one line of JavaScript.
No iframe needed.
Lightweight and fast.
Supports multiple experiences on the same page.
Works with both published and draft experiences.
Installation
To install the Native Embed SDK, include the production CDN script:
<script src="https://js.jebbit.com/v1/embed.js"></script>
How it works
Use jebbit.launch() to embed an Experience inside any HTML element:
jebbit.launch('#my-container', 'your-campaign-id', { draft: true });
Example HTML Page
Ready-to-copy HTML template with four embedded experiences:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Jebbit Embedded Experiences – Simplified API</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://js.jebbit.com/v1/embed.js"></script>
<style>
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
.host-content {
background-color: #eef;
padding: 20px;
}
.embedded-section {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
}
.app-container {
width: 45%;
height: 660px;
border: 2px solid #ccc;
padding: 10px;
box-sizing: border-box;
overflow: hidden;
}
h2 {
width: 100%;
}
</style>
</head>
<body>
<div class="host-content">
<h1>Jebbit Embedded Experiences Demo</h1>
<p>All experiences below use the <strong>simplified API</strong> with <code>jebbit.launch</code>.</p>
</div>
<div class="embedded-section">
<div id="exp1" class="app-container"></div>
<div id="exp2" class="app-container"></div>
<div id="exp3" class="app-container"></div>
<div id="exp4" class="app-container"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', async () => {
await jebbit.launch('#exp1', 'CAMPAIGN_ID_1', { draft: true });
await jebbit.launch('#exp2', 'CAMPAIGN_ID_2', { draft: true });
await jebbit.launch('#exp3', 'CAMPAIGN_ID_3');
await jebbit.launch('#exp4', 'CAMPAIGN_ID_4');
});
</script>
</body>
</html>
Parameters
Parameter | Type | Description |
|
| DOM node or selector where the experience will mount |
|
| The public ID of the campaign to embed |
|
| (Optional) Load the draft version of the campaign |
|
| (Optional) Load preview mode for internal testing |
Usage
You can call jebbit.launch() multiple times for different containers and campaigns.
The SDK ensures it only initializes once per page load.
jebbit.launch('selector', 'campaignId', { draft: true, preview: false });
Local Development
⚠️ When testing the embed locally, make sure your HTML page is served over HTTPS (for example: https://localhost)
The embed SDK blocks all requests that originate from non-secure origins (
http://...) as a security measure.This only applies during local development — in production (where sites are served over HTTPS), it will work normally.
1. Serve a Static HTML Page Over HTTPS
# 1. Install mkcert (only once)
brew install mkcert
mkcert -install
# 2. Generate a localhost certificate
mkcert localhost
# 3. Serve your HTML over HTTPS
npx http-server -S -C localhost.pem -K localhost-key.pem .
2. Open:
https://localhost:8080
3. Create React App (CRA)
Add this to a .env file in the root of the project:
HTTPS=true
4. Then run:
npm start
5. The app will run at https://localhost:3000
Vite
1. In your vite.config.js file add the following:
import { defineConfig } from 'vite';
export default defineConfig({
server: {
https: true
}
});
2. Then run:
npm run dev
3. The app will run at https://localhost:5173 (or similar)
Next.js
1. Run the dev server with certificate and key:
next dev --https --ssl-cert localhost.pem --ssl-key localhost-key.pem
2. The app will run at https://localhost:3000