整合 HubSpot 应用程序

连接您的 Webflow 站点和您的 HubSpot 帐户。

您可以使用通过 Webflow Marketplace 提供的经过验证的 HubSpot 应用程序将 HubSpot 嵌入到您的网站中。该应用程序允许您插入和设计 HubSpot 表单、将您现有的 Webflow 表单链接到您的 HubSpot 实例、将 HubSpot 元素和聊天机器人引入您的 Webflow 网站,以及配置网站监控。

如果您想了解有关传统的、企业专属的 HubSpot 表单集成的详细信息,请参阅我们的 HubSpot 表单教程。

在本指南中,您将发现:

  1. 安装和允许 HubSpot 应用程序的说明
  2. HubSpot 应用程序的特性和功能   
  3. 如何卸载 HubSpot 应用程序
  4. 常见问题解答和故障排除技巧

HubSpot 应用程序安装和许可指南

要操作 HubSpot 应用程序,您必须首先 建立HubSpot档案。然后,您可以设置和自定义应用程序:

  1. 访问 HubSpot 应用程序的详细信息页面
  2. 添加到网站
  3. 选择您要链接到 HubSpot 应用程序的 Webflow 站点
  4. 审查请求的权限 
  5. 轻敲 授权应用程序
  6. 选择您的 HubSpot 账户
  7. 轻敲 选择账户
  8. 轻敲 连接应用程序 —您将被重定向到您的仪表板

至关重要的: 您无法将 HubSpot 应用程序连接到整个工作区。安装和允许应用程序时,请务必选择要与应用程序集成的特定站点。 

成功安装应用程序后,您可以在设计器中访问它:

  1. 打开 应用程序面板 
  2. 将鼠标悬停在 HubSpot 应用程序上
  3. 点击 发射

了解有关在设计器中使用应用程序的更多信息。

HubSpot 应用程序的特性和功能

HubSpot 应用程序使营销人员和网站所有者能够在他们的 Webflow 网站和 HubSpot 之间建立直接连接,包含五个基本功能:

  1. 在 Webflow 上嵌入并设置 HubSpot 表单的样式
  2. 将您的 Webflow 表格链接到 HubSpot
  3. 将 HubSpot 元素融入您的 Webflow 网站
  4. 处理现场监控
  5. 将 HubSpot 聊天机器人集成到您的 Webflow 网站

在 Webflow 上嵌入和自定义 HubSpot 表单

HubSpot 应用程序允许您在设计器画布上插入任何受支持的 HubSpot 表单,以根据站点的外观和样式定制表单。要嵌入表单: 

  1. 启动 HubSpot 应用程序
  2. 点击 将现有的 HubSpot 表单添加到您的页面 
  3. 在画布上选择要嵌入表单的位置
  4. 选择要嵌入的所需 HubSpot 表单(如果支持)
  5. 选择是否采用 HubSpot 的表单样式或使用无样式版本
  6. 点击 将表单添加到页面
  7. (可选)根据您的喜好自定义表单

了解有关管理 HubSpot 表格的更多信息

必不可少的: 由于 HubSpot 开发者平台的限制,某些 HubSpot 表单字段(如 reCAPTCHA 字段)目前不受支持。如果应用程序通知您无法嵌入表单,或者您选择 iframe 解决方案,则可以粘贴 表单的分享 URL (可在 HubSpot 中获得)放入 HubSpot 分享网址 应用程序中的字段将表单嵌入为 iframe。虽然您将无法通过 iframe 设置嵌入表单的样式,但它会自动更新以反映 Hubspot 端所做的任何更改。

将 Webflow 表格连接至 HubSpot

您还可以使用 HubSpot 应用程序将现有的 Webflow 表格链接到您的 HubSpot 帐户。要建立连接: 

  1. 启动 HubSpot 应用程序
  2. 点击 将 Webflow 表格映射到 HubSpot 表格 
  3. 在 Webflow 画布上选择要映射的表单
  4. 确保所选表单包含表单标签
  5. 将 HubSpot 表单字段与每个对应的 Webflow 表单字段进行匹配
  6. 点击 节省

以下是 Webflow 和 HubSpot 中兼容的表单字段类型的摘要。对于提到的每种 Webflow 表单输入类型,您都会找到相关的 HubSpot 输入类型,以实现无缝数据对应。使用本指南作为资源来简化您的表单映射过程:

Webflow 字段类型对应HubSpot字段类型
纯文本)

  • 单行文本
  • 多行文本
  • 段落
  • 日期 (年-月-日)

电子邮件单行文本
电话单行文本
数字

  • 数字
  • 单行文本
  • 多行文本

单选按钮收音机
Checkbox单次检查kbox
上传文件文件
文本区域多行文本
选择落下
提醒: 该应用程序不利于映射到 HubSpot 中的密码字段。

管理链接表单的技巧

您可以通过启动“应用程序”菜单并选择来修改连接或从页面上的任何表单中分离映射 连接形式

了解有关管理 HubSpot 表格的更多信息

请注意: 要使 Webflow 表格出现在“已连接的 Webflow 表格”下,您必须访问包含该表格的页面。如果您未能在“已关联的 Webflow 表格”下找到您的表格,请确保您在 Webflow 页面上的位置正确。

