Das WEBplaner-Paket besteht aus:
- 1x privater Lizenzschlüssel (Aufbau: XXXX-XXXX-XXXX-XXXX)
- 1x öffentlicher Lizenzschlüssel (Aufbau: XXXX-XXXX-XXXX-XXXX)
- Ihr Logo im WEBplaner (oben links)
- Individuelle Formularfelder zum Absenden einer Planung
Damit der WEBplaner in Ihre Website eingebunden werden kann, muss Ihre Website bzw. der Webserver in der Lage sein, andere Server zu kontaktieren.
Wenn Sie PHP verwenden, muss zu diesem Zweck die PHP-Einstellung allow_url_fopen aktiv sein.
Wenn ein Besucher Ihrer Website den WEBplaner aufruft, müssen 2 Schritte passieren:
1. Ihre Website muss unseren Server kontaktieren und dabei per POST-Methode eine zufällig generierte ID, Ihren privaten Lizenzschlüssel sowie die IP-Adresse des Nutzers übergeben.
2. Anschließend enthält der HTML-Code, welchen der Nutzer von Ihrer Website bekommt, einen iFrame, der den WEBplaner als solchen lädt. Hierbei wird Ihr öffentlicher Lizenzschlüssel und die zufällig generierte ID mitgesendet, welche zuvor auch schon an den Server geschickt wurde.
Der erste Schritt muss am Server selbst passieren, z.B. per PHP, da hier Ihr privater Lizenzschlüssel übertragen wird, welcher keinen Dritten zugänglich gemacht werden darf.
Dies darf aus Sicherheitsgründen auf keinen Fall clientseitig im Browser (z.B. per JavaScript) geschehen!
Erstellen Sie zunächst eine Datei, welche vom Webserver an den PHP-Interpreter geschickt wird - üblicherweise lässt sich das erreichen, indem sie die Endung ".php" hat, z.B. wenn Sie sie webplaner.php nennen.
- Kopieren Sie den folgenden Beispiel-Code in Ihre PHP-Datei.
- Tragen Sie bei Zeile 2 Ihren privaten Lizenzschlüssel zwischen den Anführungszeichen ein.
- Tragen Sie bei Zeile 3 Ihren öffentlichen Lizenzschlüssel zwischen den Anführungszeichen ein.
- Laden Sie die Datei auf Ihre Website hoch und rufen Sie sie im Browser auf.
<?php
$privateKey = 'ABCD-ABCD-ABCD-ABCD';
$publicKey = 'ABCD-ABCD-ABCD-ABCD';
header('ETag: "'.md5(microtime(1)).'"');
header('Expires: '.gmdate('D, d M Y H:i:s').' GMT');
header('Cache-Control: private, no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0, pre-check=0, post-check=0');
header('Last-Modified: {now} GMT');
$rID = md5($publicKey.microtime(1));
file_get_contents('https://embed.eopus.de/sync.php', false, stream_context_create(
array('http'=>array(
'content'=>http_build_query(array('private'=>$privateKey, 'ip'=>$_SERVER['REMOTE_ADDR'], 'r'=>$rID)),
'method'=>'POST',
'header'=>'Content-type: application/x-www-form-urlencoded'
))
));
?>
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
padding: 0;
margin: 0;
overflow: hidden;
}
iframe {
border: 0;
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<iframe src="https://embed.eopus.de/planer.php?r=<?php echo $rID; ?>&public=<?php echo $publicKey; ?>" allowfullscreen webkitallowfullscreen mozallowfullscreen msallowfullscreen oallowfullscreen></iframe>
</body>
</html>
Falls Sie die Einbindung anders als hier beschrieben vornehmen, dann beachten Sie, dass entsprechende Header-Daten beim Aufruf mitgesendet werden müssen, sodass das Dokument nicht im Browser gecached wird.
Warum? Bei jedem Aufruf des WEBplaners ist es erforderlich, dass der Server kontaktiert wird und somit unseren Server kontaktiert - das Cachen des Dokuments, das den iFrame-HTML-Code enthält, würde diesen Aufruf jedoch verhindern.
In dem obigen Beispiel sind zu diesem Zweck alle Zeilen, die mit header beginnen, dafür gedacht, Caching zu verhindern. Je nach Webserver und Serverkonfiguration können weitere oder verschiedene Header/Einstellungen erforderlich sein.
Obgleich der iFrame des Installationsbeispiels die volle Bildbreite und -höhe einnimmt (width: 100vw, height: 100vh), hat er während des Ladevorgangs einen transparenten Hintergrund.
Sie können also z.B. ein Hintergrundbild per CSS einfügen - oder einen Slider aus mehreren Hintergrundbildern per JavaScript. Das folgende Beispiel, wenn an der darin referenzierten Stelle eine Bilddatei zu finden ist, würde diese Bilddatei als Hintergrundbild nutzen.
<?php
$privateKey = 'ABCD-ABCD-ABCD-ABCD';
$publicKey = 'ABCD-ABCD-ABCD-ABCD';
header('ETag: "'.md5(microtime(1)).'"');
header('Expires: '.gmdate('D, d M Y H:i:s').' GMT');
header('Cache-Control: private, no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0, pre-check=0, post-check=0');
header('Last-Modified: {now} GMT');
$rID = md5($publicKey.microtime(1));
file_get_contents('https://embed.eopus.de/sync.php', false, stream_context_create(
array('http'=>array(
'content'=>http_build_query(array('private'=>$privateKey, 'ip'=>$_SERVER['REMOTE_ADDR'], 'r'=>$rID)),
'method'=>'POST',
'header'=>'Content-type: application/x-www-form-urlencoded'
))
));
?>
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
padding: 0;
margin: 0;
overflow: hidden;
}
body {
background-image: url('/img/example-image.jpg');
background-size: cover;
background-position: center center;
}
iframe {
border: 0;
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<iframe src="https://embed.eopus.de/planer.php?r=<?php echo $rID; ?>&public=<?php echo $publicKey; ?>" allowfullscreen webkitallowfullscreen mozallowfullscreen msallowfullscreen oallowfullscreen></iframe>
</body>
</html>
So könnte es dann beispielsweise aussehen:
Damit wir Ihr Logo einbinden können, senden Sie uns einen Link, wo auf Ihrer Website sich die Logodatei befindet. Der WEBplaner nutzt diese dann immer.
Das Logo sollte die folgenden Eigenschaften besitzen:
- Bilddatei im Format PNG oder SVG
- Für dunkle Hintergründe geeignet (Dunkelgrau/Schwarz im Logo vermeiden)
- Transparenter Hintergrund
- Nicht breiter als 1000 Pixel
- Nicht höher als 500 Pixel
- Nicht größer als 500 KB
Ein Logo ohne diese Eigenschaften würde ebenfalls funktionieren, kann jedoch visuell unpassend aussehen oder potentiell die Nutzererfahrung beeinträchtigen. Im Zweifelsfall können Sie sich jederzeit an unseren Support wenden.
Beim Klick auf "FERTIG" wird dem Nutzer ein Formular wie dieses gezeigt:
Teilen Sie uns mit, welche Daten der Nutzer in diesem Formular hinterlegen können soll und welche davon Pflichtangaben sind. Wenn der Nutzer auf "PLANUNG SENDEN" klickt, erhalten Sie die Eingaben des Nutzers mitsamt einem Link zur Planung per E-Mail.
Sie möchten die Mails vom WEBplaner an eine ganz bestimmte E-Mail-Adresse geschickt bekommen? Teilen Sie es unserem Support mit!
Wir stehen Ihnen gern unterstützend zur Seite. So erreichen Sie uns:
Telefon (Support): +49 (0)5733 / 87 116 - 13
Telefon (Zentrale): +49 (0)5733 / 87 116 - 0
E-Mail: support@eopus.de
Website: www.eopus.de