Search blocks by description or jump to a page.
An onboarding split with a headline, a numbered three step timeline, and a blueprint that walks from choosing a tool to the first live sync.
The source for every Marketing block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? Log in
Integration Setup Steps turns connecting a tool into a story with an ending. The left column carries a headline, a short lede, a numbered three step timeline joined by a vertical rule, and a button to the directory. The right column stacks the same three stages in a card: a four tile tool picker with the chosen app checked, a scoped access request with an authorize control, and a live status row with a pinging dot and a first sync count.
The steps and tools live in small arrays, so relabeling the stages or swapping the four marks is a copy edit rather than a refactor. Every tool logo is an abstract inline SVG drawn from currentColor and every surface uses theme tokens, so the section ships without an image file and stays legible in light and dark mode. What it sells is momentum, most setup sections stop at pick a tool, this one carries the eye all the way to data already flowing.
Reach for this block when the fear is a long, technical setup. Showing the authorize screen and a finished first sync answers the how hard is this question before a visitor has to ask it. It suits any product whose adoption depends on connecting a tool the buyer already runs, and it earns its place right after the feature story, where the reader is convinced and wants to know what getting started actually looks like.
A natural flow around it on a Marketing Pro page:
Before
After
The obvious fit is a native integration onboarding. A few other ways to use the frame:
Tip: keep the timeline to three steps and end on a state, not an action, the pinging live row is what makes setup feel finished rather than begun.