AI Business Passport in Webflow integrieren

Die Integration des AI Business Passport in eine Webflow-Webseite ermöglicht es lokalen Unternehmen, ihre Dienstleistungen direkt über KI-Assistenten wie ChatGPT buchbar zu machen. Dieser Prozess ist technisch unkompliziert und erfordert keine tiefgreifenden Programmierkenntnisse. Der Kern der Integration besteht aus zwei Elementen: dem KI-Chat-Widget für direkte Anfragen auf Ihrer Webseite und dem Model Context Protocol (MCP) Meta-Tag, der Ihre Geschäftsdaten für KI-Systeme maschinenlesbar aufbereitet. Durch das Einfügen eines einfachen Skripts in die Einstellungen Ihrer Webflow-Seite wird das Chat-Widget aktiviert, das rund um die Uhr Anfragen bearbeitet. Parallel dazu sorgt der MCP-Tag im Kopfbereich Ihrer Seite dafür, dass KI-Assistenten Ihre Öffnungszeiten, Dienstleistungen und Verfügbarkeiten verstehen und für Buchungen nutzen können. Die gesamte Einrichtung kann in weniger als 15 Minuten abgeschlossen werden und erfordert lediglich einen Webflow-Plan, der das Hinzufügen von benutzerdefiniertem Code erlaubt.

Kurzantwort: KI Website ist wichtig, weil Sie damit eine stärkere Website mit klarerer Struktur, besseren Conversion-Pfaden und weniger manuellem Nachfassen neu starten können.

Was ist der AI Business Passport und warum ist er für Webflow-Nutzer relevant?

Der AI Business Passport ist ein standardisiertes, KI-lesbares Unternehmensprofil, das alle wesentlichen Informationen über Ihr lokales Geschäft bündelt. Dazu gehören Name, Adresse, Telefonnummer, Öffnungszeiten, angebotene Dienstleistungen, Preise und Echtzeit-Verfügbarkeiten. Diese Daten werden über das Model Context Protocol (MCP), einen von Anthropic entwickelten offenen Standard, veröffentlicht.

Wenn Sie vor dem Launch erst Optionen vergleichen möchten, sehen Sie sich unsere KI Website Demo und KI Website Preise.

Für Nutzer von Webflow, einer Plattform, die für ihre Designflexibilität und die Erstellung visuell ansprechender Webseiten bekannt ist, schließt der AI Business Passport eine entscheidende Lücke. Während Webflow exzellente Möglichkeiten zur Präsentation bietet, stellt es von Haus aus keine strukturierte Schnittstelle für die neue Generation von KI-Suchmaschinen und -Assistenten bereit. Ohne eine solche Schnittstelle bleiben die Informationen auf Ihrer Webseite für KI-Systeme oft nur schwer zu interpretieren. Dies kann dazu führen, dass Ihr Unternehmen bei Anfragen wie „Buche mir einen Haarschnitt in Berlin-Mitte für morgen“ übersehen wird.

Durch die Integration machen Sie Ihr Unternehmen für diese Systeme „sichtbar“ und „buchbar“. Das SiteBirds KI-Chat-Widget erweitert zudem die Funktionalität Ihrer Webflow-Seite um einen automatisierten 24/7-Service für Kundenanfragen, Terminbuchungen und Angebotserstellungen.

Vorbereitung Ihrer Webflow-Seite für die Integration

Bevor Sie mit der eigentlichen Integration beginnen, sind einige wenige Vorbereitungsschritte notwendig, um einen reibungslosen Ablauf zu gewährleisten.

1. Überprüfen Sie Ihren Webflow-Plan

Die Integration des SiteBirds-Widgets und des MCP-Tags erfordert das Hinzufügen von benutzerdefiniertem Code zu Ihrer Webseite. Diese Funktion ist in Webflow nicht in allen Plänen verfügbar. Sie benötigen mindestens den „CMS“-Plan oder einen höheren Tarif, um Code in den Kopf- oder Fußbereich Ihrer Seite einfügen zu können. Der kostenlose Plan sowie der „Basic“-Plan unterstützen diese Funktionalität nicht.

