30 Tage kostenlos Keine Karte nötig. In Minuten starten

Buchungsmaske in Ihre Website einbauen

Am Ende können Gäste auf Ihrer eigenen Website buchen, direkt in der Seite oder über einen schwebenden Knopf. Das dauert etwa zehn Minuten. Ohne Website geben Sie nur einen Link weiter.

Bevor Sie beginnen. Zimmer und Preise sollten eingerichtet sein (siehe Zimmer und Preise einrichten). Sie brauchen das Recht, Ihre Website zu bearbeiten, und ein Abo Ihres Website-Baukastens, das eigenen Code erlaubt. Manche Abos tun das nicht.

Code holen und einfügen

  1. Code öffnen

    Öffnen Sie in Nuitina «Einstellungen → Website» und scrollen Sie zu «In die Website einbauen». Der Code enthält bereits die Adresse Ihres Hauses.

    Website-Einstellungen mit dem Einbau-Code

  2. Darstellung wählen

    «Direkt auf der Seite» setzt die Buchungsmaske mitten in Ihre Seite. «Knopf mit Fenster» fügt einen schwebenden Knopf in der Ecke hinzu, der die Buchung in einem Fenster öffnet. Für den Knopf schreiben Sie Ihren eigenen Text in «Text des Knopfs».

  3. Sprache wählen

    Lassen Sie «Sprache» auf «Automatisch», dann folgt die Maske dem Gast. Oder wählen Sie eine Sprache fest aus; dann steht data-lang im Code.

  4. Code kopieren

    Klicken Sie auf «Kopieren». Die «Vorschau» darunter zeigt, wie die Buchungsseite eingebaut aussieht.

  5. In Ihre Website einfügen

    Fügen Sie den Code dort ein, wo die Buchung erscheinen soll. Wo Sie diese Stelle in WordPress, Wix, Squarespace und Webflow finden, steht im nächsten Abschnitt. Für den schwebenden Knopf eignet sich das Seitenende am besten.

  6. Veröffentlichen und auf der echten Seite testen

    Veröffentlichen Sie die Seite und öffnen Sie sie wie ein Gast, auch auf dem Handy. Suchen Sie nach freien Daten. In der Vorschau mancher Baukästen laufen Skripte nicht, beurteilen Sie deshalb die veröffentlichte Seite.

  7. Optional: eigener Knopf

    Ist der Code für den schwebenden Knopf auf der Seite, kann jeder Ihrer Knöpfe das Buchungsfenster mit window.NoshiBooking.open() öffnen. Um den schwebenden Knopf auszublenden und nur Ihren zu behalten, ergänzen Sie im Skript data-floating="false".

Direkt auf der Seite: die Maske sitzt in Ihrer Seite

<div id="noshi-booking"></div>
<script src="https://booking.nuitina.com/embed.js" data-hotel="ihr-hotel" async></script>

Schwebender Knopf (optional: data-lang, data-color)

<script src="https://booking.nuitina.com/embed.js" data-hotel="ihr-hotel" data-mode="button" data-label="Jetzt buchen" data-lang="de" data-color="#1a4d3a" async></script>

Wo Sie den Code einfügen

Jeder Baukasten nennt die Stelle anders. Die offiziellen Hilfeseiten bleiben aktuell, auch wenn sich Menüs ändern (die meisten auf Englisch).

  • WordPress: Fügen Sie der Seite einen Block «Eigenes HTML» (Custom HTML) hinzu und kopieren Sie den Code hinein. Siehe Custom-HTML-Block. Bei WordPress.com brauchen Script-Tags ein bezahltes Abo, siehe deren Anleitung.
  • Wix: Fügen Sie ein Einbettungs-Element hinzu und tragen Sie den Code in dessen Einstellungen ein: Studio Editor, Harmony Editor. Für den schwebenden Knopf nutzen Sie «Custom Code» unter den Einstellungen: Custom Code einbetten.
  • Squarespace: Fügen Sie einen Block «Code» hinzu und kopieren Sie den Code hinein: Code blocks. Für den Knopf auf allen Seiten nutzen Sie Code Injection. JavaScript setzt ein Abo voraus, das es erlaubt.
  • Webflow: Fügen Sie ein Element «Code Embed» hinzu: Custom code embed. Für den Knopf auf allen Seiten nutzen Sie den Custom Code der Website, im Footer. Veröffentlichen Sie danach die Seite.
  • Reines HTML: Fügen Sie den Code dort ein, wo die Buchung stehen soll. Den Knopf setzen Sie kurz vor das schliessende Body-Tag.

Manche Baukästen zeigen eingebetteten Code in einem Feld mit fester Höhe. Wirkt die Buchungsmaske abgeschnitten, machen Sie das Feld höher oder wechseln Sie zum schwebenden Knopf. Erscheint gar nichts, blockiert womöglich das Abo oder der Editor Skripte. Die verlinkten Seiten erklären jeden Fall.

Keine Website? Nutzen Sie Ihre Buchungsseite

Öffnen Sie «Einstellungen → Website». Unter «Adresse der Buchungsseite» steht Ihr Link, zum Beispiel booking.nuitina.com/book/ihr-hotel. Mit «Link kopieren» kopieren Sie ihn, mit «Öffnen» sehen Sie die Seite an. Setzen Sie den Link in Ihr Google-Profil, in Social Media, in die E-Mail-Signatur und auf Visitenkarten. Den hinteren Teil der Adresse ändern Sie im Feld «Adresse» und mit «Speichern». Eine eigene Domain für die Seite gibt es im Moment nicht.

Fragen, die oft gestellt werden

Funktioniert das mit meinem Website-Baukasten?

Es funktioniert auf jeder Website, die ein Script-Tag annimmt. Das Skript setzt Ihre Buchungsseite in einem Rahmen in Ihre Seite.

Kann ich die Farbe des Knopfs ändern?

Ja. Ergänzen Sie im Code des schwebenden Knopfs data-color mit einer Farbe wie #1a4d3a. Die Farbe der Knöpfe in der Buchungsmaske selbst stammt aus «Markenfarbe» unter «Einstellungen → Haus».

Muss ich den Code nach Preisänderungen neu einfügen?

Nein. Der Code lädt nur Ihre aktuelle Buchungsseite, Preise, Fotos und Regeln sind also immer auf dem neusten Stand.

Können Gäste in meiner Website bezahlen?

Wenn Sie Stripe oder PayPal verbunden haben, ja. Die Zahlungsseite öffnet sich im ganzen Browserfenster. Siehe Online-Zahlungen einrichten.

Dazu passt

Buchungsmaske

Eine Buchungsmaske für Ihre eigene Website oder Ihre Nuitina-Buchungsseite: acht Sprachen, Fotos, Extras, Aktionscodes und keine Kommission.

Weiterlesen

Zahlungen einrichten

Eigenes Stripe- oder PayPal-Konto verbinden, Anzahlung oder ganzen Betrag wählen und festlegen, ob die Zahlung nötig ist, um das Zimmer zu halten.

Weiterlesen

Zimmer und Preise

Zimmerkategorien, Zimmer und Fotos anlegen, dann Grundpreise, Saisons, Wochenenden, Mindestaufenthalt, Verkaufsstopp, Tarife und Extras festlegen.

Weiterlesen

Nicht weitergekommen? Schreiben Sie uns

Sagen Sie uns, welchen Baukasten Sie nutzen, und wir zeigen Ihnen die richtige Stelle.

Schreiben Sie unsKostenlos testen