在外部网站上嵌入 EdCommerce

Last updated: October 16, 2026

将EdCommerce内容嵌入外部网站和着陆页的综合指南，涵盖三种方法。(1) 嵌入潜在客户表单：从设置 > 电商 > 表单中复制EdCommerce潜在客户表单iframe — 可以通过每个办公室旁边的三点菜单复制，也可以通过顶部菜单中的“复制潜在客户表单Iframe”按钮为所有办公室复制单个表单 — 然后将HTML粘贴到任何外部网站或CMS中，例如WordPress/Elementor、Shopify或Wix；可以通过编辑iframe URL来添加语言代码（EN、PT、ES、ES_MX、PT_BR、DE、IT、TR、FR、JA、KO），或添加HEX代码来设置提交按钮颜色。只有潜在客户表单可以嵌入外部网站 — 预订表单仅限EdCommerce使用 — 提交的潜在客户会同步到Edvisor，根据您的业务规则自动分配给正确的顾问，并进入正确的管道和阶段。(2) 嵌入课程小组件：在EdCommerce设置 > 小组件中创建小组件，自定义其外观，然后将生成的代码片段粘贴到HTML模块中；其中还提供了针对WordPress（Elementor和Visual Composer）、Wix和Squarespace的分步说明以及使用场景。(3) 将EdCommerce添加到WordPress：通过“外观” > “菜单”，使用指向EdCommerce URL的自定义链接，将EdCommerce网站链接到WordPress导航菜单中（该URL可在设置 > EdCommerce > EdCommerce详细信息下找到），最好设置为在新标签页中打开。

借助EdCommerce，您可以将内容带到任何外部网站或着陆页 — 无论是嵌入潜在客户表单、嵌入课程小组件，还是添加指向EdCommerce网站的链接。本文将介绍这三种方法。

嵌入EdCommerce表单

EdCommerce提供了一项强大的功能，让您可以创建和个性化不同的潜在客户表单和预订表单，从而轻松收集潜在客户和预订所需的信息。

下面我们将向您展示如何在网站的其他页面上嵌入潜在客户表单，使您不仅可以从在线商店收集潜在客户，还可以从任何网页收集潜在客户。

\这些潜在客户随后将与您的Edvisor账户同步，自动分配给正确的顾问，并添加到相应的管道和阶段。*

*如果您尚未配置表单，请返回本文，了解如何在EdCommerce网站中设置和个性化表单。

**请注意，只有潜在客户表单可以嵌入您的网站。预订表单仅限EdCommerce使用。

如何在任何着陆页或网站上嵌入EdCommerce表单

  • 导航至：设置 > 电商 > 表单。

然后，点击每个办公室旁边的三点图标，如果您想嵌入为特定办公室创建的表单，请选择“复制潜在客户表单Iframe”。

或者，只需点击顶部菜单中的“复制潜在客户表单Iframe”按钮，即可嵌入一个唯一表单（适用于所有办公室）。

您将获得一段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 账户同步，并添加到正确的销售流程和阶段中。

嵌入 EdCommerce 课程

借助 EdCommerce，您不仅可以打造时尚的电子商务着陆页，甚至可以创建完整的网站，还可以将其强大的功能无缝集成到您正在使用的任何现有网站中。

这意味着您可以兼得两者的优势——现有网站的功能与 EdCommerce 的强大功能。

您可以通过创建并嵌入小部件来实现这一点。让我们看看如何操作。

如何创建 EdCommerce 小部件

  1. 访问您的 EdCommerce 设置：登录您的 EdCommerce 账户，然后进入“设置”部分。
  2. 创建小部件：在左侧菜单中选择“小部件”，然后选择“创建新小部件”。
  3. 填写小部件详细信息：填写表单，包括小部件名称、首选语言、货币和学生国籍。
  4. 选择内容：选择要在小部件中显示的课程或教育机构。只需点击“课程”或“提供者”，然后从右侧列表中选择您想要显示的项目。
  5. 自定义外观：通过编辑字体样式、背景颜色和盒阴影来调整小部件的外观，使其与您网站的设计相匹配。您还可以通过点击小部件预览中的方形图标来调整内边距，以获得更好的适配效果。
  6. 保存您的小部件：设置满意后，点击“保存”。

