Intégration avancée

Le tableau de bord génère tout ce dont la plupart des sites ont besoin (Démarrer). Cette page s’adresse aux développeurs : attributs du script, langue du chat, API JavaScript et mode historique.

Une intégration affiche toujours un seul salon. Pour afficher un autre salon, créez une autre intégration dans le tableau de bord, ou utilisez @komozu/react avec le slug ou l’externalId du salon.

Attributs du script

Le script se colle là où le chat doit apparaître (ou n’importe où pour la bulle). Les attributs explicites l’emportent sur les réglages de l’intégration (cascade : thème Komozu < couleur du projet < intégration < attributs).

<script src="https://embed.komozu.com/komozu-embed.js" data-komozu-integration="int_…"
        data-komozu-primary-color="#0369A1" data-komozu-theme="dark" defer></script>

Attribut	Valeurs
`data-komozu-integration`	Identifiant public de l’intégration (`int_…`), obligatoire
`data-komozu-token`	Le jeton du membre connecté, écrit par votre serveur (Identifier vos utilisateurs). Vide ou absent : le chat invite à se connecter
`data-komozu-lang`	`en` ou `fr` (par défaut : la langue du navigateur du visiteur)
`data-komozu-target`	Sélecteur CSS de l’élément qui reçoit le chat intégré (par défaut : juste après la balise du script)
`data-komozu-primary-color`	`#RRGGBB`
`data-komozu-theme`	`auto`, `light`, `dark`
`data-komozu-surface`	`card`, `blend`
`data-komozu-height`	`auto` ou un nombre de pixels
`data-komozu-max-height`	pixels (hauteur auto)
`data-komozu-position`	`bottom-right`, `bottom-left` (bulle)
`data-komozu-radius`	`none`, `sm`, `md`, `lg`, `full`
`data-komozu-title`	titre du chat
`data-komozu-api-url`	URL de l’API, uniquement pour une API auto-hébergée (par défaut `https://api.komozu.com`)

Les images et vidéos sont un réglage du salon (page du salon → Réglages), pas de la page.

Langue

Le chat (boutons, statuts, messages d’erreur) est en anglais ou en français. Par défaut, il suit le navigateur du visiteur (français pour fr, fr-CA…, anglais sinon). Pour l’imposer :

script : data-komozu-lang="fr" ;
React : <KomozuChat … locale="fr" /> (@komozu/react).

`window.Komozu`

Le chargeur expose une seule API pour tous les chats de la page. Les appels faits avant que le chat soit prêt sont mis en file d’attente ; un événement DOM komozu:ready est émis sur window.

Komozu.open();                   // bulle
Komozu.close();
Komozu.toggle();
Komozu.setUser({ token });       // un utilisateur se connecte sans recharger la page
Komozu.setUser({ token: null }); // se déconnecte : le chat invite de nouveau à se connecter
Komozu.setTheme({ primaryColor: '#047857', mode: 'dark' });

Messages du widget hébergé (`postMessage`)

Entre la page et l’iframe (origines vérifiées des deux côtés) :

page → iframe : komozu:set_user { token }, komozu:set_theme { theme } ;
iframe → page : komozu:ready, komozu:resize { height } (mode intégré, hauteur auto), komozu:close (bulle), komozu:token_expired (l’API a refusé le jeton du membre : le chargeur écrit dans la console [Komozu] The member token was refused (revoked or invalid). Get a new one from your backend.).

Erreurs dans la console

Quand le chat ne peut pas s’afficher, rien n’est rendu et le chargeur en explique la raison dans la console du navigateur :

[Komozu] This integration doesn't exist or is disabled.
[Komozu] This domain isn't allowed for this project. Add it in Settings → Allowed domains.
[Komozu] data-komozu-integration is required. Copy the code of an integration from your dashboard.

Mode historique

Les scripts sans data-komozu-integration continuent de fonctionner, configurés entièrement par attributs :

<script src="https://embed.komozu.com/komozu-embed.js" data-komozu-client-id="kz_live_…" data-komozu-channel="general"
        data-komozu-layout="inline" data-komozu-surface="card" defer></script>

Ajoutez data-komozu-token de la même façon. Le tableau de bord ne génère plus cette forme ; préférez les intégrations, que vous pouvez modifier sans toucher à votre site.