📖 目次

🎯 実装概要

✅ 実装完了で得られる機能

  • アプリ連携: LinkTripアプリとの自動連携とユニバーサルリンク生成
  • 業界対応: ゴルフ・ホテル・レジャーに応じた適切なメッセージ表示
  • 自動挿入: 予約完了画面への最適位置への自動配置
  • レスポンシブ: モバイル・デスクトップ両対応のレスポンシブデザイン

📋 導入方法

✅ 簡単1行導入

導入時間: 5分で完了

1行のスクリプトを予約完了画面に追加するだけで、アプリ連携ウィジェットが利用できます。

🚀 導入手順

推奨方法: 動的スクリプト読み込み

<script>
(function() {
    const script = document.createElement('script');
    script.src = 'https://linktrip-widget.web.app/quickstart-embed.js?partner=[事業者ID]&type=post-booking';
    script.async = true;
    document.head.appendChild(script);
})();
</script>

推奨理由: CSP対応、エラーハンドリング、既存システムとの競合回避

代替方法: 直接スクリプトタグ

<script src="https://linktrip-widget.web.app/quickstart-embed.js?partner=[事業者ID]&type=post-booking" async></script>

使用ケース: シンプルな実装が必要な場合

✅ 前提条件

事業者ID・設定は準備済みの前提で、技術的な導入手順を説明します。

✅ 自動で実現される機能

  • 適切な位置へのウィジェット自動挿入
  • 業界別メインテキストの自動設定
  • アプリ連携ボタンの動的生成
  • ユニバーサルリンクの自動生成
  • レスポンシブデザインの自動適用

📡 イベント連携仕様

アプリ連携イベント

LinkTrip.onPurchase(callback)

「アプリで利用開始」ボタンがクリックされた時に発火

LinkTrip.onPurchase((data) => {
    // アプリ連携時の処理
});

// data の内容:
{
    instanceId: 'linktrip-complete-1640995200-abc123',
    partnerId: 'demo-partner',
    action: 'app-activation',
    timestamp: 1640995200000,
    universalLink: 'https://linktrip.app/activate/...',
    sessionId: 'sess_abc123'
}

ウィジェット読み込み完了イベント

LinkTrip.onLoad(callback)

予約完了ウィジェットの表示完了時に発火

LinkTrip.onLoad((data) => {
    // ウィジェット表示完了時の処理
});

// data の内容:
{
    instanceId: 'linktrip-complete-1640995200-abc123',
    partnerId: 'demo-partner',
    widgetType: 'post-booking',
    industry: 'golf',
    categoryMainText: '雨の日のゴルフがもっと安心できる準備が整いました。'
}

⚙️ カスタマイズオプション

業界別メインテキスト

✅ 自動設定される業界別メッセージ

  • ゴルフ (golf): 雨の日のゴルフがもっと安心できる準備が整いました。
  • ホテル (hotel): 雨の日の宿泊がもっと安心できる準備が整いました。
  • レジャー (leisure): 雨の日のレジャーがもっと安心できる準備が整いました。
  • キャンプ (camp): 雨の日のキャンプがもっと安心できる準備が整いました。
  • その他 (default): 雨の日がもっと安心できる準備が整いました。

配置場所のカスタマイズ

設定ファイルでの指定

{
  "selectors": {
    "postBookingInsertTarget": ".booking-complete-content, #completion-area"
  },
  "ui": {
    "position": "after",
    "spacing": {
      "margin": "20px 0",
      "padding": "0"
    }
  }
}

📋 まとめ

✅ 基本導入手順

  1. スクリプト追加: 予約完了画面に1行のコードを追加
  2. 動作確認: ウィジェット表示とアプリ連携の確認
  3. イベント実装: 必要に応じてアプリ連携イベントを処理

⚠️ 注意事項

  • 予約前ウィジェットとは別実装が必要です
  • 事業者システムとの連携は別途検討が必要な場合があります

📍 配置場所

予約完了画面のHTMLページの<head>タグ内、または</body>終了タグ直前に配置してください。