外部ウェブサイトへのEdCommerceの埋め込み

Last updated: October 16, 2026

外部ウェブサイトやランディングページにEdCommerceのコンテンツを埋め込むための統合ガイドです。3つの方法を説明します。（1）リードフォームの埋め込み：Settings > Ecommerce > FormsからEdCommerceのリードフォームiframeをコピーします。各オフィスごとに3点メニューからコピーするか、上部メニューの「Copy Iframe for Lead Form」ボタンからすべてのオフィス用に1つのフォームをコピーできます。そのHTMLをWordPress/Elementor、Shopify、Wixなどの外部ウェブサイトやCMSに貼り付けます。iframe URLを編集して言語コード（EN、PT、ES、ES_MX、PT_BR、DE、IT、TR、FR、JA、KO）を追加したり、HEXコードを追加して提出ボタンの色を設定したりできます。外部に埋め込めるのはリードフォームのみで、予約フォームはEdCommerce専用です。送信されたリードはEdvisorに同期され、ビジネスルールに従って適切なカウンセラーに自動割り当てされ、正しいパイプラインとステージに登録されます。（2）プログラムウィジェットの埋め込み：EdCommerceのSettings > Widgetsでウィジェットを作成し、外観をカスタマイズして、生成されたコードスニペットをHTMLブロックに貼り付けます。WordPress（ElementorおよびVisual Composer）、Wix、Squarespace向けの手順や活用例も紹介します。（3）WordPressへのEdCommerceの追加：Appearance > Menusから、Custom Linkを使用してEdCommerceサイトのURL（Settings > EdCommerce > EdCommerce Detailsで確認できます）をWordPressのナビゲーションメニューにリンクします。新しいタブで開くように設定することをおすすめします。

EdCommerceを使えば、リードフォームの埋め込み、プログラムウィジェットの埋め込み、EdCommerceサイトへのリンク追加など、外部ウェブサイトやランディングページにコンテンツを掲載できます。この記事では、これら3つすべてを説明します。

EdCommerceフォームの埋め込み

EdCommerceには、さまざまなリードフォームや予約フォームを作成してパーソナライズできる強力な機能があり、リードや予約者から適切な情報を簡単に収集できます。

ここでは、ウェブサイトの他のページにリードフォームを埋め込み、オンラインストアだけでなく、あらゆるウェブページからリードを収集する方法を説明します。

\これらのリードはEdvisorアカウントと同期され、適切なカウンセラーに自動的に割り当てられ、適切なパイプラインとステージに追加されます。*

*フォームをまだ設定していない場合は、この記事に戻って、EdCommerceサイト内でフォームを設定およびパーソナライズする方法を確認してください。

**リードフォームのみをウェブサイトに埋め込めることにご注意ください。予約フォームはEdCommerce専用です。

ランディングページやウェブサイトにEdCommerceフォームを埋め込む方法

  • 次の場所に移動します：Settings > Ecommerce > Forms。

次に、各オフィスの横にある3点アイコンをクリックし、特定のオフィス用に作成されたフォームを埋め込む場合は「Copy Iframe for Lead Form」を選択します。

または、上部メニューの「Copy Iframe for Lead Form」ボタンをクリックして、すべてのオフィス用の一意のフォームを埋め込むこともできます。

ウェブサイトにコピーして貼り付けるHTMLコードが表示されます。

WordPress（ElementorやVisual Composerなどのサイトビルダーを使用している場合）、Shopify、またはWixなどのCMSでは、通常、HTMLコードスニペットを使って簡単に埋め込む方法が用意されています。

通常、これはツールボックス内のウィジェットまたは項目で、簡単にドラッグアンドドロップできます。

たとえば、Elementorのようなウェブサイトビルダーを使用している場合は、HTMLウィジェットから追加できます。

フォームの言語をカスタマイズする方法

リードフォームの言語を指定する場合は、HTMLコード内のURLの末尾に言語コードを追加します。

