特定のページでランチャーを表示または非表示にする方法

このページで学べること

サイトの特定のページでランチャー（ウェブチャットまたはKlaviyo カスタマーハブを開くフローティングボタン）を非表示にする方法、または特定のページでのみ表示する方法について説明します。選択したページのサイトテーマに短いCSSスニペットを追加します。

これは、ウェブチャットを単体で使用する場合も、Klaviyo カスタマーハブの一部として使用する場合も、またランチャーがどの画面（チャット、[お気に入り]、[おすすめ]）を開く場合でも機能します。

始める前に

必要なもの：

• ウェブチャットまたはKlaviyo カスタマーハブがサイト上で利用可能
• サイトテーマのコードを編集するためのアクセス権
• 以下のモバイルルールでカスタムCSSエディターを使用する場合、Klaviyoでカスタマーハブまたはウェブチャットのデザイン設定を編集するための権限

Klaviyoには現在、ランチャーを表示するページを制御する設定がないため、これはCSSで行います。

スニペット

このCSSを使用すると、ランチャーが非表示になります：

.kl-hub-launcher-container,
.kl-hub-launcher {
  display: none !important;
}

.kl-hub-launcher-container はランチャーを配置するラッパーで、.kl-hub-launcherはボタン自体です。Klaviyoのスタイルはテーマの後に読み込まれるため、!importantを維持してください。そうしないとランチャーが再表示されます。

特定のページでランチャーを非表示にする（Shopify）

1. Shopifyのコードエディタでライブテーマを開きます。
2. layout/theme.liquidを開く。
3. 以下のコードを終了</head>タグの直前に貼り付け、テンプレート名をランチャーを非表示にするページに置き換えてください。
4. [保存] をクリックします。

{% if template.name == 'cart' or template.name == 'collection' %}
  <style>
    .kl-hub-launcher-container,
    .kl-hub-launcher {
      display: none !important;
    }
  </style>
{% endif %}

一般的なテンプレート名：

• index — ホームページ
• product — 商品ページ
• collection —コレクションページ
• cart — カートページ
• page — 会社概要やお問い合わせなどの標準コンテンツページ
• blog およびarticle — ブログとブログ投稿
• search — 検索結果

Shopifyのチェックアウトページではテーマが使用されないため、この方法ではターゲット設定できません。

URLで単一ページをターゲットにする

特定の種類のすべてのページではなく特定のページ1つをターゲットにするには、テンプレート名ではなくページのパスを確認してください：

{% if request.path == '/pages/contact' %}
  <style>
    .kl-hub-launcher-container,
    .kl-hub-launcher {
      display: none !important;
    }
  </style>
{% endif %}

特定のページでのみランチャーを表示する（Shopify）

同じ手順に従いますが、ifではなくunlessを使用してください。これにより、リストに記載したページ以外ではどこでもランチャーが非表示になります。この例では、ランチャーはホームページと商品ページにのみ表示されます：

{% unless template.name == 'index' or template.name == 'product' %}
  <style>
    .kl-hub-launcher-container,
    .kl-hub-launcher {
      display: none !important;
    }
  </style>
{% endunless %}

ランチャーは、表示すべきでないページでのみ非表示にしてください。どのページでも一律に非表示にしてから特定のページで強制的に再表示するのは避けてください。上書き設定がKlaviyoのスタイルと競合し、ランチャーが正しく表示されない可能性があります。

その他のEコマースプラットフォーム

同じ方法はどのサイトでも機能します。ランチャーを非表示にする必要があるページに限り、styleタグ内にスニペットを追加してください。使用しているプラットフォームによっては、ページ固有のテンプレート、ページレベルのカスタムコードフィールド、またはタグマネージャーでこれを行えます。

プラットフォームがbodyタグにページ固有のクラスを追加する場合は、代わりにそのクラスにスニペットの範囲を限定できます。page-cartをプラットフォームで使用しているクラスに置き換えてください：

