Finden Sie die passende Selbsthilfe-Kontaktstelle in Ihrer Region. Klicken Sie auf den Button, um das Such-Widget zu öffnen.
Sie können das Selbsthilfe-Widget ganz einfach auf Ihrer eigenen Webseite einbinden. Fügen Sie dazu einfach den folgenden Code an der gewünschten Stelle in Ihre HTML-Seite ein:
Ein Button öffnet das Widget in einem Overlay über Ihrer Seite. Diese Variante ist benutzerfreundlich und benötigt wenig Platz.
<!-- Selbsthilfe Widget Button -->
<button id="sh-widget-btn" type="button" aria-label="Kontaktstellen finden" style="padding: 12px 30px; background-color: #005fa4; color: white; border: none; border-radius: 6px; font-size: 16px; font-weight: 500; cursor: pointer;">
Kontaktstellen finden
</button>
<!-- Widget Overlay -->
<!-- Hinweis: Passen Sie ggf. den z-index-Wert an die Ebenen Ihrer Website an -->
<div id="sh-widget-overlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 1000; align-items: center; justify-content: center;">
<div style="position: relative; width: 90%; max-width: 1200px; height: 90%; margin: auto; margin-top: 5vh; background: white; border-radius: 8px; overflow: hidden;">
<button id="sh-widget-close" aria-label="Schließen" style="position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.9); border: none; border-radius: 50%; font-size: 24px; cursor: pointer; z-index: 10000;">×</button>
<iframe id="sh-widget-iframe" src="https://neue-selbsthilfe.github.io/widget.selbsthilfe.io/search-widget-iframe.html" style="width: 100%; height: 100%; border: none;" title="Selbsthilfe Widget"></iframe>
</div>
</div>
<script>
// Accessibility: Close overlay with Escape key
function handleOverlayEscape(e) {
if (e.key === "Escape" || e.key === "Esc" || e.keyCode === 27) {
var overlay = document.getElementById('sh-widget-overlay');
if (overlay.style.display !== 'none') {
overlay.style.display = 'none';
document.body.style.overflow = '';
}
}
}
document.getElementById('sh-widget-btn').addEventListener('click', function() {
document.getElementById('sh-widget-overlay').style.display = 'flex';
document.body.style.overflow = 'hidden';
document.addEventListener('keydown', handleOverlayEscape);
});
document.getElementById('sh-widget-close').addEventListener('click', function() {
document.getElementById('sh-widget-overlay').style.display = 'none';
document.body.style.overflow = '';
document.removeEventListener('keydown', handleOverlayEscape);
});
document.getElementById('sh-widget-overlay').addEventListener('click', function(e) {
if (e.target === this) {
document.getElementById('sh-widget-overlay').style.display = 'none';
document.body.style.overflow = '';
document.removeEventListener('keydown', handleOverlayEscape);
}
});
</script>
Das Widget wird direkt auf der Seite angezeigt. Passen Sie Breite und Höhe nach Bedarf an.
<!-- Selbsthilfe Widget iframe -->
<iframe
src="https://neue-selbsthilfe.github.io/widget.selbsthilfe.io/search-widget-iframe.html"
width="100%"
height="800"
style="border: 1px solid #ddd; border-radius: 8px;"
title="Selbsthilfe-Kontaktstellen Widget">
</iframe>
width und height Attribute nach Ihren Bedürfnissen an.