Tutorials

Chatbot in den Hostinger Website Builder einbinden: Der ultimative Guide

Melden

Hier ist ein leicht verständliches Tutorial, wie du einen Chatbot in deine Hostinger-Website integrierst.

Ein Chatbot auf deiner Website verbessert den Kundensupport, erhöht die Konversionsrate und spart dir Zeit. Mit dem Hostinger Website Builder (früher Zyro) ist die Integration auch ohne Programmierkenntnisse in wenigen Minuten erledigt.

Diese Anleitung zeigt dir die zwei gängigsten Wege: Die Integration über ein fertiges Widget und das Einbinden über einen Code-Schnipsel.

Schritt 1: Wähle deinen Chatbot-Anbieter

Bevor du in Hostinger startest, benötigst du einen Chatbot-Dienst. Beliebte Optionen, die hervorragend mit Hostinger funktionieren, sind:

  • Tidio (Sehr beliebt, bietet Live-Chat + KI-Bots)
  • Crisp (Einfach und modern)
  • WhatsApp-Widget (Direkter Kontakt über WhatsApp)
  • Chatbase (Für eigene KI-Bots auf Basis von ChatGPT)

Was du vorbereiten musst: Erstelle ein Konto beim Anbieter deiner Wahl und kopiere den sogenannten Widget-Code (meist ein kurzer JavaScript-Code, der mit <script> beginnt).

Schritt 2: Den Hostinger Website Builder öffnen

  1. Melde dich in deinem Hostinger Control Panel (hPanel) an.
  2. Gehe zum Bereich Websites.
  3. Klicke bei deiner Website auf Website bearbeiten, um den Editor zu öffnen.

Schritt 3: Den Chatbot-Code einfügen

Es gibt zwei Möglichkeiten, den Code einzubauen – je nachdem, was dein Anbieter verlangt.

Methode A: Über die "Integrationen" (Empfohlen für WhatsApp/Messenger)

  1. Klicke in der linken Seitenleiste des Editors ganz unten auf das Zahnrad-Symbol (Website-Einstellungen).
  2. Wähle den Punkt Integrationen.
  3. Hier findest du vorgefertigte Felder für Dienste wie den Facebook Messenger oder WhatsApp.
  4. Gib dort einfach deine ID oder Telefonnummer ein und klicke auf Änderungen speichern.

Methode B: Über "Benutzerdefinierter Code" (Für Tidio, Crisp & KI-Bots)

Die meisten professionellen Chatbots werden über ein Skript im "Head"-Bereich eingebunden:

  1. Gehe wieder in die Website-Einstellungen (Zahnrad-Symbol).
  2. Klicke auf Benutzerdefinierter Code.
  3. Wähle das Feld Custom Code (HEAD).
  4. Füge den Code-Schnipsel ein, den du von deinem Chatbot-Anbieter (aus Schritt 1) kopiert hast.
  5. Klicke auf Speichern.

Schritt 4: Änderungen veröffentlichen

Der Chatbot wird im Bearbeitungsmodus des Editors oft noch nicht angezeigt. Damit er für deine Besucher sichtbar wird, musst du die Seite live schalten:

  1. Klicke oben rechts im Editor auf den Button Website aktualisieren oder Veröffentlichen.
  2. Besuche deine Website in einem neuen Browser-Tab (oder im Inkognito-Modus).
  3. Dein Chatbot-Icon sollte nun unten rechts oder links erscheinen.

Bonus-Tipp: Chatbot-Design anpassen

Die meisten Einstellungen (Farbe, Begrüßungstext, automatisierte Antworten) nimmst du nicht in Hostinger vor, sondern direkt im Dashboard deines Chatbot-Anbieters (z. B. bei Tidio oder Crisp). Die Änderungen werden in der Regel automatisch und in Echtzeit auf deine Hostinger-Website übertragen, ohne dass du den Code erneut kopieren musst.

Zusammenfassung der Vorteile

  • Erreichbarkeit: Rund um die Uhr für Kunden da sein.
  • Professionalität: Deine Website wirkt modern und vertrauenswürdig.
  • Kein Coding: Einfaches Copy-Paste reicht völlig aus.

Viel Erfolg bei der Einrichtung deines Chatbots!

0