> 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-creer-votre-connexion-webchat.md).

# Comment créer votre connexion Webchat

Étape par étape pour créer la connexion Webchat dans Hablla : nouvelle connexion, paramètres supplémentaires et activation du script d’intégration sur votre site.

Pour créer votre connexion Webchat, nous allons diviser ce guide pratique en trois étapes : la création de la connexion, le réglage des paramètres supplémentaires du canal et, enfin, l’activation du Webchat sur votre site.

{% stepper %}
{% step %}

## 1. Création de la connexion

**1.1.** Pour créer votre connexion, vous devez accéder aux paramètres de votre espace de travail en cliquant sur <kbd>**Paramètres**</kbd> (l’icône d’engrenage) dans le coin supérieur droit de votre écran.

**1.2.** Accédez à l’onglet des connexions, dans le menu latéral gauche, en localisant et en cliquant sur l’option <kbd>**Connexions et intégrations**</kbd>

**1.3.** Localisez la carte correspondant au **Web Chat** et cliquez sur le bouton : <kbd>**+ Ajouter**</kbd>

<figure><img src="https://1879311494-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrmxWrIrMauHcIrsuqfGq%2Fuploads%2FVyl7lfdQVYvZU0TOHtPq%2Fconnections.png?alt=media&#x26;token=d020ace4-f98b-40a9-8f3a-b82aa9e3906b" alt=""><figcaption></figcaption></figure>

**1.4.** Sur l’écran de **Nouvelle connexion**, remplissez les champs de <kbd>**Nom**</kbd> qui définit comment la connexion sera identifiée dans Hablla et le <kbd>**Secteur**</kbd> qui définit vers quel secteur les demandes de ce canal seront orientées.

**1.5.** Après avoir effectué ces réglages, nous pouvons enregistrer les configurations créées en cliquant sur le bouton <kbd>**Créer la connexion**</kbd>

<figure><img src="https://1879311494-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrmxWrIrMauHcIrsuqfGq%2Fuploads%2Fts3Fyw1mGS3fJs62volJ%2F%5BDOCS%5D%20-%20Como%20Criar%20a%20conex%C3%A3o%20de%20Webchat.gif?alt=media&#x26;token=fc0b83dc-43a6-4695-9600-ea7c47a73b57" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Le secteur doit exister avant de créer la connexion. Si le secteur souhaité n’est pas encore enregistré, créez-le dans Hablla avant de commencer le processus.
{% endhint %}
{% endstep %}

{% step %}

## 2. Paramètres supplémentaires

Maintenant que votre connexion est déjà créée, nous pouvons passer aux paramètres supplémentaires de votre Webchat.

C’est dans cette section que vous trouverez le script d’intégration (le code qui active le Webchat sur votre site) et que vous effectuerez également tous les réglages visuels du canal. Ci-dessous, nous expliquons chacune des options disponibles.

### **2.1. Script d’intégration**

En haut de cette section se trouve le script qui active le Webchat sur votre site. Pour activer votre Webchat, il suffit de copier le code et de coller l’extrait sur votre site.

La recommandation pour l’activation est d’insérer le code copié **après l’ouverture de la balise** **`<body>`**. Le script lui-même utilise un chargement asynchrone, ce qui réduit l’impact sur les performances de la page ou du site.

{% hint style="warning" %}
**Exception :** si votre système doit utiliser des fonctions comme **`setManualId`** dès le début, le script peut devoir être chargé plus tôt, notamment dans les systèmes où la connexion a lieu à l’ouverture de la page.
{% endhint %}

<figure><img src="https://1879311494-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrmxWrIrMauHcIrsuqfGq%2Fuploads%2Fp837lwqxGQ8ZOqAkfkSc%2F[DOCS]%20-%20Como%20abrir%20c%C3%B3digo%20de%20integra%C3%A7%C3%A3o.gif?alt=media&#x26;token=39b2028d-711a-45c4-a308-56a33382c03f" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Cliquez sur la **flèche vers le bas** à côté du texte "**copier le code**" afin d’afficher le code d’intégration généré et de modifier le mode de recherche de votre Webchat.
{% endhint %}

### **2.2. Identification du canal**

