Einbauhinweise

Einbau-hinweise

Android

Um das Rätsel in Android Apps einzubinden können Sie bequem WebView oder Custom Tabs verwenden. Diesen müssen Sie lediglich die URL zum Rätsel übergeben.

iOS

Um das Rätsel in iOS, macOS oder Mac Catalyst Apps einzubinden können Sie bequem WKWebView verwenden. Diesem müssen Sie lediglich die URL zum Rätsel übergeben.

Einbinden mit Iframe

Das Rätsel kann bequem per Iframe in Ihre bestehende Webseite eingebunden werden und erscheint dem Spieler somit als vollständiges Element Ihrer Webseite

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

Absolutier Pfad zum Rätsel

				
					<iframe src='https://puzzle-by.krupion.de/public-demo/puzzle/#puzzle=tuesday&hideheader=True' allowfullscreen="true" style='border:0'></iframe>
				
			

Eigenständige Web App

Sie können das Rätsel als eigenständige Web App einbinden, in dem Sie zu diesem verlinken.

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

Web App mit Header

Wenn Sie das Rätsel als eigenständige Web App einbinden, können wir zusätzlich eine Kopfzeile mit Ihrem Logo und einem Link zurück auf Ihre Seite anzeigen. Gleichzeitig genießen Sie alle Vorteile der eigenständigen Vollbild-App.

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

Responsive Link mit 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 CSS.

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

Iframe im Container und externer Link

				
					<div class='embed-container' id="embed-container">
  <iframe src='' data-src="https://puzzle-by.krupion.de/public-demo/puzzle/#hideheader=true" data-minWidth="600px" allow="fullscreen" style='border:0' id="puzzle-frame"></iframe>
</div>
<div class="external-link" id="external-link">
  <a href="https://puzzle-by.krupion.de/public-demo/puzzle/" target="_blank">Rätsel in neuem Fenster öffnen</a>
</div>
				
			

CSS um zwischen Iframe und Link zu wechseln

				
					.embed-container {
  display: none;
}
.external-link {
  display: block;
}
@media (min-width: 960px) {
  .embed-container {
    display: block;
  }
  .external-link {
    display: none;
  }
}
				
			

CSS um zwischen Iframe und Link zu wechseln

Bitte entnehmen sie das CSS aus der Anleitung für Responsive Iframe.

Responsive Link mit JS

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.

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

Iframe im Container und externer Link

				
					<div class='embed-container' id="embed-container">
  <iframe src='' data-src="https://puzzle-by.krupion.de/public-demo/puzzle/#hideheader=true" data-minWidth="600px" allow="fullscreen" style='border:0' id="puzzle-frame"></iframe>
</div>
<div class="external-link" id="external-link">
  <a href="https://puzzle-by.krupion.de/public-demo/puzzle/" target="_blank">Rätsel in neuem Fenster öffnen</a>
</div>
				
			

JavaScript um zwischen Iframe und Link zu wechseln

				
					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';
}
				
			

CSS um zwischen Iframe und Link zu wechseln

Bitte entnehmen sie das CSS aus der Anleitung für Responsive Iframe.

Responsive Iframe

Ist Ihre Webseite responsive oder haben sie eine mobile enabled website (MEW), können Sie das Iframe in Höhe und Breite an die Bildschirmgröße anpassen. Somit werden auch die responsive Features unseres Rätsels vollständig genutzt um eine bestmögliche Darstellung zu ermöglichen.

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

Iframe im Container

				
					<div class='embed-container'>
  <iframe src='https://puzzle-by.krupion.de/public-demo/puzzle/#hideheader=true' allowfullscreen="true" style='border:0'></iframe>
</div>
				
			

CSS für Iframe mit fluider Breite unter 960 Pixeln

				
					.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%;
}
				
			

CSS für Iframe Höhe an Viewport Höhe anpassen

In der variable –header-height können Sie die Höhe eines position:fixed; Headers angeben um diese von der Iframe-Höhe abzuziehen.
				
					: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));
  }
}
				
			

Responsive Fullscreen Iframe

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

Iframe im Container mit Titelleiste für Fullscreen

				
					<div class="raetsel">
  <div class="fullscreen-header">
    <a class="link" href="#">< zurück zu Ihrer Webseite</a>
    <img decoding="async" class="logo" src="" alt="">
  </div>
  <div class='embed-container'>
    <iframe src='https://puzzle-by.krupion.de/public-demo/puzzle/#puzzle=monday&hideheader=True' allowfullscreen="true" style='border:0'></iframe>
  </div>
</div>
				
			

CSS für Fullscreen Iframe auf Displays unter 960 Pixeln

				
					: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;
  }
}
				
			

CSS für Iframe Höhe und Breite auf Desktop

Bitte entnehmen sie das CSS aus der Anleitung für Responsive Iframe. Allerdings müssen Sie noch dafür sorgen, dass die Höhenregeln nicht bei Breite unter 960px angezeigt wird, damit diese nicht die fullsrceen Eigenschaften überschreiben.
				
					@media (min-width: 960px) {
  @media (min-height: 510px) {
    .embed-container {
      height: calc(500px - var(--header-height, 0));
    }
  }
  .
  .
  .
}
				
			

Custom Web Component

Als experimentelles Feature kann das Rätsel auch als Custom Web Component eingebunden werden.

Direkt in Ihre Webseite eingebunden

Funktionalität komplett gekapselt

Einfache Einbindung

Voll responsive

Experimentelles Feature

Internet Explorer nicht unterstützt

Parameter

Wenn Sie mehrere Rätselarten bei uns buchen, laufen alle Rätsel unter der gleichen URL. Die unterschiedlichen Rätsel können dann mit einem Parameter aufgerufen werden. So können mehrere Rätsel auf einer Seite eingebunden werden. Wir empfehlen allerdings eine Seite pro Rätsel.

Url Data Parameter zur Auswahl eines Rätsels:

				
					<iframe src='https://puzzle-by.krupion.de/public-demo/puzzle/#puzzle=daily-swedish&hideheader=True' allowfullscreen="true" style='border:0'></iframe>
				
			
				
					<iframe src='https://puzzle-by.krupion.de/public-demo/puzzle/#puzzle=daily-sudoku&hideheader=True' allowfullscreen="true" style='border:0'></iframe>
				
			

Unsere Server

Durch Hosting bei uns bekommen Sie das Rundum-Sorglos-Paket und müssen sich nach der Einbindung um nichts mehr kümmern.

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

Datenschutz

Unsere Rätsel-Apps sind datenschutzkonform nach DSGVO / GDPR

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.