Demo Account

Willkommen auf unserer Demonstrator Plattform. Sie können alle Funktionen ausprobieren, bitte beachten Sie jedoch, dass alle von Ihnen erzeugten Daten alle 24 Stunden gelöscht werden.

Ich habe verstanden, dass meine angelegten Daten alle 24 Stunden gelöscht werden

Möchten Sie ein eigenes Konto anlegen, registrieren Sie bitte eines der folgenden Pakete:

Pakete ansehen
X

Dies ist eine Demo-Instanz. Alle von Benutzern erzeugten Daten werden alle 24 Stunden gelöscht. Eigenes Konto anlegen

HTML & CSS Guide

Sie können bei der Erstellung von Landing Pages in Textfeldern auch HTML und CSS Code hinterlegen. Die folgenden Tricks zeigen Ihnen welche Möglichkeiten Sie haben, Ihre eigene CI zu hinterlegen oder Multimedia Inhalte einzubetten.

Hinweis

Bitte beachten Sie, dass in Europa seit 25. Mai 2018 die neue Datenschutzgrundverordnung gilt. Wenn Sie Inhalte von externen Servern (z.B. Google Fonts) auf Ihren Landing Pages integrieren, sollten Sie einen Hinweis in Ihren Datenschutzrichtlinien auf das jeweilige Service hinterlegen. Sie können auf jeder Landing Page in der Rubrik DSGVO einen personalisierten Link zu Ihren Datenschutzrichtlinien setzen.

CSS

Sie können eigenen CSS Code im Branding-Abschnitt einer Landing Page einbinden. Anbei finden Sie einen paar CSS Code Snippets.

