waleedlatif1 · Oct 21, 2026 · Oct 21, 2026
diff --git a/apps/docs/EDITORIAL_GUIDE.md b/apps/docs/EDITORIAL_GUIDE.md
@@ -61,6 +61,7 @@ A link replaces repeated detail only after the owner contains it. Keep a concise
 - Use Markdown lists and tables for simple procedures and reference data. Use tabs for distinct configurations and Steps for substantial sequential procedures.
 - Integration table cells use ordinary word wrapping so short field names and types stay readable. Keep long tokens within the existing table scroll container; do not let them widen the page.
 - On large integration references, keep action and trigger descriptions visible and fold their field tables into `ReferenceDetails`. Preserve headings inside each disclosure so direct links and browser search can reveal them. Setup requirements and consequential warnings stay outside the folded tables.
+- Integration logos belong beside the page title, using the generated `integration` frontmatter. Keep the regular docs header actions and do not repeat the logo in the article body.
 - Match inline code to Sim Chat: normal-weight monospace text, tight padding, and the existing borderless filled surface tokens. Scope the treatment to prose code; preserve fenced examples, API route bars, schema controls, and selector labels.
 - Use shared `ChipSelect` controls for API response and request-example pickers, with accessible names that include the current value, checked radio semantics for single choices, and menus aligned to their triggers. Keep docs pickers nonmodal so they do not hide lazily hydrating siblings. Keep response headings free of inherited extra margins. Scope dependency filter styling to `data-object-search-input`, including schema popovers portaled to the body; focus stays inside the field, and touch fields retain the shared target and text sizes.
 - Import authored tabs from `@/components/ui/tabs`. Mixed panels retain a content inset; only a single code fence fills the frame. Keep long tab lists horizontally scrollable and long prose references wrapped. For bookmarked panels, use explicit native `TabsList`/`TabsTrigger` controls with `aria-controls` matching each panel ID; changing a panel ID alone leaves the generated control pointing at a nonexistent element.

diff --git a/apps/docs/app/[[...slug]]/page.tsx b/apps/docs/app/[[...slug]]/page.tsx
@@ -24,8 +24,8 @@ import { APIExampleSelector } from '@/components/ui/api-example-selector'
 import { APIRequestTabs } from '@/components/ui/api-request-tabs'
 import { CodeBlock } from '@/components/ui/code-block'
 import { Heading } from '@/components/ui/heading'
+import { IntegrationIcon } from '@/components/ui/integration-icon'
 import { ResponseSection } from '@/components/ui/response-section'
-import { getIntegrationLandingPage, INTEGRATION_LANDING_LABEL } from '@/lib/integration-landing'
 import { getApiSpecContent, getAuthenticatedCodeSamples, openapi } from '@/lib/openapi'
 import { simShikiOptions } from '@/lib/shiki-theme'
 import { type PageData, source } from '@/lib/source'
