ボタンの基本設定〜インラインDOMについて

シナリオ配信の際に表示されるボタンをインライン要素して表示させる設定方法を説明します。

※注意※ インラインDOMはHTMLの知識が必要となります。

デフォルト設定では、Flipdeskのボタンはフローティング要素として表示されますが、これをインライン要素として表示したい時に使用するのがインラインボタンです。

フローティング要素とは、画面上の固定位置に表示され、ページをスクロールしても移動しない要素を指します。
インライン要素は、ページ内の特定の位置に埋め込まれた要素を指します。

インラインボタンを利用するには２つの方法がございます。

設置後は、ステータスをONにする前にプレビュー機能を使って確認することをおすすめします。

ボタンタイプを「インライン」もしくは「インライン置換」を選択し、ボタンを設置したい場所の要素を記載します。

ページ内に存在する要素の中からセレクタで指定できるようid、classを設定してください。ページ内において一意であることから、idを使用することを推奨しています。

※設定した要素がページ内に存在しない場合はボタンが挿入されません。必ずページ内に存在する要素を記述してください。

任意のページの、ボタンをインライン表示したい箇所に設置してください。

インラインボタンを表示したい箇所に以下のタグを埋め込んでください。

<a id="flipdesk_chat-extra-btn"></a>

インライン/インライン置換を選択した際に、上記タグのidがデフォルトでセットされているため、DOM部分のセレクタ変更は必要ありません。

＊指定したDOM要素が複数存在する場合の挙動

通常のシナリオ：すべてのDOM要素が配信対象になります。

同時配信シナリオ：複数存在する場合は配信されません。

予想外の挙動を避ける為、一意の要素を指定する事を推奨しています。

豆知識

インラインDOMを利用する場合、横幅100%を使用できなくなります。
サイトのwidth、heightに合わせたい場合は、ボタンの種類をHTMLボタンにし、以下のスタイルをHTMLに設定してください。

<style>
#flipdesk-html-button-content {
width: auto !important;
height: auto !important;
}
</style>