Vollständiges Tutorial

Zuerst müssen Sie sich für ein AI Anywhere-Konto anmelden.

1. Gehen Sie zu AI Anywhere Startseite
2. Klicken Sie auf das "Loslegen" Schaltfläche im Header
3. Melden Sie sich mit Ihrem bevorzugten sozialen Konto an (Google, GitHub, etc.)
4. You'll be automatically logged into your dashboard

Lassen Sie uns nun einen Helfer erstellen, der Benutzern beim Schreiben von Kontaktformularnachrichten hilft.

1. Zum Dashboard gehen "Neuer Helfer"
2. Geben Sie Ihrem Helfer einen beschreibenden Namen, wie z.B. "Kontaktformular-Beispiel"
3. Wählen Sie die Gruppe, zu der dieser Helfer gehört
4. Klicken Sie auf das "Helfer speichern"

Konfigurieren Sie Ihren Helfer

Beim Erstellen oder Bearbeiten eines Helfers konfigurieren Sie:

• Helfer-Antwort: Enter a well-written example of what you want users to write. For a contact form, this might be a complete, professional message that includes all necessary information. The example should be complete with mock names, specific details, and realistic content (e.g., "Hello, I'm John Smith writing to inquire about your web development services. I'm particularly interested in building an e-commerce platform for my business. Could you please provide more information about your pricing and timeline? Thank you for your time.").
• Schlüsselwörter und/oder Regeln: Fügen Sie Schlüsselwörter oder Regeln hinzu, die für Ihren Anwendungsfall wichtig sind (z.B. "Kontakt", "Anfrage", "Frage", "Support").
• Schaltflächenthema-Einstellungen Passen Sie das Erscheinungsbild des Hilfebuttons (Farbe, Text) an das Design Ihrer Website an.

Erfahren Sie, wie Sie CSS-Selektoren für Textbereiche, Formulare und Eingabefelder finden, um AI Anywhere-Helfer in Ihre Website zu integrieren.

1. Klicken Sie in Ihren Hilfeeinstellungen auf den "Snippet generieren" Button
2. Sie werden zwei Code-Snippets sehen:
   • Skript-Tag: In Ihre Website einfügen
   • Anker-Span: Enthält Ihr Helfer-Token
3. Kopieren Sie beide Snippets - Sie benötigen sie im nächsten Schritt

Ihr Snippet besteht aus zwei Teilen:

<!-- Skript-Tag (gehört in <head>) -->
<script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>

<!-- Beispiel: Helfer-Button erscheint neben Ihrem Textbereich -->
<span data-helper-anchor data-helper-token="your-helper-token"></span>

Laden Sie das Helfer-Skript in Ihrem

1. Öffnen Sie die HTML-Datei (oder Vorlage) Ihrer Website und suchen Sie die
2. Finden Sie den <head> Abschnitt
3. Sektion. Fügen Sie Ihr Snippet direkt vor dem schließenden </head> Tag ein.

So sollte es aussehen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kontaktieren Sie uns:</title>
  
  <!-- Einbetten des Helfer-Skripts -->
  <script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>
</head>

Suchen Sie nach dem Helfer-Button neben den Textbereichen auf Ihrer Seite

1. Fügen Sie einen Anker hinzu, wo Sie den Hilfsknopf haben möchten
2. Lokalisieren Sie das Textfeld, in das Benutzer ihre Nachricht eingeben werden
3. Fügen Sie den Anker-Span direkt nach dem Textfeld (oder in der Nähe) hinzu

Hier ist ein vollständiges Beispiel, das beide Teile zeigt:

<form id="contact-form">
  <div>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required>
  </div>
  
  <div>
    <label for="email">E-Mail:</label>
    <input type="email" id="email" name="email" required>
  </div>
  
  <div>
    <label for="message">Ihre Nachricht:</label>
    <textarea id="message" name="message" rows="6" required></textarea>
    <!-- Die Helfer-Schaltfläche wird neben diesem Element angezeigt. -->
    <span data-helper-anchor data-helper-token="your-helper-token"></span>
  </div>
  
  <button type="submit">Kontaktmeldung:</button>
</form>

Lassen Sie uns nun überprüfen, ob alles korrekt funktioniert.

1. Helfer speichern
2. Öffnen Sie Ihre Website\
3. Navigieren Sie zur Seite mit Ihrem Kontaktformular
4. Suchen Sie nach dem Helfer-Button neben den Textbereichen auf Ihrer Seite

Was wir speichern

• Beispiel: Helfer-Button erscheint neben Ihrem Textbereich
• Der Button hat das korrekte Styling (Farbe, Text, Größe), das Sie konfiguriert haben
• Wenn Sie den Button klicken, öffnet sich die Helper-Oberfläche
• Wenn Sie Text eingeben und den Helper-Button klicken, werden Vorschläge gemacht

Fehlerbehebung

Die Hilfsschaltfläche funktioniert nicht\

• Check your browser's developer console (F12) for any JavaScript errors
• Stellen Sie sicher, dass das Skript-Tag im <head> Abschnitt
• Stellen Sie sicher, dass der Anker-Span vorhanden ist und das korrekte Helfer-Token enthält
• Führen Sie einen Hard-Refresh Ihrer Seite durch (Strg+Shift+R oder Cmd+Shift+R), um zwischengespeicherte Dateien zu löschen.
• Überprüfen Sie, ob Ihre Seiten-ID und das Helfer-Token korrekt sind

Setzen Sie die Beschriftung auf "Helfer" oder passen Sie sie an Ihre Marke an.

Was Sie anpassen können

• Erscheinungsbilder anpassen Ändern Sie die Farbe und den Text des Hilfebuttons.
• Helfer-Antwort: Fügen Sie einen hochwertigen Beispieltext ein, der zeigt, was die Benutzer erreichen sollen.
• Schlüsselwörter: Fügen Sie Schlüsselwörter hinzu oder entfernen Sie sie, um die Vorschlagsgenauigkeit zu verbessern
• Gesamtanzahl der Helfer: Erstellen Sie zusätzliche Helper für verschiedene Formulare oder Textfelder

Anpassen

1. Zum Dashboard gehen
2. Wählen Sie "Helfer", und wählen Sie den spezifischen Helfer aus, den Sie bearbeiten möchten
3. Klicken Sie auf das "Bearbeiten" Button
4. Änderungen speichern
5. Änderungen speichern

Sobald Sie alles lokal getestet haben, ist es Zeit, auf Ihre Produktionswebsite zu veröffentlichen.

Checkliste vor der Bereitstellung

• Den Helper in Ihrer lokalen/Staging-Umgebung getestet
• Sie sollten die Helfer-Schaltfläche neben jedem
• Mit einem anderen Browser testen:
• Auf mobilen Geräten getestet
• Sie sollten die Helfer-Schaltfläche neben jedem

Verzögerte Bereitstellungen

1. Laden Sie Ihre aktualisierten HTML-Dateien auf Ihren Webserver hoch
2. Stellen Sie sicher, dass das Skript-Tag im <head> Fügen Sie einen Anker hinzu, wo Sie den Hilfsknopf haben möchten
3. Überprüfen Sie, ob die Anker-Spans korrekt neben Ihren Textfeldern platziert sind
4. Testen Sie den Helper auf Ihrer Live-Website
5. Überwachen Sie auf Probleme oder Fehler