Exemples de code

Dernière intégration HTML

Implémentation HTML5 moderne avec balisage sémantique. Ajoutez le script à votre <head> section et utilisez les attributs de données pour la configuration.

<!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="Formulaire de contact avec assistance IA">
  <title>pour Contact Form 7)</title>
  
  <!-- Script de l'assistant AI Anywhere -->
  <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">Votre message :</label>
      <textarea id="message" 
                name="message" 
                rows="5" 
                placeholder="Tapez votre message ici..."
                required></textarea>
      <span data-helper-anchor 
            data-helper-token="your-helper-token"></span>
      <button type="submit">Envoyer</button>
    </form>
  </main>
</body>
</html>

Exemple de formulaire de contact

Un formulaire de contact complet avec l'assistance de l'Assistant pour le champ de message.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contactez-nous</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">Nom :</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">Message :</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">Envoyer le message</button>
  </form>
</body>
</html>

Zones de texte multiples avec différents Assistants

Initialisez plusieurs Assistants avec différentes configurations pour différents champs de formulaire.

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

<form>
  <label>Texte de description du produit</label>
  <textarea id="description"></textarea>
  <span data-helper-anchor data-helper-token="product-helper-token"></span>
  
  <label>Notes internes :</label>
  <textarea id="notes"></textarea>
  <span data-helper-anchor data-helper-token="notes-helper-token"></span>
</form>

Intégration WordPress

Ajoutez AI Anywhere à votre thème WordPress en incluant le snippet dans votre thème\

<?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');
?>

Stockez votre configuration d'Assistant dans les options WordPress pour une gestion facile.

Intégration React

Intégrez AI Anywhere dans votre application React en utilisant des hooks et la prise en charge de TypeScript. Fonctionne avec React 16.8+ et les modèles React modernes.

import { useEffect, useRef } from 'react';

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

function ContactForm({ siteId, helperToken }: ContactFormProps) {
  const scriptLoaded = useRef(false);
  
  useEffect(() => {
    // Charger le script AI Anywhere une seule fois
    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 () => {
        // Nettoyage lors du démontage
        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();
    // Votre logique de soumission de formulaire
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="message">Votre message :</label>
      <textarea 
        id="message" 
        name="message"
        placeholder="Tapez votre message ici..."
        required
      />
      <span 
        data-helper-anchor 
        data-helper-token={helperToken}
      ></span>
      <button type="submit">Envoyer</button>
    </form>
  );
}

export default ContactForm;

Utilisation : Importer et utiliser le composant : <ContactForm siteId="your-site-id" helperToken="your-helper-token" />

Intégration Angular CLI

Ajoutez AI Anywhere à votre application Angular en utilisant les services Angular et les hooks de cycle de vie. Compatible avec 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">Votre message :</label>
      <textarea 
        id="message" 
        name="message"
        [(ngModel)]="message"
        placeholder="Tapez votre message ici..."
        required></textarea>
      <span 
        data-helper-anchor 
        [attr.data-helper-token]="helperToken"></span>
      <button type="submit">Envoyer</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 {
    // Charger le script AI Anywhere
    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 {
    // Nettoyer le script lors de la destruction du composant
    if (this.scriptElement && this.document.head.contains(this.scriptElement)) {
      this.document.head.removeChild(this.scriptElement);
    }
  }

  onSubmit(): void {
    // Votre logique de soumission de formulaire
    console.log('Message:', this.message);
  }
}

Remarque : Assurez-vous d'importer FormsModule dans votre app.module.ts pour ngModel fonctionner.

Intégration Vue.js

Intégrez AI Anywhere dans votre application Vue.js en utilisant l'API de composition ou l'API d'options. Fonctionne avec Vue 3.

<template>
  <form @submit.prevent="handleSubmit">
    <label for="message">Votre message :</label>
    <textarea 
      id="message" 
      v-model="message"
      placeholder="Tapez votre message ici..."
      required></textarea>
    <span 
      data-helper-anchor 
      :data-helper-token="helperToken"></span>
    <button type="submit">Envoyer</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(() => {
  // Charger le script AI Anywhere
  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(() => {
  // Nettoyer le script lors du démontage du composant
  if (scriptElement && document.head.contains(scriptElement)) {
    document.head.removeChild(scriptElement);
  }
});

const handleSubmit = () => {
  // Votre logique de soumission de formulaire
  console.log('Message:', message.value);
};
</script>

Alternative (API d'options) : Utilisez mounted() et beforeUnmount() des hooks si vous préférez l'API d'options.

Intégration SPA Vanilla

Ajoutez AI Anywhere à une application monopage JavaScript vanilla. Fonctionne avec n'importe quelle bibliothèque de routage ou architecture SPA sans framework.

// 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) => {
      // Vérifiez si le script existe déjà
      const existingScript = document.querySelector(
        'script[src="https://ai-anywhere.ai/sdk/v1/loader.js"]'
      );
      
      if (existingScript) {
        this.scriptLoaded = true;
        resolve();
        return;
      }

      // Créer et charger le script
      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('Échec du chargement du script AI Anywhere'));
      };
      
      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;
    }
  }
}

// Initialiser au chargement de l'application
const aiLoader = new AIAnywhereLoader('your-site-id');

// Charger lorsque le DOM est prêt
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', () => aiLoader.load());
} else {
  aiLoader.load();
}

// Utilisation dans vos routes SPA
function renderContactForm() {
  return `
    <form id="contact-form">
      <label for="message">Votre message :</label>
      <textarea id="message" placeholder="Tapez votre message ici..." required></textarea>
      <span data-helper-anchor data-helper-token="your-helper-token"></span>
      <button type="submit">Envoyer</button>
    </form>
  `;
}

Utilisation : Importez le chargeur dans le fichier principal de votre application et utilisez-le à travers vos routes SPA.

Exemple de style personnalisé

Remplacez les styles de bouton par défaut de l'Assistant pour correspondre à votre site\

<style>
  /* Personnaliser l'apparence du bouton d'aide */
  .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="Votre message :"></textarea>
  <span data-helper-anchor data-helper-token="your-helper-token"></span>
</form>