ホーム » チャットをページに設置する

チャットをページに設置する

表示したい固定ページ・投稿・ウィジェットに、ショートコード [optib_chat] を貼り付けます。画面右下にチャットボタンが表示されます。

こんなときに使います

たとえば:商品ページから相談を受け付けたい。

操作する画面の開き方

固定ページ・投稿の編集画面。全ページ表示は「OptiBチャット → チャット設定 → 表示ページ」。

設置方法に合わせてショートコードを選びます。
設置方法に合わせてショートコードを選びます。
1 通常表示のコード / 2 全画面表示のコード / 3 本文内ボタンのコード
画像を押すと原寸で確認できます。

表示したい固定ページ・投稿・ウィジェットに、ショートコード [optib_chat] を貼り付けます。画面右下にチャットボタンが表示されます。

※ ショートコードは全部で3種類あります。管理画面の「ショートコード」タブを開くと、それぞれの使い分けと貼り付ける文字がまとまっていて、クリックだけでコピーできます。

※ チャットボタンはショートコードを貼ったページにだけ表示されます。貼っていないページには出ません。サイト全体に出したい場合は、ショートコードを貼らずに「チャット設定 > 表示ページ」で全ページ表示をONにしてください。

※ 先に「API設定」でAPIキーを設定していないと表示されません。

全画面表示(LINE等からリンクする場合)

[optib_chat mode="fullscreen"] を貼った専用ページを作ると、右下のボタンではなく画面いっぱいに開いた状態のチャットになります。このページのURLをLINE公式アカウントのリッチメニューやあいさつメッセージ、他のSNS等からリンクすれば、チャットアプリのような感覚でOptiBチャットを使ってもらえます。

※ 通常のショートコードと併用せず、このページには [optib_chat mode="fullscreen"] だけを貼ってください。両方貼ると表示が崩れます。

記事の中に「相談する」ボタンを置く

記事やLPの文章の途中に [optib_chat_button] を貼ると、その場所に「見積もり相談をはじめる」ボタンが出ます。押すとチャットが開きます。右下の丸いボタンに気づかないお客様への入口として、記事の途中や末尾にお使いください。右下のボタンはそのまま残ります。

  • 文字を変える[optib_chat_button text="まずは無料で相談する"]
  • 位置を変える[optib_chat_button align="center"]leftcenterright。省略すると左寄せ)

※ ボタンの色は「チャット設定 > デザイン」のテーマ色に自動で合います。ここでは色を選べません。

ここまでできたら完了

  • 表示したいページでチャットが開き、メッセージを送信できる。

次に読むマニュアル

単体プラグイン版 v1.33.1 / 更新日:2026年9月22日