Anchor × HubSpot Integration

Build proposals in HubSpot, sync everything back automatically

CRM Card — create proposals from HubSpot deals
Webhooks — real-time status sync
Custom properties — reports & dashboards
1

Configure Environment Variables

Add these secrets to your Cloudflare Pages deployment

Run the following in your project directory, or set them in the Cloudflare Pages dashboard under Settings → Environment Variables:

npx wrangler secret put ANCHOR_API_KEY
npx wrangler secret put HUBSPOT_ACCESS_TOKEN
npx wrangler secret put ANCHOR_WEBHOOK_SECRET
npx wrangler secret put HUBSPOT_APP_ID
npx wrangler secret put HUBSPOT_CLIENT_SECRET

# For local dev, add to .dev.vars:
ANCHOR_API_KEY=your_anchor_api_key
HUBSPOT_ACCESS_TOKEN=your_hubspot_private_app_token
ANCHOR_WEBHOOK_SECRET=your_webhook_secret
HUBSPOT_APP_ID=your_app_id
HUBSPOT_CLIENT_SECRET=your_client_secret

Get Anchor API Key

  1. Log in to app.sayanchor.com
  2. Go to Settings → Integrations → API
  3. Create a new API key with full proposal access
  4. Copy and store securely

Get HubSpot Token

  1. Go to HubSpot → Settings → Integrations → Private Apps
  2. Create a new private app
  3. Grant scopes: crm.objects.deals.read/write, crm.objects.contacts.read/write, crm.schemas.deals.write, crm.objects.notes.write
  4. Copy the access token
2

Create HubSpot Custom Properties

Auto-creates 10 Anchor properties on your HubSpot Deal object

Click the button below to automatically create all required HubSpot custom properties. This only needs to be done once.

3

Configure Anchor Webhook

Anchor will POST events to your app in real-time

In your Anchor dashboard, go to Settings → Integrations → Webhooks and create a webhook with the following URL:

https://your-app.pages.dev/webhook/anchor

Required Events to Subscribe:

• proposal.created • proposal.sent • proposal.viewed • proposal.approved • proposal.declined • proposal.expired • agreement.amended • agreement.terminated
4

Install the HubSpot CRM Card

Embed the Anchor proposal builder inside HubSpot deal records

In your HubSpot developer account, create a Legacy CRM Card with the following settings:

Data Fetch URL:
  https://your-app.pages.dev/crm-card

Target Record Types:
  ✅ Deals (send: dealname, amount, closedate)
  ✅ Contacts (send: email, firstname, lastname, company)

Card Properties:
  - anchor_proposal_status   (Status)
  - anchor_proposal_url      (Link)
  - anchor_total_amount      (Currency)
  - anchor_monthly_recurring (Currency)

Primary Action:
  IFRAME → https://your-app.pages.dev/card-ui?mode=create
  Label: + New Anchor Proposal

Custom Action URLs:
  https://your-app.pages.dev/*
5

Provision Cloudflare KV Namespace

KV stores proposal ↔ deal mappings for fast lookups

# Create KV namespace
npx wrangler kv:namespace create "anchor_hubspot_kv"

# Copy the output ID into wrangler.jsonc:
"kv_namespaces": [
  {
    "binding": "KV",
    "id": "<your-kv-id>"
  }
]

# Also create a preview namespace for local dev:
npx wrangler kv:namespace create "anchor_hubspot_kv" --preview