elements
if (!inlineTarget) {
inlineTarget = document.querySelector('[data-beezy-widget="' + config.apiKey + '"]');
}
// Host element
hostEl = document.createElement('div');
hostEl.id = 'beezy-widget-host';
if (inlineTarget) {
inlineTarget.appendChild(hostEl);
} else {
document.body.appendChild(hostEl);
}
// Shadow DOM
shadowRoot = hostEl.attachShadow({ mode: 'closed' });
// Styles
var style = document.createElement('style');
style.textContent = getStyles();
shadowRoot.appendChild(style);
// Stories carousel
var isInline = !!inlineTarget;
var formatClass = config.format !== 'circles' ? ' format-' + config.format : '';
var posClass = isInline ? 'inline' : config.position;
var storiesRow = document.createElement('div');
storiesRow.className = 'beezy-stories-row ' + posClass + formatClass;
buildStoriesBubbles(storiesRow);
shadowRoot.appendChild(storiesRow);
// Inline branding below stories (merchant mode only)
if (isInline && WIDGET_MODE !== 'publisher') {
var inlineBrand = document.createElement('div');
inlineBrand.className = 'beezy-inline-branding';
inlineBrand.innerHTML = '
Made by I am Beezy';
shadowRoot.appendChild(inlineBrand);
}
// Powered by branding (publisher mode) — injected into page DOM after host element
if (isInline && WIDGET_MODE === 'publisher') {
var poweredBy = document.createElement('div');
poweredBy.className = 'beezy-powered-by';
poweredBy.style.cssText = 'width:100%;text-align:right;font-size:10px;color:#aaa;margin-top:8px;margin-bottom:16px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;';
poweredBy.innerHTML = 'Powered by
I am Beezy';
hostEl.parentNode.insertBefore(poweredBy, hostEl.nextSibling);
}
// Backdrop (for modal mode)
var backdrop = document.createElement('div');
backdrop.className = 'beezy-backdrop';
backdrop.addEventListener('click', function() { close(); });
shadowRoot.appendChild(backdrop);
// Panel
var panel = document.createElement('div');
panel.className = 'beezy-widget-panel ' + config.position;
panel.innerHTML = buildPanelHTML();
shadowRoot.appendChild(panel);
// Bind events
bindPanelEvents(panel);
}
function buildStoriesBubbles(container) {
container.innerHTML = '';
if (campaigns.length === 0) {
// No slides — hide the widget entirely
container.style.display = 'none';
return;
}
// Single-ad formats: cinematic, editorial, minimal, banner, sticky
var singleAdFormats = ['cinematic', 'editorial', 'minimal', 'banner', 'sticky'];
if (singleAdFormats.indexOf(config.format) !== -1) {
buildSingleAdLayout(container);
return;
}
// Rich cards format: landscape rich cards (YouTube/Google Discover style)
if (config.format === 'richcards') {
buildCardsLayout(container);
return;
}
// Squares format: grid Instagram style
if (config.format === 'squares') {
buildSquaresLayout(container);
return;
}
if (config.format === 'instatriptych') {
buildInstatriptychLayout(container);
return;
}
for (var i = 0; i < campaigns.length; i++) {
(function(index) {
var c = campaigns[index];
var bubble = document.createElement('div');
bubble.className = 'beezy-story-bubble';
var thumbHtml = '';
var videoSrc = c.videoUrl || (c.mediaUrls && c.mediaUrls[0]) || '';
if (c.thumbnailUrl) {
thumbHtml = '
';
} else if (videoSrc) {
// Placeholder image — will be replaced by Canvas-generated thumbnail
thumbHtml = '
';
} else {
thumbHtml = '
' + ICON_PLAY + '
';
}
// Play overlay (all formats)
var playOverlay = '
';
// Label: slide title (like Instagram shows Reel name)
var label = c.title || 'Video ' + (index + 1);
var maxLen = config.format === 'circles' ? 17 : 24;
if (label.length > maxLen) label = label.substring(0, maxLen - 1) + '…';
bubble.innerHTML = '\
\
' + thumbHtml + '\
' + playOverlay + '\
\
' + label + '';
bubble.addEventListener('click', function() {
currentIndex = index;
open();
});
container.appendChild(bubble);
})(i);
}
// Add Beezy Ad tag (publisher mode only) — Powered by is handled globally after host element
if (WIDGET_MODE === 'publisher') {
var adTag = document.createElement('span');
adTag.className = 'beezy-row-tag';
adTag.innerHTML = '
Beezy Ad';
container.appendChild(adTag);
}
// Generate Canvas thumbnails for story bubbles that need them
generateBubbleThumbnails(container);
// Add hover-to-play on story bubbles with video thumbnails
var allBubbles = container.querySelectorAll('.beezy-story-bubble');
allBubbles.forEach(function(bubble, idx) {
// Find video source from campaign data
var bubbleIndex = Array.prototype.indexOf.call(allBubbles, bubble);
var videoSrc = (bubbleIndex >= 0 && bubbleIndex < campaigns.length)
? (campaigns[bubbleIndex].videoUrl || '')
: '';
if (!videoSrc) return;
var hoverVideo = null;
var originalThumb = null;
bubble.addEventListener('mouseenter', function() {
// Find current thumb dynamically (may have been replaced by canvas thumbnail generator)
var currentThumb = bubble.querySelector('.beezy-story-thumb');
if (!currentThumb) return;
originalThumb = currentThumb;
if (!hoverVideo) {
hoverVideo = document.createElement('video');
hoverVideo.src = videoSrc;
hoverVideo.muted = true;
hoverVideo.playsInline = true;
hoverVideo.loop = true;
hoverVideo.className = 'beezy-story-thumb';
hoverVideo.style.cssText = 'width:100%;height:100%;object-fit:cover;border-radius:inherit;border:4px solid #fff;';
}
if (originalThumb.parentNode) {
originalThumb.parentNode.replaceChild(hoverVideo, originalThumb);
}
hoverVideo.currentTime = 0;
hoverVideo.play().catch(function() {});
});
bubble.addEventListener('mouseleave', function() {
if (hoverVideo && hoverVideo.parentNode && originalThumb) {
hoverVideo.pause();
hoverVideo.parentNode.replaceChild(originalThumb, hoverVideo);
}
});
});
}
// ========================================================================
// SQUARES LAYOUT (grid Instagram style — 3 columns, aspect-ratio 1:1)
// ========================================================================
function buildSquaresLayout(container) {
var entity = widgetConfig && widgetConfig.entity;
var gradients = [
'linear-gradient(135deg, #667eea, #764ba2)',
'linear-gradient(135deg, #f093fb, #f5576c)',
'linear-gradient(135deg, #4facfe, #00f2fe)',
'linear-gradient(135deg, #43e97b, #38f9d7)',
'linear-gradient(135deg, #fa709a, #fee140)',
'linear-gradient(135deg, #a18cd1, #fbc2eb)'
];
for (var i = 0; i < campaigns.length; i++) {
(function(index) {
var c = campaigns[index];
var advEntity = c.advertiserEntity || entity;
var entityName = (advEntity && advEntity.name) || 'Sponsor';
var videoSrc = c.videoUrl || (c.mediaUrls && c.mediaUrls[0]) || '';
var sqThumbStyle = 'position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:8px;';
var thumbHtml = '';
if (c.thumbnailUrl) {
thumbHtml = '
';
} else if (videoSrc) {
thumbHtml = '
';
}
var title = (c.formatContent && c.formatContent.sqWidget && c.formatContent.sqWidget.headline) || c.title || '';
var item = document.createElement('div');
item.className = 'beezy-square-item';
item.style.background = gradients[index % gradients.length];
var isPublisherMode = WIDGET_MODE === 'publisher';
item.innerHTML = '\
' + thumbHtml + '\
\
' + (isPublisherMode ? '
Beezy Ad
' : '') + '\
' + (isPublisherMode ? '
' + title + '
' + entityName + '' : '') + '';
item.addEventListener('click', function() {
currentIndex = index;
open();
});
container.appendChild(item);
})(i);
}
// Generate Canvas thumbnails
generateBubbleThumbnails(container);
// Hover-to-play on square items
var sqItems = container.querySelectorAll('.beezy-square-item');
for (var j = 0; j < sqItems.length; j++) {
(function(idx) {
var sqEl = sqItems[idx];
var cc = campaigns[idx];
var vSrc = cc.videoUrl || (cc.mediaUrls && cc.mediaUrls[0]) || '';
if (!vSrc) return;
var hoverVideo = null;
sqEl.addEventListener('mouseenter', function() {
if (hoverVideo) { hoverVideo.play(); return; }
hoverVideo = document.createElement('video');
hoverVideo.src = vSrc;
hoverVideo.muted = true;
hoverVideo.loop = true;
hoverVideo.playsInline = true;
hoverVideo.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;';
sqEl.appendChild(hoverVideo);
hoverVideo.play();
});
sqEl.addEventListener('mouseleave', function() {
if (hoverVideo) { hoverVideo.pause(); hoverVideo.currentTime = 0; }
});
})(j);
}
}
// ========================================================================
// INSTATRIPTYCH LAYOUT (3 large panels, center has no rounded borders)
// ========================================================================
function buildInstatriptychLayout(container) {
var entity = widgetConfig && widgetConfig.entity;
var gradients = [
'linear-gradient(135deg, #667eea, #764ba2)',
'linear-gradient(135deg, #f093fb, #f5576c)',
'linear-gradient(135deg, #4facfe, #00f2fe)'
];
var max = Math.min(campaigns.length, 3);
for (var i = 0; i < max; i++) {
(function(index) {
var c = campaigns[index];
var advEntity = c.advertiserEntity || entity;
var entityName = (advEntity && advEntity.name) || 'Sponsor';
var videoSrc = c.videoUrl || (c.mediaUrls && c.mediaUrls[0]) || '';
var thumbStyle = 'position:absolute;inset:0;width:100%;height:100%;object-fit:cover;';
var thumbHtml = '';
if (c.thumbnailUrl) {
thumbHtml = '
';
} else if (videoSrc) {
thumbHtml = '
';
}
var title = c.title || '';
var item = document.createElement('div');
item.className = 'beezy-triptych-item';
item.style.background = gradients[index % gradients.length];
var isPublisherMode = WIDGET_MODE === 'publisher';
item.innerHTML = '\
' + thumbHtml + '\
\
' + (isPublisherMode ? '
Beezy Ad
' : '') + '\
' + title + '
' + entityName + '';
item.addEventListener('click', function() {
currentIndex = index;
open();
});
container.appendChild(item);
})(i);
}
// Generate Canvas thumbnails
generateBubbleThumbnails(container);
// Hover-to-play
var items = container.querySelectorAll('.beezy-triptych-item');
for (var j = 0; j < items.length; j++) {
(function(idx) {
var el = items[idx];
var cc = campaigns[idx];
var vSrc = cc.videoUrl || (cc.mediaUrls && cc.mediaUrls[0]) || '';
if (!vSrc) return;
var hoverVideo = null;
el.addEventListener('mouseenter', function() {
if (hoverVideo) { hoverVideo.play(); return; }
hoverVideo = document.createElement('video');
hoverVideo.src = vSrc;
hoverVideo.muted = true;
hoverVideo.loop = true;
hoverVideo.playsInline = true;
hoverVideo.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;';
el.appendChild(hoverVideo);
hoverVideo.play();
});
el.addEventListener('mouseleave', function() {
if (hoverVideo) { hoverVideo.pause(); hoverVideo.currentTime = 0; }
});
})(j);
}
}
// ========================================================================
// CARDS LAYOUT (landscape rich cards — YouTube/Google Discover style)
// ========================================================================
function buildCardsLayout(container) {
var entity = widgetConfig && widgetConfig.entity;
var starSvg = '
';
var arrowSvg = '
';
for (var i = 0; i < campaigns.length; i++) {
(function(index) {
var c = campaigns[index];
// Entity: prefer advertiserEntity (publisher mode), fallback to widgetConfig.entity
var advEntity = c.advertiserEntity || entity;
var entityName = (advEntity && advEntity.name) || 'Sponsor';
var entityInitial = entityName.charAt(0).toUpperCase();
var entityAvatarUrl = advEntity && advEntity.avatarUrl;
var avatarHtml = entityAvatarUrl
? '
'
: entityInitial;
// Video duration
var videoDur = c.videoDuration || 0;
var durMin = Math.floor(videoDur / 60);
var durSec = Math.floor(videoDur % 60);
var durationText = videoDur > 0 ? (durMin + ':' + (durSec < 10 ? '0' : '') + durSec) : '';
// Thumbnail
var videoSrc = c.videoUrl || (c.mediaUrls && c.mediaUrls[0]) || '';
var thumbHtml = '';
if (c.thumbnailUrl) {
thumbHtml = '
';
} else if (videoSrc) {
thumbHtml = '
';
}
var title = c.title || '';
var desc = c.description || '';
var rewardText = (c.rewardAmount && c.rewardCurrency)
? c.rewardAmount + ' ' + c.rewardCurrency
: t18n.earnReward;
var cta = resolveCta(c.ctaText) || 'Regarder';
var card = document.createElement('div');
card.className = 'beezy-card-item';
card.innerHTML = '\
\
' + thumbHtml + '\
\
' + (durationText ? '
' + durationText + '
' : '') + '\
\
\
\
' + avatarHtml + '
\
' + entityName + ' \
\
' + title + '
\
' + (desc || ' ') + '
\
\
';
card.addEventListener('click', function() {
currentIndex = index;
open();
});
container.appendChild(card);
})(i);
}
// Generate Canvas thumbnails for cards that need them
generateBubbleThumbnails(container);
// Hover-to-play on card thumbnails
var cardItems = container.querySelectorAll('.beezy-card-item');
for (var j = 0; j < cardItems.length; j++) {
(function(idx) {
var cardEl = cardItems[idx];
var thumbWrap = cardEl.querySelector('.beezy-card-thumb-wrap');
if (!thumbWrap) return;
var cc = campaigns[idx];
var vSrc = cc.videoUrl || (cc.mediaUrls && cc.mediaUrls[0]) || '';
if (!vSrc) return;
// Preload video to get duration badge
var preloadVid = document.createElement('video');
preloadVid.src = vSrc;
preloadVid.preload = 'metadata';
preloadVid.addEventListener('loadedmetadata', function() {
var dur = preloadVid.duration;
if (dur > 0 && !thumbWrap.querySelector('.beezy-card-duration')) {
var dm = Math.floor(dur / 60);
var ds = Math.floor(dur % 60);
var badge = document.createElement('div');
badge.className = 'beezy-card-duration';
badge.textContent = dm + ':' + (ds < 10 ? '0' : '') + ds;
thumbWrap.appendChild(badge);
}
});
var hoverVideo = null;
thumbWrap.addEventListener('mouseenter', function() {
if (hoverVideo) { hoverVideo.play(); return; }
hoverVideo = document.createElement('video');
hoverVideo.src = vSrc;
hoverVideo.muted = true;
hoverVideo.loop = true;
hoverVideo.playsInline = true;
hoverVideo.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;';
thumbWrap.appendChild(hoverVideo);
hoverVideo.play();
});
thumbWrap.addEventListener('mouseleave', function() {
if (hoverVideo) { hoverVideo.pause(); hoverVideo.currentTime = 0; }
});
})(j);
}
}
// ========================================================================
// SINGLE-AD LAYOUTS (cinematic, editorial, minimal, banner)
// ========================================================================
function buildSingleAdLayout(container) {
var c = campaigns[0];
var videoSrc = c.videoUrl || (c.mediaUrls && c.mediaUrls[0]) || '';
var thumbSrc = c.thumbnailUrl || '';
var title = c.title || '';
var desc = c.description || '';
var cta = resolveCta(c.ctaText) || t18n.earnReward;
var rewardText = c.videoReward ? (c.videoReward + ' ' + (c.rewardCurrency || '')) : t18n.earnRewards;
var playSvg = '
';
var starSvg = '
';
var arrowSvg = '
';
// Entity: use advertiser entity from campaign (publisher mode) or widgetConfig entity
var entity = c.advertiserEntity || (widgetConfig && widgetConfig.entity);
var entityName = (entity && entity.name) || 'Stories';
var entityCategory = (entity && entity.category) || '';
var entityAvatarUrl = entity && entity.avatarUrl;
var entityInitial = entityName.charAt(0).toUpperCase();
// Format video duration as m:ss
var videoDur = c.videoDuration || 0;
var durMin = Math.floor(videoDur / 60);
var durSec = Math.floor(videoDur % 60);
var durationText = videoDur > 0 ? (durMin + ':' + (durSec < 10 ? '0' : '') + durSec) : '';
// Sponsor logo HTML: avatar image or initial placeholder
var sponsorLogoHtml = entityAvatarUrl
? ''
: '';
var thumbTag = thumbSrc
? '
'
: (videoSrc ? '
' : '');
var html = '';
switch (config.format) {
case 'cinematic':
html = '\
\
\
' + thumbTag + '\
\
\
\
\
' + title + '
\
' + desc + '
\
\
\
\
\
\
\
Beezy Ad\
\
';
break;
case 'editorial':
html = '\
\
\
\
' + thumbTag + '\
\
' + (durationText ? '
' + durationText + '
' : '') + '\
\
\
\
' + title + '
\
' + desc + '
\
\
Regarder la video\
' + arrowSvg + '\
\
\
';
break;
case 'minimal':
var minimalAvatarHtml = entityAvatarUrl
? '
'
: '';
html = '\
\
\
' + thumbTag + '\
\
' + playSvg + '\
\
' + (durationText ? '
' + durationText + '
' : '') + '\
\
\
\
' + title + '
\
' + desc + '
\
\
Beezy Ad
\
';
break;
case 'banner':
html = '\
\
\
\
\
\
' + (thumbTag || '
') + '\
\
\
\
\
' + title + '
\
' + desc + '
\
\
\
\
Beezy Ad
\
\
';
break;
case 'sticky':
html = '\
\
\
' + thumbTag + '\
\
' + (durationText ? '
' + durationText + '
' : '') + '\
\
\
' + title + '
\
\
' + (entityAvatarUrl ? '
' : '') + '\
' + entityName + ' \
\
\
\
Beezy Ad
\
';
break;
}
container.innerHTML = html;
// Click handler → open modal for all formats
var adEl = container.querySelector('.beezy-single-ad');
if (adEl) {
adEl.addEventListener('click', function() {
currentIndex = 0;
open();
});
}
// Hover-to-play on thumbnail
var thumbImg = container.querySelector('.sad-thumb');
if (thumbImg && videoSrc && adEl) {
var hoverVideo = null;
var originalThumb = null;
adEl.addEventListener('mouseenter', function() {
// Re-query in case generateBubbleThumbnails replaced the original element
var currentThumb = container.querySelector('.sad-thumb');
if (!currentThumb || currentThumb === hoverVideo) return;
originalThumb = currentThumb;
if (!hoverVideo) {
hoverVideo = document.createElement('video');
hoverVideo.src = videoSrc;
hoverVideo.muted = true;
hoverVideo.playsInline = true;
hoverVideo.loop = true;
hoverVideo.className = 'sad-thumb';
hoverVideo.style.cssText = originalThumb.style.cssText || 'width:100%;height:100%;object-fit:cover;';
}
if (originalThumb.parentNode) {
originalThumb.parentNode.replaceChild(hoverVideo, originalThumb);
}
hoverVideo.currentTime = 0;
hoverVideo.play().catch(function() {});
});
adEl.addEventListener('mouseleave', function() {
if (hoverVideo && hoverVideo.parentNode && originalThumb) {
hoverVideo.pause();
hoverVideo.parentNode.replaceChild(originalThumb, hoverVideo);
}
});
}
// Generate Canvas thumbnails if needed
generateBubbleThumbnails(container);
}
/**
* Generates lightweight JPEG thumbnails from video URLs via Canvas API.
* Replaces placeholder images in story bubbles and bio media grid.
* Only downloads video metadata + a single frame instead of full video files.
*/
function replaceWithVideoElement(img, videoSrc) {
var fallbackVideo = document.createElement('video');
fallbackVideo.src = videoSrc + '#t=0.5';
fallbackVideo.muted = true;
fallbackVideo.playsInline = true;
fallbackVideo.preload = 'auto';
// Copy classes from original img (except beezy-needs-thumb/beezy-video-thumb)
fallbackVideo.className = img.className.replace('beezy-needs-thumb', '').replace('beezy-video-thumb', '').trim();
var inheritStyle = img.style.cssText || '';
fallbackVideo.style.cssText = inheritStyle || 'width:100%;height:100%;object-fit:cover;';
// Seek to 0.5s to show first frame as thumbnail
fallbackVideo.addEventListener('loadeddata', function() {
fallbackVideo.currentTime = 0.5;
});
if (img.parentNode) img.parentNode.replaceChild(fallbackVideo, img);
}
function generateCanvasThumbnail(img) {
var videoSrc = img.getAttribute('data-video-src');
if (!videoSrc) return;
// First try without crossOrigin (works for same-origin and permissive CORS)
var thumbVideo = document.createElement('video');
thumbVideo.preload = 'auto';
thumbVideo.muted = true;
thumbVideo.playsInline = true;
var settled = false;
thumbVideo.addEventListener('loadeddata', function() {
thumbVideo.currentTime = Math.min(1, thumbVideo.duration);
});
thumbVideo.addEventListener('seeked', function() {
if (settled) return;
settled = true;
try {
var canvas = document.createElement('canvas');
canvas.width = thumbVideo.videoWidth;
canvas.height = thumbVideo.videoHeight;
var ctx = canvas.getContext('2d');
if (ctx) {
ctx.drawImage(thumbVideo, 0, 0, canvas.width, canvas.height);
img.src = canvas.toDataURL('image/jpeg', 0.8);
}
} catch (e) {
// Canvas tainted by CORS — replace
![]()
with