概要
は特定のエレメントに添付されていない浮動式のバルーンステップです。 ページ要素にメッセージを添付することなく、一般的な情報またはガイダンスを提供するために使用できます。
ポップアップは注目すべきテキストにユーザーの関心を引くために使用されます。 通常のステップバルーンとは異なり、ポップアップは要素に添付されずにページの中央に表示されます。 ポップアップはスマートウォークスルー内のどこにでも配置できます。
ユースケース
ポップアップは一般的に、サイトやユーザーが完了するプロセスについてのメッセージを伝えることでユーザーエクスペリエンスを強化するために使用されます。 ポップアップはプロモーションのために使用することもできます。
ポップアップの一般的な使用例には以下のようなものがあります。
- プロセスの終わりにサクセスポップメッセージを表示する
- ユーザーがサイトにアクセスしたときに、スマートウォークスルーの自動再生の始めにウェルカムメッセージが表示されるようにポップアップを配置する
使用方法
ポップアップは最初にスマートウォークスルーで構築しても、後から追加してもかまいません。 ポップアップは画面の中央に表示され、任意のエレメントには添付されません。
ポップアップはメインパスやスマートウォークスルーのブランチのどこでも使用できます。
🎓 Digital Adoption Institute
ポップアップステップの作成
- ポップアップステップを追加するスマートウォークスルーを開きます
- ポップアップステップを追加する2つのステップの間にカーソルを合わせます
- オレンジ色のプラス記号をクリックします。
- ポップアップを選択します
- インタラクションタブでは、編集ツールを使用してタイトルと本文でバルーンをデザインします
- グリッドを使用して、ポップアップステップが画面上のどこに表示されるかを決定します
- スクリーンオーバーレイを追加する場合は、スポットライトを有効にするをオンにします
-
ステップトリガーを追加して、ポップアップステップのカスタムトリガーを追加します
- ポップアップステップはスマートウォークスルーフローに表示されます
注
- ポップアップステップがユーザーによって移動されると、スマートウォークスルー内の以下のポップアップステップが前のステップの同じ場所に表示されます
- 新しいスマートウォークスルーが再生されると、そのフローの最初のポップアップが、前回のスマートウォークスルーと同じディスプレイ（ユーザーが複数のモニターを持っている場合）に表示されますが、ビルダーによって設定された事前定義済みの場所に表示されます
インタラクションタブで以下の設定を行います。
ポップアップデザインを編集
- テキスト：バブルをクリックして、ポップアップのヘッダーと本文を追加します
- オプションメニュー：
- リッチテキストエディター：リッチテキストエディターにアクセスして、テキストのサイズ、スタイル、色の変更、ダイナミックテキストの追加、または画像の挿入を行います
- デザインを変更：デザインギャラリーから既存のデザインを追加します
- CSSを編集：カスタムCSSでバルーンデザインをカスタマイズします
ビジュアル設定
- バルーンにXを表示：ユーザーがバルーンを閉じるようにXを表示します（削除しないことをお勧めします）
- ボタンを表示：
- 次へ/完了：次へはポップアップの後にステップがある場合に、完了はそのステップが最後である場合に表示されます
- 開始：スマートウォークスルーの最初のステップで表示されます
- 戻る：前のステップに戻りますが、前のステップに次へのトリガーがあった場合にのみ表示されます
- キャンセル：スマートウォークスルーを終了します
- ステップトリガー：ポップアップステップのカスタムトリガーを追加します（オートメーション中に表示機能がオンになっている場合は使用できません）
- オートメーション中に表示：オートメーションの実行中にポップアップを継続的に表示します
- スポットライトを有効にする：この機能を有効にすると、スクリーンオーバーレイが表示され、ユーザーはページ上の他の要素を操作できなくなります
- 位置：画面上のポップアップの場所を変更します
オートメーション中に表示
自動ステップや待機ステップなどによって、ユーザーがオートメーションプロセスを中断するのを防ぐには、ポップアップに続いてオートメーション中に表示をオンにします。
Flow Steps
オートメーション中に表示をオンにすると、オートメーション中にポップアップが画面上に残り、自動化が進行していることをユーザーに通知されます。 これにより、ユーザーが画面をクリックしてスマートウォークスルーが停止し、自動化が中断してしまうことを防ぎます。
これは、通知もなくコンピューターが遠隔操作されているようにさえ見える状況で、ユーザーがオートメーションが進行中であることに気づかない場合に役立ちます。
オートメーションが終了すると、ポップアップの表示も終了します。
例えば、スマートウォークスルーが最終ステップに達した場合や、通常のステップまたは別のポップアップがその後に続く場合がこれに該当します。
また、[Close after playing（再生後に閉じる）]をオンにして、特定のフローステップを再生した後に閉じるようにすることもできます。 ドロップダウンオプションからフローステップを選択する必要があります。
ヒント
- 最終フローステップの終了後に別なポップアップを表示させることで、ユーザーにオートメーションプロセスが終了したことを知らせます
- 最初のポップアップで、プロセスが終了するまで待つように伝えるメッセージを表示させます
再生制限が終了した後にポップアップを閉じます
- フローステップがポップアップの後に来る場合にのみ有効になるようにします
- ドロップダウンを利用できるようにするには、フローステップを保存する必要があります
- ポップアップを再表示させるには、ページの読み込みが完了している必要があります
外観タブでは以下の内容を調整できます。
- レイヤー順序を整理（z-index）
- タイミングオプション
Appearance Tab
ビルダーノートを追加して、チームメンバーとのコラボレーションを改善します。
Notes Tab
技術的なノート
- 異なる色や不透明度の連続的なオーバーレイはサポートされていません
Tip Tuesday動画
クリック可能なアクションアイテムを使ったポップアップを作成する方法
ポップアップでテーブルを構築する方法
ポップアップステップにCSS矢印を追加します
