Auf Ihrer Website einbinden und Gästelink

Diese Seite erklärt drei Wege, Mira Ihren Gästen zur Verfügung zu stellen: eine in Ihre Website eingebettete Chat-Blase, einen teilbaren Guest Link (Gästelink) und QR-Codes in den Zimmern. Sie müssen kein Programmierer sein; es genügt, eine einzige Codezeile in Ihre Website einzufügen (oder diese Seite an die Person weiterzugeben, die das für Sie erledigt). Den Code und die Links erhalten Sie auf der Seite Widget.

Welche Methode soll ich wählen?#

Sie können alle drei Methoden gemeinsam nutzen. Sie sind alle mit derselben Mira und denselben Informationen verbunden.

Schritt für Schritt: das Widget in Ihre Website einfügen#

Beispielszenario: Das „Blue Bay Hotel“ (30 Zimmer) möchte auf jeder Seite seiner Website unten rechts eine Chat-Blase anzeigen.

1. Den Code kopieren#

1. Öffnen Sie im Panel Widget.
2. Wählen Sie im Feld Website Widget die Position (zum Beispiel Bottom right) und klicken Sie auf Save.
3. Klicken Sie auf Copy Code. Eine Zeile wie diese wird in Ihre Zwischenablage kopiert:

<script async src="https://app.airoomier.com/widget.js" data-hotel="blue-bay-hotel"></script>

Der Wert data-hotel ist die Kennung Ihres Betriebs (der Teil nach /assistant/ in Ihrem Gästelink). Kopieren Sie den Code aus dem Panel und tippen Sie ihn nicht von Hand ab; Adresse und Kennung müssen exakt stimmen.

2. Den Code in Ihre Seite einfügen#

Der Code muss direkt vor dem schließenden </body>-Tag der Seite stehen. Wenn das Widget auf jeder Seite erscheinen soll, fügen Sie den Code an einer Stelle ein, die von allen Seiten gemeinsam genutzt wird (die Footer-Vorlage Ihrer Website). Fügen Sie den Code nur einmal ein; wenn Sie ihn mehrfach einfügen, erscheinen mehrere Blasen.

Auf Ihrer eigenen HTML-Website: Öffnen Sie die Datei, suchen Sie die Zeile </body> und fügen Sie den Code direkt darüber ein.

WordPress: Grundsätzlich fügen Sie den Code in einen „Footer-Script“-Bereich ein, der auf jeder Seite der Website ausgegeben wird. Das geschieht meist mit einem „Header/Footer-Script“-Plugin oder indem Sie den Code in der Datei footer.php Ihres Themes vor </body> einfügen. Wenn Sie ihn in einen „Individuelles HTML“-Block innerhalb einer Seite einfügen, erscheint das Widget nur auf dieser Seite. Ein visueller Editor kann den Code beschädigen; verwenden Sie den Code-/HTML-Modus.

Website-Baukästen wie Wix, Squarespace, Shopify: Alle haben in den Website-Einstellungen einen Bereich mit Namen wie „Benutzerdefinierter Code“, „Code Injection“ oder „Theme-Code“, in dem Sie Code am Seitenende (Footer / Body-Ende) einfügen können. Die Menünamen unterscheiden sich je nach Plattform und ändern sich mit der Zeit; suchen Sie in der Hilfe der Plattform nach „Custom Code“ oder „Code Injection“. Bei manchen Plattformen erfordert diese Funktion einen kostenpflichtigen Tarif. Bei Shopify fügen Sie den Code meist in der Theme-Datei theme.liquid vor </body> ein.

Wenn Sie mit einer Agentur oder einem Entwickler arbeiten: Sagen Sie ihnen: „Füge diese <script>-Zeile auf allen Seiten der Website vor </body> ein.“

3. Veröffentlichen und aktualisieren#

Veröffentlichen Sie die Änderung auf Ihrer Website. Wenn Ihre Website ein Caching-Plugin oder ein CDN nutzt, leeren Sie den Cache und laden Sie die Seite dann hart neu (Strg+F5, oder öffnen Sie sie auf dem Handy in einem privaten Tab).

4. Testen#

1. Öffnen Sie Ihre Website in einem privaten Fenster/Inkognito-Fenster.
2. Nach etwa 1,5 Sekunden sollten in der gewählten Ecke eine runde Mira-Blase (oder bei Pro Ihr eigenes Assistentenfoto) und darüber eine Begrüßungsblase erscheinen.
3. Klicken Sie auf die Blase. Für einen kurzen Moment erscheinen in der Mitte des Fensters drei kleine Punkte (eine Ladeanzeige), dann wird der Chat sanft eingeblendet. Beim ersten Mal erscheint ein Fenster mit den Terms & Conditions; fahren Sie mit Accept & Continue fort.
4. Stellen Sie Fragen wie „Wann ist Check-in?“ oder „Sind Haustiere erlaubt?“. Die Antworten sollten zu dem passen, was Sie unter Business Info eingetragen haben.
5. Öffnen Sie die Seite auch auf Ihrem Handy: Ist der Bildschirm schmal (etwa 520 Pixel oder weniger), öffnet sich der Chat im Vollbild.

