HubSpot 是一种广泛使用的客户关系管理 (CRM) 系统,您可以在其中监控客户数据并优化销售和营销策略。通过利用 Logic,您可以高效地将联系人从表单提交转移到 Hubspot,并将您的 Webflow 门户与 CRM 集成。
开始: 如果你还没有这样做, 在 HubSpot 上开设账户。此外,请确保您在 Webflow 站点上包含一个表单,其中的字段与 HubSpot 中的必填字段一致。
在本教程中,我们将讨论:
- 生成 HubSpot API 密钥的过程
- 为逻辑工作流设置身份验证
- 定位 HubSpot API documentation
- 配置 HTTP 请求设置
- 测试和部署您的工作流程
- 解决工作流程中的潜在问题
生成您的 HubSpot API 密钥
记住: HubSpot 提供 2 种选择 身份验证方法 (OAuth 和私有应用访问令牌)。本指南重点介绍 私人应用程序访问令牌 方法。
- 访问您的 HubSpot 账户 然后继续 创建私人应用程序,如果还没有完成
- 选择 作用域 选项卡并在 CRM 下拉菜单(确保至少选择 crm.对象.联系人.写入 将联系人发送至 Hubspot)
- 点击 显示代币 并复制你的 API 密钥
为逻辑工作流配置身份验证
- 通过启动新选项卡在 Webflow Designer 中打开您的 Webflow 站点
- 在设计器画布上选择您的表单并访问 表单设置
- 选择 来源 下拉并选择 逻辑
- 点击 添加新流程
- 在 姓名 字段,并可选择在 描述 场地
- 拖动 发出 HTTP 请求 将块添加到流程编辑器画布并指定名称(例如,“在 HubSpot 中发起新联系”)
- 来自 验证 下拉菜单,选择 API 令牌
- 选择 标头 来自 添加 选项
- 在“授权”中输入 标头 场地
- 点击 选择凭证 > 添加新凭证
- 在以下位置命名您的 API 令牌(例如“HubSpot API 令牌”) 姓名 字段中提供描述 描述 如果需要
- 输入“Bearer {API 密钥}“ 在里面 代币 领域,取代 {API 密钥} 使用从 HubSpot 复制的 API 密钥
- 点击保存您的新凭证 创造 并确保 保持此标签打开!
专家提示: 此外,您还可以将表单链接到新的 Logic 工作流程 逻辑面板 > 流程 选项卡。有关表单提交触发器的更多见解,请参阅逻辑。



定位 HubSpot API documentation
- 访问 HubSpot API 参考 documentation
- 向下滚动至 CRM 位于左侧面板
- 导航 对象 > 联系方式 > 创建联系人 和 保持此选项卡打开 寻求指导!
配置 HTTP 请求设置
设置逻辑流程和 HubSpot 身份验证凭据后,返回 Webflow 以在流程中定义 HTTP 请求。此阶段的 HTTP 请求配置将在访问者每次提交表单时在 Hubspot 中建立新联系人。
笔记: 如果你关闭了 Webflow 网站打开的标签页,请导航至 逻辑面板 > 流程 选项卡并选择在前面步骤中创建的流程。单击 发出 HTTP 请求 流程编辑器画布上的块以打开块设置并继续以下步骤。
- 选择 邮政 来自 请求方法 落下
- 将“https://api.hubapi.com/crm/v3/objects/contacts”粘贴到 网址 场地
- 点击旁边的“加号”图标 标头 添加新标题
- 在“content-type”中输入 姓名 字段和“application/json”中的 价值 场地
- 在里面 身体 字段中,粘贴以下代码片段 创建联系人 HubSpot 中提供 API 1TP32说明 — 它将类似于此(但包含属性
要继续,您必须将实时信息合并到 HTTP 请求中,以便从您通过表单收到的提交中收集数据:
- 删除 HubSpot 联系人中的现有内容,并将光标置于 内容 部分
- 选择紫色“点”符号并选择相应的动态表单元素(例如姓名、电子邮件等)


测试和发布序列的程序
- 按 执行测试以完成配置
- 将测试值输入到相应的字段中
- 按 执行测试
- 轻按 终止 或者 接受数据 退出测试模式
- 点击 公之于众
- 打 准备发布流程
- 继续发布您的网站
提示: 如果您在测试过程中遇到错误通知,请按照我们的解决问题措施解决问题,然后重复上述步骤。了解有关检查 HTTP 请求的更多详细信息。
解决序列中问题的程序
如果在测试序列时遇到错误,请尝试以下措施:
- 在配置凭证时,确认在 API 密钥前添加了“Bearer”(以及空格)(例如 Bearer 123456789)
- 使用免费工具检查请求正文中是否存在任何错误,例如 JSONLint
Ewan Mak 的最新帖子 (查看全部)
- 包括或删除工作区位置和成员 - 2024 年 4 月 15 日
- 定心盒摘要 - 2024 年 4 月 15 日
- 存储网站以供将来参考 - 2024 年 4 月 15 日