Das müssen Sie wissen

• Das TIMIFY-Buchungs-Widget funktioniert in den folgenden Web Browsern: Edge, Firefox, Safari und Chrome. Wir haben auch Plugins für viele Content Management Systeme (CMS), einschließlich Joomla, Word Press und Drupal.

• Wenn es darum geht, ein Widget in Ihre Website einzubinden, haben Sie drei Möglichkeiten: Sie können auf Ihre Buchungs-Widget-URL verlinken, das Widget als Overlay - ausgelöst durch einen Buchungsbutton - oder als iFrame hinzuzufügen. Der Unterschied liegt darin, wie sie auf Ihrer Website angezeigt werden. Wir erklären weiter unten mehr, damit Sie entscheiden können, was für Sie richtig ist.

• Wir bieten Anleitungen und Tipps für beide Optionen. Die einfachste Option ist die Buchungs-Schaltfläche/Overlay-Option, da sie weniger Codierung erfordert.

• Wir zeigen Ihnen, wie Sie das Widget einbinden können, wenn Sie ein CMS verwenden.

• Sie können Ihr Widget weiter anpassen, indem Sie den Code verwenden, den wir für Sie vorbereitet haben und der in unserem Artikel für Fortgeschrittene verfügbar ist, hier.

-----------------------------------------------------------------------------------------------------------------------------

Wie dieser Artikel aufgebaut ist:

1. Was ist der Unterschied zwischen der Verlinkung auf Ihr Buchungswidget, der Verwendung eines Buchungsbuttons als Overlays oder der Buchungs-Widget Einbindung als iFrame?

2. So betten Sie das Buchungs-Widget als Overlay ein

3. So betten Sie das Buchungs-Widget als iFrame ein.

1. Was ist der Unterschied zwischen der Verlinkung auf Ihr Buchungs-Widget, der Verwendung eines Buchungsbuttons als Overlays oder der Buchungs-Widget Einbindung als iFrame?

Der einfachste Weg das Buchungs-Widget auf die eigene Website einzubinden, ist die Verlinkung auf Ihren Buchungs-Link. Das ist die URL, die direkt Ihr Buchungs-Widget öffnet.

Den Buchungs-Link finden Sie in Ihrem TIMIFY Account im Bereich "Integration" -> "Buchungs-Link".

Diesen Link können Sie als Text oder als Button auf Ihre Website hinterlegen und bei Klick ein neues Tab öffnen lassen. Schon gelangt ihr Kunde auf das Widget und kann eine Online Buchung durchführen.

Natürlich gibt es aber noch viel bessere Möglichkeiten der Einbindung, zu denen wir jetzt kommen:

• Buchungstaste + Overlay:

Wie der Name schon sagt, wird ein Widget-Overlay über die Mitte Ihrer Website gelegt und verdeckt Ihren Inhalt. Es erscheint nur, wenn der Benutzer auf Ihre Buchungs-Schaltfläche klickt. Ein Overlay ist schnell und einfach zu installieren. Möchten Sie wissen, wie eine Website mit der Standard-Buchungs-Schaltfläche und der Overlay-Option aussieht? So sieht eine Website mit der Buchungs-Schaltfläche aus...

...und hier ist, was passiert, wenn der Benutzer auf die Buchungs-Schaltfläche klickt:

• Das Buchungs-Widget als iFrame

Kurz für Inline-Frame, ein iFrame ist einfach ein Rahmen innerhalb eines Rahmens. Wenn Sie sich für diese Option entscheiden, wird Ihr Buchungs-Widget automatisch angezeigt, wenn ein Besucher Ihre Website öffnet: Sie brauchen keine Buchungs-Schaltfläche. Ein iFrame bietet Ihnen mehr Anpassungsmöglichkeiten und braucht deshalb etwas länger, um eingerichtet zu werden. Außerdem müssen Sie ein wenig von html verstehen, um zu wissen, wo Sie das Widget auf Ihrer Website platzieren müssen. Der Benutzer kann Ihr Buchungs-Widget nicht übersehen, wenn Sie es als iFrame einfügen. So sieht es auf einer Website aus:

Entscheiden Sie sich für die gewünschte Option und lesen Sie die Installationsanweisungen weiter. Als Teil des Integrationsprozesses müssen Sie möglicherweise Ihre TIMIFY-Konto-ID angeben. Sie finden diese unter Kontodetails:

-----------------------------------------------------------------------------------------------------------------------------

2. So betten Sie das Buchungs-Widget als Overlay ein

Melden Sie sich in Ihrem TIMIFY-Konto an und öffnen Sie Ihre Website. Sie müssen ein paar Codezeilen in den HTML-Code Ihrer Website einfügen.

SCHRITT 1:

Gehen Sie zu Integration → Widget. Wählen Sie die Registrierkarte Buchungsbutton/Overlay.

SCHRITT 2:

Wählen Sie, wo Ihre Schaltfläche erscheinen soll.

• Wenn Sie sich für eine feste Position entscheiden, erscheint Ihre Schaltfläche immer in der Mitte des Bildschirms, auf der linken oder rechten Seite. Sie bleibt an dieser Position fixiert - auf jeder Seite Ihrer Website - unabhängig davon, ob Sie nach oben oder unten scrollen. Sie müssen nur einen Codeschnipsel in Ihr HTML kopieren - den Buchungsbutton selbst.

