AstroAPI

Appearance

Ajouter des widgets à votre site web ​

Ce guide vous montre comment ajouter un widget ou un chatbot AstroAPI à votre site web — aucune connaissance en programmation requise. Vous copiez un extrait de code depuis votre tableau de bord et vous le collez dans votre créateur de site.

Il contient des instructions pas à pas pour WordPress, Wix, Squarespace, Shopify et Webflow, ainsi qu'une méthode générique qui fonctionne sur n'importe quel site web.

Vous cherchez l'API technique des widgets ?

Ce guide explique comment coller un code d'intégration prêt à l'emploi dans votre site. Pour créer et configurer des widgets via l'API, consultez Widgets intégrables. Pour l'API du chatbot, consultez Chatbot IA.

Étape 1 : Récupérez votre code d'intégration ​

  1. Connectez-vous au tableau de bord AstroAPI.
  2. Allez dans Widgets (ou Chatbots pour le chatbot IA) et ouvrez le widget que vous souhaitez intégrer.
  3. Utilisez l'onglet Preview pour vérifier que l'apparence vous convient. Les couleurs, les polices et la mise en page se configurent ici, dans le tableau de bord — pas dans le code — de sorte que vous pouvez restyler le widget plus tard sans toucher à votre site web.
  4. Ouvrez l'onglet Embed et copiez le code d'intégration. Il ressemble à ceci :
html
<script
  src="https://api.astroapi.cloud/widgets/sdk.js"
  data-widget-id="wgt_abc123"
  data-api-key="your-api-key"
  data-api-url="https://api.astroapi.cloud"
></script>
<div id="astro-widget-wgt_abc123"></div>

Le code d'intégration du chatbot est une simple balise script sans le <div> :

html
<script
  src="https://api.astroapi.cloud/widget.js"
  data-chatbot-id="your-chatbot-id"
  data-api-key="your-api-key"
></script>

C'est le seul code dont vous avez besoin. Les sections suivantes montrent où le coller, plateforme par plateforme.

Protégez votre API key

Le code d'intégration contient une API key. Utilisez une clé qui ne dispose que des permissions widget ou chatbot — jamais votre API key principale. Vous pouvez créer des clés restreintes sous API Keys dans le tableau de bord, et restreindre le chatbot à vos propres domaines sous Chatbots → Security.

WordPress ​

Option A : bloc Custom HTML (recommandé) ​

  1. Modifiez la page ou l'article où le widget doit apparaître.
  2. Cliquez sur le bouton + pour ajouter un bloc et recherchez Custom HTML.
  3. Collez le code d'intégration dans le bloc.
  4. Cliquez sur Preview pour vérifier le résultat, puis sur Update ou Publish.

Option B : sur tout le site (pour le chatbot) ​

Pour afficher le chatbot sur chaque page :

  1. Installez un plugin léger de header/footer comme WPCode, ou utilisez l'option « custom scripts » de votre thème — inutile de modifier les fichiers du thème.
  2. Collez le code d'intégration du chatbot dans la section Footer (avant </body>).
  3. Enregistrez. La bulle du chatbot apparaît désormais sur chaque page.

Elementor

Vous utilisez Elementor ? Ajoutez un widget HTML à votre page et collez-y le code d'intégration.

Wix ​

  1. Dans l'éditeur Wix, cliquez sur Add Elements (le bouton +) dans la barre latérale gauche.
  2. Choisissez Embed Code → Embed HTML.
  3. Cliquez sur Enter Code et collez le code d'intégration.
  4. Cliquez sur Apply, puis déplacez/redimensionnez le cadre pour l'adapter au widget.
  5. Cliquez sur Publish.

Chatbot sur Wix

Wix affiche le HTML intégré à l'intérieur d'un cadre, ce qui confine la bulle du chatbot à ce cadre. Pour un chatbot présent sur tout le site, utilisez plutôt Settings → Custom Code (nécessite un forfait Wix payant) : collez le code d'intégration du chatbot et configurez-le pour qu'il se charge sur All pages, placé dans le Body - end.

Squarespace ​

  1. Modifiez la page où le widget doit apparaître.
  2. Cliquez sur un point d'insertion et choisissez le bloc Code.
  3. Collez le code d'intégration (conservez le mode HTML par défaut).
  4. Enregistrez la page.

Pour un chatbot présent sur tout le site, allez dans Settings → Advanced → Code Injection et collez le code d'intégration du chatbot dans le champ Footer.

WARNING

Les blocs de code et l'injection de code nécessitent un forfait Squarespace Business ou supérieur.

Shopify ​

  1. Dans l'administration Shopify, allez dans Online Store → Themes.
  2. Cliquez sur Customize sur votre thème actuel.
  3. Ajoutez une section Custom Liquid (ou un bloc HTML, selon votre thème) à la page où le widget doit apparaître.
  4. Collez le code d'intégration et cliquez sur Save.

Pour un chatbot présent sur tout le site :

  1. Allez dans Online Store → Themes → ⋯ → Edit code.
  2. Ouvrez layout/theme.liquid.
  3. Collez le code d'intégration du chatbot juste avant la balise fermante </body>.
  4. Cliquez sur Save.

Webflow ​

  1. Dans le designer Webflow, faites glisser un élément Embed (depuis Add Elements → Components) sur votre page.
  2. Collez le code d'intégration dans l'éditeur de code et cliquez sur Save & Close.
  3. Publiez votre site. Le code personnalisé ne s'exécute que sur le site publié, pas dans l'aperçu du designer.

Pour un chatbot présent sur tout le site, allez dans Site Settings → Custom Code et collez le code d'intégration du chatbot dans le champ Footer Code.

WARNING

Le code personnalisé dans Webflow nécessite un forfait de site payant.

Tout autre site web ​

Si vous (ou votre développeur web) gérez le HTML directement :

  1. Ouvrez le fichier HTML ou le modèle de la page.
  2. Collez le code d'intégration du widget à l'endroit de la page où le widget doit apparaître.
  3. Pour le chatbot, collez son code d'intégration juste avant la balise fermante </body> — il s'affiche sous forme de bulle flottante, sa position dans le HTML n'a donc pas d'importance.

Dépannage ​

La zone du widget reste vide. Vérifiez que les deux parties du code d'intégration ont bien été collées : la balise <script> et le <div> en dessous. Certains créateurs de pages suppriment l'une des deux.

« Invalid API key » ou rien ne se charge. L'API key du code d'intégration a peut-être été révoquée ou ne dispose pas des bonnes permissions. Copiez un nouveau code d'intégration depuis l'onglet Embed du tableau de bord.

Le chatbot n'apparaît pas sur mon site publié. Si vous avez restreint le chatbot à des domaines spécifiques (Chatbots → Security → Allowed domains), assurez-vous que le domaine de votre site web figure dans la liste — y compris la variante www. si votre site l'utilise.

Le widget est différent de l'aperçu. Le style provient de la configuration du tableau de bord et se charge avec le widget. Si vous avez récemment modifié le design, actualisez la page de force (Ctrl+Shift+R / Cmd+Shift+R) pour contourner le cache de votre navigateur.

Cela fonctionne sur ordinateur mais pas dans la webview de mon application. Le code d'intégration doit pouvoir exécuter du JavaScript provenant de astroapi.cloud. Assurez-vous que la politique de sécurité (CSP) de votre application ou de votre site autorise les scripts de ce domaine.

Prochaines étapes ​

AstroAPI Documentation

Copyright © 2026 AstroAPI