ヘルプセンター / 設定マニュアル
05 埋込・サイト連携

埋込タグの発行と貼付(2行で完了)

AI STUDIOの試着機能を自社サイトに設置する方法を解説します。発行された2行のタグをコピーして貼り付けるだけで完了します。

embed-tag 画面例
画面イメージ(実際の管理画面のスクリーンショット)

埋込タグとは

埋込タグとは、AI STUDIOの試着機能をお店のホームページに表示するための「短い文字の塊」です。AI STUDIOが自動で作ってくれますので、お店側ではコピーして貼り付けるだけで設置できます。難しい知識は必要ありません。

作業は2行のタグをコピーして、サイトに貼り付けるだけです。早ければ5分で完了します。

埋込タグを発行する手順

  1. 管理画面の左メニューから「埋込タグ」を開きます。
  2. 右上の「新規発行」ボタンを押します。
  3. シナリオを選択します(例: 「振袖試着」「七五三試着」など、用途に合わせて選びます)。
  4. 表示モードを選びます。次の3種類から選べます。
    • タブ式: ページの中に試着画面が直接表示されます。
    • FABボタン式: 画面の右下に丸い試着ボタンが浮かびます。
    • モーダル式: ボタンを押すとポップアップで試着画面が開きます。
  5. 「発行する」ボタンを押すと、2行のタグが表示されます。
  6. 「コピー」ボタンを押して、タグを控えます。

自社サイトに貼り付ける手順(WordPressの場合)

WordPressをお使いの場合、貼り付け方法は主に3通りあります。お店の運用に合うものをお選びください。

方法1: 商品ページに貼る(カスタムHTMLブロック)

  1. WordPressの管理画面で、試着機能を載せたい固定ページや商品ページの「編集」を開きます。
  2. 「ブロックを追加」から「カスタムHTML」を選びます。
  3. 先ほどコピーした2行のタグを貼り付けて、「更新」を押します。

方法2: サイト全体に表示する(フッターに設置)

  1. WordPress管理画面の「外観」→「カスタマイズ」を開きます。
  2. 「フッターのカスタムコード」欄に2行のタグを貼り付けます。
  3. 「公開」を押します。これでサイトのすべてのページに試着機能が表示されます。

GTM(タグマネージャー)や制作会社にお願いする場合

サイトを制作会社に任せている場合や、Google タグマネージャー(GTM)・アクセス解析の「カスタムHTML」欄で一括管理している場合は、発行画面の「GTM・制作会社向けタグ」をお使いください。data属性が使えない環境でも、右下に「AIで試着」ボタンを常駐させられます。

  • GTM の場合: GTM で「カスタムHTML」タグを作り、コピーしたタグを貼り付けて、トリガーを「All Pages(すべてのページ)」にして公開します。
  • 制作会社に依頼する場合: 同じタグをそのまま渡し、「全ページの </body> の直前に設置してください」とお伝えください。トークンは発行直後の画面でしか表示されないので、コピーして渡してください。

なお発行されるタグには id="aistudio-widget" と defer が付いているため、ページ本文だけでなく <head> やアクセス解析のタグ欄に貼っても正しく動きます。

※ タグにトークン(data-token または window.AIStudioConfig.token)が含まれていないと、試着ウィジェットは表示されません(他店の設定が誤って表示される事故を防ぐためのしくみです)。コピーもれにご注意ください。

貼り付けたあとの確認

サイトを開いて、試着ボタンや試着画面が表示されていれば成功です。表示されない場合は、貼り付けたタグの前後に余計な文字が混ざっていないかを確認してください。

困ったときは

タグを貼ったのに表示されない場合は、サポートまでご連絡ください。お店のサイトのURLとシナリオ名をお伝えいただければ、こちらで設置状況を確認できます。WordPress以外のサイトをお使いの場合も、貼り付け方法をご案内いたしますのでご相談ください。

このページで解決しなかったら

このページに載っていない操作・トラブル・改善要望もすべて受け付けています。
営業日 24 時間以内 にご返信します。

info@scirnex.com にメール LP の問合せフォーム