Ici, vous définissez comment le canal sera identifié et à qui les demandes seront orientées :

<table><thead><tr><th width="231.5516357421875">Nom du champ</th><th>Ce que cela fait</th></tr></thead><tbody><tr><td><strong>Nom du canal</strong></td><td>Nom affiché dans les connexions Webchat</td></tr><tr><td><strong>Secteur</strong></td><td>Équipe responsable des demandes.</td></tr><tr><td><strong>Heures d’ouverture</strong></td><td>Définit la plage horaire pendant laquelle le canal sera disponible.</td></tr></tbody></table>

<figure><img src="https://1879311494-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrmxWrIrMauHcIrsuqfGq%2Fuploads%2FmwuG01hYeS9qnngbGvAZ%2Fidentificacao_canal%20(1).png?alt=media&#x26;token=bb40ef28-ba90-4f4f-9a19-5a996c167a83" alt=""><figcaption></figcaption></figure>

### 2.3. Informations d’entrée

Dans cette section, vous configurez les messages qui apparaissent lorsque le widget de votre Webchat est chargé sur votre page ou site :

<table><thead><tr><th width="231.5516357421875">Nom du champ</th><th>Ce que ce paramètre fait</th></tr></thead><tbody><tr><td><strong>Message de bienvenue</strong></td><td>Affichée en flottant à côté du bouton lorsque la bulle est chargée sur le site.</td></tr><tr><td><strong>Message sous le nom</strong> <em>(Lorsque vous êtes en ligne)</em></td><td>Le message affiché lorsqu’ils sont <strong>dans les heures d’ouverture</strong> configurées.</td></tr><tr><td><strong>Message sous le nom</strong> <em>(Lorsque vous êtes hors ligne)</em></td><td>Le message affiché lorsqu’ils sont <strong>en dehors des heures d’ouverture</strong> configurées.</td></tr></tbody></table>

<figure><img src="https://1879311494-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrmxWrIrMauHcIrsuqfGq%2Fuploads%2F4sv1gAYUWSeHD60XFPVQ%2Finformacoes_entrada%20(1).png?alt=media&#x26;token=f69dcd84-165d-4b52-9835-51bd944f8225" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Si votre utilisateur (votre client sur votre site ou page) reçoit un message et que le widget de conversation est fermé, le message reçu apparaîtra en flottant à côté du widget.
{% endhint %}

### 2.4. Mise en page et design

À cette étape, vous ajustez visuellement votre Webchat pour personnaliser la manière dont il sera affiché sur votre page ou site, en alignant le canal sur l’identité visuelle de votre marque.

Pour consulter en détail toutes les options de personnalisation disponibles, accédez à la section [Personnalisation visuelle](https://docs.hablla.com/french/hablla/parametres/connexions-et-integrations/webchat/pages/5d2e442f73fc37cc99e87f9492c35a81a8369ed3#id-2.-personalizacao-visual).

{% hint style="info" %}
Pendant que vous effectuez les modifications de mise en page et de design, un aperçu en temps réel s’affiche dans le coin inférieur droit de votre écran ou à l’emplacement que vous avez choisi pour le widget, afin que vous puissiez suivre vos modifications.
{% endhint %}

<figure><img src="https://1879311494-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrmxWrIrMauHcIrsuqfGq%2Fuploads%2F8swZfy9ycwtQDE5adRJs%2F[DOCS]%20-%20Configura%C3%A7%C3%A3o%20de%20Layout%20e%20Design%20de%20Webchat.gif?alt=media&#x26;token=38f87f1e-4b49-4a5c-8b3b-16547dd2c69a" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

## **3. Activer le webchat sur votre site**

Après avoir finalisé les paramètres de votre Webchat, il ne nous reste plus qu’à l’activer sur votre site ou page web. Pour que le Webchat soit affiché, il suffit d’insérer le code obtenu dans le **Script d’intégration** après le début de la balise **`<body>`** de votre site et attendre le temps de propagation.

Si vous n’avez pas accès ou ne parvenez pas à modifier le code source de votre site, vous pouvez demander l’aide de personnel qualifié disposant des accès nécessaires pour effectuer cette configuration.
{% 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-creer-votre-connexion-webchat.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.
