Connecteurs
Un connecteur relie un service que vous utilisez déjà, comme Stripe, Supabase ou GitHub, à WebTwizz. Vous connectez un compte une seule fois et il est enregistré dans vos connecteurs. Tous vos projets peuvent ensuite l'utiliser. Chaque projet n'a accès qu'aux connecteurs que vous choisissez pour lui.
Lorsqu'un projet utilise un connecteur :
- Les clés du service sont enregistrées dans les secrets du projet pour que le code de votre site puisse les utiliser.
- Tout ce que votre site doit charger pour ce service, comme une balise de suivi ou une fenêtre de discussion, est ajouté au code du projet pour vous. Consultez Code dans votre projet.
- L'éditeur affiche les données du service pour ce projet : revenus, erreurs, visiteurs, commits.
- L'IA peut consulter le service pendant qu'elle travaille et le configurer pour vous.
Certains connecteurs n'ajoutent rien à votre site. Ils permettent à l'IA de travailler dans une autre application pendant la création, par exemple pour lire une page Notion ou un ticket Linear. Consultez Applications que l'IA peut utiliser.
Où trouver les connecteurs
Vos connecteurs dans le tableau de bord
Cliquez sur Connecteurs dans la barre latérale du tableau de bord, sous Bibliothèque. Cette page regroupe tous les comptes que vous avez connectés, pour l'ensemble de vos projets.
- Connecté répertorie les services pour lesquels vous avez un compte et les projets qui les utilisent. Cliquez sur un service pour l'ouvrir.
- Ajouter un connecteur répertorie tous les autres services. Cliquez sur un service pour le connecter.
- Lancez une recherche ou filtrez la liste avec Connecté, Tout ou une catégorie à gauche.
- Vous avez besoin d'un service qui ne figure pas ici ? Cliquez sur Demander un connecteur.
Vous pouvez aussi trouver un connecteur par son nom avec Rechercher (⌘K / Ctrl+K) dans le tableau de bord.
La page d'un connecteur répertorie vos Comptes pour ce service et les Projets qui utilisent chacun d'eux, avec les paramètres propres à chaque projet. Ouvrir vous mène au projet, et Supprimer retire le connecteur de ce projet.
Les connecteurs d'un projet dans les paramètres
Dans l'éditeur, ouvrez Paramètres et choisissez Connecteurs.
- Dans ce projet répertorie les connecteurs utilisés par le projet. Cliquez sur un connecteur pour l'ouvrir.
- Ajouter à ce projet répertorie tous les autres connecteurs. Cliquez sur un service pour l'ajouter. Si vous avez déjà connecté un compte pour ce service, il affiche Utilise votre suivi du nom du compte. Un clic suffit pour l'ajouter avec ce compte.
- Tous vos connecteurs ouvre la page du tableau de bord.
Connecter un service
Certains services se connectent en vous demandant de vous identifier. Pour d'autres, vous collez une clé.
| Méthode | Connecteurs |
|---|---|
| Se connecter | Stripe, GitHub, Sentry, PostHog, Google Analytics, Google Sheets, Google Calendar, Google Search Console, Supabase, Resend, OpenRouter et les applications que l'IA peut utiliser |
| Coller une clé | OpenAI, Anthropic, Gemini, Groq, Loops, Intercom (un App ID), Cal.com, ElevenLabs, HubSpot, Twilio, WhatsApp, Razorpay, Paystack, PayPal, serveur MCP |
Certains proposent les deux méthodes : Coller les clés pour Stripe, Coller un ID de mesure pour Google Analytics, et Coller une clé pour Resend et OpenRouter.
Depuis un projet :
- Ouvrez Paramètres > Connecteurs et cliquez sur le service.
- Cliquez sur Connecter.
- Les services avec identification s'ouvrent dans une nouvelle fenêtre. Autorisez l'accès dans cette fenêtre, puis vous revenez au connecteur.
- Les services avec clé ouvrent la page de création de la clé dans une fenêtre distincte. Copiez la clé sur cette page et revenez : WebTwizz la récupère dans votre presse-papiers, la vérifie et établit la connexion. Votre navigateur peut vous demander une fois d'autoriser le collage. Vous pouvez aussi cliquer sur Coller, ou coller vous-même la clé dans le champ. Si le service exige deux valeurs, comme un identifiant et un secret, il demande la seconde après la première. Si le service refuse une clé, le message Cette clé n'a pas été acceptée s'affiche.
- Si un choix est nécessaire, comme un dépôt GitHub ou un projet Sentry, le connecteur s'ouvre sur Terminer la connexion avec un sélecteur. Faites votre choix, et c'est terminé.
Depuis le tableau de bord, cliquez sur un service sous Ajouter un connecteur, ou ouvrez sa page et cliquez sur Connecter. Le compte est enregistré sans être ajouté à un projet. Ajoutez-le plus tard depuis Paramètres > Connecteurs dans le projet souhaité.
Vous n'avez pas encore de clé pour un service d'IA ? Les formulaires OpenAI, Anthropic, Gemini et Groq proposent Se connecter avec OpenRouter, qui vous donne accès à tous les modèles en une seule étape. Consultez OpenRouter.
Supabase et Google Sheets sont des sources de données. Leur bouton Connecter ouvre donc le panneau Données. Un projet ne peut avoir qu'une source de données à la fois. Consultez Données et CMS.
Réserver un compte à un seul projet
Ce projet uniquement connecte un compte que seul ce projet peut utiliser. Il ne sera pas proposé dans vos autres projets. Il porte la mention Ce projet uniquement dans le projet et Un seul projet dans le tableau de bord. C'est utile pour le compte Stripe d'un client ou une clé que vous ne souhaitez pas réutiliser.
À l'intérieur d'un connecteur
Cliquez sur un connecteur sous Dans ce projet. À côté de son nom, des liens ouvrent les éléments utilisés par ce projet sur le service, comme Ouvrir Stripe ou Ouvrir Sentry. En dessous, de haut en bas :
- Vue d'ensemble : les données du service pour ce projet, comme les paiements pour Stripe, les erreurs pour Sentry ou les pull requests pour GitHub. Cliquez sur une ligne pour voir ses détails sur place. De nombreuses lignes proposent des boutons pour les actions courantes, comme Rembourser un paiement, Résoudre une erreur ou Fusionner une pull request. Vous avez donc rarement besoin d'ouvrir le site du service. Toute action irréversible demande d'abord une confirmation. Afficher plus charge la suite d'une liste, et les tableaux et onglets s'ouvrent dans le panneau Données.
- Compte : le compte utilisé par ce projet, et Aussi utilisé dans avec vos autres projets qui l'utilisent. Gérer ouvre le compte dans les connecteurs du tableau de bord. La plupart des comptes connectés par clé proposent aussi Remplacer la clé.
- Paramètres : les choix propres à ce projet, comme le dépôt, le projet Sentry ou le modèle d'IA. Les modifications sont enregistrées au fur et à mesure.
- Site en ligne : pour les connecteurs qui ajoutent un élément à votre site publié, indique si cet élément est en Exécution en cours, en attente de Publiez pour mettre à jour, ou s'il démarre Après la publication.
- Retirer de ce projet : cliquez sur Supprimer, puis sur Retirer du projet ? pour confirmer. Ses clés sont retirées de ce projet. Vos autres projets conservent le compte.
La page de chaque connecteur dans cette documentation présente sa vue d'ensemble et ses paramètres.
Changer de compte ou le supprimer
- Changer de compte dans un projet : si vous avez plusieurs comptes pour un service, la ligne Compte propose Changer de compte. Son menu répertorie vos autres comptes et Connecter un autre compte. Le projet passe au nouveau compte et ses clés sont remplacées.
- Renommer un compte : sur la page du connecteur dans le tableau de bord, cliquez sur le nom du compte, saisissez le nouveau nom et appuyez sur
Enter. - Remplacer une clé : cliquez sur Remplacer la clé sur le compte et collez la nouvelle. Tous les projets qui utilisent cette clé passent à la nouvelle. Razorpay, PayPal et Intercom ne proposent pas cette option, car leurs valeurs changent ensemble : connectez les nouvelles valeurs comme un autre compte, puis changez de compte.
- Supprimer un compte partout : sur la page du connecteur dans le tableau de bord, cliquez sur Supprimer sur le compte, puis sur Supprimer suivi de son nom. Il est déconnecté de tous les projets qui l'utilisent. Tout ce que ces sites font avec ce compte s'arrête jusqu'à ce que vous connectiez à nouveau un compte.
La suppression n'efface jamais rien sur le service. Vos clients Stripe, votre dépôt GitHub et vos événements Sentry restent à leur place.
Si un service n'accepte plus l'identification enregistrée, le compte affiche À reconnecter avec un bouton Reconnecter. S'il lui manque une autorisation que le compte n'a pas accordée, la vue d'ensemble indique que le service a besoin d'une autorisation supplémentaire, avec Reconnecter.
Où vont les clés
Les connecteurs utilisés par votre site ajoutent leurs clés comme secrets dans Paramètres > Secrets et les tiennent à jour. Elles sont répertoriées sous Depuis les services connectés. Votre aperçu les utilise immédiatement. Publiez à nouveau pour que votre site en ligne les reçoive aussi. Consultez Secrets.
La page de chaque connecteur répertorie les secrets qu'il ajoute. Les clés dont seul WebTwizz a besoin, comme une clé de service HubSpot ou un Auth Token Twilio, ne sont jamais ajoutées à votre site.
Code dans votre projet
Certains connecteurs ont besoin de code sur chaque page : Google Analytics et PostHog comptent les visites, Sentry détecte les erreurs, HubSpot ajoute son suivi, Intercom affiche son Messenger, et Google Search Console ajoute la balise qui prouve que le site vous appartient. WebTwizz regroupe tout cela dans un fichier de votre projet, webtwizz-connectors.tsx, et l'ajoute à la mise en page racine de votre site. Les statistiques propres à votre site, accessibles dans Paramètres > Statistiques, y sont ajoutées une fois le site publié. Vous n'avez rien à modifier.
- Ce fichier est mis à jour lorsque vous ajoutez, modifiez ou supprimez l'un de ces connecteurs, et à chaque publication. Si un projet ne l'a pas encore, il sera ajouté à la prochaine publication.
- À l'exception du Messenger Intercom, tout s'exécute uniquement sur votre site publié. Vos propres visites et erreurs dans l'aperçu ne sont donc pas comptabilisées. Le Messenger s'affiche aussi dans l'aperçu pour que vous puissiez l'essayer.
- Il fait partie de votre code. Il est donc envoyé sur GitHub et inclus dans les téléchargements comme tout autre fichier. WebTwizz le gère : vos modifications manuelles seront remplacées. Modifiez plutôt les paramètres du connecteur.
- Si le code de votre site charge déjà l'un de ces services, WebTwizz ne l'ajoute pas au fichier pour éviter de le charger deux fois.
Les connecteurs dans la discussion
L'IA sait quels connecteurs le projet utilise et s'en sert pour vous.
Cartes de connexion
Lorsque vous demandez quelque chose qui nécessite un service, comme un formulaire de contact qui vous envoie un e-mail, l'IA ajoute une carte de connexion, par exemple Connecter Resend. Cliquez dessus pour vous connecter sans quitter la discussion. Si vous avez déjà un compte pour ce service, la carte le propose par son nom, ainsi que Connecter un autre compte Resend.
Pour un service qui n'a pas de connecteur, l'IA ajoute les secrets nécessaires dans Paramètres > Secrets, sans valeurs. Vous pouvez alors les coller sous Valeur requise.
Cartes en direct
Demandez où en est un élément, et l'IA peut répondre avec une carte de données en direct du service : une ligne par service avec le chiffre principal, Paramètres et Ouvrir, ainsi que des détails à déplier. Les chiffres viennent directement du service. L'IA ne les ressaisit donc jamais et ne les devine pas.
L'IA consulte un service
L'IA consulte vos services connectés lorsque c'est utile : les erreurs dans Sentry avant d'en corriger une, les visiteurs du mois dernier dans Google Analytics, ou la vérification de votre domaine Resend. Chaque consultation apparaît comme une ligne dans la discussion avec le logo du service, par exemple Utilisation de Linear. Pendant le traitement, le logo pulse.
Une fois la consultation terminée, la ligne indique ce que l'IA a trouvé. Cliquez dessus pour voir les détails.
Pour orienter vous-même l'IA vers un service, tapez @ dans le champ de discussion et choisissez-le sous Connecteurs. Tapez / et ouvrez l'une des applications que l'IA peut utiliser sous MCP pour choisir l'un de ses outils.
Elle demande avant de modifier
Les consultations se font automatiquement. Toute modification de votre compte sur le service demande d'abord votre accord, avec Accepter et Refuser : marquer une erreur Sentry comme résolue, rembourser un paiement ou modifier les paramètres de connexion Supabase. Les e-mails de test de Resend et Loops ne sont envoyés qu'à votre propre boîte de réception. Ils ne demandent donc pas de confirmation.
En mode Discussion, l'IA peut consulter les connecteurs, mais ne peut rien modifier par leur intermédiaire. Seules exceptions : les applications que l'IA peut utiliser et les serveurs MCP. Un outil susceptible de modifier quelque chose demande d'abord votre accord et ne s'exécute que si vous acceptez.
GitHub et Stripe ont leurs propres outils : l'IA travaille avec votre dépôt via git, et avec votre compte Stripe via son outil Stripe. Les données de votre site passent par les outils du panneau Données. La page de chaque connecteur indique ce que l'IA peut faire avec lui.
Tous les connecteurs
Données
| Connecteur | Utilité | Connexion |
|---|---|---|
| WebTwizz Cloud | Base de données, connexions, stockage de fichiers, tâches et journaux | Inclus. L'IA l'ajoute, ou ajoutez-le depuis le panneau Données |
| Supabase | Base de données et connexions dans votre propre compte Supabase | Identifiez-vous depuis le panneau Données |
| Google Sheets | Une feuille de calcul comme source de données de votre site | Identifiez-vous avec Google depuis le panneau Données |
Paiements
| Connecteur | Utilité | Connexion |
|---|---|---|
| Stripe | Paiements et abonnements | Identifiez-vous ou collez les clés |
| Razorpay | Paiements en Inde : UPI, cartes et banque en ligne | Collez un Key ID et un Key Secret |
| Paystack | Paiements au Nigeria, au Ghana, au Kenya et ailleurs | Collez une clé secrète et une clé publique |
| PayPal | Paiements PayPal et par carte dans le monde entier | Collez un identifiant client et un secret |
Statistiques
| Connecteur | Utilité | Connexion |
|---|---|---|
| Google Analytics | Qui visite votre site | Identifiez-vous avec Google ou collez un ID de mesure |
| Google Search Console | Les performances de votre site dans la recherche Google | Identifiez-vous avec Google |
| PostHog | Ce que font les visiteurs, avec des relectures de sessions et des indicateurs de fonctionnalités | Identifiez-vous |
| Sentry | Détecter et corriger les erreurs | Identifiez-vous |
E-mail
| Connecteur | Utilité | Connexion |
|---|---|---|
| Resend | E-mails envoyés depuis votre propre domaine | Identifiez-vous ou collez une clé API |
| Loops | Listes de diffusion et e-mails pour vos utilisateurs | Collez une clé API |
| Klaviyo | Permet à l'IA de consulter les résultats de vos campagnes d'e-mail marketing | Identifiez-vous |
Assistance, CRM et messagerie
| Connecteur | Utilité | Connexion |
|---|---|---|
| Intercom | Discussion en direct sur chaque page | Collez un App ID |
| HubSpot | Les prospects de votre site dans HubSpot | Collez une clé de service |
| Twilio | SMS et codes de connexion par téléphone | Collez votre Account SID et votre Auth Token |
| Messages WhatsApp depuis votre numéro professionnel | Collez un jeton et des identifiants |
Réservation et voix
| Connecteur | Utilité | Connexion |
|---|---|---|
| Cal.com | Permettre aux visiteurs de réserver un créneau avec vous | Collez une clé API |
| Google Calendar | Réservations directement dans votre agenda | Identifiez-vous avec Google |
| Calendly | Permet à l'IA de trouver vos liens de réservation | Identifiez-vous |
| ElevenLabs | Un agent vocal avec lequel les visiteurs peuvent parler | Collez une clé API |
IA
| Connecteur | Utilité | Connexion |
|---|---|---|
| OpenAI | Modèles GPT dans votre site | Collez une clé API |
| Anthropic | Claude dans votre site | Collez une clé API |
| Gemini | Modèles Gemini dans votre site | Collez une clé API |
| OpenRouter | Des centaines de modèles avec un seul compte | Identifiez-vous ou collez une clé API |
| Groq | Modèles ouverts très rapides | Collez une clé API |
Code
| Connecteur | Utilité | Connexion |
|---|---|---|
| GitHub | Votre code dans votre propre dépôt | Identifiez-vous |
Applications que l'IA peut utiliser
Elles permettent à l'IA de travailler dans une autre application pendant la création. Rien n'est ajouté à votre site, et elles sont gratuites avec toutes les offres. Consultez Applications que l'IA peut utiliser pour en savoir plus sur chacune.
Notion, Linear, Cloudflare, Zapier, Make, monday.com, ClickUp, Miro, Webflow, Wix, Klaviyo, Calendly, Todoist, Context7, Exa, Firecrawl, Hugging Face, Microsoft Learn, et tout autre service via un serveur MCP.