アクションで利用可能なステップ
本記事では、アクションで利用可能な各種ステップの概要を説明します。
フローティングボタン
画面右下などの固定位置に表示されるボタンです。ポップアップの起動等に繋げるための、トリガー的な役割としてお使いいただけます。
アイコン・テキストの2種類のタイプがあります。
アイコンタイプ
アイコンが入ったボタンです。
主な設定項目
- ラベル: 表示するアイコンの種類を選びます。電球アイコン、はてなアイコンの他、任意の画像をアップロードすることもできます。
- ポジション: 画面のどこにボタンを出すかを指定します。余白指定による微調整も可能です。
- スタイル: 色やサイズなどを指定します。
テキストタイプ
任意の文言を表示できるバナー状のボタンです。「xxxでお困りですか？」など、状況に応じた声掛け文言を表示することで、ユーザーの注意を引くことができます。
主な設定項目
- ラベル: 表示する文言を指定します。
- ポジション: 画面のどこにボタンを出すかを指定します。余白指定による微調整も可能です。
- スタイル: 色やサイズなどを指定します。
ヘルプアイコン
ページ上の特定の要素にアイコンを付けることができます。
特定の部分に対するヘルプをピンポイントで表示したい場合などにお使いいただけます。
主な設定項目
- 用途：アイコンのふるまいを設定することができます。
- ツールチップ：アイコンにマウスカーソルを合わせるとツールチップでテキストを表示できるようになります。タッチデバイスの場合はタッチ操作でツールチップを表示します。
- トリガーアイコン：クリックでステップ遷移を行うことができます。
- 設置先: ヘルプアイコンをつけたいページ要素のCSSセレクタを指定します。CSSセレクタは、KARTE Action Viewerを使って簡単に取得できます。
- 配置方法・位置：テキスト要素か要素全体に対して位置を設定するか選択できます。設定によって位置の指定方法も変わります。
- テキスト要素の前後：設置先で指定した要素上のテキストに対してアイコンを配置します。位置設定で、前後のどちらに配置するかとテキストとアイコンの距離を設定することができます。
- その他の要素上：ページ要素に対してどの位置にバッジを出すかを指定します。オフセット指定による微調整も可能です。
- アイコン: ヘルプアイコンに使うアイコンを指定します。
- スタイル: 色やサイズなどを指定します。
- ツールチップ文言：用途でツールチップを選択した場合に設定可能で、ツールチップで表示したい文言を入力します。テキストには太字とリンクの設定が可能です。
埋め込みボタン
ページの中にダイレクトに埋め込むボタンです。
ページの既存のユーザー導線をサポートアクションでリプレースしたいや、サポートアクションを自然にページに溶け込ませたい場合などにお使いいただけます。
アイコン・テキスト・HTMLの3つのタイプがあります。
タイプ共通の設定項目
- 埋め込み先
- CSSセレクタ: ボタンの埋め込み先のページ要素のCSSセレクタを指定します。CSSセレクタは、KARTE Action Viewerを使って簡単に取得できます。
- 方法: 埋め込みの方法を指定します。「前に挿入」「後に挿入」は、それぞれ指定のページ要素の前と後にボタンを挿入します。「置き換え」は、指定のページ要素を消去し、代わりにボタンを表示します。
アイコンタイプ
アイコンが入ったボタンです。
主な設定項目
- ラベル: 表示するアイコンの種類を選びます。電球アイコン、はてなアイコンの他、任意の画像をアップロードすることもできます。
- スタイル: 色やサイズ、余白などを指定します。
テキストタイプ
任意の文言を表示できるバナー状のボタンです。
主な設定項目
- ラベル: 表示する文言を指定します。
- スタイル: 色やサイズ、余白などを指定します。
HTMLタイプ
任意のHTMLを表示できるボタンです。
主な設定項目
- HTML: 表示したいHTMLを記述します。クリック時に次のステップを表示する要素にはc-embeddedButton-triggerクラスを付与してください。
- スタイル: HTMLの周辺の余白を指定します。
ポップアップ
アンサーやシナリオなどのコンテンツを含むポップアップです。
主な設定項目
- コンテンツ: ポップアップに含めるコンテンツを指定します。ドラッグアンドドロップで位置を並べ替えることも可能です。(コンテンツごとの詳細は下記を参照)
- ポジション: 画面のどこにボタンを出すかを指定します。なお、スマートフォンでは、ポップアップの位置は固定される (常に下から出てくる形式になる)ため、ここでのポジションは反映されないことにご注意ください。
- 表示設定: 細かい表示設定を指定します。
- 背景の操作を禁止: オンにするとポップアップの背景が暗くなり、ポップアップ以外の背景下にある要素の操作ができなくなります。
ポップアップで利用可能なコンテンツ
- 検索: アンサーの検索ボックスです。
- シナリオ: シナリオを表示できます。
- アンサー: アンサー記事の内容を表示できます。
- アンサーリスト: アンサーをいくつか並べて表示できます。「手動」を選んだ場合、手動で表示するアンサーを指定します。「自動最適化」を選んだ場合、ユーザーの行動文脈やサイト統計データから計算した最適なアンサーが自動で表示されます。
- 見出し: 見出しを表示できます。h1, h2, h3などの大きさや色が指定可能です。
- 文章: 文章を表示できます。文字の大きさや色が指定可能です。
- 画像: 画像を表示できます。
- 動画: 動画サービス(YouTube / Viemo)の埋め込みができます。
- 罫線: コンテンツ同士を区切る横線を表示できます。
- ボタン：リンク・ステップ遷移・スクリプトを設定することができます。
- リンク：外部サイトなどのURLを指定しユーザーを遷移させることができます。
- ステップ遷移：コーチマークやポップアップを起動する、一つ前のステップに戻る・アクションを終了するなどステップの遷移を実行することができます。
- スクリプト：JavaScriptを記述し、任意の処理 (利用しているチャットを呼び出すなど) を実行することができます。
コーチマーク
ページ内の特定の部分に紐づいたガイドを表示することができます
主な設定項目
- 設置先
- CSSセレクタ：コーチマークの設置先のページ要素のCSSセレクタを指定します。CSSセレクタは、KARTE Action Viewerを使って簡単に取得できます。
- 位置：要素に対してどの位置に表示するかを指定します。「要素の上」「要素の下」は、それぞれ上下の配置、揃えの指定で「左揃え」「中央揃え」「右揃え」の設定ができます。
- ナビゲーションタイプ
- 単体：一つのステップで1箇所に情報を提示することができます。「OK」ボタンのみが表示されます。
- ツアー：複数のステップを繋げて複数箇所にガイドを出すことができます。「最初のステップ」「中間のステップ」などを追加指定をすることで表示されるボタンが変わります。
- 詳細設定: 細かい表示設定を指定します。
- 対象をハイライトする：オンにすると背景が暗くなり対象の要素がハイライトされます
コーチマークで利用可能なコンテンツ
- 見出し：見出しを表示できます。h1, h2, h3などの大きさや色が指定可能です。
- 文章：文章を表示できます。文字の大きさや色が指定可能です。
- 画像：画像を表示できます。
- 動画：動画サービス(YouTube / Viemo)の埋め込みができます。
- ボタン：リンク・ステップ遷移・スクリプトを設定することができます。
- リンク：外部サイトなどのURLを指定しユーザーを遷移させることができます。
- ステップ遷移：コーチマークやポップアップを起動する、一つ前のステップに戻る・アクションを終了するなどステップの遷移を実行することができます。
- スクリプト：JavaScriptを記述し、任意の処理 (利用しているチャットを呼び出すなど) を実行することができます。
埋め込みコンテンツ
ページの中にアンサーリストやシナリオなどのコンテンツをダイレクトに埋め込むステップです。
サポートアクションのコンテンツを自然にページに溶け込ませたい場合などにお使いいただけます。埋め込みコンテンツでアンサーを表示する場合はポップアップ形式で表示されます。
主な設定項目
- 埋め込み先
- CSSセレクタ: ボタンの埋め込み先のページ要素のCSSセレクタを指定します。CSSセレクタは、KARTE Action Viewerを使って簡単に取得できます。
- 方法: 埋め込みの方法を指定します。「前に挿入」「後に挿入」は、それぞれ指定のページ要素の前と後にボタンを挿入します。「置き換え」は、指定のページ要素を消去し、代わりに埋め込みコンテンツを表示します。
- 注意点:「.sampleClass > a > img」のようにa要素(リンク) の中のCSSセレクタを指定した場合、埋め込みコンテンツ内の要素をクリックしたときにページ遷移してしまいます。この場合は「. sampleClass > a」のようにして、埋め込みコンテンツがa要素の中に入り込まないようにしてください。
- コンテンツ: 埋め込みコンテンツに含めるコンテンツを指定します。ドラッグアンドドロップで位置を並べ替えることも可能です。(コンテンツごとの詳細は下記を参照)
- スタイル
- 高さ：コンテンツの横幅を指定できます。デフォルトの「auto」 ではコンテンツに応じた高さになります。
- 幅：コンテンツの高さを指定できます。デフォルトの 「auto」 では配置される親要素の幅いっぱいになります。
- 最大幅：コンテンツの最大幅を指定できます。コンテンツ幅を制限したい場合に使用ください。
- 内側の余白：コンテンツの内側の余白です。CSSの「padding」にあたります。
- 外側の余白：コンテンツの外側の余白です。CSSの「margin」にあたります。
- アンサー用ポップアップの幅：アンサーを表示する際のポップアップの横幅を指定できます。なお、スマートフォンでは、ポップアップの幅は常に横幅いっぱいになるため、ここでの指定は反映されないことにご注意ください。
埋め込みコンテンツで利用可能なコンテンツ
- 検索: アンサーの検索ボックスです。
- シナリオ: シナリオを表示できます。
- HTML: 表示したいHTMLを記述できます。
- アンサーリスト: アンサーをいくつか並べて表示できます。「手動」を選んだ場合、手動で表示するアンサーを指定します。「自動最適化」を選んだ場合、ユーザーの行動文脈やサイト統計データから計算した最適なアンサーが自動で表示されます。
- 見出し: 見出しを表示できます。h1, h2, h3などの大きさや色が指定可能です。
- 文章: 文章を表示できます。文字の大きさや色が指定可能です。
- 画像: 画像を表示できます。
- 動画: 動画サービス(YouTube / Viemo)の埋め込みができます。
- 罫線: コンテンツ同士を区切る横線を表示できます。