コンテンツにスキップ
DailyPlay Docs

Shopline

DailyPlayをShoplineストアに追加して、顧客がストアフロントからゲームをプレイできるようにします。

埋め込みオプション

Section titled “埋め込みオプション”
方法 タイプ ステータス
Custom HTML フローティング再生ボタン 利用可能
シンプルiframe ページ内インラインゲーム 利用可能 — ウェブサイトへの埋め込みを参照
Shoplineアプリ テーマエディターのApp embed 近日公開

フローティング再生ボタン（Custom HTML）

Section titled “フローティング再生ボタン（Custom HTML）”

Shopline向けの推奨方法。ページにフローティングPlayボタンが表示され、クリックすると全画面オーバーレイでゲームが開きます。

ステップ1 — 埋め込みコードを取得

Section titled “ステップ1 — 埋め込みコードを取得”
  1. DailyPlayで公開済みのゲームを開く
  2. 共有/埋め込み → 埋め込みをクリック
  3. フローティング再生ボタンを選択
  4. Shoplineを選択
  5. Custom HTMLが選択されていることを確認（アプリ/プラグインオプションはまだ利用不可）
  6. 必要に応じてボタンのテキストと色をカスタマイズ
  7. スニペットをコピー

ステップ2 — テーマに追加

Section titled “ステップ2 — テーマに追加”
  1. Shopline管理画面で Theme Editor を開く
  2. ゲームを表示したいページまたはテンプレートに移動
  3. Add section → Custom HTML をクリック
  4. コピーした埋め込みコードを貼り付け
  5. 保存して公開

ステップ3 — ストアオリジンを設定

Section titled “ステップ3 — ストアオリジンを設定”

埋め込みコードにはウィジェットURL内にプレースホルダーオリジンが含まれます：

https://app.dailyplay.ai/embed/[game-id]/widget?origin=https%3A%2F%2Fyour-store.com

https://your-store.com をShoplineストアの公開URL（スキーム + ホスト名、末尾スラッシュなし）に置き換えてください。例：ストアが https://mybrand.shoplineapp.com の場合、エンコードされたオリジンは https%3A%2F%2Fmybrand.shoplineapp.com になります。

共有/埋め込みパネルはこのプレースホルダー付きスニペットを生成します — Shoplineに保存する前に更新してください。

サイト全体 vs 単一ページ

Section titled “サイト全体 vs 単一ページ”
目的 Custom HTMLの追加場所
全ページにボタン すべてのテンプレートに含まれるグローバルフッターまたはレイアウトセクション
1ページのみにボタン テーマエディターでそのページのCustom HTMLセクション
ページ内にインラインゲーム 代わりにページコンテンツでiframe埋め込みを使用

ページでのシンプルiframe

Section titled “ページでのシンプルiframe”

ページコンテンツに直接埋め込むゲーム（フローティングではない）：

  1. DailyPlayで埋め込みパネルの Simple iframe を選択
  2. iframeコードをコピー
  3. Shoplineでページを編集し、HTMLまたは埋め込みブロックを追加
  4. iframeコードを貼り付け
  5. 保存して公開

サイズとレスポンシブレイアウトのヒントはウェブサイトへの埋め込みを参照してください。

Shoplineアプリ（近日公開）

Section titled “Shoplineアプリ（近日公開）”

App embed ブロック付きのネイティブDailyPlay Shoplineアプリを開発中です。利用可能になったら：

  1. ShoplineアプリマーケットプレイスからDailyPlayアプリをインストール
  2. Theme Editor → App embeds を開く
  3. DailyPlay Floating Widget を有効化
  4. 埋め込み設定でゲームID、ボタンラベル、色を設定

アプリが公開されるまで、上記の Custom HTML を使用してください。

トラブルシューティング

Section titled “トラブルシューティング”

ボタンが表示されない

Section titled “ボタンが表示されない”
  • Custom HTMLセクションが保存され、テーマが公開されていることを確認
  • スニペットが完全であることを確認（CSSリンク、スクリプトローダー、ボタン、モーダル）
  • DailyPlayでゲームが公開済みであることを確認

ゲームの読み込みに失敗

Section titled “ゲームの読み込みに失敗”
  • ウィジェットURLのゲームIDを再確認
  • origin パラメーターがストアURLと正確に一致していることを確認（URLエンコード済み）
  • ストアは HTTPS で提供されている必要がある

スタイルが欠落

Section titled “スタイルが欠落”
  • dailyplay-floating.css への <link> が存在し、Shoplineによって削除されていないことを確認
  • テーマが外部スタイルシートを削除する場合、フローティング再生ボタンガイドの General HTML と Inlined CSS を使用してそのバリアントを貼り付け

ボタンがテーマ要素の後ろに隠れる

Section titled “ボタンがテーマ要素の後ろに隠れる”
  • ウィジェットは高い z-index を使用。隠れる場合は、より高いスタッキング順序の固定ヘッダーやチャットウィジェットを確認

次のステップ

Section titled “次のステップ”