来訪時に画面の要素へ吹き出しを添えて、新情報や重要なお知らせをシンプルに伝えます。例えば「NEW!サポートサイトをリニューアル」といった補足を表示することで、必要なトピックを自然に認知させられます。

  • 必要なイベント：閲覧（view）

  • 「埋め込み」機能のオプション契約が必要です

  • この「接客シナリオ」は、アプリには対応しておりません

施策

  • 目的：画面上の特定箇所に吹き出しで補足を加え、新情報や重要トピックをわかりやすく伝える

  • ゴール：更新情報や告知内容の確実な認知を促す（告知場所の来訪）

  • 主なターゲット：来訪したユーザー

  • 接客を表示するページ：トップページ（またはお知らせを伝えたい対象ページ）

概要

  • 画面上の特定箇所に吹き出しを表示し、新情報や更新内容をシンプルに補足します

  • 来訪時に重要なお知らせを自然に認知させ、見逃しを防ぎます

設定方法

手順1：接客テンプレートの選択

左メニューバーの「すベてのプロダクト > ストア > シナリオストア」 より、「画面上の特定箇所を吹き出しメッセージで補足表示」というテンプレートを検索窓で検索し、「さっそく利用してみる」をクリックしてください。

※シナリオテンプレートが改修などにより無くなる可能性もある点ご留意ください。

手順2：アクションの編集

ポップアップで使う画像、テキスト、リンク先の設定などを行ってください。
接客サービス編集画面で追加したアクションの「編集」ボタンをクリックすると、アクション編集画面に移動することができます。

1.埋め込み箇所の指定

2.吹き出しのデザイン

  • 吹き出し幅(px)：吹き出しの位置を調整

  • 吹き出し矢印左右位置(px)：吹き出し矢印左右の位置を調整

  • 各種カラー：各種カラーを指定

  • 詳細テキスト：テキスト内容を指定

  • アイコンテキスト：アイコン内容を指定

  • 吹き出しの位置：吹き出しの上下、左右（別アクション）を調整

アクションの編集方法の詳細については、以下をご覧ください。
https://support.karte.io/post/5EoIkbQzbRxZpExRWdATwq

手順3：接客サービスの設定

接客配信の条件を設定します。
※推奨の設定条件を記載しておりますが、施策の目的やサイトの仕様によって条件はカスタマイズしてください。
※現在ないゴールやセグメントについては、以下の設定例を参考に新規作成してください。

  • ゴール

    • 対象のゴール（例：サポートページ）を選択

      • ※購入完了にあたるイベントが存在している場合のゴール設定条件例

        • ゴールタイプ：イベント

        • イベントを選択：該当のイベント

      • ※イベントが存在しない場合のゴール設定条件例

        • ゴールタイプ：ページ閲覧

        • ページ条件を指定：閲覧ページのパス > 次を含む（部分一致）> 該当ページのURL（ex.サポートページ:/support/01/）

  • 対象ユーザー

    • すべて

  • 対象イベント

    • 配信トリガー

      • 閲覧イベントで設定 > 閲覧ページのURL > 次に等しい（完全一致） > トップページのURL

  • 配信頻度

    • アクセス毎

※ゴールの具体的な作成方法は、ゴールの設定方法をご参照ください。
※その他の設定については、施策の意図に応じて設定ください。
※推奨の設定条件を記載しておりますが、施策の目的やサイトの仕様によって設定条件はカスタマイズしてください。

配信前のチェック

  • 未実施グループを設定しましょう

  • 公開前にテスト配信をしましょう

接客効果の振り返り

以下を参考に接客効果の振り返りをしてください。

▼接客サービスの結果確認画面の見方
・アクション別に結果を比較する
　https://support.karte.io/post/4dS0dt9F779KwCrPOm7Sq1
・接客サービス詳細「効果の分析」タブの見方
　https://support.karte.io/post/17Fj6yNl4UWguEQJfbVTxm

▼接客サービスの振り返りのコツが分かる How to動画（KARTE Academy）
https://academy.karte.io/courses/1875613

よくある質問

全体の位置の微調整を行いたい

A. カスタマイズのCSSで カード全体（.card）に位置を指定することで調整できます。
.card を動かすと、吹き出し本体と矢印（▼）もまとめて移動するため、もっとも安定した調整方法です。


.card {
    position: relative;
    top: 10px;   /* 上下の調整 */
    left: 60px;  /* 左右の調整 */
}