ボタンの追加・分岐機能とは
ポップアップガイドではボタンを追加することができます。
ボタンは名前と遷移先を変更することができます。
これを活用することで、ユーザーが選択したボタンによって、次に見せるデモを出し分けることが可能なため、よりお客様の状況に沿ったデモを閲覧させることができます。
ボタン追加の方法
ポップアップガイドを作成します。(詳しくはこちら)
画面右側のメニューをスクロールすると、「ボタン」というメニューがあります。
「+ ボタンを追加」をクリックすると、ボタンを増やすことができます。
「ボタン名」を変更すると、ポップアップガイド上のボタンの中にあるテキストが変更されます。
「遷移先」をクリックすると、そのボタンがクリックされた場合に表示するコンテンツを設定できます。(初期値は「次のガイド」になっています)
「ボタンサイズ」を、標準 or 大、から選択できます。(上記のスクリーンショットは"大"で設定しています。)
遷移先ページの選び方（キャプチャ画像で選ぶ）
「遷移先」をクリックすると「分岐先選択」の画面が開きます。ここで、そのボタンを押したときに表示する遷移先を設定します。
「次のガイド」または「他のページ」を選択します。（初期値は「次のガイド」です）
「他のページ」を選ぶと、遷移先の「コンテンツ」を選択できます。
コンテンツを選ぶと、その中の「ページ」を選択できます。ページはキャプチャ画像（サムネイル）付きのグリッドで表示されるため、ページ名だけでなく実際の画面を見ながら遷移先を選べます。
遷移先にしたいページのサムネイルをクリックして選択し、「決定」をクリックします。
ページ名が長い場合は、サムネイルにマウスを乗せると全文が表示されます。
サムネイルがまだ生成されていない場合や読み込めない場合は、代わりのフォールバック画像が表示されます。
選択中のページの見分け方
現在選択しているページには、次の3つの表示が加わり、一覧の中でも一目で選択状態がわかります。遷移先ページは1つだけ選べる単一選択です。
カード左上の丸マークが塗りつぶしになります（未選択のページは枠線だけの空の丸です）。
カードの枠線が青色になります。
カードの背景が薄い青色になります。
キーボード操作時の分岐挙動について
閲覧者がマウスクリックではなくキーボード（Enterキー・→キー）でデモを進めた場合も、ボタンに設定した分岐先に従って遷移します。
キーボード操作では「どのボタンを押したか」の情報がないため、一番上に表示されているボタン（主ボタン）の遷移先が適用されます。複数のボタンで分岐を設定している場合、キーボード操作では主ボタンの遷移先に進む点にご注意ください。それ以外の分岐先へ進めたい場合は、該当ボタンをクリックしてください。
ボタンの色を変更する
ポップアップガイドのボタン（CTAボタン・分岐リンク）は、背景色・文字色を自由に指定できます。CSSの知識は不要で、カラーピッカーから色を選ぶだけでブランドカラーに合わせたボタンを作成できます。
色を変更したいボタンの行で「書式」をクリックします。
「背景色」のカラーピッカーから、ボタンの背景色を選択します。
「文字色」のカラーピッカーから、ボタンのテキストの色を選択します。
変更内容はプレビューにリアルタイムで反映されます。