Navigation
Erste Schritte
Willkommen Vollständiges Tutorial Schnellstart / Übersicht
Anleitungen
Installation Konfiguration Selektoren finden Code-Beispiele Fehlerbehebung
Erweitert & Sicherheit
Einbettung & Snippet-Parameter Themen & Anpassung Sicherheit & Datenschutz

Code-Beispiele

Einsatzbereite Implementierungsbeispiele für gängige AI Anywhere-Anwendungsfälle.

13 Min. Lesezeit

Diese Codebeispiele zeigen reale Implementierungen von AI Anywhere. Kopieren und passen Sie sie für Ihre eigenen Projekte an.

Neueste HTML-Integration

Moderne HTML5-Implementierung mit semantischem Markup. Fügen Sie das Skript zu Ihrem <head> Abschnitt hinzu und verwenden Sie Datenattribute zur Konfiguration.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Kontaktformular mit KI-Unterstützung">
  <title>für Contact Form 7)</title>
  
  <!-- Einbetten des Helfer-Skripts -->
  <script src="https://ai-anywhere.ai/sdk/v1/loader.js" 
          data-site="your-site-id"
          defer></script>
</head>
<body>
  <main>
    <form id="contact-form">
      <label for="message">Ihre Nachricht:</label>
      <textarea id="message" 
                name="message" 
                rows="5" 
                placeholder="Geben Sie hier Ihre Nachricht ein..."
                required></textarea>
      <span data-helper-anchor 
            data-helper-token="your-helper-token"></span>
      <button type="submit">Senden</button>
    </form>
  </main>
</body>
</html>

Kontaktformular-Beispiel

Ein vollständiges Kontaktformular mit Helferunterstützung für das Nachrichtenfeld.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Kontaktieren Sie uns:</title>
  
  <script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>
</head>
<body>
  <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>
      <span data-helper-anchor data-helper-token="your-helper-token"></span>
    </div>
    
    <button type="submit">Kontaktmeldung:</button>
  </form>
</body>
</html>

Mehrere Textfelder mit unterschiedlichen Helfern

Initialisieren Sie mehrere Helfer mit unterschiedlichen Konfigurationen für verschiedene Formularfelder.

<script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>

<form>
  <label>Produktbeschreibungstext</label>
  <textarea id="description"></textarea>
  <span data-helper-anchor data-helper-token="product-helper-token"></span>
  
  <label>Interne Notizen:</label>
  <textarea id="notes"></textarea>
  <span data-helper-anchor data-helper-token="notes-helper-token"></span>
</form>

WordPress-Integration

Fügen Sie AI Anywhere zu Ihrem WordPress-Theme hinzu, indem Sie das Snippet in Ihr Theme\

<?php
// Add to your theme's functions.php or a custom plugin

function add_ai_anywhere_helper() {
  ?>
  <script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="<?php echo get_option('aia_site_id', 'your-site-id'); ?>"></script>
  <span data-helper-anchor data-helper-token="<?php echo get_option('aia_helper_token', 'your-helper-token'); ?>"></span>
  <?php
}
add_action('wp_footer', 'add_ai_anywhere_helper');
?>

Speichern Sie Ihre Helferkonfiguration in den WordPress-Optionen für eine einfache Verwaltung.

React-Integration

Integrieren Sie AI Anywhere in Ihre React-Anwendung mit Hooks und TypeScript-Unterstützung. Funktioniert mit React 16.8+ und modernen React-Mustern.

import { useEffect, useRef } from 'react';

interface ContactFormProps {
  siteId: string;
  helperToken: string;
}

function ContactForm({ siteId, helperToken }: ContactFormProps) {
  const scriptLoaded = useRef(false);
  
  useEffect(() => {
    // AI Anywhere-Skript nur einmal laden
    if (!scriptLoaded.current) {
      const script = document.createElement('script');
      script.src = 'https://ai-anywhere.ai/sdk/v1/loader.js';
      script.setAttribute('data-site', siteId);
      script.defer = true;
      document.head.appendChild(script);
      scriptLoaded.current = true;
      
      return () => {
        // Bereinigung beim Unmount
        const existingScript = document.querySelector(
          'script[src="https://ai-anywhere.ai/sdk/v1/loader.js"]'
        );
        if (existingScript) {
          document.head.removeChild(existingScript);
        }
        scriptLoaded.current = false;
      };
    }
  }, [siteId]);
  
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Ihre Formularübermittlungslogik
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="message">Ihre Nachricht:</label>
      <textarea 
        id="message" 
        name="message"
        placeholder="Geben Sie hier Ihre Nachricht ein..."
        required
      />
      <span 
        data-helper-anchor 
        data-helper-token={helperToken}
      ></span>
      <button type="submit">Senden</button>
    </form>
  );
}

export default ContactForm;

Verwendung: Komponente importieren und verwenden: <ContactForm siteId="your-site-id" helperToken="your-helper-token" />

Angular CLI-Integration

Fügen Sie AI Anywhere zu Ihrer Angular-Anwendung hinzu, indem Sie Angular-Services und Lebenszyklus-Hooks verwenden. Kompatibel mit Angular 12+.

// contact-form.component.ts
import { Component, OnInit, OnDestroy, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-contact-form',
  template: `
    <form (ngSubmit)="onSubmit()">
      <label for="message">Ihre Nachricht:</label>
      <textarea 
        id="message" 
        name="message"
        [(ngModel)]="message"
        placeholder="Geben Sie hier Ihre Nachricht ein..."
        required></textarea>
      <span 
        data-helper-anchor 
        [attr.data-helper-token]="helperToken"></span>
      <button type="submit">Senden</button>
    </form>
  `,
  styleUrls: ['./contact-form.component.css']
})
export class ContactFormComponent implements OnInit, OnDestroy {
  message = '';
  siteId = 'your-site-id';
  helperToken = 'your-helper-token';
  private scriptElement?: HTMLScriptElement;

