概要

プロモーションタイルは、利用可能な融資オファーを強調表示することでユーザーの認知率を高めます。このガイドでは、Capital の融資促進コンポーネントをホワイトラベルのプロモーションとしてウェブサイトやアプリに埋め込む方法をご紹介します。

プロモーションタイルは、メールのみのプログラムよりも融資の申請率を上げる手段として貢献します。

主な利点

• 認知率の向上:ビジネス上の意思決定を行っているページでユーザーが利用可能な融資オプションを紹介し、それらのオプションが意思決定プロセスの一部となるように働きかけます。
• ギャップの解消:コンテキスト内に可視的なプロモーションタイルを設置して、メールのみのマーケティングにかかる制約やサブページに埋もれてしまうコンポーネントの問題を解決します。
• 摩擦の低減:ユーザーがアプリケーションフローを直接クリックできるようにします。
• 受入率の促進:行動を促す明確な条件でタイムリーなオファーを提示します。
• ブランドの一貫性の維持:オファーのデザインは、プラットフォームのデザインシステムに合わせてカスタマイズできます。

Furever のプロモーションタイル、Stripe の埋め込みコンポーネントのデモ

配置

ビジネスで成功している実装サンプルを分析したところ、メインページまたはそのページのサイドバーにプロモーションタイルを配置すると、最も高いマーケティング効果が得られることがわかりました。

ユーザーが頻繁にアクセスする場所にタイルを配置することで、可視性とエンゲージメントを最大化できます。この戦略的な配置により、ユーザーは最も適切なタイミングで融資オファーを確認できるようになり、その結果、申請率と受入率の向上につながる可能性があります。

さらに、顧客がプラットフォームをどのように利用しているかを分析し、特定のユースケースにおいて最も利用されている領域を特定します。

利用の開始

次の手順に従って、Capital の融資オファーをユーザーに提示するプロモーションタイルを埋め込みます。

Connect.js を設定する

アプリケーションに Stripe の埋め込みコンポーネントがまだない場合は、Connect の埋め込みコンポーネントの使用ガイドにある Connect.js の初期化手順を実行します。

このガイドでは、以下の内容について取り上げます。

1. Create Account Session API を使用するためのバックエンドルートの確立
2. Connect.js の設定
3. Connect.js の読み込みと初期化

このガイドを完了したら、プロモーションタイルの実装に進むことができます。

Account Session ルートで capital_financing_promotion を有効にする

アカウントセッションを作成する際は、components パラメーターの capital_financing_promotion を指定して、Capital 融資プロモーションコンポーネントを有効にします。

curl https://api.stripe.com/v1/account_sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -H "Stripe-Version: 2025-04-30.basil; embedded_connect_beta=v2;" \
  -d account=
{{CONNECTED_ACCOUNT_ID}} \
  -d "components[capital_financing_promotion][enabled]"=true

プロモーションタイルをレンダリングする

アカウントセッションを作成し、ConnectJS を初期化したら、フロントエンドで Capital の融資促進コンポーネントをレンダリングできます。

// Include this element in your HTML
const capitalFinancingPromotion = stripeConnectInstance.create('capital-financing-promotion');
capitalFinancingPromotion.setLayout('banner');
container.appendChild(capitalFinancingPromotion);

コンポーネントのデザインをカスタマイズする

埋め込みコンポーネントのデザインをカスタマイズできます。Capital の融資促進コンポーネントは、お使いのデザインシステムに合わせて豊富なデザインオプションをサポートします。そのため、このプロモーションタイルは、サードパーティーから提供された埋め込み要素ではなく、プラットフォームのネイティブ要素のような使用感があります。

Connect.js の設定を使用して、色、タイポグラフィ、境界線の半径、その他の視覚要素をカスタマイズできます。また、埋め込みコンポーネントのデザインプレビューツールを使用して、実装前にさまざまなオプションを試すこともできます。

プロモーションタイルを他の埋め込みコンポーネントと異なるデザインにする場合、Connect.js インスタンスをいくつか初期化することで、より細かく制御できるようになります。このアプローチにより、プラットフォーム全体でそれぞれのコンポーネントが独自のデザイン設定を維持できるようになります。

表示されるステータスについて

このコンポーネントは、連結アカウントの融資ステータスに基づいて表示が調整されます。

• 有効なオファーあり:申請の開始ボタンでオファーの詳細がすべて表示されます
• 貸付中の有効な融資:コンポーネントは表示されません (null が返されます)
• **有効な融資なし:**融資プログラムに関する基本的な資格情報が表示されます

前述したように、プロモーションタイルは、メインページや、ユーザーがビジネス上の意思決定を行うようなアクセス頻度の高いページに実装することを検討してください。

オプション:オファーがない場合にタイルを非表示にする

一般的なスタイル設定では、対象となるオファーがない限り、カードを完全に非表示にします。これを実行するには、以下の利用可能な onEligibleFinancingOfferLoaded コールバックを使用します。

// Include this element in your HTML
const capitalFinancingPromotion = stripeConnectInstance.create('capital-financing-promotion');
capitalFinancingPromotion.setLayout('banner');
container.appendChild(capitalFinancingPromotion);
capitalFinancingPromotion.setOnEligibleFinancingOfferLoaded(({productType}) => {
  switch (productType) {
    case 'none':
      capitalFinancingPromotion.parentElement.style.display = 'none';
      break;
    case 'standard':
    case 'refill':
      capitalFinancingPromotion.parentElement.style.display = 'block';
      break;
  }
});

その他のコンポーネントドキュメントを探す

プロモーションタイルは、Capital で利用できる埋め込みコンポーネントの 1 つです。

このコンポーネントの追加設定オプションの詳細については、Capital Financing Promotion コンポーネントのドキュメントをご覧ください。

埋め込みコンポーネントの詳細については、Capital for Platforms の埋め込みコンポーネントガイドをご覧ください。

実装後の手順

プロモーションタイルを実装すると、次のようになります。

• **A/B テストの実施:**ユーザーをセグメント化し、プロモーションタイルが申請率に与える影響を測定します。
• システムの拡張:Capital の申請フローなど、他の埋め込みコンポーネントにシステムを拡張します

導入サポートが必要な場合個別のガイダンスについては、Capital for Platforms パートナーシップチームにお問い合わせください。