例：

src="https://dev-virtual.edvisor.io/edvisor/ecommerce-campaign/lead-form-iframe/en"

以下に、利用可能な各言語の言語コードを示します。

  • EN = 英語
  • PT = ポルトガル語
  • ES = スペイン語
  • ES_MX = ラテンアメリカのスペイン語
  • PT_BR = ブラジルポルトガル語
  • DE = ドイツ語
  • IT = イタリア語
  • TR = トルコ語
  • FR = フランス語
  • JA = 日本語
  • KO = 韓国語

フォームボタンの色をカスタマイズする方法

埋め込んだリードフォームの「提出」ボタンの色をブランドに合わせて変更することもできます。方法は簡単です。

  1. ブランドカラーのHEXコードを確認します（例：#4EB2F4）。
  2. このHEXコードを埋め込みたいフォームのURLに追加します。

たとえば、HEXコード#4EB2F4の色を使用する場合、URLは次のようになります。

<iframe title="Lead Form"
    src="https://virtual.edvisor.io/nuevalengua/cotizador/lead-form-iframe/en/4EB2F4/9447"
    width="500"
    height="900"
    frameborder="0"
    allowfullscreen="true">
</iframe>

#4EB2F4を任意のHEXカラーコードに置き換えるだけで、変化を確認できます。

学生がこれらのフォームのいずれかへの入力を完了すると、EdCommerceの設定で確立されたビジネスルールに基づいて、適切なカウンセラーにリードが割り当てられます。これらのリードはEdvisorアカウントとも同期され、正しいパイプラインとステージに追加されます。

エドコマースのプログラムを埋め込む

エドコマースでは、スタイリッシュなeコマースランディングページを作成したり、ウェブサイト全体を作成したりできるだけでなく、その強力な機能を、使用中の既存のウェブサイトに統合することもできます。

つまり、現在のウェブサイトの機能とエドコマースの強力な機能、両方のメリットを得られます。

これはウィジェットを作成して埋め込むことで実行できます。方法を見てみましょう。

エドコマースウィジェットの作成方法

  1. エドコマースの設定にアクセスする： エドコマースアカウントにログインし、「設定」セクションに移動します。
  2. ウィジェットを作成する： 左側のメニューで「ウィジェット」を選択し、「新しいウィジェットを作成」をクリックします。
  3. ウィジェットの詳細を入力する： ウィジェットの名前、希望する言語、通貨、学生の国籍をフォームに入力します。
  4. コンテンツを選択する： ウィジェットに表示するプログラムまたは教育プロバイダーを選択します。「プログラム」または「プロバイダー」をクリックし、右側のリストから表示したいものを選択してください。
  5. 外観をカスタマイズする： フォントのスタイル、背景色、ボックスシャドウを編集して、ウェブサイトのデザインに合わせてウィジェットの外観を調整します。ウィジェットのプレビュー内にある四角形のアイコンをクリックすると、より適切に表示されるよう余白を調整することもできます。
  6. ウィジェットを保存する： 設定に納得したら、「保存」をクリックします。

ウィジェットを保存すると、コードスニペットが表示されます。

このコードをウェブサイトに追加する必要があります。方法を引き続きご確認ください。

エドコマースウィジェットをサイトに追加する方法

ウィジェットを配置したいウェブサイトのページを開き、コードを使ってHTMLボックスを挿入するだけです。

ウェブサイトのCMS（WordPressやWixなど）によって、このコードの追加方法は異なる場合があります。一般的に、すべてのウェブサイトエディターではHTMLボックスをドラッグ＆ドロップできます。

以下にいくつか例を示します。

WordPress（Elementor使用）：

  • Elementorで編集したいページを開きます。
  • 左側のパネルから「HTML」ウィジェットを、ウィジェットを配置したいページ上の場所にドラッグします。
  • HTMLコードボックスにエドコマースのコードスニペットを貼り付けます。
  • 「更新」をクリックして変更を保存します。

