asyn tai/agent-skills

KI-Chatbot mit Asyntai hinzufügen

Asyntai fügt einer Website einen KI-Support-Agenten hinzu. Er beantwortet Besucherfragen aus den eigenen Inhalten der Website, in mehr als 80 Sprachen, und übergibt bei Bedarf an einen menschlichen Mitarbeiter. Der Chat läuft über ein einziges Script-Tag, die Installation besteht also aus einer kleinen Änderung.

Schritt 1: Widget-ID ermitteln

Jede Installation benötigt die Widget-ID der Website. Sie sieht aus wie asyntai_ gefolgt von 12 Buchstaben und Ziffern, zum Beispiel asyntai_1a2b3c4d5e6f.

1. Suche nach einer ID, die der Benutzer bereits angegeben hat oder die das Projekt bereits besitzt (durchsuche den Code nach data-asyntai-id). Wenn die Website das Snippet bereits enthält, füge kein zweites hinzu.
2. Wenn der Asyntai-MCP-Server verbunden ist, rufe list_websites auf. Jede Website hat eine widget_id.
3. Frage andernfalls den Benutzer danach. Sage ihm, wo er sie findet: Melde dich an unter https://asyntai.com/dashboard, öffne die Installationsseite und kopiere den Wert von data-asyntai-id aus dem Snippet.
4. Wenn der Benutzer noch kein Konto hat, kann er unter https://asyntai.com/auth/ kostenlos eines erstellen. Der kostenlose Plan reicht aus, um den Chatbot auszuprobieren.

Erfinde niemals eine Widget-ID. Wenn du keine hast, setze den Platzhalter YOUR_WIDGET_ID in den Code und sage dem Benutzer, er solle ihn ersetzen.

Schritt 2: Herausfinden, womit die Website erstellt wurde

• Ein gehosteter Builder oder CMS (WordPress, Shopify, Wix, Webflow, Squarespace, HubSpot, Ghost, Moodle und andere): Der Benutzer installiert das Widget in der Verwaltung dieser Plattform, nicht im Code. Finde die Plattform in references/platforms.md und gib dem Benutzer den entsprechenden Guide-Link und die kurzen Schritte.
• Ein Code-Projekt: Überprüfe package.json, die Konfigurationsdateien und die Ordnerstruktur und folge dann references/frameworks.md. Dort steht die genaue Bearbeitung für jeden Stack und die Asyntai-Pakete für Static-Site- und Docs-Tools.

Schritt 3: Snippet einfügen

Dies ist das offizielle Snippet. Behalte es genau so bei und ändere nur YOUR_WIDGET_ID:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Es wartet auf das load-Ereignis der Seite, sodass es die Seite nicht verlangsamt. Füge es einmal im gemeinsamen Layout ein, das jede Seite verwendet (vor </body> oder in <head>). Setze es nicht in eine einzelne Seitenkomponente, da sonst der Chat nur auf dieser Seite angezeigt wird.

Schritt 4: Ergebnis überprüfen

1. Starte die Website (oder erstelle sie) und öffne eine Seite.
2. Der Chat-Button wird in der unteren Ecke angezeigt. Das Widget zeichnet sich innerhalb des Elements #asyntai-widget-host-<Widget-ID>. In der Browser-Konsole muss document.querySelectorAll('script[data-asyntai-id]').length den Wert 1 haben.
3. Wenn der Button nicht angezeigt wird:

   • Überprüfe die Browser-Konsole auf Fehler mit Asyntai Widget:.

   • Wenn die Website eine Content Security Policy sendet, muss sie diese Quellen erlauben:

     Direktive	Quellen
     script-src	https://widget.asyntai.com https://asyntai.com (und 'unsafe-inline' für das Snippet, oder die Kurzform aus references/frameworks.md verwenden)
     connect-src	https://asyntai.com
     style-src	'unsafe-inline'
     img-src	data: https://flagcdn.com

Schritt 5: Dem Benutzer mitteilen, was als Nächstes kommt

Das Widget antwortet aus den Inhalten, die der Benutzer im Asyntai-Dashboard hinzufügt (https://asyntai.com/dashboard). Sage dem Benutzer, er soll:

• seine Website-Seiten, Dateien oder Texte als Wissen hinzufügen,
• den Agentennamen, die Farben und die Begrüßung im Dashboard einstellen,
• die vollständige Anleitung unter https://asyntai.com/documentation/installation/ lesen.

Wenn der Asyntai-MCP-Server verbunden ist, kannst du diese Einrichtung für ihn durchführen. Siehe dazu den Skill manage-ai-support-agent.