Skip to content

docs: update ABM page steps and rewrite HubSpot integration with Clay #52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
taisy03-architect merged 3 commits into from
Apr 1, 2026
Merged

docs: update ABM page steps and rewrite HubSpot integration with Clay #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f621e70
docs: update ABM page steps to reflect new prospect-based workflow
Apr 1, 2026
e16b4e7
docs: rewrite HubSpot integration page to use Clay middleware workflow
Apr 1, 2026
15117cf
docs: update ABM page content, fix circle badges, simplify HubSpot Cl…
Apr 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
91 changes: 27 additions & 64 deletions overview/for-abm/creating-personalized-abm-pages.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,77 +13,40 @@ sidebarTitle: "Create ABM pages"
<div className="flex-1 w-full">
<div className="flex items-center gap-3 mb-4">
<span
className="inline-flex items-center justify-center w-10 h-10 rounded-full font-bold text-lg"
className="inline-flex shrink-0 items-center justify-center w-10 h-10 rounded-full font-bold text-lg"
style={{ background: '#59D38C', color: '#ffffff' }}
>
1
</span>
<h2 className="text-2xl md:text-3xl font-bold tracking-tight">Choose granularity</h2>
<h2 className="text-2xl md:text-3xl font-bold tracking-tight">Upload your Prospects</h2>
</div>
<p className="text-base md:text-lg text-gray-500 mb-4 leading-relaxed">
Decide how personalized you want each page to be.
Add your prospects to the platform so the agent knows who to personalize pages for. You can upload them individually or in bulk via CSV.
</p>

</div>
<div className="flex-1 w-full">
<div className="rounded-xl overflow-hidden border border-gray-200 bg-gray-50">
<div className="p-4">
<p className="text-xs font-medium text-gray-600 mb-3">Personalization options</p>
<div className="grid gap-3">
<div className="rounded-lg border border-gray-200 bg-white p-3">
<p className="text-sm font-semibold text-gray-900">Company</p>
<p className="text-xs text-gray-600">Account-level page for one company.</p>
</div>
<div className="rounded-lg border border-gray-200 bg-white p-3">
<p className="text-sm font-semibold text-gray-900">Job title</p>
<p className="text-xs text-gray-600">Role-level page across many accounts.</p>
</div>
<div className="rounded-lg border border-gray-200 bg-white p-3">
<p className="text-sm font-semibold text-gray-900">Full name</p>
<p className="text-xs text-gray-600">1:1 page for a specific person.</p>
</div>
</div>
</div>
</div>
</div>
</div>

<div className="flex flex-col md:flex-row-reverse gap-8 md:gap-12 lg:gap-16 items-center">
<div className="flex-1 w-full">
<div className="flex items-center gap-3 mb-4">
<span
className="inline-flex items-center justify-center w-10 h-10 rounded-full font-bold text-lg"
style={{ background: '#59D38C', color: '#ffffff' }}
>
2
</span>
<h2 className="text-2xl md:text-3xl font-bold tracking-tight">Prepare your CSV</h2>
</div>
<p className="text-base md:text-lg text-gray-500 mb-4 leading-relaxed">
Your columns depend on the granularity you picked.
</p>

</div>
<div className="flex-1 w-full">
<div className="rounded-xl overflow-hidden border border-gray-200 bg-gray-50">
<div className="p-4">
<p className="text-xs font-medium text-gray-600 mb-3">leads.csv</p>
<p className="text-xs font-medium text-gray-600 mb-3">prospects.csv</p>
<div className="overflow-hidden rounded-lg border border-gray-200 bg-white">
<table className="w-full text-left text-sm">
<thead className="bg-gray-50">
<tr className="text-xs text-gray-600">
<th className="px-3 py-2 font-medium">Company Name</th>
<th className="px-3 py-2 font-medium">Company URL</th>
<th className="px-3 py-2 font-medium">Name</th>
<th className="px-3 py-2 font-medium">Email</th>
<th className="px-3 py-2 font-medium">Phone Number</th>
</tr>
</thead>
<tbody>
<tr className="border-t border-gray-100">
<td className="px-3 py-2 text-gray-900">Acme Corp</td>
<td className="px-3 py-2 text-gray-700">www.acmecorp.com</td>
<td className="px-3 py-2 text-gray-900">Jane Smith</td>
<td className="px-3 py-2 text-gray-700">jane@acmecorp.com</td>
<td className="px-3 py-2 text-gray-700">+1 (555) 123-4567</td>
</tr>
<tr className="border-t border-gray-100">
<td className="px-3 py-2 text-gray-900">Northwind</td>
<td className="px-3 py-2 text-gray-700">www.northwind.com</td>
<td className="px-3 py-2 text-gray-900">Tom Chen</td>
<td className="px-3 py-2 text-gray-700">tom@northwind.com</td>
<td className="px-3 py-2 text-gray-700">+1 (555) 987-6543</td>
</tr>
</tbody>
</table>
Expand All @@ -93,19 +56,19 @@ sidebarTitle: "Create ABM pages"
</div>
</div>

