Guide d'installation

L'installation d'AI Anywhere sur votre site web est simple. Vous pouvez utiliser votre Helper de deux manières : la Page Helper (pas de code : lien partageable, utilisation depuis n'importe quel navigateur) ou intégrer le bouton Helper sur votre site. Ce guide couvre le chemin d'intégration.

Deux façons d'utiliser votre assistant

• Page d'assistance (sans code) : Obtenez un lien partageable depuis votre tableau de bord. Pas de code, pas d'intégration, pas d'extrait de code. Ouvrez dans n'importe quel navigateur ou partagez avec d'autres ; utilisez depuis n'importe quel appareil sans déploiement.
• Bouton d'assistance (intégration) : Ajoutez le script à votre <head> et l'ancre d'Aide à côté de votre zone de texte. Le bouton d'Aide apparaît sur votre site à côté du champ.

You can also set a Helper to "Both": it will be available as a shareable Helper Page link and embeddable on your site. For embed (or Both), you must create or select a Site (and its group) in the dashboard; the snippet uses that site's ID. The default Helper Page site cannot be used for embedding.

Sites et intégration

To embed a Helper on your website, you need a Site in your dashboard (Sites → Add site, or select an existing one). Each new site gets a default group. Use that site's ID in the script tag. If you only use the Helper Page (shareable link), you do not need to create a separate site.

Prérequis

Avant de commencer, assurez-vous d'avoir :

• Un compte AI Anywhere actif : Inscrivez-vous sur ai-anywhere.ai si vous n'avez pas\
• Assistants les plus utilisés Dans votre tableau de bord, créez un nouveau Helper. Configurez le sélecteur et la Réponse du Helper.

Comment ça fonctionne

Le widget Assistant suit un processus simple en trois étapes :

1. Lit : Lorsqu'un utilisateur clique sur le bouton Assistant, il lit le texte actuel dans la zone de texte ou le champ de saisie associé.
2. Compare : Le texte est comparé à votre Réponse du Helper configurée et aux mots-clés pour identifier les domaines à améliorer.
3. Suggère : Le Helper fournit des suggestions contextuelles pour aider les utilisateurs à rédiger un contenu meilleur et plus complet qui correspond à votre Réponse du Helper.

Intégration du script Assistant

Pour ajouter AI Anywhere à votre page web, vous devez :

1. Charger le script Assistant dans votre <head> section
2. Ajoutez la balise d'ancrage Helper à côté de votre zone de texte ou champ de formulaire

Étape 1 : Charger le script

Ajoutez la balise script à votre HTML\ <head> Collez sur votre site

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

Étape 2 : Initialiser le Assistant

Ajoutez la balise d'ancrage Helper à côté de votre zone de texte ou champ de formulaire où vous voulez que le Helper apparaisse :

<span data-helper-anchor data-helper-token="your-helper-token"></span>

Exemple complet

Voici un exemple complet montrant les deux parties :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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"></script>
</head>
<body>
  <form>
    <textarea id="message" placeholder="Votre message :"></textarea>
    <span data-helper-anchor data-helper-token="your-helper-token"></span>
  </form>
</body>
</html>

Comprendre la configuration

Analysons chaque option de configuration :

• data-site: Un paramètre de requête qui identifie votre compte et est partagé sur toutes les pages de votre site
• data-helper-anchor: Sélecteur CSS où l'assistant doit apparaître
• data-helper-token: Clé unique qui identifie cette configuration spécifique de l'assistant. Chaque instance de l'assistant nécessite sa propre clé unique. Trouvée dans votre tableau de bord lorsque vous créez un assistant.

Exemple visuel

Voici ce que les utilisateurs verront lorsque le Assistant est actif :

Test et vérification

Après avoir ajouté votre extrait à votre site, suivez ces étapes pour vérifier que tout fonctionne :

1. Rafraîchissez votre page : Enregistrez votre fichier HTML et rafraîchissez votre navigateur (rafraîchissement complet avec Ctrl+Shift+R ou Cmd+Shift+R pour vider le cache).
2. Recherchez le bouton Assistant : Vous devriez voir le bouton Assistant apparaître à côté de tout <textarea> ou <input type="text"> élément sur votre page.
3. Tester le sélecteur : Entrez du texte dans votre champ de formulaire, puis cliquez sur le bouton Assistant. L'Assistant devrait analyser votre texte et fournir des suggestions.
4. Vérifiez la console : Vérifiez la console du navigateur (F12) pour vous assurer qu'il n'y a pas d'erreurs

Problèmes courants et dépannage

Questions fréquemment posées

Est-ce que cela fonctionne partout ?

AI Anywhere fonctionne avec les éléments de formulaire HTML standard, y compris :

• <textarea> éléments
• <input type="text"> champs
• <input type="email"> champs
• Divs éditables (avec configuration supplémentaire)

Il fonctionne sur n'importe quel site web, quel que soit le framework (React, Vue, Angular, HTML simple, WordPress, etc.) tant que vous pouvez ajouter la balise script à votre <head> section.

Puis-je masquer le bouton ?

Oui, vous pouvez masquer le bouton Assistant en utilisant du CSS si nécessaire :

However, hiding the button means users won't be able to access the Helper. Consider making it visible only on specific pages or for specific user roles instead.

Puis-je utiliser plusieurs Assistants sur une seule page ?

Oui ! Vous pouvez avoir plusieurs instances de Helper sur une seule page, chacune avec des configurations différentes. Ajoutez simplement plusieurs balises d'ancrage avec différents jetons Helper :

<!-- Premier assistant pour le champ de message -->
<textarea id="message"></textarea>
<span data-helper-anchor data-helper-token="message-helper-token"></span>

<!-- Deuxième assistant pour le champ de notes -->
<textarea id="notes"></textarea>
<span data-helper-anchor data-helper-token="notes-helper-token"></span>

Chaque Assistant s'attachera indépendamment à son emplacement spécifié.