Canal Widget — Vue d'ensemble

Le canal Widget reçoit les demandes d'assistance et de devis depuis le site web. Les visiteurs ouvrent une conversation sur le site ; les messages arrivent dans Quoting24 comme des tickets et les opérateurs répondent depuis l'interface habituelle, avec la même logique que les autres canaux.

L'interface est dans un iframe. Le site hôte a besoin d'un script et, lorsque les données sont déjà connues, d'un appel à init(). Angular, un client Supabase ou un accès direct à la base Quoting24 ne sont pas nécessaires.

Quelle intégration choisir

Associer une entreprise et restaurer l'historique sont deux opérations distinctes. external_id, company_name, name, phone et email n'autorisent pas l'accès aux conversations d'une autre personne. Un utilisateur déjà authentifié sur le site reste un invité du widget tant que le site ne transmet pas un credential de restauration valide.

Cas	À implémenter	Continuité	Section
Site public, visiteur inconnu	Script seul. Le visiteur remplit le formulaire de contact.	Session invité dans le même navigateur	Widget B2C
Site qui connaît déjà le profil et l'entreprise	Script et `init()` avec le profil et les données de l'entreprise	Session invité préremplie et association d'entreprise	Widget B2C
Portail avec historique personnel entre appareils	Aussi une intégration backend pour `external_user_id` et `restore_id`	Historique personnel sur le canal widget autorisé	Widget B2B
Contrat des champs, CSP, login/logout, provisioning	Guide pour développeurs	—	Intégration technique

Affiche un bouton flottant ou une conversation intégrée dans la page
Pour un nouveau visiteur, ouvre le formulaire avec les libellés Téléphone et Nom. Dans init() les champs s'appellent phone et name ; l'e-mail, si le site le connaît, s'appelle email
Si le site appelle init(), utilise les données déjà disponibles et peut lier le contact à une entreprise via external_id (web_code). Si l'entreprise manque et que company_name est aussi envoyé, il peut la créer
Ouvre une conversation gérée dans Quoting24 comme les autres canaux
Accepte les pièces jointes PDF, DOC/DOCX, JPG/JPEG et PNG, jusqu'à 10 MiB par fichier et 100 MiB de pièces référencées par conversation
Affiche le message d'accueil, le message de bienvenue et, hors horaires, la bannière configurée. La saisie des messages reste disponible

Le loader conserve le credential invité dans le localStorage du site, séparée par clé de widget. Si le stockage est bloqué, la continuité peut se limiter à la page courante. La session invité permet de relire la conversation la plus récente après la fermeture, dans le même navigateur. Un autre appareil exige la restauration authentifiée.

Où le configurer dans Quoting24

Ouvrez Paramètres → Canaux
Sélectionnez le canal Widget
Ouvrez la configuration

On y règle :

logo, couleur principale, position du bouton
message d'accueil, message de bienvenue, message hors horaires
domaines autorisés
code d'intégration (URL complète du script et clé publique du widget)

Les horaires du canal déterminent la bannière hors horaires.

Demandez à l'administrateur le code d'intégration et les domaines autorisés, y compris le recettage et le développement local. Utilisez l'URL et la clé du même environnement. Dans les exemples, remplacez HOTE_WIDGET et CLE_PUBLIQUE_WIDGET par les valeurs reçues.

Les domaines autorisés sont des noms d'hôte, par exemple shop.example.com ou localhost, sans https://, port, chemin ni préfixe *.. example.com autorise aussi ses sous-domaines. Une liste vide n'applique aucune restriction de domaine. Pour l'essai local, servez la page en HTTP : l'ouvrir comme fichier ne suffit pas.

Le logo, la couleur, la position et les messages se configurent dans Quoting24. Le company_name passé à init() est la raison sociale du client, pas le titre du widget. Il n'existe pas de paramètre public language ou locale : l'interface actuelle est en italien.

Deux façons de l'afficher sur le site

Bouton flottant

Le script ajoute le bouton après le chargement des réglages graphiques. Un clic ouvre la conversation. Sur mobile, la conversation flottante s'étend jusqu'à occuper le viewport.

Voir Widget B2C.

Conversation intégrée

La conversation occupe un conteneur de la page, avec une hauteur explicite. Il n'y a pas de bouton flottant : la mise en page et le titre viennent du site. Dans ce mode, open(), close() et toggle() n'ont pas d'effet. Le site contrôle la hauteur et la largeur du conteneur.

Voir Widget B2C.

Une seule instance par page : le loader expose un unique window.Quoting24Widget. Un second script ne crée pas un second widget.

Clé publique et secrets

Valeur	Où elle se trouve	À quoi elle sert
Clé publique du widget	URL du script	Sélectionne le canal. Elle est publique : ce n'est ni un credential personnel ni un secret d'intégration backend
Secret privé de l'intégration	Uniquement dans le backend du site	Autorise la création et la réutilisation de `restore_id`
`restore_id`	Stockage privé par utilisateur, dans le backend	Credential qui restaure l'historique de cette personne sur ce widget
Credential de session invité	`localStorage` du site, géré par le loader	Continuité invité dans le même navigateur, par clé de widget

Flux pour l'opérateur

Le visiteur ouvre la conversation sur le site et envoie un message
Quoting24 crée ou poursuit un ticket sur le canal Widget
Si l'initialisation a résolu un external_id, le contact est lié à l'entreprise qui a ce web_code. Une entreprise vient d'être créée par le widget a la raison sociale et, si elle a été envoyée, l'e-mail ; une entreprise déjà présente n'est pas renommée par init()
L'opérateur traite la demande et répond depuis la conversation
Le client voit les réponses dans le widget

Les messages du widget ne se suppriment que pour tout le monde.

La donnée vient du navigateur et le visiteur peut la modifier. Le lien à l'entreprise ne prouve pas l'identité et n'ouvre pas l'historique des autres contacts de cette entreprise.

Par où commencer

Configurez l'apparence, les horaires et les domaines dans Paramètres → Canaux → Widget
Site public ou portail qui préremplit le profil : Widget B2C
Historique de la même personne sur un autre navigateur : Widget B2B
Champs, création d'entreprise, CSP et liste de contrôle : Intégration technique