<div className="flex flex-col md:flex-row gap-8 md:gap-12 lg:gap-16 items-center">
<div className="flex flex-col md:flex-row-reverse gap-8 md:gap-12 lg:gap-16 items-center">
<div className="flex-1 w-full">
<div className="flex items-center gap-3 mb-4">
<span
className="inline-flex items-center justify-center w-10 h-10 rounded-full font-bold text-lg"
className="inline-flex shrink-0 items-center justify-center w-10 h-10 rounded-full font-bold text-lg"
style={{ background: '#59D38C', color: '#ffffff' }}
>
3
2
</span>
<h2 className="text-2xl md:text-3xl font-bold tracking-tight">Create a Page Group and set the CTA</h2>
<h2 className="text-2xl md:text-3xl font-bold tracking-tight">Create a Group and set the CTA</h2>
</div>
<p className="text-base md:text-lg text-gray-500 mb-4 leading-relaxed">
Create a new Page Group for the campaign, then set the CTA destination (URL or form).
Create a new Page Group for the campaign, then set the final destination — a URL or form — where you want prospects to convert.
</p>
<div className="bg-gray-50 border border-gray-200 p-4 mt-4">
<p className="text-sm font-medium mb-1">Tip</p>
Expand All @@ -127,25 +90,25 @@ sidebarTitle: "Create ABM pages"
</div>
</div>

<div className="flex flex-col md:flex-row-reverse gap-8 md:gap-12 lg:gap-16 items-center">
<div className="flex flex-col md:flex-row gap-8 md:gap-12 lg:gap-16 items-center">
<div className="flex-1 w-full">
<div className="flex items-center gap-3 mb-4">
<span
className="inline-flex items-center justify-center w-10 h-10 rounded-full font-bold text-lg"
className="inline-flex shrink-0 items-center justify-center w-10 h-10 rounded-full font-bold text-lg"
style={{ background: '#59D38C', color: '#ffffff' }}
>
4
3
</span>
<h2 className="text-2xl md:text-3xl font-bold tracking-tight">Bulk create pages</h2>
<h2 className="text-2xl md:text-3xl font-bold tracking-tight">Bulk create pages from the People tab</h2>
</div>
<p className="text-base md:text-lg text-gray-500 mb-4 leading-relaxed">
Use the Bulk Create Pages filter to generate pages from your CSV rows.
Go to the People tab and bulk create pages for each prospect. The agent will enrich every profile and generate a personalized page for every person in your list.
</p>
</div>
<div className="flex-1 w-full">
<div className="rounded-xl overflow-hidden border border-gray-200 bg-gray-50">
<img
alt="Bulk create pages flow"
alt="Bulk create pages for prospects"
loading="lazy"
decoding="async"
className="w-full h-auto"
Expand All @@ -155,14 +118,14 @@ sidebarTitle: "Create ABM pages"
</div>
</div>

