This guide will walk you through adding a popup that displays content from a special content block and automatically hides after 10 seconds using custom JavaScript. To implement this, you’ll need basic skills in website editing, working with KoPage content blocks, and adding custom HTML and JavaScript. You’ll also learn how to customize the popup’s behavior, including enabling or disabling it, setting a custom display duration, adjusting its width, and preventing it from showing for returning visitors. Follow these steps to get started:
Step 1: Log in to Your DomainsFoundry Website Builder (KoPage) Dashboard
- Open your browser and log in to your DomainsFoundry Hosting account.
- Navigate to the Website Builder section
- Select the website you want to edit, or create a new one if needed.
Step 2: Add a New Popup Content Block
- In the Website editor, go to the page where you want the popup to appear (e.g., your home page).
- Click on the “+ Add Content”.
- From the available content blocks, select a block. We recommend keeping it simple.
- Drag the content block to the bottom of your page.
- In the top-left of your new block click Block Settings. Scroll down until you see Default Visibility. Deselect all visibility options for all devices. This hides the block from view.
- Press Save Changes.
- Edit the block again. Click HTML. to view the HTML.
- Change only the first line of the code to match the first line in the below code.
<div id="popup" data-popup-enabled="true" data-once-per-visit="true" data-duration="10" data-width="500px"> <div class="row justify-content-center align-items-center"> <div class="col-md-8"> <div data-aos="fade-left" class="koPreTitle keditable"><br /></div> <h2 data-aos="fade-left" class="keditable">Your Popup Content</h2> <div data-aos="fade-left" class="keditable">Some text</div> </div> </div> </div> <!-- End popup div -->
Press Save Changes to apply the edit.
Step 3: Add the Custom HTML App in KoPage
- Click on the “+ Add Content”.
- Click Apps.
- Scroll to find and select “Custom HTML Code”.
- Paste the following code into the editor and press Continue to save the code.
<!-- Start popup JavaScript code -->
<script>
document.addEventListener('DOMContentLoaded', function() {
(function() {
if (document.documentElement.classList.contains('inAdminMode')) {
return; // Exit immediately if in admin mode
}
// Get popup element and data attributes
const popupElement = document.getElementById('popup');
if (!popupElement) {
console.error('Error: Could not find element with id="popup"');
return; // Exit if no popup element found
}
// Check if popup is enabled (defaults to true if not specified)
const isEnabled = popupElement.dataset.popupEnabled !== 'false';
if (!isEnabled) {
return; // Exit if popup is disabled
}
// Check if popup should only show once per visit
const showOnce = popupElement.dataset.oncePerVisit === 'true';
const sessionKey = 'popupShownThisSession';
// If showOnce is true and popup has already been shown this session, exit
if (showOnce && sessionStorage.getItem(sessionKey)) {
return;
}
// Create popup container
const popup = document.createElement('div');
popup.id = 'welcomePopup';
popup.style.cssText = `
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
z-index: 1000;
text-align: center;
`;
// Create popup content container
const content = document.createElement('div');
// Create overlay
const overlay = document.createElement('div');
overlay.style.cssText = `
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 999;
`;
// Append elements
popup.appendChild(content);
document.body.appendChild(overlay);
document.body.appendChild(popup);
// Populate content and apply data attributes
content.innerHTML = popupElement.innerHTML;
// Get duration from data-duration (default to 10 seconds if not set)
const duration = popupElement.dataset.duration
? parseInt(popupElement.dataset.duration) * 1000
: 10000;
// Get width from data-width (default to 400px if not set)
const width = popupElement.dataset.width || '400px';
popup.style.maxWidth = width;
popup.style.width = width; // Optional: use this instead of maxWidth for exact width
// Add close button if not present in content
if (!content.querySelector('#closePopup')) {
const closeBtn = document.createElement('button');
closeBtn.id = 'closePopup';
closeBtn.textContent = 'Close';
closeBtn.style.cssText = `
padding: 10px 20px;
background: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 15px;
`;
content.appendChild(closeBtn);
closeBtn.addEventListener('click', closePopup);
} else {
content.querySelector('#closePopup').addEventListener('click', closePopup);
}
// Close functionality
function closePopup() {
popup.remove();
overlay.remove();
// Mark as shown in sessionStorage if showOnce is true
if (showOnce) {
sessionStorage.setItem(sessionKey, 'true');
}
}
// Close on overlay click
overlay.addEventListener('click', closePopup);
// Optional: Close with ESC key
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closePopup();
});
// Automatically close after specified duration
setTimeout(closePopup, duration);
// Mark as shown immediately if showOnce is true (so it doesn't show again this session)
if (showOnce) {
sessionStorage.setItem(sessionKey, 'true');
}
})();
});
<!-- End Popup JavaScript -->
Step 4: Hide the HTML block.
- Click on your new Custom HTML Code block.
- In the top-left of your new block click Block Settings. Scroll down until you see Default Visibility. Deselect all visibility options for all devices. This hides the block from view. and select Block Settings.
- Press Save Changes.
Step 5: Set Data Attributes
You can configure your popup using data attributes in your HTML. The popup can be enabled/disabled, shown once per session or on every load, and a custom duration and width.
data-popup-enabled="true": Popup is enabled (default behavior if omitted).data-popup-enabled="false": Popup is disabled and won’t appear.data-once-per-visit="true": Popup shows only once per session (if enabled).data-duration="5": Hides after 5 seconds (value in seconds).data-width="500px": Sets width to 500px (can use any CSS unit, e.g.,px,%,vw).
Behavior
- With
data-popup-enabled="false": The popup won’t show at all, regardless of other settings. - With
data-popup-enabled="true"(or omitted):- If
data-once-per-visit="true": Shows once per browser session. - If
data-once-per-visit="false"(or omitted): Shows on every page load.
- If
- The popup respects
data-durationanddata-width, and can be closed manually via the button, overlay, or ESC key.
Step 6: Test the Popup
DomainsFoundry Website Builder will hide the popup whilst you’re in Edit mode. To preview the pop up we recommend opening your site in a new Private Window, or a different browser app. Alternatively you can simply logout of Website Builder.
- Visit your website in a browser.
- The popup should appear immediately, displaying the content from the /popup page inside the element with id=”popup”.
- It will automatically close after 10 seconds, or you can close it manually by clicking the overlay, pressing ESC, or clicking the close button (if included).
