バナーの基本設定：インラインバナーの設定方法

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

インラインバナーとは

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

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

インラインバナーの設定方法

インラインバナーを利用するには2つの方法があります。

1. サイト独自の要素を使用
2. Flipdeskのインラインバナータグを使用

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

1. サイト独自の要素を使用する場合

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

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

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

2. Flipdeskのインラインバナータグを使用する場合

設置箇所

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

タグの仕様

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

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

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

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