カスタムCSSを使用してウェブチャットのスタイルを設定する方法

このページで学べること

カスタムCSSを使用してKlaviyoウェブチャットの外観（ランチャー、チャットウィンドウ、メッセージバブル、メッセージコンポーザー）を変更する方法。どのテーマ変数とクラス名が安全にターゲットにできるか、またどれがKlaviyoがアップデートをリリースすると壊れるかを学びます。

この記事は、ウェブチャットを単体で使用する場合も、Klaviyo Customer Hubの一部として使用する場合も適用されます。チャットインターフェースはどちらの場合も同じであるため、同じCSSを両方に使用できます。

始める前に

必要なもの：

• オーナー、管理者、またはマネージャーのロール
• CSS セレクターとカスタムプロパティ（CSS 変数）に関する知識

カスタムCSSを記述する前に、組み込みのデザイン設定で必要な内容がすでに実現できないか確認してください。色、フォント、ボタンの形状、ランチャーの位置はすべてコードなしで設定でき、これらの設定はKlaviyoのアップデート後も保持されます。デザイン設定でカバーできない内容に限って、カスタムCSSを使用してください。

カスタムCSSを追加する場所

カスタムCSSエディターの場所は、設定内容によって異なります。

Klaviyo Customer Hub を使用している場合

1. Klaviyo Customer Hub > [デザイン]に進みます。
2. スタイル設定の下部にある カスタム セクションまでスクロールします。
3. [カスタムCSSを追加] をクリックするか、すでにあるCSSを編集してください。
4. [保存] をクリックします。

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

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

カスタムCSSの適用方法

CSS は、ストアフロントの style タグ内で、Klaviyo 独自のスタイルの後に追加されます。ここから、次の2点が導かれます：

• CSSの設定が優先されます。最後に読み込まれるため、ほとんどの場合、!importantを使用しなくてもルールがKlaviyoのデフォルトを上書きします。
• CSS はチャットにスコープされていません。ページ全体に適用されます。button { … } のような単独のルールを書くのではなく、必ずチャット要素に対してセレクタをスコープしてください。単独のルールはストアフロント全体に影響します。

テーマ変数から始めます

ウェブチャットを最も確実に再スタイル設定する方法は、:rootブロックでKlaviyoのテーマ変数をオーバーライドすることです。これらは安定しており、インターフェース全体で正しくカスケードし、個々の要素をターゲティングするよりも破損する可能性がはるかに低くなります。

:root {
  --atlas-chat-bubble-background: #f0ebe4;
  --atlas-message-border-radius: 4px;
}

チャットメッセージ変数

ショッパー（送信）メッセージでは、ブランドカラーが意図的に再利用されます。バブルは --atlas-button-primary、テキストは --atlas-text-primary-inverse を使用します。いずれもデザイン設定で設定します。

色とサーフェス変数

形状と間隔の変数

タイポグラフィ変数

これらのうちいくつかは、デザイン設定ですでに記述されています。デザイン設定UIでフォントと色を設定する方が望ましいため、UIで公開されていない値には変数を使用してください。

クラスフックで要素をターゲットにする

テーマ変数では対応できない場合は、要素を直接指定してください。Klaviyoは以下のクラス名を保証します。

チャット要素

チャットウィンドウには、現在の画面に名前を付けるクラス（.kl-hub-route-chat）も含まれます。チャット自体の場合。スタンドアロンのウェブチャットでは、これは常に .kl-hub-route-chat です。Klaviyo Customer Hub では、買い物客が移動するにつれて変わります（.kl-hub-route-home、.kl-hub-route-orders、など）それにより、CSS の適用範囲を1つの画面に限定できます。

送信ボタンには専用のクラスがありません。Composerで対象にします：

.kl-hub-chat-input-wrapper .kl-hub-button-primary {
  background: #2f4f4f;
}

共有要素

エージェントのメッセージと買い物客のメッセージを異なるスタイルにする

これは最も一般的なリクエストであり、特定のアプローチが必要です。エージェントとショッパーのバブルは単一の .kl-hub-message クラスを共有しています。— 安定した区別用クラスが存在しないため、どちらか一方を直接選択することはできません。

代わりに、すでにこの2つを別々に扱うテーマ変数を使用してください。

:root {
  /* Agent messages */
  --atlas-chat-bubble-background: #f0ebe4;
  --atlas-chat-bubble-text-primary: #2b2b2b;

  /* Shopper messages */
  --atlas-button-primary: #1f3a3d;
  --atlas-text-primary-inverse: #ffffff;
}

例

すべてを四角くします

:root {
  --atlas-drawer-inset-border-radius: 0;
  --atlas-message-border-radius: 0;
  --atlas-button-border-radius: 0;
  --atlas-input-border-radius-normal: 0;
}

大文字の見出しとボタン

.kl-hub-heading,
.kl-hub-button {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

カスタムの影を使ってランチャーを大きくする

.kl-hub-launcher {
  width: 72px !important;
  height: 72px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25) !important;
}

ランチャーは要素に複数のプロパティを直接設定するため、ランチャーのルールが有効になるには!importantが必要です。ここだけは、通常どおり必要になります。

デスクトップでチャットウィンドウを広げる

@media (min-width: 900px) {
  .kl-hub-drawer {
    width: 480px;
  }
}

CSSを保存できない場合

保存すると、KlaviyoはCSSが解析できることを確認します。解析できない場合、無効な CSS です。構文を確認してください。と表示されます。変更は保存されません。

スタイルシートが完全に拒否されるのは、ルールがまったく生成されない場合のみです。通常、貼り付けたものが CSS ではないことを意味します。一般的な原因：

• CSSルールではなく、プレーンテキスト、HTML、またはstyleタグを貼り付けること
• 完全なルールではなく宣言の一部を貼り付けること
• すべてのルールに構文エラーがあるスタイルシート

カスタム CSS でできないこと

• テキストを変更します。カスタムCSSでは文言を編集できません。その場合は、デザインとコンテンツの設定を使用してください。
• CSSレイアウトで可能な範囲を超えて要素を並べ替えたり再配置したりすることはできません。チャットの構造はカスタマイズできません。
• エージェントとショッパーのバブルをクラスで個別にターゲットにします。上記の説明に従ってテーマ変数を使用します。
• 再デザインにも自動的に対応します。クラスフックと変数は通常のアップデートでは安定していますが、大幅な再デザインの場合は CSS の見直しが必要になることがあります。メジャーリリース後は再テストしてください。

その他のリソース