製品ツアーと「見せてください」

独自ページを順に案内：ステップ一覧としてツアーを作成し、コードから開始します。アシスタントの「見せてください」による指し示しも説明します。

説明する代わりに見せましょう。製品ツアーは、訪問者をページ上で順番に案内します。背景を少し暗くし、リングで対象を強調し、その横にテキストとZurück（戻る）、Weiter（次へ）、Beenden（終了）の吹き出しを表示します。

ツアーを作成する

/app/projects/{id}のテキストとフォームタブ、製品ツアーセクションにJSONで入力します。空欄で保存すると、すべてのツアーを削除します。

[
  {
    "id": "erste-schritte",
    "name": "First steps",
    "steps": [
      { "selector": "#konto", "title": "Your account", "text": "Change your details here." },
      { "selector": ".rechnung", "text": "And the invoices are here.", "placement": "top" }
    ]
  }
]

ツアーのフィールド：

id – 必須、一意。小文字、数字、-、_で、文字か数字で始まり、最大48文字。開始時に使います。
name – 管理用の名前。
steps – 1～30ステップ。

各ステップのフィールド：

selector – 必須。ページ要素のCSSセレクター、最大300文字。
text – 必須。吹き出しのテキスト。
title – 任意の見出し。
placement – bottom（既定）またはtop。希望であって保証ではなく、上に収まらなければ下へ移動します。
i18n_weiter、i18n_zurueck、i18n_fertig、i18n_ende – 次へ、戻る、完了、終了の独自ラベル（任意）。

1プロジェクト最大20ツアー、合計32 KBです。保存時にJSONを検証し、問題があればエラーを示します。

開始する

「ツアーを開始」ボタンや初回ログイン後など、コードから開始します。

ReactiveChat('tour', 'erste-schritte');

開始すればtrue、それ以外はfalseを返します。次で終了できます。

ReactiveChat('tourStop');

訪問者はBeenden、最終ステップのFertig（完了）、Escapeキーで終了できます。カウンターに現在のステップを表示します。

要素がない場合

ページに存在しない、非表示などで見つからない要素のステップは飛ばします。すべてなければ開始せず、falseを返します。開始するそのページでセレクターを確認してください。

デザイン

ブランドの色やカスタムCSSと独立した、固定の中立的なデザインです。吹き出しは最大320 px。独自ラベルなしなら、全言語で「Beenden」「Zurück」「Weiter」「Fertig」です。英語やポーランド語のページでは、そのため各ステップにi18n_*を設定してください。

「見せてください」

アシスタントは回答で、ページの「カートに追加」などの操作要素を指し示せます。そのため、最初にチャットを開いた後、現在のページの表示中の操作要素を読み取ります。

はっきり見える要素はリングで強調し、回答の最初の文を横に表示します。チャットは開いたままです。
覆われているかスマートフォンの場合、メッセージに見せてくださいボタンを表示し、クリック後に要素を示します。
タッチ、Escape、スクロールで離れると終了します。

このためにチャットが自動で閉じることはありません。

スニペットでページ読み取りと「見せてください」を無効にできます。

data-rc-dom-spiegel="false"

個別の領域はdata-rc-privateかdata-rc-ignoreで除外します。詳しくはナレッジと出典をご覧ください。

最終更新: 2026-10-25