var _content = { imageUrl: 'https://akamai-aptoma-production.bmcdn.dk/users/berlingske/images/118142534.png?t[quality]=80&t[resize][width]=250&t[resize][height]=250&accessToken=16c4684c68ce6812470831b7381dadebff5dd2426b93ec133ce8607580e6ae0d', header: 'Gavekort til hjernernes fest', paragraph: 'Helt frem til juleaften kan De overraske med et Weekendavisen-abonnement
på to måneder.', primaryButtonLabel: 'Køb gavekort', primaryButtonSrc: 'https://abonnement.weekendavisen.dk/julegave-2025-2-mdr/?bem_channel=own_links&bem_placement=wea&bem_type=sticky_marketing_message&bem_campaign=wa_gavekort_25', }; var _styling = { stickyMarketingMessage: { bgColor: '#9dcbb6', crossColor: '' }, image: { width: '', height: '', y: '', x: '', }, header: { textColor: '', fontSize: '26px', fontWeight: '', lineHeight: '1.1em', textAlign: '', }, paragraph: { textColor: '', fontSize: '14px', fontWeight: '', lineHeight: '', textAlign: '', }, primaryButton: { bgColor: '#000', textColor: '#fff', } }; var trackingOnLoadButton = document.getElementById('trackingOnLoadButton'); if (trackingOnLoadButton) { trackingOnLoadButton.click(); } init(_content, _styling); function init(content, styling, retryNo = 1) { var wrapper = document.getElementById('stickyMarketingWrapper'); var container = document.getElementById('stickyMarketingContainer'); if (!container || !wrapper) { if (retryNo > 10) { return console.error('Container not found'); } return setTimeout(function () { init(content, styling, ++retryNo); }, retryNo * 500); } if (!validateContent(content)) { return throwError(container, 'contentValidation'); } if (!validateStyling(styling)) { return throwError(container, 'stylingValidation'); } setGeneralStyling(container, styling, content); injectHTMLToElement(container, 'splashImg', undefined, { src: content.imageUrl, style: getSplashStyling(content, styling), }); var headerStyling = { fontSize: styling.header.fontSize, lineHeight: styling.header.lineHeight, fontWeight: styling.header.fontWeight, color: styling.header.textColor, textAlign: styling.header.textAlign, }; var paragraphStyling = { fontSize: styling.paragraph.fontSize, lineHeight: styling.paragraph.lineHeight, fontWeight: styling.paragraph.fontWeight, color: styling.paragraph.textColor, textAlign: styling.paragraph.textAlign, }; if (!content.imageUrl) { headerStyling.gridArea = '1 / 1 / 2 / 2'; paragraphStyling.gridArea = '2 / 1 / 3 / 2'; } injectHTMLToElement(container, 'title', content.header, { style: headerStyling, }); injectHTMLToElement(container, 'paragraph', content.paragraph, { style: paragraphStyling, }); var linkStyling = { display: 'block', color: styling.primaryButton.textColor, backgroundColor: styling.primaryButton.bgColor, }; if (content.primaryButtonSrc) { injectHTMLToElement(container, 'customLink', content.primaryButtonLabel, { style: linkStyling, href: content.primaryButtonSrc, target: '_blank', }); injectHTMLToElement(container, 'link', undefined, { style: { display: 'none' }, }); } else { injectHTMLToElement(container, 'link', content.primaryButtonLabel, { style: linkStyling, }); } } function validateContent(obj) { var imageValidation = isString(obj.imageUrl); var headerValidation = isString(obj.header); var paragraphValidation = isString(obj.paragraph); var buttonValidation = isString(obj.primaryButtonLabel) && isString(obj.primaryButtonSrc); return ( imageValidation && headerValidation && paragraphValidation && buttonValidation && buttonValidation ); } function validateStyling(obj) { var containerValidation = isString(obj.stickyMarketingMessage.bgColor) && isString(obj.stickyMarketingMessage.crossColor); var imageValidation = isString(obj.image.width) && isString(obj.image.height) && isString(obj.image.y) && isString(obj.image.x); var headerValidation = isString(obj.header.textColor) && isString(obj.header.fontSize) && isString(obj.header.fontWeight) && isString(obj.header.lineHeight) && isString(obj.header.textAlign); var paragraphValidation = isString(obj.paragraph.textColor) && isString(obj.paragraph.fontSize) && isString(obj.paragraph.fontWeight) && isString(obj.paragraph.lineHeight) && isString(obj.paragraph.textAlign); var buttonValidation = isString(obj.primaryButton.bgColor) && isString(obj.primaryButton.textColor); return ( containerValidation && imageValidation && headerValidation && paragraphValidation && buttonValidation ); } function isString(value) { return typeof value === 'string'; } function throwError(target, type) { var text; switch (type) { case 'contentValidation': text = 'Content variables validation error!'; break; case 'stylingValidation': text = 'Styling variables validation error!'; break; default: text = type; break; } console.error(text); target.innerHTML = '' + text + ''; } function setGeneralStyling(container, styling, content) { var closeButton = container.querySelector('#closeButton'); var contentWrapper = container.querySelector('#stickyMarketingContent'); if (closeButton) { closeButton.style.backgroundColor = styling.stickyMarketingMessage.bgColor; } if (styling.stickyMarketingMessage.crossColor) { document.documentElement.style.setProperty( '--close-button-icon-bg', styling.stickyMarketingMessage.crossColor ); } if (!content.imageUrl && contentWrapper) { contentWrapper.style.gridTemplateColumns = '1fr auto'; } container.style.backgroundColor = styling.stickyMarketingMessage.bgColor; } function getSplashStyling(content, styling) { var values = { display: 'none', }; if (content.imageUrl) { values.display = 'block'; values.width = styling.image.width; values.height = styling.image.height; values.top = styling.image.y; values.left = styling.image.x; } return values; } function injectHTMLToElement(parent, id, content, attributes) { var el = parent.querySelector('#' + id); var isImg = el.tagName === 'IMG'; if (!content && !isImg) { el.style.display = 'none'; return; } if (content) { el.innerHTML = content; } if (attributes) { Object.keys(attributes).forEach(function (attribute) { if (attribute === 'style') { var style = attributes[attribute]; if (!style) { return; } Object.keys(style).forEach(function (styleKey) { el.style[styleKey] = style[styleKey]; }); } if (attribute !== 'style') { el.setAttribute(attribute, attributes[attribute]); } }); } }