美洽（Meiqia）チャットが表示されない / 設置エラー 対処検索 - ウィジェット未読込・ボタン非表示・entId 不一致・SPA・SDK プッシュ
美洽 チャットが表示されない / 設置エラー 対処検索
図：美洽 チャット設置 非表示 / エラー 対処検索（L1 現象 + L2 根本原因 + 5 つの設置方式）
美洽のウェブ接客チャットがコードを貼っても表示されない、チャットボタンが出ない、コンソールに meiqia.js 拒否、または対話を受けられない？まず 3 つを切り分け——スクリプトがそもそも読み込まれていないのか（位置 / 広告ブロック / キャッシュ）、読み込まれたがページの装飾 / 重なりで隠れているのか、読み込みは正常だが設定が合っていないのか（entId / ドメイン / SPA ライフサイクル）。出会った症状やキーワード（例：非表示、広告ブロック、entid、spa、モバイル、sdk プッシュ）を検索し、まず L1 現象と公式の位置づけ、次に L2 根本原因と対処、最後に 5 つの設置方式と実例を確認。導入 / 設定は 美洽ダウンロード / 接客システム設置ガイド へ。
ステップ1：まずスクリプトが読込めたか確認、次に 4 分類
美洽のチャットが出ない時、9 割は 4 つのどれか。まずスクリプトが読み込まれたか——F12 → Network で meiqia.js を検索、リクエストが無い / 200 以外なら未読込。① 読込失敗——コードの位置ミス（</body> の前へ、<head> 不可）、広告ブロックルールで拒否（ERR_BLOCKED_BY_CLIENT）、CDN / ブラウザキャッシュ、HTTPS 証明書 / 混在コンテンツ；② 設定 / 許可——entId がワークベンチと不一致（読込めても対話を受けられない）、サイトのドメインが管理画面で未許可；③ フレームワーク——Vue/React/Next の SPA がルート遷移でコンテナを破棄しウィジェットが再構築されない；④ 表示 / モバイル / SDK——サイト CSS が吹き出しを画面外へ / 他プラグインが DOM を上書き、モバイルは別途設置、アプリ内は SDK。詳しくは 美洽サイト設置ガイド。
読込失敗位置 . 広告ブロック . キャッシュ . HTTPS美洽 JS は
の前に貼る（ 不可）；F12 → Network で meiqia.js のステータス（200 が正）を確認；ERR_BLOCKED_BY_CLIENT は広告ブロック拡張が多い——シークレットで再確認 / ホワイトリスト；公開後は CDN キャッシュをクリア；全サイト HTTPS・混在コンテンツ無しを確認。設定 / 許可entId . ドメイン許可 . サブチャネルentId は企業の一意 ID。ワークベンチと不一致だと「読込めても対話を受けられない」（設定-チーム-ID 照会で確認）；サイトのドメインは管理画面で「接入サイトを追加」して許可；事業ラインごとにサブチャネル（探頭）で個別設定し、1 つのコードを使い回さない。
フレームワークSPA . ルート遷移 . manualInitVue/React/Next の SPA はルート遷移で DOM を破棄し、ウィジェットは自動再構築されない；_MEIQIA('manualInit') で自動初期化を止め、ルートフック（useEffect / mounted）で必要に応じ _MEIQIA('init') して再マウント。
表示異常スタイル競合 . 重なり . 他プラグイン読込めたが見えない：サイト全体 CSS が吹き出し位置を上書き、またはヒートマップ / 解析 / SEO プラグインが DOM を変えてコンテナを覆う；F12 → Elements で meiqia コンテナを検索し、display:none、z-index 負け、画面外座標を確認。
モバイル / SDKモバイル Web . AppKey . プッシュモバイル / PC の Web は同じコードだが別途設置が必要；アプリ内はネイティブ SDK（まず管理画面で「APP 設定を追加」して AppKey を取得）；プッシュは「プッシュしない」（アプリ内のみ）と「カスタムプッシュサーバ」（アプリ終了後も配信）に分かれる。
API 呼び出しwithoutBtn . showPanel . 顧客情報自前ボタンを使う：_MEIQIA('withoutBtn') で内蔵ボタンを隠し、クリック時に _MEIQIA('showPanel') でチャットを開く；顧客情報の受け渡し / 同期は初期化のタイミング内で呼ばないと効かない。
図1：美洽 非表示の切り分けフロー——まずスクリプト読込、次に 読込失敗 / 設定許可 / フレームワーク / 表示 の 4 分類
ステップ2：最も見落とす根因 → L2（ウィジェット = サードパーティ外部ドメインの非同期 JS 注入）
要点：美洽のウェブウィジェットはページに埋め込まれた静的コンポーネントではなく、meiqia.js を美洽の外部ドメインから非同期で読み込み、あなたのページへチャットコンテナ（DOM / iframe）を動的に注入し、美洽サーバへクロスオリジンの長時間接続を張る。これで「謎の」非表示の大半が説明できる——① サードパーティ外部スクリプト：AdBlock / uBlock が「第三者トラッキング / 広告」ルールで遮断し ERR_BLOCKED_BY_CLIENT、ボタンが出ない（管理画面は正常）；② DOM を非同期注入：<head> ではブロック、SPA のルート遷移でコンテナ破棄後は自動再構築されない（manualInit + _MEIQIA('init') が必要）、ヒートマップ / 解析プラグインが DOM を変えると重なりを覆う；③ entId で企業に紐付け、ドメイン許可でゲート：entId 誤り / ドメイン未許可だと読込めても「対話に繋がらない」；④ モバイルと PC は別々の設置、アプリ内は SDK（AppKey）、プッシュは「プッシュしない / カスタムプッシュサーバ」の 2 経路。この注入経路を理解すれば、以下の各症状の対処に一貫したロジックが通る。下図は設置セルフチェック盤、さらに下に 5 つの設置方式と 2026 推計。
図2：美洽 設置セルフチェック盤（緑＝確認済み / 赤＝見落としやすい）
図：先に「コード位置 + meiqia.js 200 + 初期化済み」、次に「広告ブロック + フレームワーク/重なり」——後者 2 つが最も見落とされる
全症状対照表（L1 現象 / 公式の位置づけ・L2 根本原因）
美洽 5 つの設置方式の比較（コード / 難度 / 機能 / 用途 / 反映速度・公開情報）
| 設置方式 | コード / 難度 | 機能の充実度 | 用途 | 反映速度 |
|---|
| ウェブ JS ウィジェット | 1 つの JS . 低 | 最も充実（フロート / ポップ / 自動挨拶 / 訪問者軌跡） | PC + モバイルサイト（公式推奨） | 約 3〜5 分 |
| チャットリンク | コード無し . 最低 | 基本対話 | 技術無し / チャットリンクを手軽に | 即時 |
| API / WebIM SDK | 開発要 . 高 | 深い customization（独自 UI / システム / 注文連携） | 開発力があり深く融合 | 開発次第 |
| ネイティブ App SDK | SDK 統合 . 高 | アプリ内チャット + メッセージプッシュ | iOS / Android アプリ | 開発次第 |
| CMS 簡易設定 | プラグイン / ワンクリック . 低 | JS ウィジェットと同等 | WordPress / 凡科 / Shopify 等 | 数分 |
美洽 非表示の原因と設置方式の比較（2026 推計）
以下は美洽公式ヘルプ（接入渠道 / JavaScript ウェブウィジェット API）と公開の設置トラブル対応を総合した 2026 推計（各社の確約値でも一次測定でもなく参考用。版とブラウザポリシーで変動）：
| 項目 | 推計 / 対照 |
|---|
| 非表示の原因内訳（コミュニティ / チケット・推計） | 位置 / 未読込 ≈ 35% > 広告ブロック / 拡張 ≈ 25% > 設定 / 許可（entId / ドメイン）≈ 20% > フレームワーク（SPA）≈ 12% > スタイル / 他プラグイン競合 ≈ 8% |
| 設置の本質 | ウェブウィジェット = サードパーティ外部ドメインの非同期 JS が DOM を注入 + クロスオリジン長時間接続（埋め込み静的コンポーネントではない）。ゆえに位置・広告ブロックルール・ページ CSS の重なり・SPA ライフサイクルの影響を受ける |
| 各端の設置方式（推計） | PC / モバイル Web = JS ウィジェット（同一コード・別途設置）；アプリ = ネイティブ SDK（AppKey）；WeChat / 抖音 / 小紅書 = チャネル許可接入 |
| 広告ブロックの影響（推計） | PC で約 30〜40% のユーザーが広告ブロック拡張を導入 → サードパーティの接客スクリプトが広告ルールで遮断（ERR_BLOCKED_BY_CLIENT）、「管理画面は正常、ユーザー側は非表示」の主因 |
| JS ウィジェット反映速度（公式） | 専用 JS をページ末尾に貼ると約 3〜5 分で反映；entId は企業の一意 ID、ワークベンチと不一致だと対話を受けられない |
推計の根拠：出典基線 + 時間外挿（meiqia.com/help 接入渠道 / JavaScript ウェブウィジェット、meiqia.im 設置ガイド、公開の設置トラブル対応 2026 取得）。版とブラウザの遮断ポリシーで変動。美洽の最新公式を基準に。
実例・クイック判定
- コードを貼ったのにチャット吹き出しが無い：まず F12 → Network で meiqia.js を検索——リクエストが無い / 200 以外なら位置ミス / キャッシュ；CDN キャッシュをクリアかシークレットで再表示。
- コンソールに meiqia.js net::ERR_BLOCKED_BY_CLIENT：広告ブロッカー（AdBlock / uBlock / AdGuard）がサードパーティの接客スクリプトを広告ルールで遮断——拡張を切る / サイトをホワイトリスト；「自分は正常、一部ユーザーで非表示」の主因でもある。
- 読込めた（コンソール typeof _MEIQIA が function）がボタンが見えない：テーマ CSS が吹き出しを画面外へ、またはヒートマップ / 解析プラグインが DOM の重なりを変えた——F12 → Elements で美洽コンテナを 1 つずつ確認。
- Vue / React の SPA でトップにはチャット、別ルートへ進むと消える：SPA がコンテナを破棄しウィジェット未再構築——manualInit で自動初期化を止め、ルートフックで _MEIQIA('init') して再マウント。
- チャットは開くが、対応者に訪問者メッセージが届かない：多くは entId がワークベンチと不一致（他所のコード / 複数アカウント混同）——設定-チーム-ID 照会の企業 ID とコード内 entId を照合。
- ステージングは動くが本番ドメインで読み込まない：本番ドメインが「接入サイトを追加」で未許可——本番ドメインを接入サイト一覧に追加して再公開。
- 美洽の内蔵丸ボタンを消して、ページ内の自前「お問い合わせ」ボタンを使いたい：先に _MEIQIA('withoutBtn') で内蔵を隠し、自前ボタンに _MEIQIA('showPanel') を紐付けてチャットを開く。
