Het aanmaken van een Pop up melding is mogelijk doormiddel van het aanmaken van een Javascriptcode.
Dit kan eenvoudig via een script assistent of eventueel een AI bot die voor jou naar wens een script opstelt om de pop-up melding voor je website in te stellen.
Het aangemaakte Javascript kan je in jou CMS opslaan zodat bij het ophalen van je webshop de melding zichtbaar is.
De Javascriptcode voor de Pop up melding kan je als volgt instellen:
Ga naar CMS > Core-Portal Basic > Settings > Start Page
Aan de rechterkant de 4e regel van boven zie je het kopje: Include Java Script code
Het script dat je hebt gemaakt kan je hier plakken.
Nadat je op opslaan geklikt hebt zal de pop up melding zichtbaar zijn op je website.
Hieronder staat een voorbeeld van een pop up melding en de bijbehorende code. Deze code maakt een pop-up in het midden van je scherm met een titel, een boodschap, een link en een sluitknop. Het script zorgt er ook voor dat de pop-up maar één keer per sessie wordt getoond.
Voorbeeldscript:
window.onload = function () { if (sessionStorage.getItem("popupShown")) return; const popup = document.createElement("div"); popup.style.position = "fixed"; popup.style.top = "50%"; popup.style.left = "50%"; popup.style.transform = "translate(-50%, -50%)"; popup.style.background = "#334d3d"; popup.style.padding = "30px"; popup.style.borderRadius = "16px"; popup.style.boxShadow = "0 10px 30px rgba(0, 0, 0, 0.2)"; popup.style.textAlign = "center"; popup.style.zIndex = "1000"; popup.style.maxWidth = "400px"; popup.style.width = "80%"; popup.style.fontFamily = "Arial, sans-serif"; popup.style.animation = "fadeIn 0.5s ease"; const styleSheet = document.createElement("style"); styleSheet.innerHTML = ` @keyframes fadeIn { from { opacity: 0; transform: scale(0.95) translate(-50%, -50%); } to { opacity: 1; transform: scale(1) translate(-50%, -50%); } } `; document.head.appendChild(styleSheet); const headline = document.createElement("h2"); headline.innerText = "✨ Ontdek onze nieuwste sieradenlijn! ✨ "; headline.style.color = "#c3d6c2"; headline.style.marginBottom = "10px"; const message = document.createElement("p"); message.innerText = "Verwen jezelf met een welkomstcadeau bij je eerste bestelling!"; message.style.fontSize = "16px"; message.style.color = "#96ac91"; message.style.marginBottom = "20px"; const link = document.createElement("a"); link.href = "https://commerce.orisha.com/nl/optimizers/"; link.innerText = "Maak een afspraak in onze showroom"; link.target = "_blank"; link.style.color = "#96ac91"; link.style.fontWeight = "bold"; link.style.textDecoration = "underline"; link.style.display = "block"; link.style.marginBottom = "20px"; const closeButton = document.createElement("button"); closeButton.innerText = "Sluiten"; closeButton.style.background = "#96ac91"; closeButton.style.color = "#334d3d"; closeButton.style.border = "none"; closeButton.style.padding = "10px 20px"; closeButton.style.borderRadius = "25px"; closeButton.style.cursor = "pointer"; closeButton.style.fontSize = "14px"; closeButton.onclick = function () { document.body.removeChild(popup); }; popup.appendChild(headline); popup.appendChild(message); popup.appendChild(link); popup.appendChild(closeButton); document.body.appendChild(popup); sessionStorage.setItem("popupShown","true"); };