開発者向け SPREEAI

試着室を建てる
あらゆる画面へ。

カタログを接続します。カスタマージャーニーを形作ります。チームに合った統合パスを備えた Always On をストアフロントに導入します。

建設を開始する完全なドキュメントを開く

開発者の視点ムリナル・シュクラエンジニアリング部長

自分の道を選択してください

どこから始めましょうか
コマーススタックは生きている。

管理された設定にはShopifyを使用するか、当社のSDKおよびAPIと統合してください。ビジネスに必要な機能を選択し、ブランドのショッピング体験を維持しましょう。

ライブ

最速パス

Shopify アプリ

当社のテクノロジーは、Shopify パートナーシップを通じて利用できます。アプリをインストールし、カタログを接続し、ストアのエクスペリエンスを形作ります。

Download Shopify app オープンドキュメント

Web SDK

カスタムウェブ

Web SDK

配置、スタイル、イベント、サイズ変更、カートに追加の動作を制御します。JavaScript + TypeScript ドキュメント

ネイティブモバイル

iOS SDK

SPREEAI エクスペリエンスを既存の iOS ショッピングジャーニーに取り入れます。iOSガイドを開くドキュメント

ネイティブモバイル

Android SDK

ネイティブコントロールを使用して、試着を Android 製品エクスペリエンスに統合します。Android ガイドを開くパートナーアクセス

カスタムシステム

パブリックAPI

サーバーサイドおよびカタログワークフローには、承認済みのAPIリファレンスを使用してください。オープンAPIリファレンス

近日公開予定

マーケットプレイス

Amazonパートナーネットワーク

SPREEAI をコマーススタックに統合するためのより多くの方法が、Amazon パートナーネットワークやその他のプラットフォームに間もなく提供される予定です。最新情報はまずこちらに掲載されます

Web SDK クイックスタート

最初の統合です。

一度認証すると、ページ上の任意の場所で試着やサイズ調整が表示されます。オンボーディング中に発行されたテスト認証情報を使用し、ブラウザーコードにクライアントシークレットを含めないでください。

npm install @spreeai/web-sdk@3.0.0

# or
yarn add @spreeai/web-sdk@3.0.0

import { init } from "@spreeai/web-sdk";
import "@spreeai/web-sdk/dist/web-sdk.css";

// Add <div id="spreeai-try-on"></div> to the product page first.
const sdk = await init({ clientId: "your-client-id" });

if (sdk) {
  await sdk.renderTryOnButton({
    elementId: "spreeai-try-on",
    garments: [{ garmentId: "your-garment-id" }],
    enableAddToCart: true,
  });
}

// Pass events inside renderTryOnButton's options.
await sdk?.renderTryOnButton({
  elementId: "spreeai-try-on",
  garments: [{ garmentId: "your-garment-id" }],
  events: {
    onTryOnButtonClick: (event) => {
      console.info(event.name);
    },
    onAddToCartClicked: (event) => {
      // Connect event.garments to your storefront's cart.
    },
  },
});

統合モデル

4つのシステム。
ある顧客の瞬間。

01あなたのカタログ

製品 ID、バリエーション、画像、商品化コンテキスト。

02SPREEAI 摂取

衣類は、処理、レビュー、準備状態を経ていきます。

03SDKまたはAPI

お客様のストアフロントは、対象商品に関するエクスペリエンスをリクエストしています。

04顧客のアクション

試着して、サイズを選び、コーディネートを完成させたら、レジに戻ってください。

立ち上げまでの集中的なパス

準備します。接続する。
自信を持って生きていきましょう。

3つの重要な節目と、それぞれに対応する実用的なチェックリスト。

01・準備する
明確な出発点。
旅、アクセス、カタログを調整します。
準備チェックリスト
- チャネル、カタロググループ、成功指標を 1 つ選択します。
- パートナーのアクセス、認証情報、ステージング権限を確認します。
- SKU に合わせたクリーンな衣類画像を提供します。
製品・エンジニアリング・カタログ
02・つながる
ネイティブな感じを出しましょう。
ステージングを構築します。旅全体をテストしてください。
統合チェックリスト
- 対象となる商品をレンダリングし、バリアントとカートの動作を結び付けます。
- エクスペリエンスをブランドに合わせます。
- モバイル、デスクトップ、アクセシビリティ、パフォーマンス、障害状態を確認します。
フロントエンド・QA・ブランド
03・打ち上げ
実際の使用から学びましょう。
既製品を有効にして測定します。
起動チェックリスト
- 製品の準備が整っていることを確認し、段階的なエクスペリエンスを公開します。
- 導入、完了、変換を監視します。
- 結果を参考に、次のカテゴリーや旅程を進めてください。
コマース・アナリティクス