docs: new integrations section with screen recordings and videos + restructuring (#4705)

Co-authored-by: Kunal Mishra <kunalm2345@gmail.com>

docs/integrations/zapier.mdx

@@ -0,0 +1,129 @@
+---
+title: Zapier
+subtitle: Trigger browser automations from Zapier workflows
+slug: integrations/zapier
+---
+
+Connect Skyvern to 7,000+ apps through Zapier. Trigger browser automations from any Zap, or feed Skyvern's results into downstream steps.
+
+## Available Triggers
+
+- **New or Updated Skyvern Workflow** — Starts a Zap whenever a workflow is created or modified.
+
+## Available Actions
+
+- **Create and Run a Task** — Run an automation using **Skyvern 1.0** (simple, single-step goals)
+- **Create and Run Task V2** — Run an automation using **Skyvern 2.0** (complex, multi-step goals)
+- **Run a Workflow** — Run a pre-built Skyvern workflow with parameters
+- **Get a Task / Get a Task V2** — Retrieve results from a previously run task
+- **Get a Workflow** — Retrieve results from a previously run workflow
+
+## Setup
+
+<Steps>
+  <Step title="Add the Skyvern block">
+    Create a new Zap or edit an existing one, search for "Skyvern" in the Apps section, and choose the action or trigger you want.
+
+    <Frame>
+      <video
+        autoPlay
+        muted
+        loop
+        playsInline
+        className="w-full aspect-video rounded-xl"
+        src="/images/zapier/zap1.mp4"
+      ></video>
+    </Frame>
+  </Step>
+
+  <Step title="Connect your account">
+    Click *Sign in* on the left panel and paste your API key from [Settings](https://app.skyvern.com/settings/api-keys).
+
+    <Frame>
+      <video
+        autoPlay
+        muted
+        loop
+        playsInline
+        className="w-full aspect-video rounded-xl"
+        src="/images/zapier/zap2.mp4"
+      ></video>
+    </Frame>
+  </Step>
+
+  <Step title="Configure">
+    Fill in the fields for your chosen action. See the field reference below.
+  </Step>
+
+  <Step title="Test">
+    Review "Data In" to verify what will be sent, click **Test step**, and monitor progress in your [Skyvern dashboard](https://app.skyvern.com).
+
+    <Frame>
+      <img src="/images/zapier/z.5.png" alt="Test the Zapier step" />
+    </Frame>
+  </Step>
+</Steps>
+
+## Field reference
+
+### Create and Run a Task
+
+- **URL** (required) — The starting page for the automation
+- **Navigation Goal** — What Skyvern should do on the page. Omit if only extracting data.
+- **Data Extraction Goal** — What data to pull from the page
+- **Navigation Payload** — JSON input data for forms. Lets you reuse the same task with different data.
+- **Extracted Information Schema** — JSON schema defining the shape of extracted data
+- **Webhook Callback URL** — URL to notify when the task finishes
+- **Max Steps** — Cap the number of steps to control costs
+
+<Note>
+The navigation goal describes what to do *after* loading the URL. Don't include "go to website X" — use the URL field instead.
+</Note>
+
+<Frame>
+  <img src="/images/zapier/z.3.png" alt="Configure task fields in Zapier" />
+</Frame>
+
+### Run a Workflow
+
+First, create your workflow in the [Skyvern UI](https://app.skyvern.com).
+
+- **Workflow** (required) — Select the workflow to run
+- **Parameters** — Fill in any parameters defined in your workflow
+
+<Frame>
+  <img src="/images/zapier/z.7w.png" alt="Select workflow in Zapier" />
+</Frame>
+<Frame>
+  <img src="/images/zapier/z.8w.png" alt="Configure workflow parameters in Zapier" />
+</Frame>
+
+### Get a Task / Workflow
+
+Retrieve the output of a completed run.
+
+- **Task ID** (required) — Starts with `tsk_`
+- **Workflow Run ID** (required) — Starts with `wr_`
+
+<Frame>
+  <img src="/images/zapier/z.11ag.png" alt="Enter Task ID field in Zapier" />
+</Frame>
+
+## Next steps
+
+<CardGroup cols={2}>
+  <Card
+    title="Build Workflows"
+    icon="diagram-project"
+    href="/cloud/manage-workflows"
+  >
+    Create reusable multi-step automations in Skyvern
+  </Card>
+  <Card
+    title="Use Webhooks"
+    icon="webhook"
+    href="/going-to-production/webhooks"
+  >
+    Get notified when tasks complete
+  </Card>
+</CardGroup>