Hello, I really like the popup announcing updates, is it possible to build the same for our web applications?
Yes It is possible. Just consider it must be done with custom code. Do you want it exactly like the one softr uses?
Try this code into a custom code block on the page where you want to show the popup.
Here is live working sample how it looks on home page:
<div>
<style>
.popup-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
width: 500px;
max-width: 90vw;
z-index: 1000;
padding: 30px 30px 20px;
font-family: sans-serif;
}
.popup-close {
position: absolute;
top: 16px;
right: 20px;
font-size: 22px;
font-weight: bold;
color: #999;
cursor: pointer;
}
.popup-header {
font-size: 24px;
font-weight: 700;
text-align: center;
margin-bottom: 20px;
}
.popup-slide {
display: none;
flex-direction: column;
align-items: center;
text-align: center;
}
.popup-slide.active {
display: flex;
}
.popup-image {
width: 100%;
max-width: 260px;
margin-bottom: 20px;
border-radius: 12px;
}
.popup-date {
font-size: 12px;
color: #999;
margin-bottom: 10px;
}
.popup-title {
font-weight: bold;
font-size: 18px;
margin-bottom: 8px;
}
.popup-desc {
font-size: 14px;
color: #555;
margin-bottom: 20px;
}
.popup-controls {
display: flex;
justify-content: center;
gap: 10px;
margin: 10px 0;
}
.popup-dot {
height: 10px;
width: 10px;
background-color: #ddd;
border-radius: 50%;
cursor: pointer;
}
.popup-dot.active {
background-color: #f5a623;
}
.popup-nav {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.popup-nav button {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
color: #999;
}
.popup-footer {
text-align: center;
margin-top: 20px;
}
.popup-footer button {
background-color: #f5a623;
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
}
</style>
<div class="popup-container" id="customPopup">
<div class="popup-close" onclick="closePopup()">×</div>
<div class="popup-header">What's new</div>
<div class="popup-slide active">
<img src="https://placehold.co/300x200?text=ClickUp+Integration" class="popup-image" alt="slide 1">
<div class="popup-date">May 14, 2025</div>
<div class="popup-title">ClickUp as a data source</div>
<div class="popup-desc">Now you can <a href="#">connect</a> your ClickUp data to Softr easily.</div>
</div>
<div class="popup-slide">
<img src="https://placehold.co/300x200?text=Team+Dashboards" class="popup-image" alt="slide 2">
<div class="popup-date">May 10, 2025</div>
<div class="popup-title">Team dashboards</div>
<div class="popup-desc">Create powerful <a href="#">dashboards</a> for your teams in seconds.</div>
</div>
<div class="popup-slide">
<img src="https://placehold.co/300x200?text=New+UI" class="popup-image" alt="slide 3">
<div class="popup-date">May 5, 2025</div>
<div class="popup-title">New UI improvements</div>
<div class="popup-desc">A fresh coat of <a href="#">design</a> and smoother transitions are here.</div>
</div>
<div class="popup-controls">
<div class="popup-dot active" onclick="showSlide(0)"></div>
<div class="popup-dot" onclick="showSlide(1)"></div>
<div class="popup-dot" onclick="showSlide(2)"></div>
</div>
<div class="popup-nav">
<button onclick="changeSlide(-1)">←</button>
<button onclick="changeSlide(1)">→</button>
</div>
<div class="popup-footer">
<button onclick="window.location.href='#'">View all updates</button>
</div>
</div>
<script>
const popup = document.getElementById('customPopup');
const slides = popup.querySelectorAll('.popup-slide');
const dots = popup.querySelectorAll('.popup-dot');
let currentSlide = 0;
function showSlide(index) {
slides.forEach((slide, i) => {
slide.classList.toggle('active', i === index);
dots[i].classList.toggle('active', i === index);
});
currentSlide = index;
}
function changeSlide(dir) {
let newIndex = currentSlide + dir;
if (newIndex < 0) newIndex = slides.length - 1;
if (newIndex >= slides.length) newIndex = 0;
showSlide(newIndex);
}
function closePopup() {
popup.style.display = 'none';
}
// 🔥
document.addEventListener('DOMContentLoaded', function () {
const parent = document.querySelector('.custom-code1');
if (parent) {
parent.style.display = 'contents';
}
});
</script>
</div>
<script>
const observer = new MutationObserver(() => {
const codeBlock = document.getElementById('custom-code1');
if (codeBlock) {
codeBlock.style.display = 'contents';
console.log('✅ display: contents aplicado al #custom-code1');
observer.disconnect();
}
});
observer.observe(document.body, { childList: true, subtree: true });
</script>
1 Like
Thank you for your help!
Everything must be done in custom code? I can’t use airtable or other database to return updated data in code?
Yes you can also make this data dynamic reading directly from your data source.
Interesting!! How can i do this?
You would need to populate your dynamic data with any of the softr blocks.
Once the dynamic data is accessed, then you can ‘map it’ to your custom code block, replace your static data lines, with dynamic vars that hold values from your data set.
Finally you would need to css hide the softr block that accessed your dynamic data.
Thank you! I will try this! If you have resources to help me, it will be welcome!