/* Hintegrund Farbe ändern */
body {background:#000}

/* Eigenes Hintergrund Bild */
body {background: url("/img/background-example.jpg") no-repeat}

/* Hintergrund Gradient */
body {background: linear-gradient(to right, red , yellow)}

/* Hintergrund im Vollbild Modus */
body {

  background-image: url("/img/background-example.jpg");

  /* Volle Höhe */
  height: 100%;

  /* Zentrieren und Image skalieren */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Text Farbe für Überschrift ändern */
h1 {color:#f4f !important}

/* Schriftart von Blöcken ändern */
div {
    font-family: "Times New Roman", Georgia, Serif;
}

Lernen Sie mehr über CSS Anweisungen: W3 Schools: CSS Tutorial

Testen von CSS

Bevor Sie CSS Code in Ihre Seite einfügen, testen Sie diesen immer auf dessen Richtigkeit unter

CSS Validator

Landing Page Elemente stylen

Mit dem Inspektor können Sie ein Element in der Landing Page markieren und dann wird Ihnen das Tag und die Klasse des Elementes im Inspektor unten angezeigt.

Im Branding-Abschnitt einer Landing Page können Sie nun für dieses Element einen eigenen Style im Feld "Benutzer definiertes CSS" festlegen. Das folgende Beispiel zeigt wie man die Schriftgröße der Überschrift h1.headline ändern kann.

Wenn Sie Ihren CSS-Code für andere Landing Pages wiederverwenden möchten, können Sie den CSS-Code in einer CSS-Vorlage speichern, indem Sie auf "Hinzufügen" klicken.

inspector

Google Schriftarten einbinden

@import url('//fonts.googleapis.com/css?family=Open+Sans');
body{font-family: 'Open Sans', sans-serif;}

Binden Sie die @import Directive immer am Anfang Ihrer CSS Instruktionen ein. Lernen Sie mehr über Google Fonts: Google Fonts

Multimedia

Bilder einbinden

In der Media Library können Sie Bilder und PDF Dateien hochladen und diese dann in einer beliebigen Landing Page einbinden. Nach dem Upload eines Bildes, erhalten Sie ein HTML Snippet, mit dem Sie das Bild einbetten können.

<img alt="qr icon" src="/img/qr-icon32.png"/>

Embed YouTube Videos einbinden

Folgendes Code snippet zeigt, wie Sie ein YouTube Video per iFrame in Ihre Landing Page einbetten. Das Video wird automatisch an die Bildschirmbreite angepasst.

<div class="videoWrapper">
    <iframe allowfullscreen frameBorder=0 src="//youtube.com/embed/MEG4VK2y1cI"></iframe>
</div>

Achtung: Bitte verwenden Sie immer auf YouTube den Link zum Einbetten //youtube.com/embed/MEG4VK2y1cI und nicht den Link in der Adressleiste //youtube.com/watch?v=MEG4VK2y1cI

youtube video embed

Vimeo Videos einbinden

Folgendes Code snippet zeigt, wie Sie ein Vimeo Video per iFrame in Ihre Landing Page einbetten. Das Video wird automatisch an die Bildschirmbreite angepasst.

<div class="videoWrapper"><iframe allowfullscreen frameBorder=0 src="//player.vimeo.com/video/44454530"></iframe>
</div>
vimeo video embed

MP4 Videos einbinden

Sie können auch mit HTML5 Videos im MP4 Format einbinden

<video width="100%" controls>
  <source src="/resources/sample.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>
html5 video embed

Google Maps einbinden

Sie können einen responsive Iframe in einen Google Maps-Standort integrieren.

  1. Suchen Sie Ihren Standort in Google Maps und kopieren Sie den HTML-Code "Freigeben> Karte einbetten" (iframe).
  2. Verwenden Sie den folgenden Code (der Ihren Iframe ersetzt) auf Ihren Zielseiten, um die responsive Google Map anzuzeigen
google maps embed
<div class="google-maps">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3167.607952022468!2d-122.16294098474549!3d37.44636533875898!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fbb38fa3f36f9%3A0xf5692002b984147!2sApple%20Palo%20Alto!5e0!3m2!1sen!2ses!4v1581585855657!5m2!1sen!2ses" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>        
            

JavaScript einbinden

Sie können auch JavaScript Code in Textfelder einbinden. Bitte fügen Sie den gesamten Code in einer Linie ein. Bei Zeilenumbrüchen im Javascript Code entsteht sonst ein Fehler.

<script>alert('hello');</script>

iFrame einbinden

Inkludieren Sie ein iFrame z.B. im "Über mich" Teil von Ihrer Visitenkarte.

<iframe frameBorder="0" src="/widgets/iframe-dummy.html"></iframe>

Externe Webseiten einbinden

Wenn Sie eine externe Webseite in eine Custom Landing Page einbinden möchten, sollten Sie zuerst alle externen Quellen wie javascript, css und Bild Dateien inline in the webseite einfügen. Dafür gibt es zum Beispiel ein Tool auf Github - Inliner

Formulardaten übermitteln

Um ein Formular auf einer Landingpage zu erstellen und die Daten an den Server zu schicken binden Sie folgendes Snippet ein:

<script>
    $(function() {
        $('#submit').on('click', function() {
            $.post("/api/post", $("form").serialize()).done(
                function(data) {
                    alert('Thank you for registration!');
                });
            return false;
        });
    });
</script>
<form>
    <label>Your Name</label>
    <input name="name">
    <label>Your E-Mail</label>
    <input name="email">    
    <a href="#" id="submit">Register</a>
</form>

Optionale Form Felder

<input name="notify" type="hidden" value="1">
<input name="webhook" type="hidden" value="https://white.qr1.at/api/webhook/lead"><input name="rewardurl" type="hidden" value="https://white.qr1.at/resources/test.pdf">
  • Mit dem Feld notify können Sie die E-Mail-Benachrichtigung, wenn ein neuer Lead übermittelt wurde, an- oder abstellen.
  • Mit dem Feld webhook können Sie eine externe URL angeben, an die der generierte Lead übertragen wird.
  • Mit dem Feld rewardurl können Sie eine externe URL angeben, die der Benutzer per Mail zugesandt bekommt, wenn er sich angemeldet hat (z.B. E-Book, Online Kurs, ...)
<input name="lng" type="hidden">
<input name="lat" type="hidden">
<input name="accuracy" type="hidden">

Die Felder lng, lat und accuracy können mit folgendem JS-Snippet befüllt werden, wenn die GPS-Funktion aktiviert ist.

<script>
    $(function() {
        const urlParams = new URLSearchParams(window.location.search);
        $('input[name=lng]').val(urlParams.get('lng'));
        $('input[name=lat]').val(urlParams.get('lat'));
        $('input[name=accuracy]').val(urlParams.get('accuracy'));
    });
</script>

Call-2-Actions

Sie können auf jeder Landing Page eigene Call-2-Action Buttons hinzufügen. Ein Call-2-Action Button löst eine benutzerdefinierte Aktion wie zum Beispiel einen Anruf initiieren, eine Mail verschicken oder eine Webseite öffnen aus.

Auf Website verlinken

Um auf eine Website zu verlinken, fügen Sie einfach ein Label für die Call-2-Action-Schaltfläche und den Link zu Ihrer Website hinzu.

https://www.ihrewebseite.com

WhatsApp Chat starten

Sie können einen WhatsApp Chat für einen bestimmte Nummer (phone) und mit einem Begrüßungstext (text) initieren. Beide Parameter sind optional. Voraussetzungen ist, dass der Benutzer WhatsApp auf seinem Smartphone installiert hat und wenn Sie eine Telefonnummer als Parameter angeben, diese auch als Kontakt auf dem Smartphone des Benutzers vorhanden ist. Lassen Sie die Nummer frei, muss der Benutzer in WhatsApp bestimmen, an welche Person er die Nachricht senden möchte. Beachten Sie, dass ein Benutzer immer bestätigen muss, bevor eine Nachricht gesendet wird.

whatsapp://send?phone=5555555&text=hello

SMS verschicken

Sie können eine SMS mit einer Nummer (phone) und einem Text (text) initiieren. Beide Parameter sind optional. Wenn Sie einen Text senden, muss der Benutzer einen Kontakt von seinem Telefon auswählen, wenn Sie nur eine Telefonnummer verwenden, muss der Benutzer einen Text schreiben. Wenn Sie beide Parameter einstellen, wird eine SMS an die angegebene Nummer mit dem angegebenen Text gesendet. Beachten Sie, dass ein Benutzer immer bestätigen muss, bevor eine Nachricht gesendet wird.

sms://send?phone=555555&text=hello

Facebook Messenger Kontakt anschreiben

Sie können eine Nachricht an einen Facebook Messenger Kontakt (username) senden. Beachten Sie dass der Text der Nachricht erst in der Messenger App eingegeben werden kann.

https://m.me/username

E-Mail verschicken

Wenn Sie eine E-Mail an eine bestimmte Adresse mit einem bestimmten Betreff und Text senden möchten, fügen Sie eine Call-2-Action-Schaltfläche mit der folgenden URL hinzu: (Um eine neue Zeile im Text der Nachricht einzufügen, benutzen Sie einfach das %0A Zeichen)

mailto:hi@white.qr1.at?subject=Anfrage&body=Bitte schicken Sie mir Informationen zu Ihren Produkten%0Vielen Dank!

Adresse anzeigen

Wenn Sie eine bestimmte Adresse senden möchten, öffnen Sie einfach Google Maps, suchen Sie Ihren Standort und fügen Sie der Call-2-Action-Schaltfläche die URL hinzu. z.B.

https://www.google.com/maps/place/IHRE_ADRESSE

Anruf initieren

Sie können einen Anruf initiieren, indem Sie eine Nummer in die URL der Call-2-Action-Schaltfläche eingeben, z.B.

tel:+555-555-555