Integration Setup Wizard
A guided setup wizard with a vertical step rail beside a pane of sync direction cards, a conflict rule note, and Back and Continue actions.
A guided setup wizard with a vertical step rail beside a pane of sync direction cards, a conflict rule note, and Back and Continue actions.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Integration Setup Wizard is the guided connect flow for a HubSpot integration: a vertical step rail on the left marking Connect account as done, Choose sync direction as the active step, and Map fields and Review as upcoming, beside a content pane where the sync direction is picked from three radio style cards. The recommended two way card carries a conflict rule note on which edit wins, and the footer shows Step 2 of 4 with Back and Continue actions.
Steps and directions are two const arrays, steps with name, detail, and state fields and directions with name, description, note, recommended, and selected fields. The conflict rule note is the detail that matters: it says the most recent edit wins and the older value is kept in history, so two way sync never silently loses a change.
Reach for this block on an integration setup page or a first run onboarding flow, wired to your connector and sync API. Show it right after a user signs in to the source so they choose how data flows before any records move.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the CRM sync direction step. Other setup wizards:
Tip: name the conflict rule on any two way sync; a card that hides which edit wins turns every overlap into a support ticket.