連携・その他

埋め込み・外部連携

予約ページをWebサイトに埋め込んだり、LINE・Zoomなどと連携する方法

予約ページの埋め込み方法

🔗
URL直接共有
最も簡単。URLをコピーしてメールやSNSで共有するだけ。
lfo.rizbell.com/booking/your-org?project=abc
📎
iframe埋め込み
自社サイトに直接組み込む。サイトを離れずに予約可能。
<iframe src="..." width="100%" height="700" />
🪄
ポップアップ
ボタンクリックでモーダル表示。既存ページに溶け込む。
RizbellLFO.open({project: "abc"})

iframeコードの取得方法

1

プロジェクト詳細の「埋め込み」タブを開く

基本設定
担当者
メール
埋め込み
埋め込みコードと設定が表示されます
2

「iframeコードをコピー」ボタンをクリック

iframeコード
コピー
<iframe src="https://lfo.rizbell.com/booking/your-org?project=xxx" width="100%" height="700" frameborder="0" ></iframe>
3

自社サイトのHTMLに貼り付ける

index.html
<section class="booking-section">
<h2>無料相談を予約する</h2>
<iframe src="https://lfo.rizbell.com/booking/..." />
</section>

追従ウィジェット(フローティングボタン)

サイト上に常時表示される追従型の予約ボタンを設置できます。ページをスクロールしても画面の隅に表示され続けるため、どのタイミングでも予約フォームを開けます。

設定場所: 管理画面 → プロジェクト設定 →「ウィジェット」タブ

popup モード
👤
担当者に相談
候補日程を見る

初期表示はカード、ボタンで予約フォームが開く

modal モード
📅予約する

ピルボタン1つ。クリックでモーダルが開く

minimized モード
📅予約する

ピルボタンのみ表示。最小限のフットプリント

× ボタンの動作(3段階クローズ)

展開
モーダル/全画面
× 押す→
コンパクト
PC: パネル表示
SP: ミニカード
× 押す→
非表示
完全に消える

モーダルを閉じても完全に消えるのではなく、一度コンパクト表示に戻ります。再度 × を押すと完全に非表示になります。

G
Google Tag Manager (GTM) 経由で設置する場合

通常の埋め込みコード(script タグ)は GTM では動作しません。GTM 用の設定コードを別途使用してください。

GTM カスタムHTMLタグに貼り付け:
<script> window.RizbellConfig = { org: "your-org-slug", projectSlug: "your-project", widgetMode: "popup", btnColor: "#3B82F6" }; </script> <script src="https://lfo.rizbell.com/embed.js"></script>
ℹ

GTM用のコードはプロジェクト設定 → ウィジェットタブの「GTM経由」タブからコピーできます。

ウィジェットコードの取得手順

1
プロジェクト設定を開く
2
「ウィジェット」タブを選択
3
ウィジェットモード・位置・カラー・テキストを設定
4
プレビューで見た目を確認
5
「直接埋め込み」または「GTM経由」タブからコードをコピーして設置

LINE連携

Growthプラン以上

LINE公式アカウントと連携することで、予約確認・リマインダー・MAメッセージをLINEで送信できます。QRコードを読み込むとLINE内で予約フォームが直接開くLIFF連携にも対応しています。

設定場所: 管理画面 →「LINE連携」タブ

L
LINE連携設定
Channel ID
LINE DevelopersのChanneling IDをコピー
例: 1234567890
Channel Secret
Messaging APIチャネルのChannel Secret
例: abcdef1234567890...
Channel Access Token
長期アクセストークンを発行して貼り付け
例: eyJhbGciOiJI...(長いトークン)
LIFF ID
LIFF Appを作成して取得したID
例: 1234567890-XXXXXXXX
LINE連携を保存

事前に必要な作業

1
LINE Developersでプロバイダーを作成
2
Messaging APIチャネルを作成(LINE公式アカウントと紐付け)
3
Channel ID・Channel Secret・Channel Access Tokenを取得
4
LIFF Appを作成し、エンドポイントURLに予約フォームURLを設定
5
LIFF IDを取得

LIFF連携について

LIFF(LINE Front-end Framework)を設定すると、QRコードを読み込むだけでLINEアプリ内に予約フォームが開きます。LINEユーザー情報と自動連携されるため、顧客の入力負担が軽減されます。

Zoom連携

Zoom連携を設定すると、予約確定時に自動でZoomミーティングが作成され、顧客と担当者の両方にミーティングURLが通知されます。組織共通のZoomアカウント(有料プラン)を1つ連携して複数担当者で共有できます。

1.Zoom Marketplace でOAuthアプリを作成(User管理型 OAuth)
2.管理画面 →「担当者設定」→「Zoom連携」タブでOAuth認証を実行
3.プロジェクト設定 →「基本設定」→「オンライン商談」でZoomを選択
4.プロジェクト設定内のZoom接続状態パネルで「Zoomと連携する」ボタンをクリックして認証
5.予約確定時にZoomリンクが自動生成され、メールに記載されます
プロジェクト設定内のZoom接続状態パネル
!
Zoomが未連携です

Zoomを使用するには連携が必要です。

🎥 Zoomと連携する
✓
Zoom連携済み
zoom-user@company.com
連携解除
⚠

同一Zoomアカウントの重複防止

組織で1つのZoomアカウントを共有する場合、複数の予約が同じ時間帯に重ならないよう自動チェックします。ミーティングが重複する場合は Google Meet にフォールバックします。

📖

詳細な設定手順

Zoomアプリの作成手順・スコープ設定など詳細は「カレンダー連携・担当者設定」ヘルプページを参照してください。

💡 ヒント: まずはURL直接共有から始めるのが最も簡単です。慣れてきたらiframe埋め込みに移行すると、顧客がサイトを離れずに予約でき、コンバージョン率が向上します。