手動インストール
このタグが組み込みのすべてです。キーを自分のものに置き換えて一度だけ貼り付け、ほかは何も変えないでください。商品への追加属性も、自作のボタンも、商品IDも不要です。
<script
src="https://www.cabina.io/widget.iife.js"
crossorigin="anonymous"
async
data-api-key="cab_live_YOUR_API_KEY">
</script>integrity属性は追加しないでください。バンドルのURLはバージョン管理されていないため、ハッシュを固定すると、次のリリースの時点でブラウザがスクリプトを拒否するようになります。しかも無言で、こちらからお知らせする手段もありません。
<head>の中ならどこでも、あるいは</body>の直前に置けます。どちらでも動きます。スクリプトはasyncで、ページの準備が整うのを自分で待ちます。
何よりも先に：ドメイン
何かを貼り付ける前に、Cabinaのダッシュボードでストアのドメインを許可してください。場所はウィジェット ページの許可するドメインセクションです。このリストが空の間、ウィジェットはどのサイトにも表示されません。タグやプラグインを正しくインストールしていても同じで、理由も表示されません。
正確なオリジンを入力してください。https://shop.comとhttps://www.shop.comは別々の2つのオリジンです。ストアが両方で応答するなら、両方を追加してください。ShopifyとWixではこの手順は不要です。アプリがインストール時に自分でドメインを登録します。
どこに貼り付けるか、プラットフォーム別に
Shopify
テーマ
Shopifyの管理画面でオンラインストア → テーマに移動します。
コードを編集する
公開中のテーマで ⋯ メニューを開き、コードを編集するを選びます。
theme.liquid
layout/theme.liquidを開きます。
貼り付ける
閉じタグ</head>の直前にタグを貼り付けます。
保存する
保存します。変更はすぐに反映されます。公開すべきテーマはありません。
Shopifyはすべての商品ページにOpen Graph画像を出力するので、あなたが何もしなくてもアイテムは見つかります。
WooCommerce
WooCommerceにはプラグインがあります。タグの仕事を代わりに引き受け、テーマを変更しても残ります。
プラグインをインストールする
WordPressでプラグイン → 新規プラグインを追加に移動し、Cabinaを検索して今すぐインストール、続けて有効化をクリックします。これはWordPress.org のプラグインで、更新もほかのプラグインと同じくそこから届きます。 WordPress 6.5以降と、有効なWooCommerceが必要です。
サイトがディレクトリからインストールできない場合は、cabina-woocommerce.zip をダウンロードし、プラグイン → 新規プラグインを追加 → プラグインのアップロードからアップロードしてください。
設定する
設定 → Cabinaに移動し、cab_live_…キーを貼り付けます。キーはCabinaのダッシュボードのインストールページ、WooCommerceタブにあります。
完了
商品ページにボタンが表示されます。テーマに貼り付けるものはありません。表示されない場合、足りないのはほぼ必ずドメインです。このページの冒頭をご覧ください。
別の方法として、タグをテーマに入れることもできます：
スニペット用プラグイン
WordPressにコードスニペット用のプラグイン（WPCode、Code Snippets）をインストールするか、子テーマを使います。
スニペットを作る
サイトのヘッダーで実行されるスニペットを作り、そこにタグを貼り付けます。
または子テーマで
子テーマなら、functions.phpのwp_headフックに追加します。
確認する
保存して商品ページを開きます。
WooCommerceは、SEOプラグインがないとog:imageを出力しません。その場合Cabinaはギャラリー画像にフォールバックします。アイテムの画像をご覧ください。
Wix
Wixでは貼り付けるタグはありません。アプリはWix App Marketにあり、それが唯一の方法です。
App Market
WixのダッシュボードでApp Marketを開き、「Cabina」を検索します。
追加する
アプリを追加してサイトを許可します。APIキーは自動で設定され、コピーするものはありません。
公開する
サイトを公開します。Wixでは公開するまで何も反映されません。ボタンはWix Storesの商品ページに、アプリによって配置されます。
PrestaShop
PrestaShopにはモジュールがあります。タグの仕事を代わりに引き受け、テーマを変更しても残ります。
モジュールをダウンロードする
cabina.zip をダウンロードします。PrestaShop 8と9で動作します。
アップロードする
管理画面でモジュールに移動し、モジュールをアップロードをクリックしてファイルをドロップします。
設定する
設定をクリックし、cab_live_…キーを貼り付けます。キーはCabinaのダッシュボードのインストールページ、PrestaShopタブにあります。
完了
商品ページにボタンが表示されます。テーマに貼り付けるものも、クリアすべきキャッシュもありません。表示されない場合、足りないのはほぼ必ずドメインです。このページの冒頭をご覧ください。
モジュールをインストールしたくない場合は、タグをテーマに入れます：
テーマとロゴ
デザイン → テーマとロゴに移動し、テーマのファイルを開きます（またはFTPを使います）。
head.tpl
有効なテーマのtemplates/_partials/head.tplを開きます。
貼り付ける
headブロックの閉じ{/block}の前にタグを貼り付けます。
キャッシュをクリアする
保存してから、高度なパラメーター → パフォーマンスでキャッシュをクリアします。
そのほかのテーマ
テンプレートを見つける
すべてのページの<head>を生成しているテンプレートを見つけます。ファイル名はプラットフォームによって異なります。
貼り付ける
<head>の中のどこか、または</body>の直前にタグを貼り付けます。
一度だけ
貼り付けるのは一度だけです。2つ目のコピーは自分で停止してコンソールに警告を出しますが、それでも取り除く価値はあります。
再読み込みする
商品ページを再読み込みします。
Cabinaにはテンプレート変数も、商品IDも、追加のマークアップも必要ありません。scriptタグ1つが組み込みのすべてです。
動いたことを確認する方法
商品ページを開きます。Cabinaは購入ブロックを見つけ、そのすぐ下に自分のボタンを置きます。そのためのマークアップを書く必要はありません。
ボタンのテキストと色はダッシュボードの設定から取られ、フォントはテーマのものを引き継ぎます。
ボタンが出ない？ブラウザのコンソールを開いてください。Cabinaが理由を1行で伝えます。トラブルシューティングへ進んでください。
ボタンの位置を変える
Cabinaは下の一覧を順番に使って購入ブロックを探し、最初に一致した要素のすぐ後ろにボタンを挿入します。
| アンカー | 典型的なプラットフォーム |
|---|---|
.product-form__buttons | Shopify |
form[action*="/cart/add"] .product-form__submit | Shopify |
form[action*="/cart/add"] | Shopify |
form.cart | WooCommerce |
.single_add_to_cart_button | WooCommerce |
.product-add-to-cart | PrestaShop |
#add-to-cart-or-refresh | PrestaShop |
カスタムテーマでは、たいていどれも一致しません。その場合、ボタンはページの末尾、フッターの下の見えない場所に追加されます。壊れているわけではなく、場所が違うだけです。
対処法は、商品テンプレートのボタンを置きたい場所に、空の要素を1つ入れることです：
<div data-cabina-target></div>この属性は上のどのアンカーよりも優先され、ボタンは要素の隣ではなく内側に配置されます。
アイテムの画像
Cabinaはアイテムを商品ページからそのまま読み取ります。試す順番は、og:image、次にtwitter:image、次に以下のセレクターのいずれかに一致する最初の画像です：
| ギャラリーのセレクター | 典型的なプラットフォーム |
|---|---|
.woocommerce-product-gallery__image img | WooCommerce |
img.wp-post-image | WooCommerce |
.wp-block-woocommerce-product-image img | WooCommerce |
.product__image img | Shopify |
.product-image img | Shopify |
.product-photo img | Shopify |
.product-single__photo img | Shopify |
[data-product-image] img | Shopify |
.product-featured-image img | Shopify |
.product-gallery img | Shopify |
.product-img img | Shopify |
.product__media img | Shopify |
.main-product-image img | Shopify |
この3つのどれも画像を見つけられない場合、ボタンはそれでも表示され、試着が途中で失敗します。あなたより先にお客様が気づく、唯一の不具合です。
どのプラットフォームでも使える一般的な対処法は、商品テンプレートでOpen Graph画像を出力することです：
<meta property="og:image" content="https://your-store.com/images/product.jpg">いずれにせよやっておく価値があります。同じタグを、Facebook、WhatsApp、Slackが商品リンクのプレビューに使っています。
お客様に見えるもの
同意のチェックボックスにチェックを入れるまで、お客様の端末から何も送信されません。あらかじめ用意されたモデルなら、写真はまったく不要です。
ボタンのテキストはダッシュボードであなたが選んだものです。Cabinaの翻訳ではありません。一方、試着室のインターフェースはページの言語に従います。
AIエージェント向け
同じ契約を機械向けに書き、素のmarkdownとして配信しています。スクリーンショットはなく、代わりに決定木と、ターミナルからインストールを検証するコマンドがあります：cabina.io/en/docs/agent.md 。