WordPress（Visual Composer使用）：

  • ウィジェットを含めたいページを編集します。
  • 「+」ボタンをクリックして新しい要素を追加します。
  • コンテンツ要素から「Raw HTML」または「Custom HTML」を選択します。
  • テキストボックスにエドコマースのコードスニペットを貼り付けます。
  • ページ上の「更新」をクリックして変更を保存します。

Wix：

  • Wixエディターで編集したいページに移動します。
  • エディター左側の「追加」（+）をクリックし、「その他」を選択します。
  • ドロップダウンメニューから「HTML iframe」を選択します。
  • 「コードを入力」をクリックし、HTML設定ボックスにエドコマースのコードスニペットを貼り付けます。
  • 「適用」をクリックして保存し、ページ上でウィジェットを確認します。

Squarespace：

  • ウィジェットを追加したいページに移動します。
  • 「+ブロックを追加」をクリックし、メニューから「コード」を選択します。
  • コードブロックにエドコマースのコードスニペットを貼り付け、「適用」をクリックします。

エディターにHTMLモジュールが見つからない場合は、「リッチテキスト」モジュールのコードを編集してみてください。

使用例

この機能を使うと、ウェブサイトをより魅力的で情報豊富なプラットフォームに変えることができます。これらのウィジェットをサイトに埋め込むことで、コンテンツを充実させ、ユーザーエンゲージメントを高め、コンバージョンを増加させることができます。

以下は、エドコマースのウィジェットをサイト全体でクリエイティブに活用する方法の例です：

ブログ記事の強化：

シドニーなど特定の場所での留学についてブログ記事を書く場合は、記事の最後にウィジェットを埋め込みます。シドニーでおすすめのプログラムや特別なプロモーションを3つ紹介し、読者がこれらの選択肢を検討するよう促します。コンテンツを関連するプログラムに直接リンクすることで、コンバージョンを大幅に増加させることができます。

イベントページ：

教育フェアやウェビナーを宣伝するウェブページには、イベントに参加するプログラムや教育機関を紹介するウィジェットを埋め込みます。これにより、訪問者はイベントの内容を事前に確認でき、申し込みや問い合わせを促すことができます。

場所別ページ：

特定の留学先や国に特化したページがウェブサイトにある場合は、これらのページにウィジェットを埋め込み、その場所で利用できるプログラムを表示します。これらの留学先にすでに関心を持っているユーザーに、関連する選択肢を提供する優れた方法です。

ニュースレター登録完了ページ：

訪問者がニュースレターを購読した後、サンクスページに誘導します。ここにウィジェットを埋め込み、人気のプログラムや注目のプログラムをすぐに紹介できます。

プロモーションキャンペーン中：

特定のコースや留学先のプロモーションキャンペーンを実施している場合は、キャンペーンのランディングページにウィジェットを組み込みます。キャンペーンに関連するプログラムを紹介するようウィジェットを設定し、統一感のあるユーザー体験を提供します。

WordPressへのエドコマースの追加

以下の手順は、ウェブサイトビルダーとしてWordPressを利用しているユーザー向けに特別に作成されています。異なるプラットフォームやウェブサイトビルダーを使用している場合、これらの手順は適用できない可能性があります。

ステップ1

WordPressの管理パネルにアクセスし、「外観」セクションに移動して、「メニュー」をクリックします。

ステップ2

「メニュー」セクションで「カスタムリンク」に移動し、エドコマースプラットフォームのURLと、ウェブサイトのメニューに表示したいCTAテキストを入力します。

次に「メニューに追加」をクリックして、この新しい項目をメインメニューに追加します。

エドコマースのURLを確認するには、プラットフォームの設定セクションに移動し、「エドコマース」をクリックしてから「エドコマースの詳細」をクリックします。

プロのヒント！学生がページを離れてしまうのを防ぐため、リンクが新しいタブで開くようにメニューをカスタマイズしてください。