保存小部件后，您将获得一段代码。

需要将此代码添加到您的网站中，请继续阅读以了解操作方法。

如何将 EdCommerce 小部件添加到您的网站

只需打开您希望放置此小部件的网站页面，并插入一个包含该代码的 HTML 框。

根据您网站所使用的 CMS（如 WordPress 或 Wix），添加此代码的方法可能有所不同。通常，所有网站编辑器都允许您拖放 HTML 框。

以下是一些示例：

WordPress（使用 Elementor）：

  • 使用 Elementor 打开您想要编辑的页面。
  • 将左侧面板中的“HTML”小部件拖动到您希望放置小部件的位置。
  • 将 EdCommerce 代码片段粘贴到 HTML 代码框中。
  • 点击“更新”以保存更改。

WordPress（使用 Visual Composer）：

  • 编辑您希望添加小部件的页面。
  • 点击“+”按钮以添加新元素。
  • 从内容元素中选择“原始 HTML”或“自定义 HTML”。
  • 将 EdCommerce 代码片段粘贴到文本框中。
  • 点击页面上的“更新”来保存更改。

Wix：

  • 在 Wix 编辑器中进入您想要编辑的页面。
  • 点击编辑器左侧的“添加”（+），然后选择“更多”。
  • 从下拉菜单中选择“HTML iframe”。
  • 点击“输入代码”，然后将 EdCommerce 代码片段粘贴到 HTML 设置框中。
  • 点击“应用”以保存并在页面上查看小部件。

Squarespace：

  • 进入您想要添加小部件的页面。
  • 点击“+添加区块”，然后从菜单中选择“代码”。
  • 将 EdCommerce 代码片段粘贴到代码区块中，然后点击“应用”。

如果您在编辑器中找不到 HTML 模块，请尝试通过编辑“富文本”模块的代码来完成。

使用案例

借助此功能，您可以将网站转变为更具吸引力且信息更丰富的平台。在您的网站上嵌入这些小组件，可以增强内容、提升用户参与度并增加转化率。

以下是 EdCommerce 小组件在您网站中创造性应用的一些示例：

增强博客文章：

如果您正在撰写一篇关于在特定地点（例如悉尼）学习的博客文章，可以在文章末尾嵌入小组件。展示悉尼排名前 3 的课程或特别促销活动，鼓励读者探索这些选项。通过将内容直接链接到相关课程，这可以显著提高转化率。

活动页面：

对于宣传教育展会或网络研讨会的网页，可以嵌入小组件，展示参与活动的课程或院校。这可以让访客提前了解活动内容，并鼓励他们报名或进一步咨询。

特定地点页面：

如果您的网站设有专门介绍特定留学目的地或国家的页面，可以在这些页面上嵌入小组件，展示这些地点提供的课程。这是为已经对这些目的地感兴趣的用户提供相关选项的绝佳方式。

新闻通讯注册感谢页面：

访客订阅您的新闻通讯后，会被引导至感谢页面。在此处，您可以嵌入小组件，立即通过热门或精选课程吸引他们。

促销活动期间：

如果您正在针对某些课程或目的地开展促销活动，可以在活动落地页上集成小组件。调整小组件以展示与活动相关的课程，从而提供一致的用户体验。

将 EdCommerce 添加到 WordPress

请注意，以下说明专为使用 WordPress 作为网站构建工具的用户设计。如果您使用的是其他平台或网站构建工具，这些步骤可能不适用。

第 1 步

访问您的 WordPress 管理面板，进入 "外观" 部分，然后点击 "菜单"。

第 2 步

在“菜单”部分，进入“自定义链接”，输入您的 EdCommerce 平台网址，以及您希望显示在网站菜单中的 CTA 文本。

然后点击 "添加到菜单"，将此新项目添加到主菜单中。

要查找您的 EdCommerce 网址，请进入平台上的设置部分，点击“EdCommerce”，然后点击“EdCommerce 详情”。

专业提示！ 为防止学生放弃您的页面，请务必自定义菜单，使链接在新标签页中打开。