body.page-cart .kl-hub-launcher-container,
body.page-cart .kl-hub-launcher {
  display: none !important;
}

モバイルでランチャーを非表示にする

画面サイズによる起動ボタンの非表示はページに依存しないため、このCSSはカスタマーハブまたはスタンドアロンのウェブチャットのデザイン設定に追加できます。これは、幅が767ピクセル以下のブラウザウィンドウで起動ボタンを非表示にします。幅をテーマのモバイルブレークポイントに合わせて調整してください：

@media (max-width: 767px) {
  .kl-hub-launcher-container,
  .kl-hub-launcher {
    display: none !important;
  }
}

カスタマーハブを使用している場合

1. [カスタマーハブ] > [デザイン]に進み、[ハブを編集]をクリックしてください。
2. 左側のサイドバーでスタイルを編集を選択します。カスタムCSSで、エディターが閉じている場合はプラスアイコンをクリックし、次に上記のCSSを既存のCSSに追加します。<style>タグを含めず、CSSのみを貼り付けてください。
3. [保存] をクリックします。表示テストを実行中の場合、保存すると警告が表示されます。テストを終了して変更を適用する準備ができた場合にのみ、テストを終了して公開を選択してください。

スタンドアロンのウェブチャットを使用している場合

1. [設定] > [ウェブチャット] > [デザイン] に移動します。
2. カスタムセクションまでスクロールし、カスタムCSSを追加をクリックするか、すでにあるCSSを編集します。<style>タグを付けずに、上記のCSSを追加してください。
3. [保存] をクリックします。

ランチャーを非表示にしてもできないこと

• ウェブチャットやKlaviyo カスタマーハブは無効になりません。ショッパーは引き続き、#k-hubへのリンク（ヘッダーの「お気に入り」リンクなど）、商品ページのFAQブロック、埋め込みブロックから開くことができます。ページに表示したくない場合は、これらを個別に削除または非表示にしてください。
• 他のチャネルには影響しません。カスタマーエージェントは引き続きメール、SMS、WhatsAppで応答します。
• ウェブチャットを使用できるユーザーは制御されません。ウェブチャットをオフにするには、［設定］>［ウェブチャット］>［一般］を使用します。カスタマーハブを使用している場合は、チャットの前にサインインを必須にするために、［ログインステータス］を［ログイン済みの買い物客］に設定することもできます。この設定では、ログアウト中の買い物客に対してランチャーは非表示になりません。[保存] をクリックします。

変更内容をテストしてください

ランチャーの表示設定を満たす買い物客としてテストしてください。プライベートブラウジングウィンドウを開き、必要に応じてサインインしてください。ランチャーが非表示になるべきページを開き、表示されないことを確認してください。次に、表示されるべきページを開き、引き続き表示されていることを確認してください。モバイルルールについては、選択したブレークポイントより小さい場合と大きい場合の両方で画面幅を確認してください。ランチャーが表示されるべきでない場所にまだ表示される場合は、テンプレート名またはパスが完全に一致していること、およびスニペットに!importantが含まれていることを確認してください。

FAQ

Klaviyoに、ランチャーを表示するページを選択する設定はありますか？
現在はありません。この記事のCSSの方法を使用してください。

Klaviyoがウェブチャットを更新すると、これは動作しなくなりますか？
kl-hub-で始まるクラスは通常の更新でも安定しているため、スニペットは引き続き動作するはずです。大幅な再設計の後は再テストしてください。

特定のページではなく、特定の買い物客に対してランチャーを非表示にできますか？
はい。設定 > ウェブチャット > 一般で、ウィジェットの表示設定を使用して、すべての購入者またはログイン中の購入者のみを選択し、保存をクリックします。カスタマーエージェントのターゲティング設定では、エージェントが応答するセグメントを選択します。ランチャーを非表示にするものではありません。

その他のリソース