2. Erstellen Sie Ihr SiteBirds-Konto

Um die notwendigen Code-Schnipsel zu erhalten, müssen Sie ein Konto bei SiteBirds erstellen. Bereits im günstigsten Plan für 9,95 € pro Monat sind der AI Business Passport und das KI-Chat-Widget enthalten. Füllen Sie Ihr Unternehmensprofil so vollständig und präzise wie möglich aus. Diese Daten sind die Grundlage für alle Interaktionen mit KI-Assistenten und Kunden über das Chat-Widget.

3. Identifizieren Sie die globalen Code-Bereiche in Webflow

Machen Sie sich mit dem Webflow-Dashboard vertraut. Die relevanten Bereiche für die Integration finden Sie in den Projekteinstellungen („Project Settings“). Navigieren Sie dort zum Reiter „Custom Code“. Hier finden Sie die Felder „Head Code“ und „Footer Code“. In diese beiden Felder werden die von SiteBirds bereitgestellten Code-Schnipsel eingefügt.

Schritt-für-Schritt: Das KI-Chat-Widget in Webflow einbetten

Das KI-Chat-Widget ist das sichtbare Element auf Ihrer Webseite, das Besuchern die direkte Interaktion ermöglicht. Die Einbettung erfolgt global für Ihre gesamte Webflow-Seite.

  1. Navigieren Sie zu Ihrem SiteBirds-Dashboard: Melden Sie sich bei Ihrem SiteBirds-Konto an und gehen Sie zum Bereich „Widget-Installation“.
  2. Kopieren Sie den Widget-Code: Sie finden dort ein JavaScript-Code-Schnipsel. Kopieren Sie den gesamten Code in Ihre Zwischenablage. Dieser Code ist einzigartig für Ihr Unternehmen und verknüpft das Widget direkt mit Ihrem AI Business Passport.
  3. Öffnen Sie die Webflow-Projekteinstellungen: Gehen Sie in Ihrem Webflow-Projekt zu „Project Settings“ und wählen Sie den Tab „Custom Code“.
  4. Fügen Sie den Code in den „Footer Code“ ein: Scrollen Sie zum Feld „Footer Code“ (mit der Beschriftung „Add code before the closing </body> tag“). Fügen Sie den kopierten Code hier ein. Die Platzierung im Footer sorgt dafür, dass der sichtbare Inhalt Ihrer Seite zuerst geladen wird, was die wahrgenommene Ladegeschwindigkeit verbessert.
  5. Speichern und Veröffentlichen: Speichern Sie die Änderungen in den Webflow-Einstellungen und veröffentlichen Sie Ihre Webseite über den „Publish“-Button. Das Chat-Widget sollte nun auf allen Seiten Ihrer Webflow-Präsenz sichtbar sein.

Den AI Business Passport über das Model Context Protocol (MCP) veröffentlichen

Während das Widget für menschliche Besucher gedacht ist, dient der MCP-Meta-Tag der Kommunikation mit KI-Systemen. Dieser Schritt ist entscheidend, um in den Antworten von KI-Assistenten berücksichtigt zu werden.

1. Auffinden des MCP-Meta-Tags

In Ihrem SiteBirds-Dashboard finden Sie unter „AI Business Passport“ oder „MCP-Installation“ einen separaten Code-Schnipsel. Dieser besteht aus einer einzelnen Zeile HTML-Code, einem sogenannten Meta-Tag. Beispiel: <meta name="anthropic-model-context" content="...">

2. Implementierung des MCP-Tags in Webflow

