Étape 1 : répartir en quatre groupes (chargement / config / framework / affichage)
Quel que soit votre « le chat n'est pas venu », limitez-le d'abord à quatre groupes — cela seul épargne la plupart des détours. Le logigramme clarifie la décision : vérifiez si le script a seulement chargé (meiqia.js dans F12), puis si c'est config, framework ou un problème de couche d'affichage. Pour les bases voir le guide d'intégration web 美洽.
Comment fonctionne l'intégration : pourquoi cette injection JS échoue / est bloquée
Une phrase suffit : le widget web 美洽 n'est pas un composant statique dans votre page — c'est un meiqia.js chargé de façon asynchrone depuis le domaine externe de 美洽 qui injecte dynamiquement un conteneur de chat (DOM / iframe) et ouvre une connexion persistante cross-origin. Pour que l'injection réussisse, il faut « le script chargé (bon emplacement, pas d'adblock), le conteneur non recouvert par le CSS / d'autres plugins, entId et domaine correspondants, et un remontage après un changement de route SPA ». Le diagramme ci-dessous dessine cette chaîne et quatre points de blocage — d'où le même code qui marche sur un site / framework mais pas sur un autre.
Code bien placé mais toujours invisible : lancez le panneau d'auto-vérification d'intégration
Si emplacement, meiqia.js 200 et entId sont tous confirmés mais il reste invisible, c'est en gros « adblock » ou « framework / empilement ». Le panneau ci-dessous est trié par importance : le vert est généralement bon, les rouges (adblock, empilement SPA / plugin tiers) sont les pièges fréquents. Les vérifier élément par élément localise vite.
Tableau complet des symptômes (comportement / positionnement officiel · cause racine L2)
Le tableau ci-dessous liste d'un coup les symptômes courants de non-affichage / erreur, chacun avec son positionnement officiel et sa cause racine L2. Le champ de recherche ci-dessus est alimenté par les données de ce tableau — cherchez le mot-clé rencontré.
| Symptôme | Groupe | Comportement L1 / positionnement officiel | Cause racine L2 |
|---|---|---|---|
| La fenêtre / bulle de chat ne s'affiche pas du tout | Échec de chargement | Le widget web 美洽 charge une fenêtre de chat flottante avec un seul snippet JS collé ; confirmez que le code est bien intégré et le site d'intégration configuré dans la console. | Le widget est meiqia.js injecté dans le DOM après un chargement asynchrone, donc « rien du tout » signifie souvent « le script n'a jamais chargé » : mauvais emplacement, bloqué par adblock / cache, ou domaine / entId incohérents, donc l'injection n'a jamais eu lieu. |
| Script chargé mais bouton de chat manquant | Problèmes d'affichage | Le code du widget s'adapte au site et affiche un bouton de chat ; si l'affichage échoue, vérifiez s'il est masqué par des styles ou si l'initialisation a été interrompue. | Si le script charge mais le bouton manque, c'est souvent un problème de « couche d'affichage » : le CSS global écrase la position du bouton / met display:none, le z-index perd, ou un autre élément fixe le recouvre ; une autre erreur JS peut aussi interrompre l'initialisation. |
| meiqia.js bloqué par une extension d'adblock | Échec de chargement | Le script de chat 美洽 vient d'un domaine tiers ; si une extension de blocage est installée, elle peut le traiter comme pub / traqueur et empêcher le chargement — désactivez le blocage ou ajoutez à la liste blanche. | ERR_BLOCKED_BY_CLIENT signifie qu'une extension de navigateur (AdBlock / uBlock / AdGuard) a bloqué la requête via ses listes de filtres. Le script 美洽 est « tiers hors domaine + communication temps réel », que ces règles confondent souvent avec pub / traqueur, causant un faux échec « console correcte, côté utilisateur absent ». |
| meiqia.js 404 / mauvais statut / contenu mixte | Échec de chargement | Après déploiement, cherchez meiqia.js dans le panneau Network ; un statut 200 signifie que le script est bien placé et chargé. | Causes courantes de non-200 : code retenu par le cache page / CDN (non rafraîchi après publication), chargement sur une page HTTP / chaîne de certificat incomplète déclenchant un blocage de contenu mixte, ou code cassé / partiellement copié. Si cette étape échoue, l'injection et la connexion n'ont jamais lieu. |
| Code mal placé (blocage head / sans effet) | Échec de chargement | 美洽 recommande de coller le code en bas de page, avant </body> ; le widget s'exécute après le chargement du contenu principal. | Le widget doit injecter son conteneur après que le DOM est prêt. Dans <head> il bloque le rendu (écran blanc d'abord sur réseau lent) ou s'exécute avant que le DOM soit prêt et échoue ; dans certains scopes async / module l'ordre de chargement peut aussi mal tourner. |
| Style cassé de la fenêtre / bouton de chat | Problèmes d'affichage | Le widget injecte ses propres styles et s'adapte au site ; les conflits avec les styles globaux peuvent causer des anomalies visuelles. | Le script 美洽 injecte du CSS à l'exécution ; si les styles globaux (sélecteurs universels / règles haute priorité / resets) écrasent ses classes en premier, la position, l'empilement et les polices cassent — un effet de bord de « injection dynamique + partage d'un même espace de style du document ». |
| Bouton hors écran / recouvert | Problèmes d'affichage | Le bouton du widget apparaît en flottant à position fixe ; s'il est recouvert par d'autres éléments fixes, ajustez l'empilement ou la position. | D'autres éléments position:fixed du site (retour en haut, pub flottante, une barre de support perso) avec un z-index supérieur recouvrent le bouton 美洽, ou le thème calcule mal ses coordonnées, le laissant « hors écran / recouvert ». |
| Conflit de DOM avec plugin / analytics tiers | Problèmes d'affichage | D'autres scripts de la page qui modifient le DOM ou interceptent des requêtes peuvent affecter le chargement et l'affichage normaux du widget. | Les scripts de heatmap / analytics / conversion réécrivent le DOM, injectent des overlays ou interceptent des requêtes ; comme eux et 美洽 injectent dans le même document, l'empilement / les événements interfèrent et le conteneur 美洽 est recouvert ou son init interrompu. |
| Le widget disparaît après un changement de route SPA | Intégration framework | Pour les apps à page unique (SPA), utilisez les hooks de route du framework pour charger / initialiser le widget 美洽 afin qu'il colle au routage du frontend. | Une SPA change de vues via le routage du frontend, détruisant / recréant le DOM, mais meiqia.js injecte une fois au premier chargement par défaut et n'est pas recréé seul au changement de route, donc « on change de page, le chat disparaît ». |
| Init manuelle nécessaire (manualInit / init) | Intégration framework | Ajoutez _MEIQIA('manualInit') après le code d'intégration 美洽 pour stopper l'auto-init après le téléchargement ; appelez _MEIQIA('init') pour initialiser manuellement au besoin. | Par défaut 美洽 s'auto-initialise juste après le téléchargement ; quand vous avez besoin du conteneur prêt / des infos client transmises / de la route stable d'abord, ce timing est « trop tôt » — passez à l'init manuelle pour contrôler la séquence. |
| entId incohérent / les agents ne reçoivent pas de chats | Config / autorisation | Le nombre après entId dans le code est l'id unique de votre entreprise ; s'il ne correspond pas au backoffice, les agents ne peuvent pas traiter le chat — trouvez l'ID d'entreprise dans Paramètres - Équipe - recherche d'ID. | entId lie le snippet à un compte d'entreprise précis. Avec le code d'autrui / d'un autre environnement, ou des comptes mélangés, le frontend charge la fenêtre mais les messages vont à « une autre entreprise », donc ce backoffice n'en reçoit aucun — le classique « semble correct mais ne reçoit rien ». |
| Domaine du site non autorisé dans la console | Config / autorisation | La console 美洽 permet « Ajouter un site d'intégration », chacun avec sa config ; un nouveau site doit être configuré dans la console avant de s'intégrer correctement. | 美洽 gère plusieurs sites comme « sites d'intégration » ; le domaine doit être enregistré / autorisé dans la console pour être reconnu. Un nouveau domaine de production non ajouté peut ne pas être accepté ou mappé à la mauvaise config. |
| Multi-site / sous-canal (sonde) croisé | Config / autorisation | 美洽 permet de déployer différents widgets et liens de chat par site (sous-canaux / sonde) ; en plus du site par défaut vous pouvez en ajouter d'autres, chacun avec sa config. | Différentes lignes métier ont besoin de différents groupes d'agents / messages auto, mais si chaque site partage l'unique snippet par défaut, les sources ne se distinguent pas et les configs se croisent. Les sous-canaux (sonde) sont conçus pour « une entreprise, plusieurs entrées, routées ». |
| Chat web mobile ne s'affiche pas / nécessite un déploiement à part | Mobile / SDK | Le code du widget s'adapte au site ; mobile / PC utilisent le même snippet mais doivent être déployés séparément. | Beaucoup d'équipes ont des pages / templates PC et mobile séparés et n'ont collé le code que dans le template PC. Le snippet est le même et s'auto-adapte, mais l'étape « coller » doit aussi se faire dans le template mobile ; omise, le mobile n'a pas de chat. |
| Intégration du SDK natif d'app / AppKey | Mobile / SDK | L'intégration in-app nécessite un AppKey du backoffice 美洽 (Paramètres - Intégration - SDK, « Ajouter config APP »), et les développeurs intègrent le SDK iOS / Android selon la doc et le démo officiels. | Une app utilise le SDK natif, pas le JS web : d'abord « Ajouter config APP » pour un AppKey, puis intégrez le SDK par plateforme pour l'UI de chat, les non-lus, le push, etc. — un chemin totalement différent du widget web. |
| Le push de messages du SDK n'arrive pas | Mobile / SDK | Le push du SDK 美洽 a deux modes : avec « pas de push », les messages de l'agent n'arrivent que dans l'app (ouvrez-la pour recevoir) ; avec un « serveur de push perso », les utilisateurs reçoivent un push sur le téléphone même après avoir quitté l'app. | Le « push hors ligne » manquant signifie souvent que le mode de push est « pas de push », ou qu'il manque le serveur de push perso / les certificats de push par plateforme. Le chemin est « 美洽 → serveur de l'app → téléphone de l'utilisateur » ; un maillon manquant ne laisse qu'une réception in-app. |
| Masquer le bouton par défaut / entrée perso | Appels API | Appelez _MEIQIA('withoutBtn') pour ne pas montrer le bouton natif de 美洽 ; après un init réussi, appelez _MEIQIA('showPanel') pour ouvrir le chat. | Par défaut le bouton flottant natif est rendu ; pour votre entrée vous devez déclarer « pas de bouton natif » avant / pendant l'init et lier « ouvrir le chat » à votre élément — une question de timing d'API, pas un « bouton cassé ». |
| Transmettre / synchroniser les infos client sans effet | Appels API | Le widget web 美洽 propose les API « transmettre les infos client », « synchroniser l'identité client » et « ajouter une info d'événement perso » pour amener les données du visiteur dans le chat. | Ces API doivent être appelées dans le bon timing d'init : après un init réussi (ou dans le timing manualInit + init). Trop tôt / tard, ou de mauvais formats de champ, et c'est « réglé mais sans effet ». |
美洽 causes de non-affichage & comparatif des méthodes d'intégration (estimation 2026)
Ce qui suit sont des estimations 2026 synthétisées depuis l'aide officielle 美洽 (Canaux d'accès / API du widget web JavaScript) et le dépannage public d'intégration (pas des engagements de l'éditeur ni des mesures de première main ; à titre indicatif, varient selon la version et la politique du navigateur) :
| Dimension | Estimation / comparaison |
|---|---|
| Répartition des causes de non-affichage (communauté / tickets · est.) | emplacement / non chargé ~35% > adblock / extension navigateur ~25% > config / autorisation (entId / domaine) ~20% > framework (SPA) ~12% > conflit de style / plugin tiers ~8% |
| Ce qu'est vraiment l'intégration | le widget web = JS asynchrone tiers hors domaine qui injecte le DOM + une connexion persistante cross-origin (pas un composant statique intégré) ; d'où l'effet de l'emplacement, des règles d'adblock, de l'empilement CSS, du cycle de vie SPA |
| Intégration par plateforme (est.) | web PC / mobile = widget JS (même code, déployé à part) ; app = SDK natif (AppKey) ; WeChat / Douyin / RED = intégration autorisée par canal |
| Impact de l'adblock (est.) | environ 30-40% des utilisateurs PC utilisent une extension d'adblock → le script de chat tiers est bloqué par les règles pub (ERR_BLOCKED_BY_CLIENT), cause principale de « console correcte, côté utilisateur absent » |
| Délai de mise en ligne du widget JS (officiel) | collez le JS dédié en bas de page et il est en ligne en environ 3-5 minutes ; entId est l'id unique de l'entreprise, et un écart avec le backoffice laisse les agents sans chats |
Base de l'estimation : ligne de base des sources + extrapolation temporelle (meiqia.com/help Canaux d'accès / widget web JavaScript, guide d'intégration meiqia.im, dépannage public, 2026) ; varie selon la version et la politique de blocage du navigateur. Suivez les infos officielles 美洽 les plus récentes. Non officiel · localisation LLM.
Cinq méthodes d'intégration 美洽 comparées (code / difficulté / fonctions / scénario / délai de mise en ligne)
Quelle méthode d'intégration ? Le comparatif ci-dessous synthétise la doc officielle 美洽 pour une référence transversale rapide (volume de code, fonctions, meilleure adéquation, délai de mise en ligne). La plupart des sites choisissent le « widget JS web ».
| Méthode d'intégration | Code / difficulté | Fonctions complètes | Idéal pour | Délai de mise en ligne |
|---|---|---|---|---|
| Widget JS web | un snippet JS · faible | le plus complet (flottant / popup / accueil auto / parcours visiteur) | sites PC + mobile (recommandé officiel) | ~3-5 min |
| Lien de chat | sans code · minimal | chat basique | sans technique / poser un lien de chat rapide | instantané |
| API / SDK WebIM | nécessite dev · élevé | personnalisation poussée (UI perso / système / intégration commandes) | équipes avec capacité dev pour fusion poussée | selon dev |
| SDK natif d'app | intégrer SDK · élevé | chat in-app + push de messages | apps iOS / Android | selon dev |
| Config rapide CMS | plugin / un clic · faible | comme le widget JS | sites WordPress / Fkw / Shopify | minutes |
Canal / scénario → carte de résultat d'intégration
Le même 美洽 s'intègre différemment selon le canal / scénario. La carte ci-dessous montre les canaux courants : vert = coller et c'est bon, ambre = nécessite un réglage (déploiement à part / init / liste blanche), rouge = changer de méthode par défaut (adblock / entId / l'app utilise le SDK).
Questions fréquentes
美洽 La fenêtre / bulle de chat ne s'affiche pas du tout — comment résoudre ?
Le widget web 美洽 charge une fenêtre de chat flottante avec un seul snippet JS collé ; confirmez que le code est bien intégré et le site d'intégration configuré dans la console. Le widget est meiqia.js injecté dans le DOM après un chargement asynchrone, donc « rien du tout » signifie souvent « le script n'a jamais chargé » : mauvais emplacement, bloqué par adblock / cache, ou domaine / entId incohérents, donc l'injection n'a jamais eu lieu. F12 → Network, cherchez meiqia.js : pas de requête → code sans effet (vérifiez l'emplacement / videz le cache) ; requête mais non-200 → bloqué ou problème de chemin ; tout est bon mais toujours masqué → vérifiez entId / autorisation de domaine et les groupes ci-dessous.
美洽 Script chargé mais bouton de chat manquant — comment résoudre ?
Le code du widget s'adapte au site et affiche un bouton de chat ; si l'affichage échoue, vérifiez s'il est masqué par des styles ou si l'initialisation a été interrompue. Si le script charge mais le bouton manque, c'est souvent un problème de « couche d'affichage » : le CSS global écrase la position du bouton / met display:none, le z-index perd, ou un autre élément fixe le recouvre ; une autre erreur JS peut aussi interrompre l'initialisation. F12 → Elements, trouvez le conteneur 美洽 — présent, masqué ou hors écran ?; désactivez temporairement le CSS / autres scripts perso pour retester ; vérifiez la console pour une erreur ayant interrompu l'exécution.
美洽 meiqia.js bloqué par une extension d'adblock — comment résoudre ?
Le script de chat 美洽 vient d'un domaine tiers ; si une extension de blocage est installée, elle peut le traiter comme pub / traqueur et empêcher le chargement — désactivez le blocage ou ajoutez à la liste blanche. ERR_BLOCKED_BY_CLIENT signifie qu'une extension de navigateur (AdBlock / uBlock / AdGuard) a bloqué la requête via ses listes de filtres. Le script 美洽 est « tiers hors domaine + communication temps réel », que ces règles confondent souvent avec pub / traqueur, causant un faux échec « console correcte, côté utilisateur absent ». Retestez en navigation privée ou avec l'adblock désactivé — s'il apparaît, le blocage était la cause ; demandez aux utilisateurs d'ajouter le site à la liste blanche ; le frontend peut charger le script en différé / conditionnellement pour contourner certaines règles auto.
美洽 meiqia.js 404 / mauvais statut / contenu mixte — comment résoudre ?
Après déploiement, cherchez meiqia.js dans le panneau Network ; un statut 200 signifie que le script est bien placé et chargé. Causes courantes de non-200 : code retenu par le cache page / CDN (non rafraîchi après publication), chargement sur une page HTTP / chaîne de certificat incomplète déclenchant un blocage de contenu mixte, ou code cassé / partiellement copié. Si cette étape échoue, l'injection et la connexion n'ont jamais lieu. Videz le cache CDN / navigateur (ou navigation privée) après publication ; assurez un HTTPS complet avec chaîne de certificat intègre et sans contenu mixte ; vérifiez que le code copié est complet et non échappé.
美洽 Code mal placé (blocage head / sans effet) — comment résoudre ?
美洽 recommande de coller le code en bas de page, avant </body> ; le widget s'exécute après le chargement du contenu principal. Le widget doit injecter son conteneur après que le DOM est prêt. Dans <head> il bloque le rendu (écran blanc d'abord sur réseau lent) ou s'exécute avant que le DOM soit prêt et échoue ; dans certains scopes async / module l'ordre de chargement peut aussi mal tourner. Placez le JS 美洽 dans le pied commun de chaque page, avant </body> ; pour les SPA voir l'entrée « route SPA » et utilisez manualInit ; assurez-vous qu'un bundler ne l'élimine pas par tree-shaking.
美洽 Style cassé de la fenêtre / bouton de chat — comment résoudre ?
Le widget injecte ses propres styles et s'adapte au site ; les conflits avec les styles globaux peuvent causer des anomalies visuelles. Le script 美洽 injecte du CSS à l'exécution ; si les styles globaux (sélecteurs universels / règles haute priorité / resets) écrasent ses classes en premier, la position, l'empilement et les polices cassent — un effet de bord de « injection dynamique + partage d'un même espace de style du document ». F12 pour voir quelle règle du site écrase le conteneur 美洽 ; restreignez les styles globaux / réduisez leur impact sur les classes génériques ; au besoin, demandez à 美洽 d'ajuster l'empilement du conteneur.
美洽 Bouton hors écran / recouvert — comment résoudre ?
Le bouton du widget apparaît en flottant à position fixe ; s'il est recouvert par d'autres éléments fixes, ajustez l'empilement ou la position. D'autres éléments position:fixed du site (retour en haut, pub flottante, une barre de support perso) avec un z-index supérieur recouvrent le bouton 美洽, ou le thème calcule mal ses coordonnées, le laissant « hors écran / recouvert ». Sélectionnez le conteneur 美洽 dans F12 pour voir les coordonnées / z-index réels ; remontez-le ou baissez le z-index de l'élément qui recouvre ; évitez d'empiler plusieurs flottants fixes dans un coin.
美洽 Conflit de DOM avec plugin / analytics tiers — comment résoudre ?
D'autres scripts de la page qui modifient le DOM ou interceptent des requêtes peuvent affecter le chargement et l'affichage normaux du widget. Les scripts de heatmap / analytics / conversion réécrivent le DOM, injectent des overlays ou interceptent des requêtes ; comme eux et 美洽 injectent dans le même document, l'empilement / les événements interfèrent et le conteneur 美洽 est recouvert ou son init interrompu. Désactivez les plugins suspects un par un pour localiser le conflit ; ajustez l'ordre de chargement / l'empilement du conteneur ; faites que les heatmaps évitent la zone du conteneur 美洽.
美洽 Le widget disparaît après un changement de route SPA — comment résoudre ?
Pour les apps à page unique (SPA), utilisez les hooks de route du framework pour charger / initialiser le widget 美洽 afin qu'il colle au routage du frontend. Une SPA change de vues via le routage du frontend, détruisant / recréant le DOM, mais meiqia.js injecte une fois au premier chargement par défaut et n'est pas recréé seul au changement de route, donc « on change de page, le chat disparaît ». Utilisez _MEIQIA('manualInit') pour stopper l'auto-init et appelez _MEIQIA('init') dans un hook de route (React useEffect / Vue mounted / router afterEach) pour remonter à la demande ; évitez d'initialiser plusieurs instances.
美洽 Init manuelle nécessaire (manualInit / init) — comment résoudre ?
Ajoutez _MEIQIA('manualInit') après le code d'intégration 美洽 pour stopper l'auto-init après le téléchargement ; appelez _MEIQIA('init') pour initialiser manuellement au besoin. Par défaut 美洽 s'auto-initialise juste après le téléchargement ; quand vous avez besoin du conteneur prêt / des infos client transmises / de la route stable d'abord, ce timing est « trop tôt » — passez à l'init manuelle pour contrôler la séquence. Ajoutez _MEIQIA('manualInit') après le code ; appelez _MEIQIA('init') une fois les conditions prêtes (DOM / session / route) ; appelez les API de données dans l'ordre dans le timing d'init selon la doc.
Plus de réglages d'intégration : intégration web 美洽, intégration SDK d'APP ; pour débuter : guide 美洽. Une version complète avec recherche (incl. cet outil) aussi sur dépannage d'intégration 美洽 (GitHub Pages).