  constructor(@Inject(DOCUMENT) private document: Document) {}

  ngOnInit(): void {
    // AI Anywhere-Skript laden
    this.scriptElement = this.document.createElement('script');
    this.scriptElement.src = 'https://ai-anywhere.ai/sdk/v1/loader.js';
    this.scriptElement.setAttribute('data-site', this.siteId);
    this.scriptElement.defer = true;
    this.document.head.appendChild(this.scriptElement);
  }

  ngOnDestroy(): void {
    // Skript beim Zerstören der Komponente bereinigen
    if (this.scriptElement && this.document.head.contains(this.scriptElement)) {
      this.document.head.removeChild(this.scriptElement);
    }
  }

  onSubmit(): void {
    // Ihre Formularübermittlungslogik
    console.log('Message:', this.message);
  }
}

Hinweis: Stellen Sie sicher, dass Sie importieren FormsModule in Ihrem app.module.ts für ngModel um zu funktionieren.

Vue.js-Integration

Integrieren Sie AI Anywhere in Ihre Vue.js-Anwendung mit der Composition API oder der Options API. Funktioniert mit Vue 3.

<template>
  <form @submit.prevent="handleSubmit">
    <label for="message">Ihre Nachricht:</label>
    <textarea 
      id="message" 
      v-model="message"
      placeholder="Geben Sie hier Ihre Nachricht ein..."
      required></textarea>
    <span 
      data-helper-anchor 
      :data-helper-token="helperToken"></span>
    <button type="submit">Senden</button>
  </form>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';

const message = ref('');
const siteId = 'your-site-id';
const helperToken = 'your-helper-token';
let scriptElement: HTMLScriptElement | null = null;

onMounted(() => {
  // AI Anywhere-Skript laden
  scriptElement = document.createElement('script');
  scriptElement.src = 'https://ai-anywhere.ai/sdk/v1/loader.js';
  scriptElement.setAttribute('data-site', siteId);
  scriptElement.defer = true;
  document.head.appendChild(scriptElement);
});

onUnmounted(() => {
  // Skript beim Demontieren der Komponente bereinigen
  if (scriptElement && document.head.contains(scriptElement)) {
    document.head.removeChild(scriptElement);
  }
});

const handleSubmit = () => {
  // Ihre Formularübermittlungslogik
  console.log('Message:', message.value);
};
</script>

Alternative (Options API): Verwenden Sie mounted() und beforeUnmount() Hooks, wenn Sie die Options API bevorzugen.

Vanilla SPA-Integration

Fügen Sie AI Anywhere zu einer Vanilla-JavaScript-Single-Page-Anwendung hinzu. Funktioniert mit jeder Routing-Bibliothek oder einer frameworkfreien SPA-Architektur.

// ai-anywhere-loader.js
class AIAnywhereLoader {
  constructor(siteId) {
    this.siteId = siteId;
    this.scriptLoaded = false;
  }

  load() {
    if (this.scriptLoaded) {
      return Promise.resolve();
    }

    return new Promise((resolve, reject) => {
      // Überprüfen, ob das Skript bereits existiert
      const existingScript = document.querySelector(
        'script[src="https://ai-anywhere.ai/sdk/v1/loader.js"]'
      );
      
      if (existingScript) {
        this.scriptLoaded = true;
        resolve();
        return;
      }

      // Skript erstellen und laden
      const script = document.createElement('script');
      script.src = 'https://ai-anywhere.ai/sdk/v1/loader.js';
      script.setAttribute('data-site', this.siteId);
      script.defer = true;
      
      script.onload = () => {
        this.scriptLoaded = true;
        resolve();
      };
      
      script.onerror = () => {
        reject(new Error('Fehler beim Laden des AI Anywhere-Skripts'));
      };
      
      document.head.appendChild(script);
    });
  }

  unload() {
    const script = document.querySelector(
      'script[src="https://ai-anywhere.ai/sdk/v1/loader.js"]'
    );
    
    if (script) {
      document.head.removeChild(script);
      this.scriptLoaded = false;
    }
  }
}

// Beim Laden der App initialisieren
const aiLoader = new AIAnywhereLoader('your-site-id');

// Laden, wenn der DOM bereit ist
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', () => aiLoader.load());
} else {
  aiLoader.load();
}

// Verwendung in Ihren SPA-Routen
function renderContactForm() {
  return `
    <form id="contact-form">
      <label for="message">Ihre Nachricht:</label>
      <textarea id="message" placeholder="Geben Sie hier Ihre Nachricht ein..." required></textarea>
      <span data-helper-anchor data-helper-token="your-helper-token"></span>
      <button type="submit">Senden</button>
    </form>
  `;
}

Verwendung: Importieren Sie den Loader in Ihre Haupt-App-Datei und verwenden Sie ihn in Ihren SPA-Routen.

Beispiel für benutzerdefiniertes Styling

Überschreiben Sie die Standard-Helfer-Button-Stile, um sie an Ihre Seite anzupassen\

<style>
  /* Aussehen des Hilfsschaltfläche anpassen */
  .ai-helper-button {
    background-color: #007bff !important;
    border-radius: 8px !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
  }
  
  .ai-helper-button:hover {
    background-color: #0056b3 !important;
  }
</style>

<script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>

<form>
  <textarea id="message" placeholder="Ihre Nachricht:"></textarea>
  <span data-helper-anchor data-helper-token="your-helper-token"></span>
</form>