Einbinden

Ihren Buchungskalender, Ihren Gutschein-Shop und Ihre Bewertungen können Sie direkt auf Ihrer eigenen Webseite anzeigen. Ihre Besucher buchen dann einen Termin, kaufen einen Gutschein oder lesen Bewertungen, ohne Ihre Seite zu verlassen.

Den fertigen Code erzeugen Sie im Dashboard. Diese Seite erklärt, welche Varianten es gibt, worin sie sich unterscheiden und wie Sie den Code in gängige Webseiten-Baukästen einfügen.

Die Varianten im Überblick

Ein Widget kann auf zwei Arten erscheinen: als Fenster, das sich über Ihre Seite legt, oder fest in die Seite eingebaut. Für das Fenster gibt es zwei Auslöser — insgesamt haben Sie also drei Varianten zur Wahl.

Schwebender Button

Ein runder Button erscheint automatisch unten rechts auf Ihrer Webseite, auf jeder Seite, auf der der Code eingebunden ist. Klickt ein Besucher darauf, öffnet sich das Widget als Fenster über der Seite. Sie müssen keinen eigenen Button gestalten, er erscheint von selbst.

Geeignet für Webseiten, auf denen die Buchung überall erreichbar sein soll, ohne dass Sie einzelne Seiten bearbeiten.

Eigener Button

Das Widget öffnet sich ebenfalls als Fenster, aber erst, wenn ein Besucher auf einen Button oder Link klickt, den Sie selbst platziert haben. So bestimmen Sie, wo der Auslöser sitzt, zum Beispiel auf einer Kontaktseite oder in Ihrem Menü. Das Fenster sieht genauso aus wie beim schwebenden Button.

Geeignet für Webseiten, auf denen die Buchung an einer bestimmten Stelle stehen soll.

Fest eingebaut

Das Widget wird direkt in Ihre Seite eingebaut, ohne Fenster. Der gesamte Ablauf erscheint an der Stelle, an der Sie ihn einsetzen, und der Besucher scrollt wie durch den übrigen Seiteninhalt. Die Höhe passt sich automatisch an.

Geeignet für eine eigene Unterseite, etwa „Termin buchen" oder „Gutscheine".

Den Code holen

Den Einbettungscode erzeugen Sie im Dashboard unter Einstellungen → Internetadresse. Dort gibt es je einen Abschnitt für die Widgets, die Sie einbinden können.

Öffnen Sie Einstellungen → Internetadresse.
Wählen Sie das gewünschte Widget.
Wählen Sie eine der drei Varianten.
Passen Sie bei Bedarf den Button-Text oder die Element-ID an.
Klicken Sie auf Code kopieren.

Der Code enthält Ihre individuelle Internetadresse. Kopieren Sie ihn deshalb immer frisch aus dem Dashboard, statt ihn von einer anderen Seite zu übernehmen.

Code in Ihre Webseite einfügen

Der kopierte Code ist ein kurzes Script. Bei der Variante Fest eingebaut kommt ein zusätzliches Ziel-Element dazu, das das Dashboard gleich mitliefert. Wohin der Code gehört, hängt von Ihrem Baukasten ab.

WordPress

Für WordPress gibt es zwei Wege.

Mit unserem Plugin (empfohlen). Das Plugin nimmt Ihnen das Einfügen von Code ab und bindet Kalender, Shop und Bewertungen über einen Kurzbefehl oder einen seitenweiten Button ein. Es funktioniert mit Gutenberg, Elementor, Divi und jedem Theme.

Laden Sie das Plugin herunter: TM-Booking-Plugin für WordPress.
Installieren Sie es im WordPress-Adminbereich unter Plugins → Installieren → Plugin hochladen und aktivieren Sie es.
Tragen Sie unter Einstellungen → TM Booking Ihre Studio-Internetadresse ein — dieselbe Adresse wie in Ihrem Dashboard unter Internetadresse.
Fügen Sie ein Widget mit dem Kurzbefehl [tm_widget] in eine Seite ein oder aktivieren Sie den schwebenden Button seitenweit in den Plugin-Einstellungen.

Ohne Plugin. Fügen Sie den kopierten Code in einen Custom-HTML-Block der Seite ein. Für einen schwebenden Button, der auf allen Seiten erscheinen soll, verwenden Sie ein Plugin, das Code im Fußbereich (</body>) einbindet.

Wix

Bei Wix hängt der Weg von der Variante ab.

Schwebender oder eigener Button: Diese beiden Varianten müssen auf der ganzen Seite wirken. Fügen Sie den Code unter Einstellungen → Benutzerdefinierter Code ein und wählen Sie als Platzierung Body – Ende. Dieser Bereich steht nur in kostenpflichtigen Wix-Tarifen mit eigener Domain zur Verfügung.

Fest eingebaut: Ziehen Sie über Elemente hinzufügen → Einbetten → Eigener Code ein HTML-Element an die gewünschte Stelle und fügen Sie den Code dort ein.

Wichtig: Setzen Sie einen schwebenden oder eigenen Button nicht in das HTML-Element auf der Seite. Wix kapselt dieses Element ab, sodass das Fenster darin gefangen bliebe. Diese beiden Varianten gehören in den benutzerdefinierten Code.

Andere Baukästen

Die meisten Baukästen wie Jimdo oder Squarespace bieten ein HTML- oder Code-Element. Für Fest eingebaut setzen Sie es an die gewünschte Stelle. Für einen schwebenden Button suchen Sie im Baukasten nach einem Bereich für eigenen Code im Kopf- oder Fußzeilenbereich der Seite.

Ein Widget erscheint nur, wenn es eingerichtet und aktiv ist. Die Voraussetzungen und weitere Einstellungen finden Sie beim jeweiligen Widget:

Buchungskalender muss aktiviert und die Online-Buchung eingeschaltet sein. Dort stellen Sie auch die Farbe ein und wählen bei mehreren Studios das passende aus.
Gutschein-Shop muss auf Aktiv oder Testmodus stehen. Im Testmodus können Sie den Ablauf gefahrlos ausprobieren, bevor Sie ihn scharf schalten.
Bewertungen zeigen die Rückmeldungen an, die für Ihr Studio bereits vorliegen.

Das Aussehen der Widgets, etwa die Farbe, übernehmen Sie aus Ihren Studio-Einstellungen. Ändern Sie die Farbe dort, ändert sie sich auch im eingebetteten Widget, ohne dass Sie den Code auf Ihrer Webseite anpassen müssen.