使用 Webflow 逻辑在 HubSpot 中建立连接

使用 Logic 的 Make HTTP 请求块从 Webflow 表单提交中在 HubSpot 中创建新联系人。

HubSpot 是一种广泛使用的客户关系管理 (CRM) 系统,您可以在其中监控客户数据并优化销售和营销策略。通过利用 Logic,您可以高效地将联系人从表单提交转移到 Hubspot,并将您的 Webflow 门户与 CRM 集成。

开始: 如果你还没有这样做, 在 HubSpot 上开设账户。此外,请确保您在 Webflow 站点上包含一个表单,其中的字段与 HubSpot 中的必填字段一致。

在本教程中,我们将讨论:

  1. 生成 HubSpot API 密钥的过程
  2. 为逻辑工作流设置身份验证
  3. 定位 HubSpot API documentation
  4. 配置 HTTP 请求设置
  5. 测试和部署您的工作流程
  6. 解决工作流程中的潜在问题

生成您的 HubSpot API 密钥

记住: HubSpot 提供 2 种选择 身份验证方法 (OAuth 和私有应用访问令牌)。本指南重点介绍 私人应用程序访问令牌 方法。
  1. 访问您的 HubSpot 账户 然后继续 创建私人应用程序,如果还没有完成
  2. 选择 作用域 选项卡并在 CRM 下拉菜单(确保至少选择 crm.对象.联系人.写入 将联系人发送至 Hubspot)
  3. 点击 显示代币 并复制你的 API 密钥

为逻辑工作流配置身份验证

  1. 通过启动新选项卡在 Webflow Designer 中打开您的 Webflow 站点
  2. 在设计器画布上选择您的表单并访问 表单设置
  3. 选择 来源 下拉并选择 逻辑
  4. 点击 添加新流程
  5. 姓名 字段,并可选择在 描述 场地
  6. 拖动 发出 HTTP 请求 将块添加到流程编辑器画布并指定名称(例如,“在 HubSpot 中发起新联系”) 
  7. 来自 验证 下拉菜单,选择 API 令牌
  8. 选择 标头 来自 添加 选项
  9. 在“授权”中输入 标头 场地
  10. 点击 选择凭证 > 添加新凭证
  11. 在以下位置命名您的 API 令牌(例如“HubSpot API 令牌”) 姓名 字段中提供描述 描述 如果需要
  12. 输入“Bearer {API 密钥}“ 在里面 代币 领域,取代 {API 密钥} 使用从 HubSpot 复制的 API 密钥
  13. 点击保存您的新凭证 创造 并确保 保持此标签打开! 
专家提示: 此外,您还可以将表单链接到新的 Logic 工作流程 逻辑面板 > 流程 选项卡。有关表单提交触发器的更多见解,请参阅逻辑。
当选择逻辑作为源时,表单设置中会出现添加新流或浏览流的选项。
表单与逻辑之间的连接可以通过表单设置、表单块设置或从 逻辑面板 > 流程 标签。
在添加到下拉菜单中选择“标题”,并在标题输入字段中输入“授权”。
“新凭证”模式窗口显示 API 凭证的名称、描述、类型和值的字段。
对于采用 Bearer 身份验证的 API(例如 HubSpot),请记住在 API 密钥前插入“Bearer” 代币 场地。

定位 HubSpot API documentation

  1. 访问 HubSpot API 参考 documentation
  2. 向下滚动至 CRM 位于左侧面板
  3. 导航 对象 > 联系方式 > 创建联系人保持此选项卡打开 寻求指导!

配置 HTTP 请求设置

设置逻辑流程和 HubSpot 身份验证凭据后,返回 Webflow 以在流程中定义 HTTP 请求。此阶段的 HTTP 请求配置将在访问者每次提交表单时在 Hubspot 中建立新联系人。

笔记: 如果你关闭了 Webflow 网站打开的标签页,请导航至 逻辑面板 > 流程 选项卡并选择在前面步骤中创建的流程。单击 发出 HTTP 请求 流程编辑器画布上的块以打开块设置并继续以下步骤。
  1. 选择 邮政 来自 请求方法 落下
  2. 将“https://api.hubapi.com/crm/v3/objects/contacts”粘贴到 网址 场地
  3. 点击旁边的“加号”图标 标头 添加新标题
  4. 在“content-type”中输入 姓名 字段和“application/json”中的 价值 场地 
  5. 在里面 身体 字段中,粘贴以下代码片段 创建联系人 HubSpot 中提供 API 1TP32说明 — 它将类似于此(但包含属性

    { “组织”:“Biglytics”, “联系电子邮件”:“[email protected]”, “名字”:“Bryan”, “姓”:“Cooper”, “电话”:“(877) 929-0687”, “网页”:“biglytics.net” }
    

要继续,您必须将实时信息合并到 HTTP 请求中,以便从您通过表单收到的提交中收集数据:

  1. 删除 HubSpot 联系人中的现有内容,并将光标置于 内容 部分
  2. 选择紫色“”符号并选择相应的动态表单元素(例如姓名、电子邮件等)
内容部分包含动态表单组件,用于从表单提交中获取姓氏、名字和联系电子邮件。
用于将数据传输到 Hubspot 的全面 HTTP 请求设置包括身份验证过程、请求技术、URL、标头和请求正文,以及用于从 Webflow 表单中获取数据的变量。
从 Logic 的 Construct HTTP 请求块向 Hubspot 发出完整的 POST 请求。

测试和发布序列的程序

  1. 执行测试以完成配置
  2. 将测试值输入到相应的字段中
  3. 执行测试
  4. 轻按 终止 或者 接受数据 退出测试模式
  5. 点击 公之于众
  6. 准备发布流程
  7. 继续发布您的网站
提示: 如果您在测试过程中遇到错误通知,请按照我们的解决问题措施解决问题,然后重复上述步骤。了解有关检查 HTTP 请求的更多详细信息。

解决序列中问题的程序

如果在测试序列时遇到错误,请尝试以下措施:

  • 在配置凭证时,确认在 API 密钥前添加了“Bearer”(以及空格)(例如 Bearer 123456789)
  • 使用免费工具检查请求正文中是否存在任何错误,例如 JSONLint
麦宜云
Ewan Mak 的最新帖子 (查看全部)