About this block

Integrations With Code speaks to the developer in the room. The left column promises that missing integrations are an afternoon of work, backed by a checklist covering the API, webhooks, and SDKs, with a docs button. The right column is a terminal styled panel showing a webhook payload, realistic keys, an event name in the title bar, and token based coloring with no syntax highlighter dependency.

The payload is hand colored spans, so editing it is editing strings, and the panel stays legible in both themes. Keep the payload under ten lines and make the keys plausible, developers read this panel the way designers read a typeface specimen.

When to use

Reach for this block when developers influence the purchase or when your integration directory has gaps that the API honestly covers. It converts the weakest moment of an integrations page, the buyer whose tool is missing, into a capability story. Pair it after integrations-categories-columns as the catchall, or use it alone on a developer landing page beside the hero split-with-code.

A natural flow around it on a Marketing Pro page:

Before

• Integrations index blocks establishing what already exists

After

• FAQs covering rate limits and auth
• CTAs pointing at API keys or a sandbox

What you can display

One strong use is a webhook payload for the most marketing flavored event you have. Other panels:

• API request. A curl or SDK call creating a campaign, for a build on us pitch.
• Config file. An infrastructure as code snippet for a platform sold to ops teams.
• CLI session. An install and first command sequence for a developer tool.

Tip: use a real looking timestamp and ID format, developers extrapolate the quality of your API from the quality of your example payload.