• Wenn Sie eine flexible Button Position wählen, haben Sie völlige Freiheit, wo Sie Ihre Schaltfläche platzieren. Sie haben dann einen zusätzlichen Codeschnipsel, den Sie in Ihr HTML einfügen müssen: um zu bestimmen, wo die Buchungs-Schaltfläche erscheinen soll.

• Sie haben eine Reihe weiterer Einstellungen, mit denen Sie herumspielen können, von der bevorzugten Standardsprache des Widgets bis hin zu der Frage, ob Sie einen Dienst und/oder eine Ressource vorausgewählt haben möchten.

SCHRITT 3:

Für den festen Buchungsbutton:

• Öffnen Sie die HTML-Datei der Webseite, oder suchen Sie in der Administrationsoberfläche Ihrer Website, wo es möglich ist, HTML-Code hinzuzufügen.

• Scrollen Sie und finden Sie den "</head>"-Tag. Fügen Sie nun den kopierten Code kurz vor dem "</head>"-Tag ein. Siehe die Screenshots für vorher und nachher:

Vorher:

Danach:

Für die flexible Button Position:

• Öffnen Sie die HTML-Datei der Webseite, auf der das Buchungs-Widget erscheinen soll.

• Suchen Sie das "body"-Tag. Fügen Sie nun den Code, den Sie für die Buchungs-Schaltfläche kopiert haben, kurz vor dem closing "body"-Tag ein.

• Nun müssen Sie den zweiten Codeschnipsel hinzufügen. Suchen Sie die Stelle in Ihrem HTML-Code, an der die Buchungs-Schaltfläche erscheinen soll - das bleibt Ihnen überlassen.

• Fügen Sie eine Klasse "timify-button" für das Element hinzu, auf das sich das Snippet bezieht.

• Fügen Sie das Attribut "data-account-id =" hinzu und fügen Sie Ihre eindeutige TIMIFY-Buchungs-ID innerhalb des "" ein. (Siehe oben, wie Sie auf Ihre TIMIFY-Buchungs-ID zugreifen können)

Das war's! Klicken Sie auf "Erneut aktualisieren" und das Widget sollte auf Ihrer Website erscheinen.

-----------------------------------------------------------------------------------------------------------------------------

3. So betten Sie das Buchungs-Widget als iFrame ein.

Melden Sie sich in Ihrem TIMIFY-Konto an und öffnen Sie Ihre Website. Sie müssen ein paar Codezeilen in den HTML-Code Ihrer Website einfügen.

SCHRITT 1:

Gehen Sie zu Integration → Widget. Wählen Sie die Registerkarte iFrame. Um einen iFrame einzubetten, benötigen Sie keinen Buchungsbutton, um das Öffnen Ihres Widgets auszulösen: Es wird automatisch geöffnet, wenn ein Besucher Ihre Website besucht.

• Sie haben eine Reihe von Einstellungen, mit denen Sie herumspielen können, von der bevorzugten Standard-Widget-Sprache bis hin zu der Frage, ob ein Dienst und/oder eine Ressource vorausgewählt werden soll. Die Auswahl, die Sie treffen, wirkt sich auf den Code aus, der generiert wird.

SCHRITT 2:

Kopieren Sie die folgende URL in die HTML-Seite Ihrer Webseite, auf der der iFrame erscheinen soll

SCHRITT 3:

• Öffnen Sie den HTML-Code der Seite, auf der das Buchungs-Widget erscheinen soll, und gehen Sie zu der Stelle, an der Sie das Widget einbetten möchten. Fügen Sie den kopierten Codeschnipsel hier ein.

• Passen Sie die URL im Attribut "src" an: Fügen Sie Ihre eindeutige TIMIFY-Buchungs-ID innerhalb des "" hinzu. (Siehe oben, wie Sie auf Ihre TIMIFY-Buchungs-ID zugreifen können).

• Um die Höhe und Breite des Widgets zu bearbeiten, ändern Sie die Werte der Parameter ("height" or "width") mithilfe des automatisch generierten Skript Codes.

Das war's! Klicken Sie auf "Erneut aktualisieren" und das Widget sollte auf Ihrer Website erscheinen.

-----------------------------------------------------------------------------------------------------------------------------

Was ist, wenn Sie ein CMS verwenden?

Die meisten Website-Erstellungs-Toolkits bieten Ihnen die Möglichkeit, ein HTML-Element hinzuzufügen oder Ihr HTML anzupassen. Sie können dieses HTML erhalten, indem Sie die obigen Schritte für die Overlay- oder iFrame-Option ausführen.

Darüber hinaus haben wir Anleitungen für eine Reihe von CMS geschrieben, die über Integration → Widget → und die Registerkarte CMS zugänglich sind.

Wenn Ihr Website-Provider oder CMS Ihnen den Zugriff auf das Skript nicht erlaubt, empfehlen wir Ihnen, in deren Hilfe-Artikeln nach "benutzerdefiniertem HTML" zu suchen oder sich an deren Support-Team zu wenden, um herauszufinden, wie Sie benutzerdefiniertes HTML einbetten können.

Vielleicht möchten Sie Ihr Buchungserlebnis noch ein oder zwei Stufen höher schrauben. Passen Sie Ihr TIMIFY-Buchungs-Widget an: Erweiterte Einstellungen zeigen Ihnen, wie Sie Kundendaten und andere Anpassungen vorausfüllen können.