フローティング再生ボタン

フローティング再生ボタン埋め込みは、サイト右下に固定ボタンを追加します。訪問者がクリックすると、ゲームがモーダルオーバーレイで開きます — iframe用のページスペースを確保する必要はありません。

ストアフロントのホームページやキャンペーンランディングページなど、レイアウトを変更せずに全ページでゲームを提供したい場合に使用します。

使い分け

方式	最適な用途
シンプルiframe	単一ページの専用ゲームセクション
フローティング再生ボタン	全ページからのアクセス；ECストアフロント

埋め込みコードの取得

公開済みのゲーム（またはストリームの共有ダイアログ）を開く
共有/埋め込みをクリック
埋め込みタブを選択
フローティング再生ボタンを選択（シンプルiframeの代わり）
プラットフォームを選択 — General HTML、Shopify、または Shopline
生成されたスニペットをコピー

ボタンのカスタマイズ

共有/埋め込みパネルで以下を調整できます：

設定	デフォルト	説明
再生ボタンのテキスト	`🎮 Play`	フローティングボタンに表示されるラベル
再生ボタンの色	組織のブランドカラー	背景色（hex、rgb、または hsl）

変更は埋め込みコードに即座に反映されます — 編集後に再度コピーしてください。

General HTML

</body> の前に生のHTMLを受け付ける任意のウェブサイト向け。

ホスト型アセット（推奨）

DailyPlayからCSSとJavaScriptを読み込む — 短いスニペット：

<link rel="stylesheet" href="https://app.dailyplay.ai/embed-assets/dailyplay-floating.css">
<script>(function(){if(window.__dailyPlayWidgetInit)return;var s=document.createElement("script");s.src="https://app.dailyplay.ai/embed-assets/dailyplay-widget.js";s.defer=true;document.head.appendChild(s);})();</script>

<!-- Floating Play button — bottom-right corner, opens game in overlay -->
<div
  class="dailyplay-floating-widget dailyplay-floating-widget--bottom-right"
  data-dailyplay-floating-widget
  style="position:fixed;bottom:24px;right:24px;z-index:2147483000;"
>
  <button
    type="button"
    class="dailyplay-floating-btn"
    style="background-color: #6c5ce7;"
    data-dailyplay-open="dailyplay-floating-modal-root"
    aria-label="Open DailyPlay"
  >
    🎮 Play
  </button>
</div>

<div
  id="dailyplay-floating-modal-root"
  class="dailyplay-floating-modal"
  data-dailyplay-embed
  hidden
  style="display:none;position:fixed;inset:0;..."
>
  <div class="dailyplay-floating-modal__panel">
    <button type="button" class="dailyplay-floating-modal__close" data-dailyplay-close="dailyplay-floating-modal-root" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <iframe
      data-dailyplay-widget
      data-dailyplay-src="https://app.dailyplay.ai/embed/[game-id]/widget?origin=https%3A%2F%2Fyour-site.com"
      allowfullscreen
      loading="lazy"
      title="DailyPlay Game"
    ></iframe>
  </div>
</div>

重要： ウィジェットURL内の https://your-site.com をサイトのオリジン（スキーム + ホスト名、末尾スラッシュなし）に置き換えてください。origin パラメーターはアナリティクスとドメイン検証に使用されます。

インラインCSS（WordPress対応）

一部のCMS（特にWordPressのカスタムHTMLブロック）は外部 <link> タグを削除します。埋め込みパネルで Inlined CSS (WordPress-safe) を選択 — 同じCSSが <style> ブロックにインラインで埋め込まれ、外部スタイルシートは不要です。スニペットはやや長くなりますが、制限の多いCMS環境でも動作します。

仕組み

フローティングボタン — ビューポート右下に固定（通常のページコンテンツより高い z-index）
モーダルオーバーレイ — ボタンをクリックすると半透明の背景にゲームiframeが中央表示
閉じる — 訪問者は × ボタンまたはパネル外をクリックしてオーバーレイを閉じる
遅延読み込み — モーダルを開いたときにゲームiframeが読み込まれ、ページを高速に保つ

ストリームの場合、DailyPlayがストリームが再生可能であることを確認するまで（プリフライトチェック）、ボタンは非表示のままです。ストリームが利用できない場合、ページには何も表示されません。

ウィジェットURLの形式

ゲームは専用のウィジェットルートを使用します（標準の埋め込みURLではありません）：

https://app.dailyplay.ai/embed/[game-id]/widget?origin=[encoded-site-origin]

ストリーム：

https://app.dailyplay.ai/stream/[org-slug]/[stream-slug]/widget?origin=[encoded-site-origin]

iframe埋め込みURLと比較：https://app.dailyplay.ai/embed/[game-id]

プラットフォームガイド

ECプラットフォーム向けのステップバイステップ手順：

Shopify — テーマエディターのCustom Liquid
Shopline — Custom HTMLセクション

セキュリティ

HTTPS

サイトはHTTPSを使用する必要があります。ゲーム内のカメラとマイク機能もHTTPSが必要です。

コンテンツセキュリティポリシー

サイトでCSPを使用している場合、DailyPlayアセットを許可してください：

script-src https://app.dailyplay.ai;
style-src https://app.dailyplay.ai;
frame-src https://app.dailyplay.ai;
connect-src https://app.dailyplay.ai;

インラインCSSを使用する場合、DailyPlayからの script-src と frame-src のみ必要です（CSSはインライン）。

トラブルシューティング

ボタンは表示されるがゲームが読み込まれない

ゲームが公開済みであることを確認
ウィジェットURLのゲームIDを確認
origin がサイトのURLと一致していることを確認（https:// を含む）

ボタンが表示されない

スニペットが </body> の前に配置され、非表示コンテナ内にないことを確認
ストリームの場合、ストリームがライブで再生可能なときのみボタンが表示される

スタイルが正しくない

dailyplay-floating.css が読み込まれていることを確認（またはインラインCSSモードを使用）
テーマCSSが .dailyplay-floating-btn を上書きしていないか確認 — ウィジェットは主要なレイアウトルールに !important を使用

WordPressがスタイルシートを削除する

埋め込みパネルで Inlined CSS (WordPress-safe) に切り替え

次のステップ

インラインゲームセクション用のiframe埋め込み
Shopifyセットアップ
Shoplineセットアップ
埋め込みゲームのアナリティクスを追跡