Copy and paste this code into your main site to capture leads for the free M365 Map guide.
Click the 'Copy Code' button to copy the entire pop-up embed code to your clipboard.
Paste the code just before the </body> tag in your WordPress theme or page builder.
Replace the Kit form URL in the code with your actual M365 Map sign-up form link.
<!-- Simply SharePoint Lead Capture Popup -->
<!-- Add this code just before the </body> tag on simplysharepoint.com -->
<style>
.ssp-popup-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(10, 22, 40, 0.75);
z-index: 99999;
align-items: center;
justify-content: center;
padding: 1rem;
font-family: 'Space Grotesk', sans-serif;
}
.ssp-popup-overlay.active { display: flex; }
.ssp-popup-box {
background: white;
border-radius: 1rem;
max-width: 520px;
width: 100%;
overflow: hidden;
position: relative;
box-shadow: 0 25px 60px rgba(0,0,0,0.3);
}
.ssp-popup-header {
background: #0a1628;
padding: 1rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.ssp-popup-logo { display: flex; align-items: center; gap: 0.5rem; }
.ssp-popup-logo-dot {
width: 28px; height: 28px; background: #ff0078;
border-radius: 4px; display: flex; align-items: center;
justify-content: center; color: white; font-weight: 900; font-size: 14px;
}
.ssp-popup-logo-text { color: white; font-weight: 700; font-size: 15px; }
.ssp-popup-logo-text span { color: #00f0f0; }
.ssp-popup-close {
background: none; border: none; color: rgba(255,255,255,0.6);
cursor: pointer; font-size: 20px; line-height: 1; padding: 0;
}
.ssp-popup-close:hover { color: white; }
.ssp-popup-body { padding: 2rem; }
.ssp-popup-badge {
background: #f0c808; color: #0a1628;
font-size: 11px; font-weight: 800; text-transform: uppercase;
letter-spacing: 0.08em; padding: 3px 10px; border-radius: 999px;
display: inline-block; margin-bottom: 1rem;
}
.ssp-popup-h2 {
font-size: 1.6rem; font-weight: 900; color: #0a1628;
line-height: 1.2; margin: 0 0 0.75rem 0;
}
.ssp-popup-p {
font-size: 0.9rem; color: #4b5563; line-height: 1.6;
margin: 0 0 1.25rem 0; font-family: 'DM Sans', sans-serif;
}
.ssp-popup-btn {
display: block; width: 100%; background: #ff0078; color: white;
text-align: center; padding: 0.875rem; border-radius: 6px;
font-weight: 700; font-size: 0.95rem; text-decoration: none;
transition: background 0.2s;
}
.ssp-popup-btn:hover { background: #d60065; }
.ssp-popup-fine {
font-size: 11px; color: #9ca3af; text-align: center;
margin-top: 0.75rem; font-family: 'DM Sans', sans-serif;
}
</style>
<div class="ssp-popup-overlay" id="sspPopup">
<div class="ssp-popup-box">
<div class="ssp-popup-header">
<div class="ssp-popup-logo">
<div class="ssp-popup-logo-dot">S</div>
<span class="ssp-popup-logo-text">Simply<span>SharePoint</span></span>
</div>
<button class="ssp-popup-close" onclick="sspDismissPopup()">✕</button>
</div>
<div class="ssp-popup-body">
<span class="ssp-popup-badge">FREE GUIDE</span>
<h2 class="ssp-popup-h2">Stop asking "Where do I save this?"</h2>
<p class="ssp-popup-p">
The <strong>M365 Map</strong> is a free visual guide that shows you exactly
when to use OneDrive, SharePoint, or Teams — in under 5 minutes.
</p>
<!-- REPLACE THE HREF BELOW WITH YOUR KIT FORM URL -->
<a href="https://simply-sharepoint.kit.com" target="_blank" class="ssp-popup-btn">
Yes! Send Me the Free M365 Map →
</a>
<p class="ssp-popup-fine">No spam. Unsubscribe any time. Delivered instantly.</p>
</div>
</div>
</div>
<script>
(function() {
var dismissed = sessionStorage.getItem('ssp-popup-v1');
if (!dismissed) {
setTimeout(function() {
var el = document.getElementById('sspPopup');
if (el) el.classList.add('active');
}, 8000); // shows after 8 seconds
}
})();
function sspDismissPopup() {
var el = document.getElementById('sspPopup');
if (el) el.classList.remove('active');
sessionStorage.setItem('ssp-popup-v1', 'true');
}
// Close on overlay click
document.getElementById('sspPopup').addEventListener('click', function(e) {
if (e.target === this) sspDismissPopup();
});
</script>