The pop-up opens after 3 seconds.
It contains an image and a click-through link.
Users can close it by clicking the background, the X button, or pressing ESC.
By default it shows to a user only once per browser tab session.
Sign in to your admin panel.
Edit the homepage.
Add a block called “Custom HTML” or similar, or open your existing custom HTML block.
Paste the entire code from “Copy-paste code” into that block. The code must be inside the <body> section of the page.
Save and refresh the homepage in a new tab.
Alert
If you do not see it immediately, wait 3 seconds after the page loads. In “once per session” mode the pop-up will not appear twice in the same tab. See “Testing” for easy ways to check it again.
In the code, find the block marked CONFIG - EDIT ONLY THESE LINES.
Easiest way to find it:
Windows - press Ctrl+F
macOS - press Command+F
Search for: POPUP_CONFIG
Change these 2 values:
imageUrl - the URL of your image.
linkUrl - the URL where a click should go.
Do not change anything else unless you read “Advanced settings”.
Recommended size - 1080x1080 px.
Other aspect ratios are fine - the code does not crop, it scales the image down to fit.
Limits - the pop-up will never be taller than 90 percent of the screen height and never wider than 92 percent of the screen width.
File size - aim for 200 to 400 kB, JPG or WebP.
Same code, same behavior as desktop.
The image scales down, no cropping.
The X button stays visible in the top right corner of the pop-up.
Easiest option - open the site in a private window:
Chrome - New incognito window
Firefox - New private window
Edge - New InPrivate window
Or close the current tab and open the site in a fresh tab.
If you changed the pop-up and want everyone to see it again, change campaignId to a new value, for example example-campaign-002.
delaySec - delay before showing in seconds.
Default is 3. You can set another whole number, for example 5.
showMode
'oncePerSession' - the pop-up shows once per browser tab. It can show again after the tab is closed and reopened.
'always' - the pop-up shows every time the page is opened after delaySec. Use with care, it can be annoying for users.
enabled
true - the pop-up is active.
false - the pop-up is completely disabled and will not show.
campaignId
Change this string when you want to force the pop-up to appear again for everyone, for example when a new campaign starts.
Edit only the values inside
POPUP_CONFIG. Code comments guide you step by step.
<!-- ===== POPUP no-crop version ===== -->
<style>
/* lock page scroll while popup is open */
body.modal-open { overflow: hidden; }
/* dimmed background overlay */
#site-popup .overlay { background: rgba(0,0,0,.6); z-index: 999999999; }
/* popup container - matches image size but stays within screen limits */
.popup-card {
display: inline-block; background: #fff; border-radius: 14px; border: 0; padding: 0;
max-height: 90vh; /* never taller than 90% of viewport height */
max-width: 92vw; /* never wider than 92% of viewport width */
position: relative;
}
/* image - no cropping, only downscaling to fit limits */
.popup-media {
display: block; width: auto; height: auto;
max-width: 92vw; max-height: 90vh; border-radius: 12px;
}
/* close button */
.popup-close {
position: absolute; top: 8px; right: 12px; font-size: 28px; line-height: 1;
color: #000; opacity: .8; background: rgba(255,255,255,.9);
border: 0; border-radius: 20px; width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center; cursor: pointer;
}
</style>
<!-- popup markup -->
<div id="site-popup" class="d-none">
<div class="overlay position-fixed fixed-top w-100 h-100 d-flex align-items-center justify-content-center">
<div class="card popup-card shadow-lg" role="dialog" aria-modal="true">
<button type="button" class="popup-close" aria-label="Close">×</button>
<!-- click-through link wraps the image -->
<a id="popup-link" href="#" class="d-block" rel="noopener">
<img id="popup-image" class="popup-media" src="" alt="Promotion">
</a>
</div>
</div>
</div>
<script>
/* ===== CONFIG - EDIT ONLY THESE LINES =====
* enabled - master on-off switch
* linkUrl - where a click should lead
* imageUrl - image address
* delaySec - delay before showing in seconds
* showMode - 'oncePerSession' or 'always'
* campaignId - change to force showing again after an update
*/
const POPUP_CONFIG = {
enabled: true,
linkUrl: 'https://sportigio.com',
imageUrl: 'https://placehold.co/1080x1080',
delaySec: 3, // default 3 seconds
showMode: 'oncePerSession', // see Advanced settings
campaignId: 'example-campaign-001'
};
/* ========== END OF CONFIG ========== */
document.addEventListener('DOMContentLoaded', function () {
if (!POPUP_CONFIG.enabled) return;
var popup = document.getElementById('site-popup');
if (!popup) return;
// apply link and image
var link = document.getElementById('popup-link');
var img = document.getElementById('popup-image');
if (link) link.href = POPUP_CONFIG.linkUrl || '#';
if (img) img.src = POPUP_CONFIG.imageUrl || '';
// memory key - prevents repeated popups in the same session
var storageKey = 'sitePopup:' + (POPUP_CONFIG.campaignId || 'default');
// frequency logic
function shouldShow() {
if (POPUP_CONFIG.showMode === 'always') return true;
if (POPUP_CONFIG.showMode === 'oncePerSession') return !sessionStorage.getItem(storageKey);
return true; // fallback
}
function markShown() {
if (POPUP_CONFIG.showMode === 'oncePerSession') sessionStorage.setItem(storageKey, '1');
}
// popup controls
var overlay = popup.querySelector('.overlay');
var card = popup.querySelector('.popup-card');
var closeBtn = popup.querySelector('.popup-close');
function openPopup() {
popup.classList.remove('d-none');
document.body.classList.add('modal-open');
markShown();
}
function closePopup() {
popup.classList.add('d-none');
document.body.classList.remove('modal-open');
}
if (shouldShow()) {
setTimeout(openPopup, Math.max(0, POPUP_CONFIG.delaySec | 0) * 1000);
}
// closing - background, X button, or ESC key
overlay.addEventListener('click', closePopup);
card.addEventListener('click', function (e) { e.stopPropagation(); });
closeBtn.addEventListener('click', closePopup);
document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closePopup(); });
});
</script>
<!-- ===== /POPUP ===== -->
The pop-up does not appear again during testing
Open the site in a private window.
Or close the current tab and open the site in a fresh tab.
Or change campaignId to a new value, for example example-campaign-002, to make it appear again for everyone.
The image file is heavy
Compress it with an online tool. JPG or WebP around 200 to 400 kB is a good target.
I want it to show every time
Set showMode: 'always'. Consider user experience and avoid overusing it.