Werk:AI mit Arnie/Integration eines Chatbots in Webseiten
Wir haben uns also angesehen, wie wir einen Server anlegen, auf Render und wie wir die Dinge so hosten, damit sie jeder verwenden kann. Damit sie aber jeder verwenden kann, müssen wir ihnen natürlich auch dementsprechend Zugriff geben, und das will ich dir natürlich jetzt zeigen. Ich zeig dir jetzt, wie man diesen Chatbot einbaut in Webseiten, zum Beispiel von deinen Kunden. Du kannst diese Chatbots wirklich in so gut wie alles mit einbauen, und du kannst ihnen natürlich einfach auch nur den Link schicken zu einem ganz normalen Chatinterface. Fast genauso wie bei VectorShift, das funktioniert wirklich alles sehr, sehr ähnlich.
Was musst du dafür machen? Ich bin hier übrigens noch mal bei unserem Agenten gelandet, und wir können den auch umbauen. Wir können alles machen, was wir wollen. Ich könnte auch zum Beispiel noch mal zurückgehen, und wir könnten irgendeinen anderen Agenten nehmen. Es ist völlig egal. Lasst uns einfach mal den Open Agent verwenden. Der ist hier verbunden mit dem Gehilfen, hat den Taschenrechner. Ich nehme an, das Ding funktioniert noch. Was ist 99 x 99 mal 1,2? Das Ding sollte den Taschenrechner verwenden, sollte rechnen, sollte natürlich den Code-Interpreter haben von Python. Ja, das Ding läuft noch – natürlich, war so zu erwarten.
Und dieses Ding können wir natürlich auch einbauen in andere Webseiten. Du musst natürlich einen Chatbot bauen, der hilfreich ist. Du könntest RAG hinzufügen und den Chat trainieren an Unternehmensdaten. Du musst einfach etwas machen, das anderen Leuten gefällt. Du weißt natürlich, dass du so gut wie alles machen kannst in Flowise.
Also, wie bauen wir diese Chatbots ein, in verschiedene Umgebungen? Wir klicken hier oben drauf, und du siehst, wir haben hier die Embed-Models. Wir können die Dinge einbauen in eine ganz normale HTML-Seite. Wir können auf eine Fullpage-HTML gehen, wir können das in React mit einbauen. Also HTML und React, kein Problem. Wir können aber auch auf Python gehen, auch das ist überhaupt kein Problem. Auch für JavaScript haben wir den nötigen Code für Curl und Share Chatbot. Das habe ich dir natürlich schon gezeigt.
Wir können auch bei Share Chatbot natürlich einfach nur die Dinge weiterschicken. Das ist natürlich richtig praktisch. Das will ich dir noch mal kurz zeigen. Wir können das natürlich ganz einfach „Make Public“ klicken hier, und wir öffnen das ganz einfach in einem Link: „Hi there, how can I help you?“ Und jetzt können wir uns mit unserem Chatbot unterhalten. Was ist 99 x 99 x 1,2? Das Ding wird jetzt die Tools verwenden und wird uns wohl höchstwahrscheinlich das Ergebnis geben. Sehr gut, das funktioniert schon mal.
Diesen Link, den könnten wir jetzt natürlich Kunden zuschicken. Im Optimalfall ist das natürlich ein nützlicher Chatbot, aber ich glaube, das brauche ich dir nicht erzählen. Die Kunden können hier oben drauf drücken, das Ganze neu machen, und du kannst natürlich auch das Design ändern, und zwar genau hier. Das habe ich dir generell natürlich schon gesagt. Du kannst das natürlich weiterhin anpassen. Du kannst natürlich die Hintergrundfarbe umändern. Wir scrollen runter, wir klicken „Save Changes“, und wenn du das natürlich jetzt neu öffnest, dann haben wir natürlich eine hübsche Hintergrundfarbe. Ich will das noch mal zurückerstellen, hier auf weiß zum Beispiel. Wir klicken danach noch mal „Save Changes“. Du hast natürlich schon gesehen, wie das läuft. Das heißt, du kannst das anpassen, wie du willst.
Etwas, das ich oft gefragt werde, ist: „Wie kann ich das da entfernen – ‚powered by Flowise‘?“ Und ich zeig dir jetzt den einfachsten Weg: Wir gehen wieder zurück hier in Flowise, wir scrollen runter und suchen uns das hier raus: „powered by – Textcolor“. Wir gehen hier drauf, und ich zeige dir jetzt erst mal, was passiert, wenn wir das Ganze blau machen. Ich glaube, du weißt es schon. Ich klick „Save Changes“, ich will das jetzt noch mal neu öffnen in einem anderen Link. Das Ding ist jetzt blau.
Und jetzt zeige ich dir was Witziges: Wenn wir diese Textmessage hier weiß machen, wir gehen runter, klicken „Save Changes“, machen den Link noch mal auf – bup, dann ist es weg. Ja, es ist zwar noch da, wenn man es markiert, aber man sieht es einfach nicht mehr. Das ist der aller, allereinfachste Weg. Man kann das auch umändern, indem man Code umschreibt. Das wird danach aber ein klein wenig komplexer, tatsächlich. Diese ganzen Farben kannst du auch anders ändern. Du kannst danach auf das da klicken: „show embed shat config“, und du kannst hier danach den Code ein klein wenig umschreiben. Wie gesagt, ich will das Ganze aber einfach halten.
Und jetzt das Coole: Du kannst diese Chatbots unglaublich einfach einbauen in eine Webseite. Und natürlich, das da ist der Code für die HTML-Webpage. Das ist hier unser Code-Snippet, der läuft in Javascript hier hinten sieht man. Man kann das einfach nur kopieren, und du siehst auch das da – man muss das einfach nur in den „Body“ von einer HTML-Webseite einfügen.
Glücklicherweise haben wir immer noch diese lausige HTML-Webpage hier in Replit laufen. Wir gehen hier runter. Da drunter ist auch der Body. Ich kann eine neue Zeile nehmen, das Ding einfügen, auf „Run“ klicken, und unser Chatbot sollte erscheinen – bup, da ist das Ding. Und jetzt kann ich mit dem Ding natürlich auch sofort chatten. Und nun natürlich kann man auch hier auch alles farblich anpassen. Auch wenn man die Dinge einbaut in Webseiten, da funktioniert es tatsächlich am besten, wenn man hier unten auf das da klickt. Man muss dieses Theme tatsächlich hinzufügen. Das heißt, man kopiert nicht nur das hierher bis „Script“, sondern man kopiert zusätzlich noch das hier unten, und man kann hier danach die Farben ändern. Das heißt, die Buttonfarbe kann man ändern. Wir können auch ändern, wie hoch die Pixel zum Beispiel sind von den verschiedenen Feldern hier. Du kannst all die Dinge umschreiben im Code, wenn du magst. Ich denke, für 99 % ist das nicht wirklich wichtig.
Und natürlich, falls man hier mit irgendwas Probleme hat: Du kannst diesen Code natürlich auch kopieren, du kannst den in ChatGPT schmeißen und fragen, wie du etwas Gewisses umschreibst, natürlich. Also, die Anwendungszwecke sind hier riesig groß. Füg ganz einfach diesen Code hinzu, und zwar auch genau hier im Body, da unten, und schreib die Dinge um im Code, die dir nicht gefallen. Zur Not fragst du ganz, ganz kurz ChatGPT, wie du gewisse Dinge umänderst.
Du könntest ja zum Beispiel dieses Chatfenster niedriger machen. Das funktioniert, indem du diese Pixel änderst. Wir können das ja mal ganz, ganz kurz machen. Das heißt, wir kopieren diese Zeilen, haben wir schon kopiert. Ich füge das hier ein, wir klicken noch mal kurz „Run“. Das Ding läuft immer noch. Es sieht mittlerweile etwas anders aus. Wir haben hier jetzt auch diesen witzigen Vogel mit eingebaut. Und jetzt können wir die Dinge im Code ganz, ganz einfach umschreiben.
Sagen wir, wir wollen die Höhe kleiner haben – meinetwegen soll das Ding viereckig sein, 400 x 400 Pixel. Wir klicken „Run“, und das Ding sollte klein sein. Ja, ganz genau so ist das. Meinetwegen willst du das Ding dafür breiter haben, und es soll 700 Pixel breit sein. Wir klicken „Run“, und das Ding sollte danach breit werden, wenn wir es aufklicken. Wup, da ist es natürlich wunderschön. Aber generell finde ich, hier tatsächlich, 400 x 700 war schon relativ passend. Also klicken wir „Run“, und du kannst all die Dinge so umschreiben, wie sie dir halt eben gefallen. Das ist hier ganz, ganz, ganz praktisch, tatsächlich.
Wellkome message, die kannst du auch umschreiben: „Hello, this is a custom welcome message.“ Die siehst du natürlich hier. Die kannst du natürlich umändern in zum Beispiel: „Hey, Junge!“ Ich klicke hier noch mal „Run“. Danach haben wir eine neue Willkommensnachricht: „Hey, Junge!“ Wir können sogar die Knöpfe der Farben umändern, wenn du magst, auch wo sich diese Knöpfe hier tatsächlich befinden. Hier könntest du mal 40 Pixel reinschmeißen. Wir klicken „Run“, und das Ding ist etwas weiter hier drüben. Meinetwegen willst du das Ding noch weiter hochsetzen. Ich bezweifle, dass du das machen willst. Und das Ding ist weiter oben.
Das heißt, du kannst die Dinge auch im Code umschreiben und ganz, ganz kurz ChatGPT fragen, was passiert, wenn du gewisse Dinge im Code umänderst. Ich weiß natürlich nicht, wie der Chatbot für dich perfekt ist,.
Und tatsächlich war’s das. So einfach kann man einen solchen Chatbot hosten. Das funktioniert hier wirklich in den aller, allermeisten Webseiten. Das kannst du einbauen in Apps, in Note-Apps, alles funktioniert in Python und Java auch. Das kannst du abrufen, wo auch immer du willst: in eine WordPress-Webpage, sogar in einen Shopify-Store. Du brauchst immer nur diese paar klitzekleinen Code-Snippets hier kopieren und einfügen, und das Ganze war’s.
Ich will dir aber noch was Kurzes zeigen: Gehen wir mal kurz hier auf die Einstellungen, dann kannst du hier natürlich auch auf die ganzen Dinge draufklicken, zum Beispiel „View Messages“. Bei „View Messages“ kannst du dir ansehen, was die Leute hier bei diesem Chatbot nachgefragt haben. Das heißt, ich kann natürlich hier draufgehen und kann hier Dinge reinschreiben: „Nenn mich nicht Junge.“ Es tut mir leid, falls ich dich beleidigt habe. Wie kann ich dir helfen? – „Ich möchte Mann genannt werden.“ – „Alles klar, ich werde darauf achten. Wie kann ich dir weiterhelfen, Mann?“ Sehr gut.
Jetzt kannst du hier in Flowise reingehen – natürlich, ich muss das hier noch mal öffnen, also „View Messages“. Und du siehst hier natürlich, wie deine Kunden tatsächlich chatten mit diesem Chatbot. Du kannst das wirklich verwenden, um sozusagen rauszufinden, was deine Kunden gerne haben wollen, worüber deine Kunden sprechen mit diesen Chatbots. Das ist schon richtig, richtig praktisch. Du kannst dir all diese Dinge hier ansehen, du kannst die Dinge wieder löschen und vieles, vieles mehr, natürlich.
Und das war natürlich, wie man diese Chatbots einbaut in Webseiten als Standalone-App. Ich muss dir sagen, wir haben noch eine Möglichkeit, um Flowise einzubauen, in wo auch immer du willst, und das werde ich dir im nächsten Video zeigen. Denn im nächsten Video sehen wir uns die Flowise-API an. Und in diesem Video haben wir uns den einfachsten Weg angesehen, wie du eine App bauen kannst und diese einbauen kannst in eine Webseite von einem Kunden von dir oder in deine Webseite.
Diese Webseite kann eine WordPress-Webseite sein, das kann ein Shopify-Store sein, das kann eine einfache HTML-Webseite sein, das kann aber auch eine Application sein in Note oder sonst was. Und du kannst sie natürlich wunderhübsch anpassen. Das hast du mittlerweile ja alles gesehen. Und deshalb sehen wir uns im nächsten Video.