Dieser Tag muss im <head>-Bereich Ihrer Webseite platziert werden, damit er von KI-Crawlern frühzeitig erkannt wird.

  1. Öffnen Sie erneut die Webflow-Projekteinstellungen: Navigieren Sie wieder zu „Project Settings“ > „Custom Code“.
  2. Fügen Sie den Code in den „Head Code“ ein: Fügen Sie den kopierten MCP-Meta-Tag in das Feld „Head Code“ (mit der Beschriftung „Add code to the <head> tag“) ein.
  3. Speichern und Veröffentlichen: Speichern Sie die Änderungen und veröffentlichen Sie Ihre Webseite erneut.

Mit diesem Schritt ist Ihr AI Business Passport nun aktiv. KI-Assistenten, die das MCP unterstützen, können die verlinkten Daten abrufen und für die Beantwortung von Nutzeranfragen verwenden. Weitere Informationen zu diesem Thema finden Sie auch in unserem Blog.

Optimale Nutzung und bewährte Praktiken

Nach der technischen Integration ist die kontinuierliche Pflege Ihrer Daten entscheidend für den Erfolg.

Durch die Kombination der Designstärke von Webflow mit der KI-Funktionalität von SiteBirds positionieren Sie Ihr lokales Unternehmen optimal für die Zukunft der digitalen Kundengewinnung.

Mehr thematische Autorität auf SiteBirds aufbauen

Nutzen Sie diese Seiten, um den Themencluster rund um diesen Artikel zu verstärken und schneller von der Recherche zum Launch zu kommen.

Quick answer

KI Website Plattformüberblick

Core SiteBirds pages

Related articles worth reading next

Häufige Fragen

Benötige ich einen kostenpflichtigen Webflow-Plan für die Integration?

Ja, Sie benötigen mindestens den „CMS“-Plan von Webflow. Die Funktion zum Hinzufügen von benutzerdefiniertem Code, die für die Integration des SiteBirds-Widgets und des MCP-Tags erforderlich ist, ist in den kostenlosen und „Basic“-Plänen nicht enthalten. Diese Funktion wird benötigt, um die notwendigen Skripte in den Kopf- und Fußbereich Ihrer Webseite einzufügen.

Beeinflusst das SiteBirds-Widget die Ladegeschwindigkeit meiner Seite?

Das Widget ist so konzipiert, dass es die Ladezeiten nur minimal beeinflusst. Es wird asynchron geladen und die Platzierung des Skripts im Footer-Bereich Ihrer Webflow-Seite sorgt dafür, dass der Hauptinhalt Ihrer Webseite zuerst gerendert wird. Die wahrgenommene Leistung für den Besucher wird dadurch in der Regel nicht beeinträchtigt.

Was ist der Unterschied zwischen dem Chat-Widget und dem MCP-Meta-Tag?

Das Chat-Widget ist eine sichtbare Benutzeroberfläche auf Ihrer Webseite, die es menschlichen Besuchern ermöglicht, direkt mit einer KI zu interagieren, um Fragen zu stellen oder Buchungen vorzunehmen. Der MCP-Meta-Tag ist hingegen ein unsichtbarer Code im Kopfbereich Ihrer Seite. Er dient ausschließlich dazu, externen KI-Systemen (wie ChatGPT) den Weg zu Ihren strukturierten Geschäftsdaten zu weisen, damit diese Ihr Unternehmen in ihren Antworten berücksichtigen können.

Wie aktualisiere ich meine Geschäftsdaten, nachdem alles eingerichtet ist?

Alle Ihre Geschäftsdaten, wie Öffnungszeiten, Dienstleistungen und Preise, werden zentral in Ihrem SiteBirds-Dashboard verwaltet. Sie müssen keine Änderungen in Webflow vornehmen. Sobald Sie Informationen in Ihrem SiteBirds-Profil aktualisieren, werden diese Änderungen automatisch sowohl vom KI-Chat-Widget auf Ihrer Seite als auch von den KI-Assistenten, die Ihren AI Business Passport über MCP auslesen, übernommen.