@@ -209,7 +209,6 @@ export default async function Page(props: { params: Promise<{ slug?: string[] }>
   }
   const isOpenAPI = '_openapi' in data && data._openapi != null
   const isApiReference = slug?.some((s) => s === 'api-reference') ?? false
-  const integrationLandingPage = getIntegrationLandingPage(slug)
   const isCli = slug?.[0] === 'cli'
   const isMcp = slug?.[0] === 'mcp'
 
@@ -354,7 +353,11 @@ export default async function Page(props: { params: Promise<{ slug?: string[] }>
           component: footer,
         }}
       >
-        <PageHeader title={data.title} className='max-sm:[&>h1]:basis-0 max-sm:[&_a]:size-10'>
+        <PageHeader
+          title={data.title}
+          icon={data.integration && <IntegrationIcon {...data.integration} />}
+          className='max-sm:[&>h1]:basis-0 max-sm:[&_a]:size-10'
+        >
           <div className='hidden sm:flex'>
             <LLMCopyButton content={markdownContent} />
           </div>
@@ -366,12 +369,6 @@ export default async function Page(props: { params: Promise<{ slug?: string[] }>
             slug?.[0] === 'integrations' && '[&_td]:[overflow-wrap:normal]'
           )}
         >
-          {integrationLandingPage && (
-            <p>
-              {INTEGRATION_LANDING_LABEL}{' '}
-              <a href={integrationLandingPage.url}>{integrationLandingPage.title}</a>
-            </p>
-          )}
           <MDX
             components={{
               ...defaultMdxComponents,

diff --git a/apps/docs/components/docs-layout/page-header.tsx b/apps/docs/components/docs-layout/page-header.tsx
@@ -4,15 +4,22 @@ import { DocsTitle } from 'fumadocs-ui/page'
 
 interface PageHeaderProps {
   title: string
+  icon?: ReactNode
   children: ReactNode
   className?: string
 }
 
-export function PageHeader({ title, children, className }: PageHeaderProps) {
+export function PageHeader({ title, icon, children, className }: PageHeaderProps) {
   return (
     <div className={cn('flex flex-wrap items-start gap-x-4 gap-y-2', className)}>
-      <DocsTitle className='mb-2 min-w-0 flex-[1_1_16rem] [overflow-wrap:anywhere]'>
-        {title}
+      <DocsTitle
+        className={cn(
+          'mb-2 min-w-0 flex-[1_1_16rem] [overflow-wrap:anywhere]',
+          icon && 'flex items-center gap-3'
+        )}
+      >
+        {icon}
+        {icon ? <span className='min-w-0'>{title}</span> : title}
       </DocsTitle>
       <div className='ms-auto flex shrink-0 items-center gap-2 pt-1'>{children}</div>
     </div>

diff --git a/apps/docs/components/ui/block-info-card.tsx b/apps/docs/components/ui/block-info-card.tsx
diff --git a/apps/docs/components/ui/integration-icon.tsx b/apps/docs/components/ui/integration-icon.tsx
@@ -0,0 +1,32 @@
+'use client'
+
+import type * as React from 'react'
+import { cn } from '@sim/emcn'
+import { isLightTileColor } from '@sim/workflow-renderer/tile-icon-color'
+import { blockTypeToIconMap } from '@/components/ui/icon-mapping'
+
+interface IntegrationIconProps {
+  type: string
+  color: string
+}
+
+export function IntegrationIcon({ type, color }: IntegrationIconProps): React.ReactNode {
+  const ResolvedIcon = blockTypeToIconMap[type] || null
+  const iconColorClass = isLightTileColor(color) ? 'text-black' : 'text-white'
+
+  return (
+    <span
+      aria-hidden='true'
+      className='flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-lg'
+      style={{ background: color }}
+    >
+      {ResolvedIcon ? (
+        <ResolvedIcon className={cn('size-4', iconColorClass)} />
+      ) : (
+        <span className={cn('font-mono text-sm opacity-70', iconColorClass)}>
+          {type.substring(0, 2)}
+        </span>
+      )}
+    </span>
+  )
+}
diff --git a/apps/docs/content/docs/integrations/a2a.mdx b/apps/docs/content/docs/integrations/a2a.mdx
@@ -1,15 +1,11 @@
 ---
 title: A2A
 description: Interact with external A2A-compatible agents
+integration:
+  type: "a2a"
+  color: "#4151B5"
 ---
 
-import { BlockInfoCard } from "@/components/ui/block-info-card"
-
-<BlockInfoCard 
-  type="a2a"
-  color="#4151B5"
-/>
-
 {/* MANUAL-CONTENT-START:intro */}
 Use the A2A (Agent-to-Agent) protocol to send messages, structured data, and files to external agents, inspect their Agent Cards, and track or cancel tasks. Provide the agent's endpoint URL and, when required, an API key. Sim sends that key in `X-API-Key` for task requests; agents that require a different authentication scheme need a compatible endpoint. Agent Card discovery runs before authentication, so the card must be reachable without that key.
 {/* MANUAL-CONTENT-END */}

diff --git a/apps/docs/content/docs/integrations/affinity.mdx b/apps/docs/content/docs/integrations/affinity.mdx
@@ -1,15 +1,13 @@
 ---
 title: Affinity
 description: Read and write companies, people, lists, notes, and relationships in Affinity
+integration:
+  type: "affinity"
+  color: "#1B1C1E"
 ---
 
-import { BlockInfoCard } from "@/components/ui/block-info-card"
 import { ReferenceDetails } from "@/components/ui/reference-details"
 
-<BlockInfoCard 
-  type="affinity"
-  color="#1B1C1E"
-/>
 
 {/* MANUAL-CONTENT-START:intro */}
 [Affinity](https://www.affinity.co/) is a CRM for companies, people, opportunities, and relationship data. Its v2 integration reads companies, people, opportunities, lists, interactions, and transcripts; creates lists and reminders; manages notes; and updates field values and dropdown options.
@@ -26,7 +24,6 @@ Generate an API key from the **Manage Apps** page in your Affinity settings; it
 Some Affinity endpoints are still marked BETA — company, person, and list-entry search, the per-entity field-value reads, the inferred-connection operations, and the user operations. Affinity may change those without notice or versioning.
 {/* MANUAL-CONTENT-END */}
 
-
 ## Use the block [#usage-instructions]
 
 Read companies, people, opportunities, lists, and saved views; search companies, people, and list entries. Page through the rows of a list or saved view. Read field values and update them individually or in batches of up to 100 on one company, person, or list entry. Read, create, update, delete, and reply to notes; list or create reminders; retrieve logged calls, emails, chat messages, meetings, and transcripts. Search notes and files by keyword, find companies from a plain-language description with Semantic Search, discover possible introduction paths through shared work and investment history, and follow the field-value change feed for incremental synchronization. Access depends on the API key holder’s permissions.

diff --git a/apps/docs/content/docs/integrations/agentmail.mdx b/apps/docs/content/docs/integrations/agentmail.mdx
@@ -1,21 +1,18 @@
 ---
 title: AgentMail
 description: Manage email inboxes, threads, and messages with AgentMail
+integration:
+  type: "agentmail"
+  color: "#000000"
 ---
 
-import { BlockInfoCard } from "@/components/ui/block-info-card"
 import { ReferenceDetails } from "@/components/ui/reference-details"
 
-<BlockInfoCard 
-  type="agentmail"
-  color="#000000"
-/>
 
 {/* MANUAL-CONTENT-START:intro */}
 [AgentMail](https://agentmail.to/) connects Sim workflows to email inboxes using an API key. Create inboxes, send and read messages, reply to or forward conversations, manage drafts, and apply labels to threads and messages. For review-before-send workflows, create a draft, update it with the reviewed content, then send it.
 {/* MANUAL-CONTENT-END */}
 
-
 ## Use the block [#usage-instructions]
 
 Create and manage email inboxes, send and receive messages, reply to threads, manage drafts, and organize threads with labels. Requires an API key.

diff --git a/apps/docs/content/docs/integrations/agentphone.mdx b/apps/docs/content/docs/integrations/agentphone.mdx
@@ -1,23 +1,20 @@
 ---
 title: AgentPhone
 description: Provision numbers, send SMS and iMessage, and place voice calls with AgentPhone
+integration:
+  type: "agentphone"
+  color: "linear-gradient(135deg, #1a1a1a 0%, #0a2a14 100%)"
 ---
 
-import { BlockInfoCard } from "@/components/ui/block-info-card"
 import { ReferenceDetails } from "@/components/ui/reference-details"
 
-<BlockInfoCard 
-  type="agentphone"
-  color="linear-gradient(135deg, #1a1a1a 0%, #0a2a14 100%)"
-/>
 
 {/* MANUAL-CONTENT-START:intro */}
 Use [AgentPhone](https://agentphone.to/) to provision phone numbers, place outbound voice calls, send SMS or iMessage, and manage contacts and conversations from a workflow. Connect with an AgentPhone API key.
 
 Retrieve call transcripts and conversation history for downstream processing, and check usage before starting more calls or messages.
 {/* MANUAL-CONTENT-END */}
 
-
 ## Use the block [#usage-instructions]
 
 Provision SMS- and voice-enabled numbers, send messages and tapback reactions, place outbound calls, manage conversations and contacts, and inspect usage with an AgentPhone API key.

diff --git a/apps/docs/content/docs/integrations/agiloft.mdx b/apps/docs/content/docs/integrations/agiloft.mdx
@@ -1,21 +1,18 @@
 ---
 title: Agiloft
 description: Manage records in Agiloft CLM
+integration:
+  type: "agiloft"
+  color: "#001028"
 ---
 
-import { BlockInfoCard } from "@/components/ui/block-info-card"
 import { ReferenceDetails } from "@/components/ui/reference-details"
 
-<BlockInfoCard 
-  type="agiloft"
-  color="#001028"
-/>
 
 {/* MANUAL-CONTENT-START:intro */}
 [Agiloft](https://www.agiloft.com/) stores records in knowledge-base tables. Use this integration to find, create, update, and delete records, work with attachments, manage record locks, and run action buttons. Select the target knowledge base and table for each operation; the action reference below lists its required fields.
 {/* MANUAL-CONTENT-END */}
 
-
 ## Use the block [#usage-instructions]
 
 Integrate with Agiloft contract lifecycle management to create, read, update, delete, and search records. Supports file attachments, SQL-based selection, saved searches, record locking, and running action buttons across any table in your knowledge base.

diff --git a/apps/docs/content/docs/integrations/ahrefs.mdx b/apps/docs/content/docs/integrations/ahrefs.mdx
@@ -1,21 +1,18 @@
 ---
 title: Ahrefs
 description: SEO analysis with Ahrefs
+integration:
+  type: "ahrefs"
+  color: "#FFFFFF"
 ---
 
-import { BlockInfoCard } from "@/components/ui/block-info-card"
 import { ReferenceDetails } from "@/components/ui/reference-details"
 
-<BlockInfoCard 
-  type="ahrefs"
-  color="#FFFFFF"
-/>
 
 {/* MANUAL-CONTENT-START:intro */}
 Use [Ahrefs](https://ahrefs.com/) in Sim to retrieve domain and backlink metrics, organic keywords, top pages, and ranking data for SEO research and reports. Connect an Ahrefs API key with access to the endpoints you need. [API v3 is available on Lite and higher plans](https://help.ahrefs.com/en/articles/6559232-about-api-v3); API units and per-request row limits depend on the plan.
 {/* MANUAL-CONTENT-END */}
 
-
 ## Use the block [#usage-instructions]
 
 Analyze domain ratings, backlinks, organic keywords, top pages, and more. Requires an Ahrefs API key with access to the selected endpoints; API v3 is available on Lite and higher plans.

diff --git a/apps/docs/content/docs/integrations/airtable.mdx b/apps/docs/content/docs/integrations/airtable.mdx
@@ -1,23 +1,20 @@
 ---
 title: Airtable
 description: Read, create, and update Airtable
+integration:
+  type: "airtable"
+  color: "#FFFFFF"
 ---
 
-import { BlockInfoCard } from "@/components/ui/block-info-card"
 import { ReferenceDetails } from "@/components/ui/reference-details"
 
-<BlockInfoCard 
-  type="airtable"
-  color="#FFFFFF"
-/>
 
 {/* MANUAL-CONTENT-START:intro */}
 Use [Airtable](https://airtable.com/) to list bases and table schemas, read or write records, and start workflows from record changes. For token setup, see [Personal Access Tokens](/integrations/airtable-service-account).
 
 Trigger mode handles record creation, updates, and deletion. Inspect `payloads` or `latestPayload` for Airtable's raw changes; deleted record IDs are under `changedTablesById[tableId].destroyedRecordIds`. The `airtableChanges` array currently consolidates created and updated records and returns changed cell values in `changedFields`.
 {/* MANUAL-CONTENT-END */}
 
-
 Connection guides: [Personal access tokens](/integrations/airtable-service-account).
 
 ## OAuth scopes [#oauth-scopes]

diff --git a/apps/docs/content/docs/integrations/algolia.mdx b/apps/docs/content/docs/integrations/algolia.mdx
@@ -1,21 +1,18 @@
 ---
 title: Algolia
 description: Search and manage Algolia indices
+integration:
+  type: "algolia"
+  color: "#003DFF"
 ---
 
-import { BlockInfoCard } from "@/components/ui/block-info-card"
 import { ReferenceDetails } from "@/components/ui/reference-details"
 
-<BlockInfoCard 
-  type="algolia"
-  color="#003DFF"
-/>
 
 {/* MANUAL-CONTENT-START:intro */}
 Use [Algolia](https://www.algolia.com/) in Sim to search indices, add or update records, run batch operations, and manage index settings. The actions below also cover browsing records, deleting by filter, copying or moving indices, and checking task status.
 {/* MANUAL-CONTENT-END */}
 
-
 ## Use the block [#usage-instructions]
 
 Search indices, manage records (add, update, delete, browse), configure index settings, and perform batch operations.

diff --git a/apps/docs/content/docs/integrations/amplitude.mdx b/apps/docs/content/docs/integrations/amplitude.mdx
@@ -1,21 +1,18 @@
 ---
 title: Amplitude
 description: Track events and query analytics from Amplitude
+integration:
+  type: "amplitude"
+  color: "#13294B"
 ---
 
-import { BlockInfoCard } from "@/components/ui/block-info-card"
 import { ReferenceDetails } from "@/components/ui/reference-details"
 
-<BlockInfoCard 
-  type="amplitude"
-  color="#13294B"
-/>
 
 {/* MANUAL-CONTENT-START:intro */}
 Use [Amplitude](https://amplitude.com/) to send events, update user and group properties, and query product analytics from a workflow. The HTTP and Dashboard REST APIs use API-key and secret-key authentication.
 {/* MANUAL-CONTENT-END */}
 
-
 ## Use the block [#usage-instructions]
 
 Track events, identify users and groups, search for users, query analytics, analyze funnels and retention, and retrieve revenue data.

diff --git a/apps/docs/content/docs/integrations/apify.mdx b/apps/docs/content/docs/integrations/apify.mdx
@@ -1,14 +1,11 @@
 ---
 title: Apify
 description: Run Apify actors and retrieve results
+integration:
+  type: "apify"
+  color: "#FFFFFF"
 ---
 
-import { BlockInfoCard } from "@/components/ui/block-info-card"
-
-<BlockInfoCard 
-  type="apify"
-  color="#FFFFFF"
-/>
 
 {/* MANUAL-CONTENT-START:intro */}
 [Apify](https://apify.com/) runs Actors for web scraping and browser automation. Run an Actor synchronously when it can finish within the synchronous endpoint’s five-minute limit. **Run Actor (Async)** starts a provider run and polls it within the same Sim step; it does not return immediately for detached processing. Its polling budget follows Sim’s default synchronous execution timeout. If that wait ends before the Actor finishes, use the returned run ID with **Get Run**, then retrieve dataset items after success. You can also run saved Actor tasks and fetch dataset items directly.