概要
ヒント内にHTMLのボタン要素等を埋め込み、OnboardingAPIを利用することで、以下の動画のようにボタン要素等をクリックするとポップアップを起動させることができます。
作成手順
- ポップアップを作成する
- このとき、自動表示条件を作成する必要はありません。
- ヒントを作成する
- ヒント内に下記サンプルコードを参考にボタン要素等を埋め込んでください。
- テスト環境タグが埋め込まれている環境にて、動作を確認する
- ポップアップを公開する
- ヒントを先に公開してしまうとボタンを押してもポップアップが表示されない状況になります。必ず、ポップアップから公開してください。
- ヒントを公開する
サンプルコード
<div class="onb-productname-hint-container">
<p class="onb-productname-hint-info">
クリックするとご案内を開始します。<br>
内容に沿って操作してください。
</p>
<div class="onb-productname-hint-button-list">
<button class="onb-productname-hint-button"
onclick="STANDSMotion.changeGoal('ポップアップIDを入れる')"
>
操作方法を知る
</button>
</div>
</div>
<style>
.onb-productname-hint-container {
width: 100%;
padding: 5px;
}
.onb-productname-hint-button-list {
padding: 0;
}
.onb-productname-hint-button {
margin-top: 10px;
width: 280px;
color: #46A6FF;
background-color: transparent;
border: 1px solid #46A6FF;
border-radius: 4px;
padding: 5px 10px;
cursor: pointer;
transition: color 0.3s, background-color 0.3s;
}
.onb-productname-hint-button:hover {
color: #ffffff;
background-color: #46A6FF;
}
</style>
HTML/CSSについての補足説明
HTMLの補足説明
<div class="onb-productname-hint-container">
<p class="onb-productname-hint-info">
<!-- ↓文章を修正することで表示されている説明文が変わります↓ -->
クリックするとご案内を開始します。<br>
内容に沿って操作してください。
<!-- ↑文章を修正することで表示されている説明文が変わります↑ -->
</p>
<div class="onb-productname-hint-button-list">
<!-- ↓ポップアップIDを入力することで起動するポップアップを設定します↓ -->
<button class="onb-productname-hint-button"
onclick="STANDSMotion.changeGoal('ポップアップIDを入れる')"
>
<!-- ↑ポップアップIDを入力することで起動するポップアップを設定します↑ -->
<!-- ↓文章を修正することで表示されている説明文が変わります↓ -->
操作方法を知る
<!-- ↑文章を修正することで表示されている説明文が変わります↑ -->
</button>
</div>
</div>
CSSの補足説明
以下がCSSのコードです。
CSSの記述でデザインを変えることができます。
デザインを変えたい場合は、貴社にて設定してください。
<style>
.onb-productname-hint-container {
width: 100%;
padding: 5px;
}
.onb-productname-hint-button-list {
padding: 0;
}
.onb-productname-hint-button {
margin-top: 10px;
width: 280px;
color: #46A6FF;
background-color: transparent;
border: 1px solid #46A6FF;
border-radius: 4px;
padding: 5px 10px;
cursor: pointer;
transition: color 0.3s, background-color 0.3s;
}
.onb-productname-hint-button:hover {
color: #ffffff;
background-color: #46A6FF;
}
</style>
ポップアップIDの取得場所
ポップアップIDの取得については、以下の画像を参考にしてください。
注意事項
- クリックしてポップアップが立ち上がるかどうかはテスト環境タグが埋まっている環境でご確認をお願いします。
- ヒントのプレビューの場合、ポップアップを起動するOnboardingAPIが動作しない仕様となっており、確認ができないためです。
- テスト環境タグが埋まっている環境であれば、下書き状態のガイド全てを確認することができます。
