„Altes“ Onlineformular mit Corporate Design des Restaurants

Viele unserer Gastronomen nutzen unser Onlineformular als Iframe direkt in ihrer Internetseite integriert. Dort ist natürlich zu erkennen, dass das Formular nicht in einem Guss mit der Webseite ist, da reservino sein eigenes Look and Feel hat.

Hier ein Beispiel von der Vinothek aus Bingen. Man kann erkennen, dass das Corporate Design Dunkel blau beinhaltet, das Reservierungsformular aber orangene Icons vorweist.

Durch unser neues Feature kann der Gastronom entscheiden, ob er das reservino Look and Feel des Onlineformulars verwenden möchte, oder das Design an seine Webseite anpassen will. Dies geht so:

1. Identifizieren der Elemente die neu gestylt werden sollen.

An unserem Beispiel könnten wir die Icons und Links in dunkel blau darstellen. Den gelben Button ebenfalls in Dunkelblau mit weißer Schrift und den Reservieren Button genauso.

Das Anwenden der passenden Schriftart wäre dann die „Kür“.

2. Extrahieren der Elemente

Um zu wissen welche Elemente anders gestylt werden sollten Sie nun einen Webentwickler hinzuziehen. Dieser kann über die Entwicklertools des Browsers die passenden Klassen extrahieren und dort auch testweise den Style anpassen.

Wir benötigen die folgenden:

.required{
color:#003d6b;
}

a {
color:#003d6b;
}

a:hover{
color: #727a82;
}

.input-group-addon{
background-color: #727a82;
color: white;
}

3. Regeln in reservino einfügen

Um die Regeln anzuwenden müssen sie in reservino eingetragen werden.

Hierzu im Eingabefeld „personalisierter Style“ unter Einstellungen – Einstellungen. Die Regeln speichern. Zur Sicherheit von reservino wird ein sog. „SanityCheck“ ausgeführt, der schadhaften Code entfernt. Dieser Check kann vorab ebenfalls auf der Oberfläche über den button „Qualitätskontrolle durchführen“ ausgelöst werden.

4. Ergebnis überprüfen