将 HubSpot 资源添加到您的 Webflow 网站

HubSpot 应用程序可让您探索并将 HubSpot 帐户中的任何资源集成到您的 Webflow 站点中。开始: 

  1. 开始 HubSpot 申请
  2. 将 HubSpot 资源整合到您的网站
  3. 询问并选择您希望引入的资源
  4. 在画布上选择要包含资源的组件
  5. 包含在页面上

了解有关管理 HubSpot 资产的更多信息.

笔记: 通过应用程序从您的 HubSpot 资产引入到您的 Webflow 站点的资产不会附加到 Webflow 资产部分。

监督网站跟踪

每个 HubSpot 帐户都有唯一的 HubSpot 跟踪代码,可让 HubSpot 观察您的网站流量。要控制网站跟踪:

  1. 开始 HubSpot 申请
  2. 监督网站跟踪
  3. 转变 启用 HubSpot 网站跟踪代码
  4. 节省

为了确保跟踪正常运行,您必须发布您的网站。

深入了解 HubSpot 的跟踪代码.

笔记: 一旦激活 HubSpot 跟踪代码,HubSpot 将自动监控您网站上的所有表单提交(即使表单未链接到 HubSpot),并使用 Webflow 表单 ID 将它们存储在新表单中。如果不希望这样做,您可以 在 HubSpot 账户设置中关闭此功能.

将 HubSpot 聊天机器人整合到您的 Webflow 网站

该应用程序还提供了使用自定义代码将 HubSpot 聊天机器人添加到您的 Webflow 站点的系统说明。 

笔记: 任何高级站点计划以及核心、增长、代理和自由职业者工作区计划均可使用自定义代码容量。

开始:

  1. 开始 HubSpot 申请
  2. 将 HubSpot 聊天机器人添加到您的网站
  3. 查看 HubSpot 聊天机器人库 检查和修改您的 HubSpot 聊天机器人组合
  4. 确保您的 HubSpot 跟踪代码已激活
  5. 发布您的网站 

了解有关设置和配置 HubSpot 聊天机器人的更多信息.

如何清除 HubSpot 应用程序

有两种方法可以从您的 Webflow 站点删除 HubSpot 应用程序:从站点设置,或从设计器。

要通过站点设置删除应用程序:

  1. 站点设置 > 应用 &集成 标签 > 链接的应用程序
  2. 找到 HubSpot
  3. 查看详情 
  4. 清除应用程序

要通过 Designer 卸载:

  1. 打开 应用程序面板
  2. 按 HubSpot
  3. 删除应用程序 

常见问题和解决提示

HubSpot应用程序已打开,但是没有数据加载。

使用权 站点设置 > 应用程序和集成 选项卡并确认 HubSpot 应用程序已列为已安装的应用程序。如果没有, 访问 HubSpot 应用详细信息页面 并在您的站点上重新安装应用程序。如果存在 HubSpot,请打开 应用程序面板,启动 HubSpot 应用程序,然后点击 管理连接 查看所有连接到 Webflow 站点的 HubSpot 帐户。

我通过应用程序嵌入了 HubSpot 表格,但提交的内容并未准确传输到 HubSpot。

插入 表单的分享 URL (可在 HubSpot 中使用) HubSpot 分享网址 应用程序中的字段以将表单嵌入为 iframe 并验证问题是否仍然存在。如果问题仍然存在,请 联系 Webflow 的客户支持团队 以获得进一步的指导。

我修改了我的 HubSpot 表格,但是更新并没有自动反映在我的 Webflow 网站上。

修改 HubSpot 表单后,您可以在设计器中启动应用程序,并用修改后的表单替换现有的 HubSpot 表单。为了即时同步 HubSpot 和 Webflow 之间的更改,我们建议使用表单的共享 URL 嵌入为 iframe。

我使用应用程序将我的 Webflow 表单连接到 HubSpot,但我没有看到提交。

验证您的 Webflow 表单字段是否包含字段标识。如果包含标识,请 联系 Webflow 的客户支持团队 为进一步协助。

我如何验证哪些 HubSpot 帐户链接到每个 Webflow 站点?

使用权 站点设置 > 应用程序和集成 选项卡并确认 HubSpot 应用程序被识别为已安装的应用程序。如果缺失, 访问 HubSpot 应用详细信息页面 并在您的站点上重新安装应用程序。如果包含 HubSpot,请打开 应用程序面板,启动 HubSpot 应用程序,然后按 管理连接 查看所有链接到 Webflow 站点的 HubSpot 帐户。 

我通过应用程序嵌入了 HubSpot 表格,但某些字段或逻辑未能延续。

我们建议输入表单的共享 URL 并使用应用程序将其嵌入为 iframe,或者将表单嵌入为自定义代码嵌入元素。

我将 HubSpot 资源中的一项资产整合到我的网站中,但图像并未出现在我的 Webflow 资源面板中。

使用应用程序从您的 HubSpot 资源引入到您的 Webflow 站点的资产不会自动填充您的 Webflow 资产面板。

如果您在使用 HubSpot 应用程序时仍遇到困难,请 与 Webflow 的客户支持团队取得联系.

麦宜云
Ewan Mak 的最新帖子 (查看全部)