AI WORLD HQDeinen Alibaba Cloud AI Chatbot zu WordPress hinzufügen
Richte in wenigen Minuten einen freundlichen KI-Assistenten auf deiner WordPress-Website ein, selbst ohne Programmierkenntnisse.
Hook: Am Ende dieser Anleitung wirst du eine Chat-Blase haben, die Besucher begrüßt, grundlegende Fragen beantwortet und auf jeder Seite deiner WordPress-Website funktioniert – ganz ohne Programmierkenntnisse.
💡 Tipp: tippe auf die Nummer eines Schritts, wenn du ihn erledigt hast — ein grüner Haken erscheint und dein Browser merkt sich, wie weit du warst.
Bevor du startest
- Alibaba Cloud-Konto: registriere dich unter alibabacloud.com (die kostenlose Stufe reicht für einen einfachen Chatbot aus).
- WordPress-Website: Du benötigst Administratorzugriff auf das Dashboard.
- Einen Webbrowser auf einem Computer oder Tablet (Chrome, Edge oder Firefox funktionieren gut).
- Ein paar Minuten: Der gesamte Vorgang dauert in der Regel etwa 20–30 Minuten.
- Optional: Ein kostenloses Plugin wie „Insert Headers and Footers“ vereinfacht das Hinzufügen von Code.
Eine neue Chatbot-Instanz erstellen
Öffne deinen Webbrowser, gehe zu console.alibabacloud.com und melde dich an. Gib in der Suchleiste oben rechts in der Konsole „Chatbot“ ein und drücke die Eingabetaste; du siehst eine Liste von KI-Diensten. Klicke auf die Schaltfläche mit der Aufschrift Create Robot (oder eine ähnliche Schaltfläche wie Create Instance). Es erscheint ein Formular, das nach einem Namen und einer kurzen Beschreibung fragt. Nachdem du einen Namen wie „FrontDeskHelper“ eingegeben und auf Create geklickt hast, erstellt die Plattform einen neuen Bot und zeigt ihn in einer Tabelle mit dem Status „Running“ an. Wenn du keine Schaltfläche „Create Robot“ siehst, suche nach einem Plus-Symbol oder einem Menü mit der Bezeichnung New Bot.
Du wirst wissen, dass es funktioniert hat, wenn der neue Eintrag in der Liste mit einem grünen Punkt oder dem Wort „Running“ erscheint.
Die Begrüßung des Chatbots festlegen
Klicke in der Bot-Liste auf den Namen des Bots, den du gerade erstellt hast, um dessen Einstellungsseite zu öffnen. Im linken Menü findest du einen Abschnitt namens Greetings (manchmal auch als Welcome Message bezeichnet). Darin befindet sich ein Textfeld, in das du das eingeben kannst, was der Bot den Besuchern zuerst sagen soll. Nachdem du einen Satz wie „Hallo! Ich bin dein digitaler Assistent – frag mich nach Öffnungszeiten oder Dienstleistungen.“ eingegeben hast, erscheint eine Vorschau der Nachricht unter dem Feld. Klicke auf Save, um die Änderung zu speichern. Wenn im Menü „Chat Prompt“ anstelle von Greetings steht, ist das dasselbe Feld – suche einfach nach einem großen Textbereich.
Du wirst wissen, dass es funktioniert hat, wenn das Vorschaufeld genau den Text anzeigt, den du eingegeben hast, und ein Bestätigungsbanner erscheint.
Einen visuellen Stil wählen, der zu deiner Seite passt
Während du dich noch in den Bot-Einstellungen befindest, wechsle zum Tab Appearance, Style oder Customization – die Bezeichnung kann variieren, aber er enthält normalerweise eine Farbpalette und einen Icon-Uploader. Wähle eine Farbe, die den Hauptfarbton deiner Seite widerspiegelt (du kannst den Hex-Code kopieren, z. B. #0066CC), und lade ein kleines Logo hoch (ein 100 × 100 Pixel großes PNG funktioniert gut). Die Vorschau rechts aktualisiert sich und zeigt eine Chat-Blase in der gewählten Farbe und mit deinem Logo als digitale Nachbildung. Wenn du keine Farbauswahl findest, suche nach einem Zahnrad-Symbol ⚙️, das die „Theme Settings“ öffnet.
Du wirst wissen, dass es funktioniert hat, wenn die auf dem Bildschirm angezeigte Blase in der Vorschau die von dir ausgewählte Farbe und das Icon widerspiegelt.
Den Widget-Einbettungscode kopieren
Kehre zur Haupt-Bot-Seite zurück und drücke die Schaltfläche Publish oder Deploy – dies weist Alibaba Cloud an, den Bot öffentlich erreichbar zu machen. Es öffnet sich ein neues Panel mit der Bezeichnung Embed Code, Web Widget oder Ähnlichem, das einen Code-Snippet enthält, der mit <script src="..."></script> beginnt. Klicke auf die Schaltfläche Copy neben dem Feld; der Code befindet sich nun in der Zwischenablage deines Computers. Wenn keine Schaltfläche „Copy“ vorhanden ist, klicke in das Feld, drücke Strg + C (oder Cmd + C auf einem Mac), um ihn manuell zu kopieren.
Du wirst wissen, dass es funktioniert hat, wenn du den Snippet in ein Nur-Text-Dokument einfügen und den vollständigen <script>-Tag sehen kannst.
Den Code in den WordPress-Footer einfügen
Melde dich in deinem WordPress-Dashboard an (deine-seite.com/wp-admin). Gehe im linken Menü zu Design → Widgets. Finde den Widget-Bereich namens Footer (oder „Footer 1“ usw.). Klicke auf Block hinzufügen, wähle Benutzerdefiniertes HTML, dann füge den von dir kopierten Code in das Textfeld des Blocks ein. Drücke die Schaltfläche Aktualisieren oder Speichern oben auf dem Bildschirm. Die Seite lädt das Skript nun auf jeder Seite, und eine Chat-Blase sollte in der unteren rechten Ecke erscheinen, wenn du das Frontend ansiehst. Wenn du keinen Footer-Widget-Bereich siehst, installiere das kostenlose Plugin „Insert Headers and Footers“, gehe dann zu Einstellungen → Insert Headers and Footers, füge den Code in das Feld „Scripts in Footer“ ein und speichere.