Tutoriel Complet

Tout d'abord, vous devez vous inscrire pour un compte AI Anywhere.

1. Allez dans l'onglet Page d'accueil AI Anywhere
2. Cliquez sur "Commencer" bouton dans l'en-tête
3. Inscrivez-vous en utilisant votre compte social préféré (Google, GitHub, etc.)
4. You'll be automatically logged into your dashboard

Créons maintenant un Helper qui aidera les utilisateurs à rédiger des messages de formulaire de contact.

1. Dans votre tableau de bord, cliquez sur "Nouvel assistant"
2. Donnez à votre assistant un nom descriptif, tel que "Assistant de formulaire de contact"
3. Sélectionnez le site où cet assistant sera utilisé
4. Cliquez sur "Gérer les assistants"

Configurez votre assistant

Après avoir créé l'assistant, vous devrez le configurer :

• Réponse de l'assistant : 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.").
• Mots-clés et/ou Règles : Ajoutez des mots-clés ou des règles importants pour votre cas d'utilisation (par exemple, "contact", "demande", "question", "support").
• Style du bouton : Personnalisez l'apparence du bouton d'aide (couleur, texte) pour l'adapter au design de votre site.

Vous devez maintenant obtenir les extraits de code qui intégreront l'assistant dans votre site web.

1. Dans les paramètres de votre aide, cliquez sur le "Générer un extrait" bouton
2. Vous verrez deux extraits de code :
   • Balise de script : Contient votre ID de site
   • Span d'ancrage : Contient votre jeton d'Assistant
3. Copiez les deux extraits - vous en aurez besoin à l'étape suivante

Vos extraits ressembleront à ceci :

<!-- Balise de script (va dans <head>) -->
<script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>

<!-- Exemple : le bouton d'assistance apparaît à côté de votre zone de texte -->
<span data-helper-anchor data-helper-token="your-helper-token"></span>

Ajoutons maintenant le script de l'assistant au HTML de votre site web.

1. Ouvrez votre fichier HTML (ou fichier de modèle si vous utilisez un framework)
2. Trouvez la <head> section
3. Collez la balise de script avant la fermeture </head> balise

Voici à quoi cela devrait ressembler :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contactez-nous</title>
  
  <!-- Script de l'assistant AI Anywhere -->
  <script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>
</head>

Ajoutez maintenant le span d'ancrage à côté de votre zone de texte où vous voulez que le bouton de l'assistant apparaisse.

1. Trouvez votre formulaire de contact (ou le formulaire où vous voulez l'assistant)
2. Localisez la zone de texte où les utilisateurs taperont leur message
3. Ajoutez le span d'ancrage juste après la zone de texte (ou à un endroit proche)

Voici un exemple complet d'un formulaire de contact avec l'assistant :

<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>
    <!-- Ancrage de l'assistant - le bouton apparaîtra ici -->
    <span data-helper-anchor data-helper-token="your-helper-token"></span>
  </div>
  
  <button type="submit">Envoyer le message</button>
</form>

Vérifions maintenant que tout fonctionne correctement.

1. Enregistrez votre fichier HTML
2. Ouvrez votre site web dans un navigateur web
3. Accédez à la page avec votre formulaire de contact
4. Recherchez le bouton de l'assistant à côté de votre zone de texte

Ce qu'il faut vérifier

• Le bouton de l'assistant apparaît à côté de votre zone de texte
• Le bouton a le style correct (couleur, texte, taille) que vous avez configuré
• Lorsque vous cliquez sur le bouton, l'interface de l'assistant s'ouvre
• Lorsque vous tapez du texte et cliquez sur le bouton de l'assistant, il fournit des suggestions

Dépannage

Si le bouton de l'assistant n'apparaît pas :

• Check your browser's developer console (F12) for any JavaScript errors
• Vérifiez que la balise de script est correctement placée dans la <head> section
• Assurez-vous que la balise d'ancrage est présente et contient le bon jeton d'Assistant
• Essayez un rafraîchissement forcé (Ctrl+Shift+R ou Cmd+Shift+R) pour effacer les fichiers en cache
• Vérifiez que votre ID de site et votre jeton d'Assistant sont corrects

Maintenant que votre assistant fonctionne, vous pouvez le personnaliser pour mieux correspondre à vos besoins.

Ce que vous pouvez personnaliser

• Apparence du bouton : Modifiez la couleur et le texte du bouton d'aide.
• Réponse de l'assistant : Mettez à jour l'exemple pour mieux refléter ce que vous voulez que les utilisateurs écrivent
• Mots-clés : Ajoutez ou supprimez des mots-clés pour améliorer la précision des suggestions
• Plusieurs assistants : Créez des assistants supplémentaires pour différents formulaires ou zones de texte

Pour personnaliser :

1. Retournez à votre tableau de bord
2. Sélectionnez "Assistants", puis sélectionnez l'aide spécifique que vous souhaitez modifier
3. Cliquez sur "Modifier" bouton
4. Apportez vos modifications
5. Enregistrez vos modifications

Une fois que vous avez tout testé localement, il est temps de déployer sur votre site web de production.

Liste de vérification avant le déploiement

• Testé l'assistant sur votre environnement local/de mise en scène
• Vérifié que le bouton de l'assistant apparaît et fonctionne correctement
• Testé sur différents navigateurs (Chrome, Firefox, Safari, Edge)
• Testé sur des appareils mobiles
• Vérifié que les suggestions de l'assistant sont utiles et précises

Étapes de déploiement

1. Téléchargez vos fichiers HTML mis à jour sur votre serveur web
2. Vérifiez que la balise de script est dans la <head> de toutes les pages où vous voulez l'assistant
3. Vérifiez que les spans d'ancrage sont placés correctement à côté de vos zones de texte
4. Testez l'assistant sur votre site web en ligne
5. Surveillez les problèmes ou erreurs éventuels