Stap 1: verdeel in vier groepen (laden / config / framework / weergave)
Wat je «de chat kwam niet» ook is, beperk het eerst tot vier groepen — dit alleen bespaart de meeste omwegen. Het stroomschema verheldert de beslissing: controleer of het script überhaupt laadde (meiqia.js in F12), dan of het config, framework of een weergavelaag-probleem is. Voor de basis zie de 美洽 webintegratiegids.
Hoe integratie werkt: waarom deze JS-injectie faalt / wordt geblokkeerd
Eén zin volstaat: de 美洽-webwidget is geen statisch component in je pagina — het is een meiqia.js die asynchroon vanaf het externe domein van 美洽 wordt geladen en dynamisch een chatcontainer (DOM / iframe) injecteert en een langlevende cross-origin verbinding opent. Voor een geslaagde injectie is nodig «het script geladen (goede plaatsing, geen adblock), de container niet bedekt door CSS / andere plugins, entId en domein overeenkomend, en re-mount na een SPA-routewissel». Het diagram hieronder tekent deze keten en vier blokkeerpunten — daarom werkt dezelfde code op de ene site / framework maar niet op de andere.
Code goed geplaatst maar nog niet zichtbaar: draai het integratie-zelfcontrolepaneel
Als plaatsing, meiqia.js 200 en entId allemaal bevestigd zijn maar het nog niet verschijnt, is het in feite «adblock» of «framework / stapeling». Het paneel hieronder is geordend op belang: groen is meestal ok, de rode (adblock, SPA- / plugin-van-derden-stapeling) zijn de frequente valkuilen. Item voor item controleren lokaliseert snel.
Volledige symptoomtabel (gedrag / officiële positionering · L2-grondoorzaak)
De tabel hieronder somt in één keer de veelvoorkomende niet-verschijnen- / foutsymptomen op, elk met officiële positionering en L2-grondoorzaak. Het zoekvak boven wordt gevoed door de data van deze tabel — zoek het trefwoord dat je tegenkwam.
| Symptoom | Groep | L1-gedrag / officiële positionering | L2-grondoorzaak |
|---|---|---|---|
| Chatvenster / bubbel verschijnt helemaal niet | Laadfout | De 美洽-webwidget laadt een zwevend chatvenster met één geplakte JS-snippet; bevestig dat de code goed is ingebed en de integratiesite in de console is geconfigureerd. | De widget is meiqia.js die na een asynchrone lading in het DOM wordt geïnjecteerd, dus «helemaal niets» betekent meestal «het script is nooit geladen»: verkeerde plaatsing, geblokkeerd door adblock / cache, of niet-overeenkomend domein / entId, zodat de injectie nooit liep. |
| Script geladen maar chatknop ontbreekt | Weergaveproblemen | De widgetcode past zich aan de site aan en toont een chatknop; als de weergave faalt, controleer of hij door stijlen is verborgen of de initialisatie is onderbroken. | Als het script laadt maar de knop ontbreekt, is het meestal een «weergavelaag»-probleem: de site-brede CSS overschrijft de knoppositie / zet display:none, de z-index verliest, of een ander vast element bedekt hem; een andere JS-fout kan de initialisatie ook afbreken. |
| meiqia.js geblokkeerd door een adblock-extensie | Laadfout | Het 美洽-chatscript komt van een domein van derden; als er een blokkeer-extensie is geïnstalleerd, kan die het als advertentie / tracker behandelen en het laden verhinderen — schakel blokkeren uit of whitelist. | ERR_BLOCKED_BY_CLIENT betekent dat een browserextensie (AdBlock / uBlock / AdGuard) het verzoek via zijn filterlijsten blokkeerde. Het 美洽-script is «derden buiten het domein + realtime communicatie», wat zulke regels vaak verwarren met advertentie / tracker, een valse fout «console ok, gebruikerskant ontbreekt». |
| meiqia.js 404 / verkeerde status / gemengde inhoud | Laadfout | Zoek na het deployen meiqia.js in het Network-paneel; een 200-status betekent dat het script goed geplaatst en geladen is. | Veelvoorkomende niet-200-oorzaken: code vastgehouden door pagina- / CDN-cache (niet ververst na publicatie), laden op een HTTP-pagina / onvolledige certificaatketen die gemengde-inhoud-blokkering triggert, of gebroken / deels gekopieerde code. Faalt deze stap, dan gebeuren injectie en verbinding nooit. |
| Code verkeerd geplaatst (head-blokkering / geen effect) | Laadfout | 美洽 raadt aan de code onderaan de pagina te plakken, vóór </body>; de widget draait nadat de hoofdinhoud is geladen. | De widget moet zijn container injecteren nadat het DOM klaar is. In <head> blokkeert het de render (eerst leeg scherm bij zwak netwerk) of draait vóór DOM-gereedheid en faalt; in sommige async- / modulescopes kan de laadvolgorde ook misgaan. |
| Gebroken styling van chatvenster / knop | Weergaveproblemen | De widget injecteert eigen stijlen en past zich aan de site aan; conflicten met site-brede stijlen kunnen visuele afwijkingen veroorzaken. | Het 美洽-script injecteert CSS tijdens runtime; overschrijven site-brede stijlen (universele selectors / regels met hoge prioriteit / resets) zijn klassen eerst, dan breken positie, stapeling en lettertypen — een neveneffect van «dynamische injectie + delen van één documentstijlruimte». |
| Knop buiten beeld / bedekt | Weergaveproblemen | De widgetknop verschijnt als zwevend met vaste positie; als bedekt door andere vaste elementen, pas stapeling of positie aan. | Andere position:fixed-elementen van de site (terug naar boven, zwevende advertenties, een eigen supportbalk) met hogere z-index bedekken de 美洽-knop, of het thema berekent zijn coördinaten verkeerd, waardoor hij «buiten beeld / bedekt» is. |
| DOM-conflict met plugin / analytics van derden | Weergaveproblemen | Andere scripts op de pagina die het DOM wijzigen of verzoeken onderscheppen, kunnen het normale laden en weergeven van de widget beïnvloeden. | Heatmap- / analytics- / conversiescripts herschrijven het DOM, injecteren overlays of onderscheppen verzoeken; omdat zij en 美洽 in hetzelfde document injecteren, interfereren stapeling / events en raakt de 美洽-container bedekt of zijn init onderbroken. |
| Widget verdwijnt na een SPA-routewissel | Framework-integratie | Gebruik voor single-page apps (SPA) de route-hooks van het framework om de 美洽-widget te laden / initialiseren zodat hij bij de front-routing past. | Een SPA wisselt weergaven via front-routing, vernietigt / herbouwt het DOM, maar meiqia.js injecteert standaard eenmaal bij de eerste lading en wordt niet vanzelf herbouwd bij een routewissel, dus «wissel van pagina, chat weg». |
| Handmatige init nodig (manualInit / init) | Framework-integratie | Voeg _MEIQIA('manualInit') toe na de 美洽-embedcode om auto-init na de download te stoppen; roep _MEIQIA('init') aan om handmatig te initialiseren wanneer nodig. | Standaard initialiseert 美洽 direct na de download; wanneer je eerst de container gereed / klantgegevens doorgegeven / de route stabiel nodig hebt, is die timing «te vroeg» — schakel over op handmatige init om de volgorde te regelen. |
| entId komt niet overeen / agents krijgen geen chats | Config / autorisatie | Het getal na entId in de code is de unieke id van je bedrijf; bij verschil met de workbench kunnen agents de chat niet bedienen — vind de bedrijfs-ID in Instellingen - Team - ID-opzoeken. | entId bindt de snippet aan een specifiek bedrijfsaccount. Met andermans / een andere-omgeving-code, of door elkaar gehaalde accounts, laadt de front het venster maar gaan berichten naar «een ander bedrijf», dus deze workbench krijgt er geen — het klassieke «ziet er goed uit maar ontvangt niets». |
| Sitedomein niet geautoriseerd in de console | Config / autorisatie | De 美洽-console laat «Integratiesite toevoegen» toe, elk met eigen config; een nieuwe site moet in de console worden geconfigureerd voordat hij goed integreert. | 美洽 beheert meerdere sites als «integratiesites»; het domein moet in de console worden geregistreerd / geautoriseerd om herkend te worden. Een nieuw, niet-toegevoegd productiedomein wordt mogelijk niet geaccepteerd of op de verkeerde config gemapt. |
| Multi-site / subkanaal (probe) door elkaar | Config / autorisatie | 美洽 ondersteunt het deployen van verschillende widgets en chatlinks per site (subkanalen / probe); naast de standaardsite kun je er meer toevoegen, elk met eigen config. | Verschillende business lines hebben verschillende agentgroepen / automatische berichten nodig, maar als elke site de ene standaard-snippet deelt, zijn bronnen niet te onderscheiden en raken configs door elkaar. Subkanalen (probe) zijn ontworpen voor «één bedrijf, meerdere ingangen, gerout». |
| Mobiele webchat verschijnt niet / vereist aparte deploy | Mobiel / SDK | De widgetcode past zich aan de site aan; mobiel / pc gebruiken dezelfde snippet maar moeten apart worden gedeployed. | Veel teams hebben aparte pc- en mobiele pagina's / templates en plakten de code alleen in het pc-template. De snippet is hetzelfde en past zich aan, maar de «plak»-stap moet ook in het mobiele template gebeuren; weggelaten, dan heeft mobiel geen chat. |
| Native app-SDK-integratie / AppKey | Mobiel / SDK | In-app-integratie vereist een AppKey uit de 美洽-workbench (Instellingen - Integratie - SDK, «APP-config toevoegen»), en ontwikkelaars integreren de iOS- / Android-SDK volgens de officiële doc en demo. | Een app gebruikt de native SDK, niet web-JS: eerst «APP-config toevoegen» voor een AppKey, dan de SDK per platform integreren voor de chat-UI, ongelezen, push enz. — een totaal ander pad dan de webwidget. |
| SDK-berichtpush komt niet aan | Mobiel / SDK | 美洽-SDK-push heeft twee modi: bij «geen push» bereiken agentberichten alleen de app (open hem om te ontvangen); met een «eigen push-server» krijgen gebruikers push op de telefoon zelfs na het verlaten van de app. | Ontbrekende «offline-push» betekent meestal dat de push-modus «geen push» is, of er geen eigen push-server / push-certificaten per platform zijn. Het pad is «美洽 → app-server → telefoon van de gebruiker»; een ontbrekende schakel laat alleen in-app-ontvangst. |
| Standaardknop verbergen / eigen ingang | API-aanroepen | Roep _MEIQIA('withoutBtn') aan om de native 美洽-knop niet te tonen; na een geslaagde init roep _MEIQIA('showPanel') aan om de chat te openen. | Standaard wordt de native zwevende knop gerenderd; voor je eigen ingang moet je vóór / tijdens init «geen native knop» declareren en «chat openen» aan je element koppelen — een kwestie van API-timing, geen «kapotte knop». |
| Klantgegevens doorgeven / synchroniseren heeft geen effect | API-aanroepen | De 美洽-webwidget biedt de API's «klantgegevens doorgeven», «klantidentiteit synchroniseren» en «eigen event-info toevoegen» om bezoekersdata in de chat te brengen. | Deze API's moeten binnen de juiste init-timing worden aangeroepen: na een geslaagde init (of binnen de manualInit + init-timing). Te vroeg / laat, of verkeerde veldformaten, en het is «ingesteld maar zonder effect». |
美洽 oorzaken van niet verschijnen & vergelijking van integratiemethoden (schatting 2026)
Het volgende zijn 2026-schattingen gesynthetiseerd uit de officiële 美洽-help (Toegangskanalen / JavaScript-webwidget-API) en openbare integratie-troubleshooting (geen toezeggingen van de leverancier of eerstehands meting; ter referentie, verandert per versie en browserbeleid):
| Dimensie | Schatting / vergelijking |
|---|---|
| Verdeling van oorzaken van niet verschijnen (community / tickets · schat.) | plaatsing / niet geladen ~35% > adblock / browserextensie ~25% > config / autorisatie (entId / domein) ~20% > framework (SPA) ~12% > stijl- / plugin-van-derden-conflict ~8% |
| Wat integratie echt is | de webwidget = asynchrone JS van derden buiten het domein die het DOM injecteert + een langlevende cross-origin verbinding (geen ingebed statisch component); vandaar de invloed van plaatsing, adblock-regels, CSS-stapeling, SPA-levenscyclus |
| Integratie per platform (schat.) | pc- / mobiel web = JS-widget (zelfde code, apart gedeployed); app = native SDK (AppKey); WeChat / Douyin / RED = kanaal-geautoriseerde integratie |
| Impact van adblock (schat.) | ongeveer 30-40% van de pc-gebruikers gebruikt een adblock-extensie → het chatscript van derden wordt door advertentieregels geblokkeerd (ERR_BLOCKED_BY_CLIENT), een hoofdoorzaak van «console ok, gebruikerskant ontbreekt» |
| Live-tijd van de JS-widget (officieel) | plak de dedicated JS onderaan de pagina en hij gaat in ongeveer 3-5 minuten live; entId is de unieke bedrijfs-id, en een verschil met de workbench laat agents zonder chats |
Schattingsbasis: bronbasislijn + tijdsextrapolatie (meiqia.com/help Toegangskanalen / JavaScript-webwidget, meiqia.im-integratiegids, openbare troubleshooting, 2026); verandert per versie en browserblokkeerbeleid. Volg de nieuwste officiële 美洽-info. Niet-officieel · LLM-lokalisatie.
Vijf 美洽-integratiemethoden vergeleken (code / moeilijkheid / functies / scenario / live-tijd)
Welke integratiemethode? De vergelijking hieronder synthetiseert de officiële 美洽-doc voor een snelle kruisreferentie (codevolume, functies, beste fit, live-tijd). De meeste sites kiezen de «web-JS-widget».
| Integratiemethode | Code / moeilijkheid | Volledige functies | Beste voor | Live-tijd |
|---|---|---|---|---|
| Web-JS-widget | één JS-snippet · laag | het volledigst (zwevend / popup / autobegroeting / bezoekersspoor) | pc- + mobiele sites (officieel aanbevolen) | ~3-5 min |
| Chatlink | geen code · minimaal | basischat | geen techniek / snel een chatlink plaatsen | direct |
| API / WebIM-SDK | vereist dev · hoog | diepe aanpassing (eigen UI / systeem / orderintegratie) | teams met dev-capaciteit voor diepe fusie | afhankelijk van dev |
| Native app-SDK | SDK integreren · hoog | in-app-chat + berichtpush | iOS- / Android-apps | afhankelijk van dev |
| CMS-snelconfig | plugin / één klik · laag | zoals de JS-widget | WordPress- / Fkw- / Shopify-sites | minuten |
Kanaal / scenario → integratieresultaatkaart
Dezelfde 美洽 integreert anders per kanaal / scenario. De kaart hieronder toont veelvoorkomende kanalen: groen = plakken en klaar, oranje = setup nodig (aparte deploy / init / whitelist), rood = standaard van methode wisselen (adblock / entId / app gebruikt SDK).
Veelgestelde vragen
美洽 Chatvenster / bubbel verschijnt helemaal niet — hoe op te lossen?
De 美洽-webwidget laadt een zwevend chatvenster met één geplakte JS-snippet; bevestig dat de code goed is ingebed en de integratiesite in de console is geconfigureerd. De widget is meiqia.js die na een asynchrone lading in het DOM wordt geïnjecteerd, dus «helemaal niets» betekent meestal «het script is nooit geladen»: verkeerde plaatsing, geblokkeerd door adblock / cache, of niet-overeenkomend domein / entId, zodat de injectie nooit liep. F12 → Network, zoek meiqia.js: geen verzoek → code zonder effect (controleer plaatsing / wis cache); verzoek maar niet-200 → geblokkeerd of padprobleem; alles ok maar nog verborgen → controleer entId / domeinautorisatie en de groepen hieronder.
美洽 Script geladen maar chatknop ontbreekt — hoe op te lossen?
De widgetcode past zich aan de site aan en toont een chatknop; als de weergave faalt, controleer of hij door stijlen is verborgen of de initialisatie is onderbroken. Als het script laadt maar de knop ontbreekt, is het meestal een «weergavelaag»-probleem: de site-brede CSS overschrijft de knoppositie / zet display:none, de z-index verliest, of een ander vast element bedekt hem; een andere JS-fout kan de initialisatie ook afbreken. F12 → Elements, vind de 美洽-container — aanwezig, verborgen of buiten beeld?; schakel tijdelijk eigen CSS / scripts uit om opnieuw te testen; controleer de console op een fout die de uitvoering afbrak.
美洽 meiqia.js geblokkeerd door een adblock-extensie — hoe op te lossen?
Het 美洽-chatscript komt van een domein van derden; als er een blokkeer-extensie is geïnstalleerd, kan die het als advertentie / tracker behandelen en het laden verhinderen — schakel blokkeren uit of whitelist. ERR_BLOCKED_BY_CLIENT betekent dat een browserextensie (AdBlock / uBlock / AdGuard) het verzoek via zijn filterlijsten blokkeerde. Het 美洽-script is «derden buiten het domein + realtime communicatie», wat zulke regels vaak verwarren met advertentie / tracker, een valse fout «console ok, gebruikerskant ontbreekt». Test opnieuw in incognito of met adblock uit — verschijnt het, dan was blokkeren de oorzaak; vraag gebruikers de site te whitelisten; de front-end kan het chatscript vertraagd / voorwaardelijk laden om sommige autoregels te omzeilen.
美洽 meiqia.js 404 / verkeerde status / gemengde inhoud — hoe op te lossen?
Zoek na het deployen meiqia.js in het Network-paneel; een 200-status betekent dat het script goed geplaatst en geladen is. Veelvoorkomende niet-200-oorzaken: code vastgehouden door pagina- / CDN-cache (niet ververst na publicatie), laden op een HTTP-pagina / onvolledige certificaatketen die gemengde-inhoud-blokkering triggert, of gebroken / deels gekopieerde code. Faalt deze stap, dan gebeuren injectie en verbinding nooit. Wis de CDN- / browsercache (of incognito) na publicatie; zorg voor volledig HTTPS met een intacte certificaatketen en zonder gemengde inhoud; controleer of de gekopieerde code volledig en niet-escaped is.
美洽 Code verkeerd geplaatst (head-blokkering / geen effect) — hoe op te lossen?
美洽 raadt aan de code onderaan de pagina te plakken, vóór </body>; de widget draait nadat de hoofdinhoud is geladen. De widget moet zijn container injecteren nadat het DOM klaar is. In <head> blokkeert het de render (eerst leeg scherm bij zwak netwerk) of draait vóór DOM-gereedheid en faalt; in sommige async- / modulescopes kan de laadvolgorde ook misgaan. Zet de 美洽-JS in de gemeenschappelijke footer van elke pagina, vóór </body>; voor SPA's zie het item «SPA-route» en gebruik manualInit; zorg dat een bundler hem niet via tree-shaking verwijdert.
美洽 Gebroken styling van chatvenster / knop — hoe op te lossen?
De widget injecteert eigen stijlen en past zich aan de site aan; conflicten met site-brede stijlen kunnen visuele afwijkingen veroorzaken. Het 美洽-script injecteert CSS tijdens runtime; overschrijven site-brede stijlen (universele selectors / regels met hoge prioriteit / resets) zijn klassen eerst, dan breken positie, stapeling en lettertypen — een neveneffect van «dynamische injectie + delen van één documentstijlruimte». F12 om te zien welke siteregel de 美洽-container overschrijft; versmal de site-brede stijlen / verminder de impact op generieke klassen; vraag indien nodig 美洽 de containerstapeling aan te passen.
美洽 Knop buiten beeld / bedekt — hoe op te lossen?
De widgetknop verschijnt als zwevend met vaste positie; als bedekt door andere vaste elementen, pas stapeling of positie aan. Andere position:fixed-elementen van de site (terug naar boven, zwevende advertenties, een eigen supportbalk) met hogere z-index bedekken de 美洽-knop, of het thema berekent zijn coördinaten verkeerd, waardoor hij «buiten beeld / bedekt» is. Selecteer de 美洽-container in F12 om echte coördinaten / z-index te zien; verhoog hem of verlaag de z-index van het bedekkende element; vermijd meerdere vaste zwevers in één hoek te stapelen.
美洽 DOM-conflict met plugin / analytics van derden — hoe op te lossen?
Andere scripts op de pagina die het DOM wijzigen of verzoeken onderscheppen, kunnen het normale laden en weergeven van de widget beïnvloeden. Heatmap- / analytics- / conversiescripts herschrijven het DOM, injecteren overlays of onderscheppen verzoeken; omdat zij en 美洽 in hetzelfde document injecteren, interfereren stapeling / events en raakt de 美洽-container bedekt of zijn init onderbroken. Schakel verdachte plugins één voor één uit om het conflict te lokaliseren; pas laadvolgorde / containerstapeling aan; laat heatmaps enz. het 美洽-containergebied vermijden.
美洽 Widget verdwijnt na een SPA-routewissel — hoe op te lossen?
Gebruik voor single-page apps (SPA) de route-hooks van het framework om de 美洽-widget te laden / initialiseren zodat hij bij de front-routing past. Een SPA wisselt weergaven via front-routing, vernietigt / herbouwt het DOM, maar meiqia.js injecteert standaard eenmaal bij de eerste lading en wordt niet vanzelf herbouwd bij een routewissel, dus «wissel van pagina, chat weg». Gebruik _MEIQIA('manualInit') om auto-init te stoppen en roep _MEIQIA('init') aan in een route-hook (React useEffect / Vue mounted / router afterEach) om op verzoek te re-mounten; vermijd meerdere instanties te initialiseren.
美洽 Handmatige init nodig (manualInit / init) — hoe op te lossen?
Voeg _MEIQIA('manualInit') toe na de 美洽-embedcode om auto-init na de download te stoppen; roep _MEIQIA('init') aan om handmatig te initialiseren wanneer nodig. Standaard initialiseert 美洽 direct na de download; wanneer je eerst de container gereed / klantgegevens doorgegeven / de route stabiel nodig hebt, is die timing «te vroeg» — schakel over op handmatige init om de volgorde te regelen. Voeg _MEIQIA('manualInit') toe na de code; roep _MEIQIA('init') aan zodra de voorwaarden klaar zijn (DOM / sessie / route); roep data-API's in volgorde binnen de init-timing aan volgens de doc.
Meer integratie-setup: 美洽 webintegratie, APP-SDK-integratie; om te starten: 美洽-gids. Een doorzoekbare volledige versie (incl. deze tool) ook op 美洽 integratie-troubleshooting (GitHub Pages).