5. (Optional) Domain-Sicherheit einschalten#

Ihr Code ist im Quelltext Ihrer Website öffentlich sichtbar; kopiert ihn jemand in seine eigene Website, werden Ihre Assistentin und Ihr KI-Gesprächskontingent dort verbraucht. So verhindern Sie das:

1. Sobald das Widget auf Ihrer Website funktioniert, öffnen Sie die Box Widget → Domain Security.
2. Geben Sie die Domain Ihrer Website in das Feld Allowed domains ein, z. B. bluebayhotel.com (eine Domain pro Zeile; https://, einen Pfad oder www. müssen Sie nicht schreiben, und eine Hauptdomain deckt alle ihre Subdomains ab).
3. Haken Sie Enable domain security an und drücken Sie Save Changes.
4. Öffnen Sie Ihre Website erneut in einem privaten Fenster und klicken Sie auf die Blase; der Chat sollte sich normal öffnen.

Diese Einstellung ist in den Tarifen Basic und Pro verfügbar. Die Schreibregeln, was ein Besucher auf einer gesperrten Website sieht und was nicht betroffen ist, werden im Abschnitt Domain Security der Seite Widget ausführlich erklärt.

Wie sich das Widget verhält#

• Die Blase: ein rundes Symbol mit 76 Pixeln und sanften „Puls“-Ringen. In den Positionen Right (center) und Left (center) sitzt sie in der vertikalen Mitte des Bildschirmrands; bei Bottom right und Bottom left sitzt sie in der unteren Ecke.
• Die Begrüßungsblase: erscheint etwa 1,5 Sekunden nach dem Öffnen der Seite und wird pro Seitenaufruf einmal angezeigt. Sie lässt sich mit ✕ schließen; ein Klick darauf öffnet den Chat. Bei Pro können Sie ihren Text anpassen (Widget).
• Das Chat-Fenster (Computer): Ein Klick auf die Blase öffnet daneben ein großes Fenster. Sie können die Größe des Fensters ändern, indem Sie den gepunkteten Griff an der oberen Ecke ziehen; zum Schließen nutzen Sie das ✕ in der Ecke des Fensters oder klicken erneut auf die Blase. Die Seite hinter dem Fenster bleibt scrollbar.
• Das Chat-Fenster (Handy): Ist der Bildschirm etwa 520 Pixel breit oder schmaler, öffnet sich das Fenster im Vollbild, oben erscheint eine Leiste Back to site und die Blase wird ausgeblendet. Solange das Fenster offen ist, scrollt Ihre Website im Hintergrund nicht.
• Der Chat läuft als Fenster (iframe) innerhalb Ihrer Website; er bringt eigene Stile mit und beeinträchtigt das Design Ihrer Website nicht. Die Chat-Seite wird erst geladen, wenn das Fenster zum ersten Mal geöffnet wird.
• Ladeanzeige: Beim Öffnen des Fensters zeigen drei kleine bronzefarbene Punkte in der Mitte des Fensters an, dass der Chat noch lädt; danach erscheint der Chat mit einer kurzen, sanften Einblendung (kein weißes oder schwarzes Aufblitzen). Sendet der Chat aus irgendeinem Grund sein „Bereit“-Signal nicht, wird er spätestens etwa 1,5 Sekunden nach dem Laden der Seite trotzdem angezeigt. Dieselbe Anzeige erscheint auch, wenn das Fenster nach einem Sprachwechsel neu lädt.
• Immer helles Design: Der Chat-Bildschirm öffnet sich immer im hellen Design, auch wenn Sie das Airoomier-Panel im dunklen Design nutzen.
• Fenster Terms & Conditions: Wenn ein Gast den Chat zum ersten Mal öffnet, sieht er ein Bedingungsfenster, das für alle Betriebe gleich ist und im Panel nicht geändert werden kann (zum Inhalt siehe Widget → Guest Link). Accept & Continue wird in diesem Browser gespeichert; Decline schließt das Fenster und lässt den Gast chatten, aber das Fenster erscheint beim nächsten Mal erneut.
• Wenn Domain Security an ist und das Widget auf einer Website geöffnet wird, die nicht in der Liste steht, erscheint die Blase, aber das Fenster zeigt statt des Chats die Meldung „Bu site için yetkilendirilmemiş“ („Für diese Website nicht autorisiert“).

Code-Optionen (data-*-Parameter)#

Beispiel (Code auf Englisch festgelegt):

<script async src="https://app.airoomier.com/widget.js" data-hotel="blue-bay-hotel" data-lang="en"></script>

In welcher Sprache öffnet sich das Widget?#

Das Widget bestimmt seine Sprache in dieser Reihenfolge:

1. data-lang im Code, falls vorhanden,
2. andernfalls die Browsersprache des Besuchers,
3. wenn keine davon zu den vier unterstützten Sprachen (Türkisch, Englisch, Deutsch, Russisch) gehört, Englisch.

Das Website-Widget verwendet also nicht die Default Language aus Business Info, sondern die Sprache des Besuchers bzw. Ihrer Website. Ist Ihre Website auf Türkisch, der Browser eines Besuchers aber auf Englisch, sieht dieser Englisch, sofern Sie nicht data-lang="tr" hinzufügen. Hat Ihre Website einen Sprachumschalter, nutzen Sie die Methode setLanguage weiter unten. Gäste können die Sprache jederzeit selbst über die Auswahl TR/EN/DE/RU im Chat ändern.

Steuerung mit JavaScript: AiroomierWidget#

Das Widget fügt der Seite unter window.AiroomierWidget zwei kleine Befehle hinzu. Ihre Verwendung ist optional; das Widget funktioniert auch ohne sie.

Beispiele:

<!-- Chat mit Ihrer eigenen Schaltfläche öffnen -->
<button onclick="window.AiroomierWidget && AiroomierWidget.open()">Talk to Mira</button>

<script>
  // Wenn der Sprachumschalter Ihrer Website wechselt, auch die Widget-Sprache aktualisieren
  function siteLanguageChanged(code) {
    if (window.AiroomierWidget) AiroomierWidget.setLanguage(code);
  }
</script>

Gut zu wissen:

• Da der Code mit async geladen wird, kann AiroomierWidget direkt nach dem Öffnen der Seite kurzzeitig nicht definiert sein. Prüfen Sie wie oben mit window.AiroomierWidget &&.
• setLanguage aktualisiert sofort die Sprache der angezeigten Begrüßungsblase und der Beschriftungen des Fensters. Ist das Chat-Fenster geschlossen, lädt es beim nächsten Öffnen in der neuen Sprache neu; ist das Fenster offen, bleibt die laufende Unterhaltung unberührt.
• Es gibt keinen eigenen Befehl zum Schließen des Fensters; der Besucher schließt es mit ✕, Back to site oder über die Blase.

Schritt für Schritt: den Gästelink teilen#

Der Guest Link ist die feste, unveränderliche Adresse Ihres Betriebs (https://app.airoomier.com/assistant/blue-bay-hotel). Jeder, der einen Link öffnen kann, kann direkt mit Mira sprechen; eine Website ist nicht nötig.

1. Gehen Sie zum Feld Widget → Guest Link.
2. Klicken Sie mit der rechten Maustaste auf den Link (auf dem Handy lange drücken) und kopieren Sie die Linkadresse.
3. Fügen Sie ihn dort ein, wo er für Sie passt:

Beispielnachricht: „Hallo! Hier können Sie unserer digitalen Rezeptionistin Mira rund um die Uhr schreiben: https://app.airoomier.com/assistant/blue-bay-hotel“.

Dem Link eine Sprache hinzufügen#

Sie können die Sprache, in der sich der Chat öffnet, wählen, indem Sie ?lang= an das Ende des Links anhängen (tr, en, de, ru). Beispiel für einen Instagram-Account, der sich an ausländische Gäste richtet: https://app.airoomier.com/assistant/blue-bay-hotel?lang=en. Wenn Sie keine Sprache anhängen, öffnet sich der Chat in der Default Language Ihres Betriebs; Gäste können sie über die Auswahl TR/EN/DE/RU im Chat ändern.

Schritt für Schritt: ein Zimmer-QR-Code#

Ein Zimmer-QR-Code teilt Mira automatisch mit, aus welchem Zimmer ein Gast schreibt. Der Gast muss seine Zimmernummer nicht nennen.

1. Öffnen Sie Room Types und gehen Sie zur Liste Physical Units auf der Karte des betreffenden Unterkunftstyps. Siehe Room Types.
2. Klicken Sie auf der Karte des betreffenden Zimmers (zum Beispiel 101) auf Edit.
3. Klicken Sie unten im sich öffnenden Bereich auf die Schaltfläche Room Link & QR.
4. Es öffnet sich ein Feld Room Link — 101: Es enthält den QR-Code, die Linkadresse, die Schaltflächen Copy Link und Download QR (PNG) sowie eine Schaltfläche Close. Der QR-Code wird in Ihrem Browser erzeugt (es wird nichts an einen externen Dienst gesendet).
5. Laden Sie den QR-Code herunter und drucken Sie ihn auf die Zimmerkarte oder die Tür (der Dateiname sieht so aus: oda-101-qr.png).

Wenn ein Gast den QR-Code scannt, wird der Chat mit diesem Zimmer verknüpft, und in der Chat-Kopfzeile erscheint ein Badge wie Room 101. Das hat folgende Auswirkungen:

• Mira nennt diesem Gast das WLAN-Passwort (das Passwort wird nur Gästen angezeigt, die bei Ihnen wohnen; siehe Business Info).
• Anfragen, die der Gast über Mira stellt (zum Beispiel Handtücher oder Reinigung; nur für die Typen, die Sie unter Request Types aktiviert haben), werden automatisch mit diesem Zimmer verknüpft; siehe Gästeanfragen. Ohne QR-Code/Link kann eine Anfrage nur angelegt werden, wenn der Gast eine bestätigte Buchung für heute mit zugewiesener Einheit hat.
• Öffnet der Gast später denselben QR-Code erneut, sieht er die Anzahl seiner offenen Anfragen für dieses Zimmer.

Schritt für Schritt: wie eine App auf dem Handy hinzufügen#

Gäste können Mira über den Guest Link wie eine App auf dem Startbildschirm ihres Handys ablegen. Sie müssen nichts einrichten; diese Funktion ist automatisch aktiv.

1. Der Gast öffnet den Guest Link auf seinem Handy (über Verknüpfung/QR/SMS).
2. Oben rechts auf dem Chat-Bildschirm sieht er die Schaltfläche Install App (auf einem schmalen Bildschirm wird nur das Handy-Symbol angezeigt).
3. Android / Chrome: Er tippt auf die Schaltfläche und bestätigt das erscheinende Installationsfenster; die Verknüpfung wird dem Startbildschirm hinzugefügt.
4. iPhone / Safari: Er tippt auf die Schaltfläche. Das erscheinende Fenster nennt diese Schritte: (1) auf das Symbol Share in der Symbolleiste tippen, (2) auf Add to Home Screen tippen, (3) oben rechts auf Add tippen. Danach schließt er das Fenster mit Got it.

Die installierte Verknüpfung öffnet sich im Vollbild und führt direkt in den Chat Ihres Betriebs. Ihr Name ist der Name des Assistenten (standardmäßig „Mira“; bei Pro der Name und das Foto, die Sie festgelegt haben). Die App speichert nichts im Cache: Chat, Verfügbarkeit und Preise sind immer live und aktuell, und ohne Internet funktioniert sie nicht. Die Verknüpfung öffnet den Chat wie der Guest Link in Ihrer Default Language. Ist die App bereits installiert oder unterstützt der Browser keine Installation, erscheint die Schaltfläche Install App nicht.

Wie es weitergeht#

• Jeder Chat, der über das Widget oder den Link eingeht, wird auf der Seite Conversations aufgelistet; siehe Unterhaltungen. Diese Chats zählen auf Ihr monatliches KI-Gesprächskontingent (Basic: 100 pro Monat, Pro: 1000 pro Monat; siehe Konto und Tarife). Ist das Kontingent ausgeschöpft, sieht der Gast „We're quite busy right now...“ und die Schaltflächen Call Us / WhatsApp / Send an Email.
• Wenn ein Gast eine Buchung wünscht, landet die Anfrage unter Bookings; siehe Buchungen.
• Einstellungen, die Sie im Panel ändern (Position, Blasentext, Name/Foto des Assistenten), erreichen Ihre Website ohne Code-Änderung, spätestens nach etwa 1 Minute.

Fehlerbehebung#

Tipps und häufige Fehler#

• Zuerst die Live Preview: Testen Sie den Assistenten in der Live Preview auf der Seite Widget, bevor Sie ihn in die Website einfügen.
• Den Code nicht von Hand ändern: Ändern Sie Position und Texte im Panel; der Code selbst ändert sich nie.
• Den Guest Link nicht kürzen oder ändern: Ändert sich die Betriebskennung am Ende des Links, öffnet sich der Chat nicht.
• Auf dem Handy testen: Die meisten Ihrer Gäste nutzen Handys; probieren Sie das Öffnen im Vollbild und die Leiste Back to site einmal aus.
• Lücken füllen: Wenn Mira bei einer Frage „I have no information“ sagt, ergänzen Sie die Information unter Knowledge Base oder Facilities.