HubSpotチャットを非表示にする方法

ハシビィくん

HubSpotチャットの表示を柔軟に変えたいっす！

カピーさん

それならCSSで非表示にする方法を教えよう！

HubSpot管理画面から一括で停止することも可能ですが、特定のページのみや条件付きで表示させたい時にCSSもしくはJavaScriptで対応が可能です。

※2024年11月時点の情報になります。

CSSで非表示する方法

CSSで非表示にする方法はシンプルです。

HubSpotのチャット表示位置などを調整するidを利用します。CSSで制御されているのでCSSで対応が可能です。

#hubspot-messages-iframe-container {
    display: none !important;
}

ただHubSpotとの連携次第では、上記CSSでは有効にならない場合があります。
その際には、セレクタの詳細度を上げて有効にする必要があります。下記がセレクタ詳細度を修正したバージョンになります。

html body #hubspot-messages-iframe-container {
    display: none !important;
}

JavaScriptで非表示する方法

JavaScriptで制御する場合は、動的な制御や条件付きが簡単にできるのがCSSとの差別ポイントになります。

手順は、「外観」→「テーマエディター」→「footer.php」に記載。

document.addEventListener('DOMContentLoaded', function () {
    var hubspotChat = document.querySelector('#hubspot-messages-iframe-container');
    if (hubspotChat) {
        hubspotChat.style.display = 'none';
    }
});

PHPで非表示にする方法

読み込みが発生しないので、ページ読み込み速度などのパフォーマンス向上に繋がるのが特徴です。

手順は、「外観」→「テーマエディター」→「function.php」に記載。

function disable_hubspot_chat() {
    if (is_page('page-slug')) { // 特定のページで無効化
        wp_dequeue_script('hubspot-chat-script'); // スクリプトハンドル名を確認
    }
}
add_action('wp_enqueue_scripts', 'disable_hubspot_chat', 20);

まとめ：HubSpotチャットを非表示にする方法

HubSpotチャットの非表示に関しては、管理画面から対応が可能です。

ですが、利用状況によっては特定のページのみ動作を変える必要があります。その際には今回紹介したコードで対応が可能です。

非表示にする難易度としては、CSS<JavaScript<PHPとなると思います。