> For the complete documentation index, see [llms.txt](https://docs.hablla.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.hablla.com/french/hablla/parametres/connexions-et-integrations/webchat/comment-tester-votre-webchat-localement.md).

# Comment tester votre webchat localement

Testez le Webchat de Hablla avant de publier : créez un fichier HTML dans VS Code, insérez le script d’intégration et affichez le widget avec l’extension Live Server.

**Avant de publier le Webchat** sur le site en production, il est possible de le tester localement pour visualiser et vérifier son comportement. Pour cela, nous avons préparé ce petit guide pratique.

{% hint style="warning" %}
**Cette section s'adresse aux personnes ayant des connaissances techniques plus avancées.** Le test local implique l'édition de fichiers HTML et l'utilisation d'outils de développement.
{% endhint %}

### Outils recommandés pour tester localement

Si vous n'êtes pas familier avec ce type d'outil, envisagez de transmettre ce guide à un responsable technique qui pourra effectuer les tests avec vous.

Les deux outils doivent être installés sur la même machine sur laquelle le test sera effectué.

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="image">Image de couverture</th></tr></thead><tbody><tr><td><h3>Visual Studio Code (VS Code)</h3></td><td><em>Il est nécessaire d'installer le programme sur la machine, si ce n'est pas déjà fait.</em></td><td data-object-fit="contain"><a href="https://icon.icepanel.io/Technology/svg/Visual-Studio-Code-(VS-Code).svg">https://icon.icepanel.io/Technology/svg/Visual-Studio-Code-(VS-Code).svg</a></td></tr><tr><td><h3>Extension Live Server</h3></td><td><em>Il est nécessaire d'installer l'extension dans votre VS Code</em></td><td data-object-fit="contain"><a href="https://ritwickdey.gallerycdn.vsassets.io/extensions/ritwickdey/liveserver/5.7.10/1772184436918/Microsoft.VisualStudio.Services.Icons.Default">https://ritwickdey.gallerycdn.vsassets.io/extensions/ritwickdey/liveserver/5.7.10/1772184436918/Microsoft.VisualStudio.Services.Icons.Default</a></td></tr></tbody></table>

{% stepper %}
{% step %}

### 1. Créez un dossier dans VS Code

Le projet doit se trouver dans un dossier pour fonctionner correctement.
{% endstep %}

{% step %}

### 2. Créez un fichier HTML

Vous pouvez créer n'importe quel fichier à des fins de test. La seule exigence est qu'il ait l'extension **`.html`**
{% endstep %}

{% step %}

### 3. Générez la structure HTML dans le fichier créé

Dans VS Code, vous pouvez utiliser un raccourci pour générer rapidement la structure HTML :

* **Étape 1 :** dans le fichier, tapez **`!`**.
* **Étape 2 :** l'éditeur affichera des modèles de structure HTML prêts à l'emploi. Il suffit d'en sélectionner un en appuyant sur **`Entrée`** ou en cliquant sur l'option affichée.
  {% endstep %}

{% step %}

### 4. Insérez le script d'intégration du Webchat

Maintenant que vous avez la structure du fichier prête, **collez** le **script d'intégration du Webchat** que vous avez copié dans les paramètres supplémentaires de votre connexion. Ce code doit être inséré **après la balise&#x20;**<kbd>**\<body>**</kbd>**&#x20;de la structure créée.**

{% hint style="info" %}
Vous ne savez pas où trouver ce code ? Accédez à la section [Script d'intégration](https://docs.hablla.com/french/hablla/parametres/connexions-et-integrations/webchat/pages/1c4be50e716b898e1843e7841dc634af8e2c65ed#id-2.1.-script-de-integracao).
{% endhint %}
{% endstep %}

{% step %}

### 5. Ouvrez le fichier avec l'extension Live Server

Maintenant que vous avez terminé les configurations, il suffit de **Enregistrer** enregistrer les modifications et d'ouvrir votre fichier à l'aide de l'extension Live Server dans VS Code. Pour cela, utilisez le raccourci **`Ctrl`**` ``+`` `**`S`** pour enregistrer puis cliquez avec le bouton droit sur le fichier et sélectionnez l'option **« Ouvrir avec Live Server ».**

<figure><img src="https://1879311494-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrmxWrIrMauHcIrsuqfGq%2Fuploads%2FJAUJMkGaTGKI9cKxG6LL%2F[DOCS]%20-%20Testando%20Webchat%20Localmente.gif?alt=media&#x26;token=d915c85a-adc4-497a-98e0-212a3f2c65ce" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.hablla.com/french/hablla/parametres/connexions-et-integrations/webchat/comment-tester-votre-webchat-localement.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.