<div className="flex flex-col md:flex-row gap-8 md:gap-12 lg:gap-16 items-center rounded-2xl p-4" style={{ border: '1px solid #59D38C', background: 'rgba(89,211,140,0.06)', boxShadow: '0 0 0 1px rgba(89,211,140,0.2), 0 0 58px rgba(89,211,140,0.32)' }}>
<div className="flex flex-col md:flex-row-reverse gap-8 md:gap-12 lg:gap-16 items-center rounded-2xl p-4" style={{ border: '1px solid #59D38C', background: 'rgba(89,211,140,0.06)', boxShadow: '0 0 0 1px rgba(89,211,140,0.2), 0 0 58px rgba(89,211,140,0.32)' }}>
<div className="flex-1 w-full">
<div className="flex items-center gap-3 mb-4">
<span
className="inline-flex items-center justify-center w-10 h-10 rounded-full font-bold text-lg"
className="inline-flex shrink-0 items-center justify-center w-10 h-10 rounded-full font-bold text-lg"
style={{ background: '#59D38C', color: '#ffffff' }}
>
5
4
</span>
<h2 className="text-2xl md:text-3xl font-bold tracking-tight">Publish and export</h2>
</div>
Expand Down
104 changes: 77 additions & 27 deletions overview/integrations/how-to-add-form-submission-into-your-hubspot-crm.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,91 @@
---
title: "How to add Form Submission into your Hubspot CRM"
description: "Send Architect form submissions to HubSpot using a webhook-triggered workflow"
title: "How to Integrate Leads into HubSpot with Clay"
description: "Send Architect form submissions to HubSpot contacts using Clay as a middleware"
sidebarTitle: "HubSpot with Clay"
---

You should be able add the form responses into your Hubspot contacts list through the Automation Workflow feature in Hubspot.
## Part 1: Create a HubSpot Legacy App

**Step 1: (Hubspot) Create a New Workflow**
<Steps>
<Step title="Log in to HubSpot">
Go to **Development > Legacy Apps**.
</Step>

- Navigate to Automations → Workflows
- Create a new workflow from scratch
- Select Custom trigger type
<Step title="Create a Private Legacy App">
Name it **Architect** and add these scopes:

**Step 2: (Hubspot) Configure External Event Trigger**
- `crm.objects.contacts.write`
- `crm.objects.contacts.read`
</Step>

- Choose "Receive a webhook from an external app" from the custom events and external events options
- Click "Add a webhook"
- Name the webhook (e.g., "Architect")
- Click Continue
- Copy the generated webhook URL
<Step title="Copy your Access Token">
Open the **Auth** tab, click **Show Token**, and copy it. This is your Bearer Token.
</Step>
</Steps>

**Step 3: Set Up the Architect Platform**
## Part 2: Set Up Clay

- Go to your Architect platform Settings → Webhooks
- Create a new webhook
- Paste the HubSpot webhook URL
- Subscribe to "form submitted" event

![Screenshot 2025-12-19 at 18.17.31.png](/overview/images/Screenshot_2025-12-19_at_18.17.31.png)

<Steps>
<Step title="Create a table and add a Webhook">
In Clay, create a new custom table. Add a column: **Add Enrichment > Webhook**. Copy the Webhook URL.
</Step>

**Step 4: Test the Connection**
<Step title="Connect Architect">
In Architect, go to **Settings > Webhooks**, create a new webhook, and paste the Clay Webhook URL. Send a test to confirm it works.
</Step>

![Screenshot 2025-12-19 at 20.56.59.png](/overview/images/Screenshot_2025-12-19_at_20.56.59.png)
<Step title="Add an HTTP API column">
Back in Clay, add a new column: **Add Enrichment > HTTP API**. Select **HTTP API (Headers)** and create a new account.
</Step>

- In Architect Settings, send a test webhook request. Verify it's received in HubSpot
<Step title="Configure the request">
- **Method:** `POST`
- **Endpoint:** `https://api.hubapi.com/crm/v3/objects/contacts`
- **Body:**

**Step 5: Configure Data Fields in HubSpot**
```json
{
"properties": {
"email": "email",
"firstname": "firstName",
"lastname": "lastName",
"company": "companyName",
"hs_google_click_id": "gclid"
}
}
```

- Set up the form to capture data.
- You can optionally add additional fields if your form has multiple fields.
Map each field to the matching property from the webhook data.

<Note>
If your form only captures emails:

```json
{
"properties": {
"email": "email"
}
}
```
</Note>
</Step>

<Step title="Set the headers">
| Header | Value |
| --- | --- |
| `Content-Type` | `application/json` |
| `Authorization` | `Bearer YOUR_ACCESS_TOKEN` |

<Warning>
Replace `YOUR_ACCESS_TOKEN` with the token from Part 1.
</Warning>
</Step>
</Steps>

<Tip>
Architect webhooks also pass UTM parameters (such as `utm_source`, `utm_medium`, `utm_campaign`, and `gclid`) with each form submission, so you can map these to HubSpot contact properties for full attribution tracking.
</Tip>

<Note>
Don't have Clay? Reach out to the Architect team and we can set this up for you.
</Note>
Loading