Wenn Sie das Rätsel als eigenständige Web-App nutzen, können wir optional eine Kopfzeile mit Ihrem Logo und einem Rücklink zu Ihrer Website integrieren. Dabei profitieren Sie weiterhin von allen Vorteilen einer vollbildfähigen, eigenständigen Anwendung.
Eigenständige Web App und responsive Iframe. Sie können einen Link auf Mobilgeräten anzeigen und auf Desktop-Geräten automatisch ein Iframe für die Einbindung nutzen. Das Wechseln zwischen link und Iframe geschieht mittels CSS.
Eigenständige Web App und responsive Iframe. Sie können einen Link auf Mobilgeräten anzeigen und auf Desktop-Geräten automatisch ein Iframe für die Einbindung nutzen. Das Wechseln zwischen link und Iframe geschieht mittels JavaScript.
Direkt in Ihre Webseite eingebunden
Nicht responsiv
Weniger Bildschirmfläche für den Spieler
Auf iOS Geräten kann die Bildschirmtastatur den unteren Teil vom Rätsel verdecken
Der Spieler muss sich selbst darum kümmern das Rätsel an die richtige Stelle im Browser zu scrollen
Volle Bildschirmgröße wird genutzt
Für iOS Geräte die bevorzugte Variante, damit die Bildschirmtastatur nichts vom Rätsel verdecken kann
Der Spieler muss sich nicht darum kümmern, das Rätsel an die richtige Stelle im Browser zu scrollen
Keine Corporate Identity
Nicht direkt in Ihre Webseite eingebunden
Volle Bildschirmgröße wird genutzt
Für iOS Geräte die bevorzugte Variante, damit die Bildschirmtastatur nichts vom Rätsel verdecken kann
Der Spieler muss sich nicht darum kümmern, das Rätsel an die richtige Stelle im Browser zu scrollen
Ihre Corporate Identity wird verwendet
Wir gestalten die Titelleiste für Sie
Weniger Bildschirmfläche für das Rätsel
Nicht direkt in Ihre Webseite eingebunden
Desktop: Direkt in Ihre Webseite eingebunden
Desktop: Passt sich der Bildschirmgröße an
Mobil: Maximale Bildschirmfläche für das Rätsel
iOS: die Bildschirmtastatur kann den unteren Teil des Rätsels nicht mehr verdecken
Auf mobilen Geräten nicht direkt in Ihre Webseite eingebunden
Auch das versteckte Iframe lädt das Rätsel im Hintergrund
.embed-container {
display: none;
}
.external-link {
display: block;
}
@media (min-width: 960px) {
.embed-container {
display: block;
}
.external-link {
display: none;
}
}
Desktop: Direkt in Ihre Webseite eingebunden
Desktop: Passt sich der Bildschirmgröße an
Mobil: Maximale Bildschirmfläche für das Rätsel
iOS: die Bildschirmtastatur kann den unteren Teil des Rätsels nicht mehr verdecken
Auf mobilen Geräten nicht direkt in Ihre Webseite eingebunden
JavaScript muss aktiviert sein. Wird aber für das Rätsel sowieso benötigt
const iframe = document.getElementById('puzzle-frame');
const embedContainer = document.getElementById('embed-container');
const externalLink = document.getElementById('external-link');
const src = iframe.dataset.src;
const minWidth = iframe.dataset.minWidth;
if (window.matchMedia("(min-width: " + minWidth + ")").matches) {
iframe.setAttribute('src', src);
embedContainer.style.display = 'block';
externalLink.style.display = 'none'
} else {
embedContainer.style.display = 'none';
externalLink.style.display = 'block';
}
Direkt in Ihre Webseite eingebunden
Passt sich der Bildschirmgröße an
Weniger Bildschirmfläche für das Rätsel
Auf iOS Geräten kann die Bildschirmtastatur den unteren Teil des Rätsels verdecken
Der Spieler muss sich selbst darum kümmern das Rätsel an die richtige Stelle im Browser zu scrollen
.embed-container {
position: relative;
height: 400px;
width: 960px;
overflow: hidden;
max-width: 100%;
margin: auto;
}
.embed-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
:root {
--header-height: 0px;
}
@media (min-height: 510px) {
.embed-container {
height: calc(500px - var(--header-height, 0));
}
}
@media (min-height: 610px) {
.embed-container {
height: calc(600px - var(--header-height, 0));
}
}
@media (min-height: 710px) {
.embed-container {
height: calc(700px - var(--header-height, 0));
}
}
@media (min-height: 810px) {
.embed-container {
height: calc(800px - var(--header-height, 0));
}
}
@media (min-height: 910px) {
.embed-container {
height: calc(900px - var(--header-height, 0));
}
}
/* Max height */
@media (min-height: 1010px) {
.embed-container {
height: calc(1000px - var(--header-height, 0));
}
}
Das Iframe wird wie bei den anderen Lösungen (responsive) auf Ihrer Webseite angezeigt. Auf kleinen Geräten wird das Iframe dann im Fullscreen angezeigt, eventuell mit Titelleiste.
Direkt in Ihre Webseite eingebunden
Passt sich der Bildschirmgröße an
Gut auf mobilen Geräten spielbar
Sie können die Titelleiste selbst gestalten
Etwas mehr Aufwand bei der Einbindung
:root {
--header-height: 40px;
}
.fullscreen-header {
height: var(--header-height, 0);
background-color: #b2def0;
text-decoration: none;
justify-content: space-between;
align-items: center;
/* Do not display by default, only activated by media query. */
display: none;
}
@media (max-width: 960px) {
.raetsel {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
}
.embed-container {
height: calc(100% - var(--header-height, 0));
}
.fullscreen-header {
display: flex;
}
}
@media (min-width: 960px) {
@media (min-height: 510px) {
.embed-container {
height: calc(500px - var(--header-height, 0));
}
}
.
.
.
}
Direkt in Ihre Webseite eingebunden
Funktionalität komplett gekapselt
Einfache Einbindung
Voll responsive
Experimentelles Feature
Internet Explorer nicht unterstützt
Sie müssen sich nicht um das Hosting kümmern
Regelmäßige Updates, um die Spielerfahrung laufend zu verbessern
Regelmäßige Updates, um die Funktionalität in allen aktuellen Browsern zu gewährleisten
Automatisch wechselnde Tages- oder Wochenrätsel (eigene Intervalle möglich)
Nutzungsstatistiken durch Google Analytics
Standort in Deutschland
Tracking erfolgt unter berechtigtem Interesse (legitimate interest)
Keine Personenbezogenen Daten (PII) werden erhoben
IAB TCF 2.0 konform: Zustimmung zum setzen von Cookies und Localstorage wird eingeholt, um Spielstände zu speichern.