ガイドに外部のサイトに遷移するボタンを置きたい(CTAボタンをポップアップガイドへ設置する)
ガイドのボタンはPLAINERのコンテンツ内の遷移のみ可能となっておりますが、ガイドの「本文」内にHTMLでボタン要素を記載することは可能となっております。
⚠️設定には、基礎的なHTML/CSSの知識が必要です。個別のご質問にはサポートでお答えしかねます
リッチテキストエディタ内には直接HTMLの記載も可能です。
下記のように、ポップアップガイド内にハイパーリンクテキストを記載をして、サンプルコードのようなCSSを記載することで、外部サイトへ遷移するボタンを作成可能です。
大きさやの見た目はスタイルを調整することで任意に可能です。
※以下のコードは書式設定をリセットした上でPLAINERのガイドテキストエリアに貼り付けてください。(例: Ctrl(Command)+Vではなく、Ctrl(Command)+Shift+Vで貼り付ける)
サンプルコード1
以下のコードをポップアップガイドのテキスト欄に記載をすると、ハイパーリンク付きのテキストがボタン化します。
<style>.plainer-index-popup-guide-root .ql-snow .ql-editor a {margin: 0 auto; padding: 15px 16px; display: inline-block; width: 250px; margin: 0 15px; color: #fff; text-align: center; font-size: 18px; font-weight: bold; background-color: #485FC7!important; border-radius: 6px; border: none; opacity: 1 !important; text-decoration: none;}.plainer-index-popup-guide-root .ql-snow .ql-editor a:hover{opacity:0.7!important;}.plainer-index-popup-guide-root .ql-editor{display: flex; justify-content: center;}</style>
サンプルコード2
以下のコードをポップアップガイドのテキスト欄に記載をすると、既存のボタンが下線付きのテキストに変換されます。(※目立たなくさせる意図です。)
<style>.plainer-popup-link{background-color: #fff!important; font-size: 16px; color: #000000!important; text-decoration: underline;}.plainer-popup-link:hover{background-color:#fff!important;}</style>