> ## Documentation Index
> Fetch the complete documentation index at: https://docs.livepeer.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Integrators

> Fetches, embeds, or binds to external data – feeds, embeds, video, APIs.

<Note>
  **Generation Script**: This file is generated from script(s): `operations/scripts/generators/components/documentation/generate-component-docs.js`. <br />
  **Purpose**: Generated component-library MDX pages derived from docs-guide/config/component-registry.json. <br />
  **Run when**: Component governance metadata, registry outputs, or published component-library templates change. <br />
  **Important**: Do not manually edit this file; run `node operations/scripts/generators/components/documentation/generate-component-docs.js --fix --template-only --category integrators`. <br />
</Note>

<Card title="Back to Component Library" icon="arrow-left" href="/v2/resources/documentation-guide/component-library" arrow>
  Return to the generated component library landing page.
</Card>

## Integrators

Fetches, embeds, or binds to external data – feeds, embeds, video, APIs.

This category currently contains **19** governed export(s).

### Decision Tree Excerpt

1. Fetches, embeds, or binds to external/third-party data? → `integrators/`
2. Part of the page's outer structure, typically used once? → `scaffolding/`
3. Takes content and presents it in a formatted way? → `displays/`
4. Exists to hold, group, or arrange other things? → `wrappers/`
5. Single visual piece – no wrapping, no arranging, no fetching? → `elements/`

### Summary Table

| Component             | Status         | Import path                                                 | Description                                                                                                                                                                                               |
| --------------------- | -------------- | ----------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| BlogCard              | `stable`       | `/snippets/components/integrators/blog/BlogCards.jsx`       | Blog post card with scrollable content, metadata, and CTA.                                                                                                                                                |
| BlogDataLayout        | `stable`       | `/snippets/components/integrators/blog/BlogCards.jsx`       | Single-column BlogCard stack.                                                                                                                                                                             |
| CardBlogDataLayout    | `stable`       | `/snippets/components/integrators/blog/BlogCards.jsx`       | Grid layout rendering BlogCards from an items array.                                                                                                                                                      |
| CardColumnsPostLayout | `stable`       | `/snippets/components/integrators/blog/BlogCards.jsx`       | Multi-column PostCard layout.                                                                                                                                                                             |
| CardInCardLayout      | `stable`       | `/snippets/components/integrators/blog/BlogCards.jsx`       | PostCards rendered inside Card wrappers.                                                                                                                                                                  |
| CoinGeckoExchanges    | `stable`       | `/snippets/components/integrators/feeds/Coingecko.jsx`      | Sortable table of exchanges listing a token. Keyboard-accessible sort headers.                                                                                                                            |
| ColumnsBlogCardLayout | `stable`       | `/snippets/components/integrators/blog/BlogCards.jsx`       | Multi-column BlogCard layout using Mintlify Columns.                                                                                                                                                      |
| DiscordAnnouncements  | `stable`       | `/snippets/components/integrators/blog/BlogCards.jsx`       | Discord announcement feed with parsed markdown content. Sanitised HTML.                                                                                                                                   |
| ExternalContent       | `stable`       | `/snippets/components/integrators/embeds/DataEmbed.jsx`     | Frames external source content with a scrollable container and source link.                                                                                                                               |
| ForumLatestLayout     | `stable`       | `/snippets/components/integrators/blog/BlogCards.jsx`       | Latest forum topics with banner image and topic cards.                                                                                                                                                    |
| LatestVersion         | `experimental` | `/snippets/components/integrators/feeds/Release.jsx`        | Displays the latest release version string from automation data.                                                                                                                                          |
| LumaEvents            | `stable`       | `/snippets/components/integrators/blog/BlogCards.jsx`       | Upcoming/past event cards from Luma calendar data.                                                                                                                                                        |
| PdfEmbed              | `stable`       | `/snippets/components/integrators/embeds/DataEmbed.jsx`     | Embeds a PDF in a framed iframe with caption.                                                                                                                                                             |
| PostCard              | `stable`       | `/snippets/components/integrators/blog/BlogCards.jsx`       | Post card with gradient header, scrollable content, and metadata.                                                                                                                                         |
| RssBlogCard           | `stable`       | `/snippets/components/integrators/blog/BlogCards.jsx`       | Blog card for RSS feed data. Matches BlogCard visual quality with icon title, metadata row, scrollable plain text excerpt, and scroll hint. Use for non-Ghost blog sources (Daydream, Streamplace, etc.). |
| RssBlogCardLayout     | `stable`       | `/snippets/components/integrators/blog/BlogCards.jsx`       | Multi-column RssBlogCard layout. Use for RSS blog data (non-Ghost sources).                                                                                                                               |
| SolidityEmbed         | `stable`       | `/snippets/components/integrators/embeds/DataEmbed.jsx`     | Fetches and renders a remote Solidity file with syntax highlighting inside a styled container. Lazy-loaded.                                                                                               |
| TwitterTimeline       | `stable`       | `/snippets/components/integrators/embeds/DataEmbed.jsx`     | Embeds a Twitter/X timeline feed widget via iframe.                                                                                                                                                       |
| YouTubeVideoData      | `stable`       | `/snippets/components/integrators/video-data/VideoData.jsx` | Renders YouTube video data with video embed and metadata columns.                                                                                                                                         |

## Component Reference

### BlogCard

Use **BlogCard** when you need blog post card with scrollable content, metadata, and CTA..
Source description: Blog post card with scrollable content, metadata, and CTA.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { BlogCard } from '/snippets/components/integrators/blog/BlogCards.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `none`
* Data source: `automation/blog`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `title` | `any` | ``| Yes | title prop. | | `content` | `any` |`` | Yes | content prop. |
  \| `href` | `any` | \`\` | Yes | href prop. |
  \| `author` | `string` | `"Livepeer Team"` | No | author prop. |
  \| `datePosted` | `any` | `null` | No | date Posted prop. |
  \| `excerpt` | `any` | `null` | No | excerpt prop. |
  \| `readingTime` | `any` | `null` | No | reading Time prop. |
  \| `icon` | `string` | `"book-open"` | No | icon prop. |
  \| `authorIcon` | `string` | `"user-pen"` | No | author Icon prop. |
  \| `dateIcon` | `string` | `"calendar"` | No | date Icon prop. |
  \| `cta` | `string` | `"Read More"` | No | cta prop. |
  \| `img` | `any` | `null` | No | img prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

<CustomDivider />

### BlogDataLayout

Use **BlogDataLayout** when you need single-column BlogCard stack..
Source description: Single-column BlogCard stack.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { BlogDataLayout } from '/snippets/components/integrators/blog/BlogCards.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `none`
* Data source: `automation/blog`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `items` | `Array` | `[` | No | ] - items prop. |
  \| `limit` | `any` | \`\` | Yes | limit prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

<CustomDivider />

### CardBlogDataLayout

Use **CardBlogDataLayout** when you need grid layout rendering BlogCards from an items array..
Source description: Grid layout rendering BlogCards from an items array.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { CardBlogDataLayout } from '/snippets/components/integrators/blog/BlogCards.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `none`
* Data source: `automation/blog`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `items` | `Array` | `[` | No | ] - items prop. |
  \| `limit` | `any` | \`\` | Yes | limit prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

<CustomDivider />

### CardColumnsPostLayout

Use **CardColumnsPostLayout** when you need multi-column PostCard layout..
Source description: Multi-column PostCard layout.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { CardColumnsPostLayout } from '/snippets/components/integrators/blog/BlogCards.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `none`
* Data source: `automation/blog`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `cols` | `number` | `2` | No | cols prop. |
  \| `items` | `Array` | `[` | No | ] - items prop. |
  \| `limit` | `any` | \`\` | Yes | limit prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

<CustomDivider />

### CardInCardLayout

Use **CardInCardLayout** when you need postCards rendered inside Card wrappers..
Source description: PostCards rendered inside Card wrappers.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { CardInCardLayout } from '/snippets/components/integrators/blog/BlogCards.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `none`
* Data source: `automation/blog`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `items` | `Array` | `[` | No | ] - items prop. |
  \| `limit` | `any` | \`\` | Yes | limit prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

<CustomDivider />

### CoinGeckoExchanges

Use **CoinGeckoExchanges** when you need sortable table of exchanges listing a token. Keyboard-accessible sort headers..
Source description: Sortable table of exchanges listing a token. Keyboard-accessible sort headers.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { CoinGeckoExchanges } from '/snippets/components/integrators/feeds/Coingecko.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `none`
* Data source: `CoinGecko API`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `coinId` | `string` | `"arbitrum"` | No | coin Id prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

<CustomDivider />

### ColumnsBlogCardLayout

Use **ColumnsBlogCardLayout** when you need multi-column BlogCard layout using Mintlify Columns..
Source description: Multi-column BlogCard layout using Mintlify Columns.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { ColumnsBlogCardLayout } from '/snippets/components/integrators/blog/BlogCards.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `none`
* Data source: `automation/blog`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `items` | `Array` | `[` | No | ] - items prop. |
  \| `cols` | `number` | `2` | No | cols prop. |
  \| `limit` | `any` | \`\` | Yes | limit prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

<CustomDivider />

### DiscordAnnouncements

Use **DiscordAnnouncements** when you need discord announcement feed with parsed markdown content. Sanitised HTML..
Source description: Discord announcement feed with parsed markdown content. Sanitised HTML.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { DiscordAnnouncements } from '/snippets/components/integrators/blog/BlogCards.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `none`
* Data source: `automation/discord`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `items` | `Array` | `[` | No | ] - items prop. |
  \| `limit` | `any` | \`\` | Yes | limit prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

<CustomDivider />

### ExternalContent

Use **ExternalContent** when you need frames external source content with a scrollable container and source link..
Source description: Frames external source content with a scrollable container and source link.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { ExternalContent } from '/snippets/components/integrators/embeds/DataEmbed.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `none`
* Data source: `external source`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `sourceName` | `string` | ``| No | Source name displayed in the component header. | | `sourceUrl` | `string` |`` | No | Source URL used by the header link. |
  \| `sourceLabel` | `string` | `"View source"` | No | Label used by the header link. |
  \| `repoName` | `string` | ``| No | Legacy source name alias. | | `githubUrl` | `string` |`` | No | Legacy source URL alias. |
  \| `maxHeight` | `string` | `"1000px"` | No | Max height used by the component. |
  \| `icon` | `string` | `"github"` | No | Icon configuration used by the component. |
  \| `children` | `React.ReactNode` | \`\` | Yes | Content rendered inside the component. |
  \| `className` | `string` | `""` | No | CSS class name. |
  \| `style` | `object` | `{}` | No | Inline style overrides. |

<CustomDivider />

### ForumLatestLayout

Use **ForumLatestLayout** when you need latest forum topics with banner image and topic cards..
Source description: Latest forum topics with banner image and topic cards.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { ForumLatestLayout } from '/snippets/components/integrators/blog/BlogCards.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `none`
* Data source: `automation/forum`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `items` | `Array` | `[` | No | ] - items prop. |
  \| `limit` | `any` | \`\` | Yes | limit prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

<CustomDivider />

### LatestVersion

Use **LatestVersion** when you need displays the latest release version string from automation data..
Source description: Displays the latest release version string from automation data.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { LatestVersion } from '/snippets/components/integrators/feeds/Release.jsx'
```

**Metadata**

* Status: `experimental`
* Accepts: `none`
* Data source: `release-version workflow`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `version` | `any` | \`\` | Yes | version prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

<CustomDivider />

### LumaEvents

Use **LumaEvents** when you need upcoming/past event cards from Luma calendar data..
Source description: Upcoming/past event cards from Luma calendar data.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { LumaEvents } from '/snippets/components/integrators/blog/BlogCards.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `none`
* Data source: `Luma API`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `data` | `any` | ``| Yes | data prop. | | `limit` | `any` |`` | Yes | limit prop. |
  \| `type` | `string` | `"upcoming"` | No | type prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

<CustomDivider />

### PdfEmbed

Use **PdfEmbed** when you need embeds a PDF in a framed iframe with caption..
Source description: Embeds a PDF in a framed iframe with caption.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { PdfEmbed } from '/snippets/components/integrators/embeds/DataEmbed.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `none`
* Data source: `iframe(src)`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `title` | `React.ReactNode` | ``| Yes | Title text rendered by the component. | | `src` | `string` |`` | Yes | Asset or embed source used by the component. |
  \| `height` | `string` | `'700px'` | No | Height used by the component. |
  \| `width` | `string` | `'100%'` | No | Width used by the component. |
  \| `className` | `string` | `""` | No | CSS class name. |
  \| `style` | `object` | `{}` | No | Inline style overrides. |

<CustomDivider />

### PostCard

Use **PostCard** when you need post card with gradient header, scrollable content, and metadata..
Source description: Post card with gradient header, scrollable content, and metadata.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { PostCard } from '/snippets/components/integrators/blog/BlogCards.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `none`
* Data source: `automation/blog`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `title` | `any` | ``| Yes | title prop. | | `content` | `any` |`` | Yes | content prop. |
  \| `href` | `any` | \`\` | Yes | href prop. |
  \| `author` | `string` | `"Unknown"` | No | author prop. |
  \| `datePosted` | `any` | `null` | No | date Posted prop. |
  \| `replyCount` | `any` | `null` | No | reply Count prop. |
  \| `icon` | `string` | `"book-open"` | No | icon prop. |
  \| `authorIcon` | `string` | `"user-pen"` | No | author Icon prop. |
  \| `dateIcon` | `string` | `"calendar"` | No | date Icon prop. |
  \| `cta` | `string` | `"Read More"` | No | cta prop. |
  \| `img` | `any` | `null` | No | img prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

<CustomDivider />

### RssBlogCard

Use **RssBlogCard** when you need blog card for RSS feed data. Matches BlogCard visual quality with icon title, metadata row, scrollable plain text excerpt, and scroll hint. Use for non-Ghost blog sources (Daydream, Streamplace, etc.)..
Source description: Blog card for RSS feed data. Matches BlogCard visual quality with icon title, metadata row, scrollable plain text excerpt, and scroll hint. Use for non-Ghost blog sources (Daydream, Streamplace, etc.).
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { RssBlogCard } from '/snippets/components/integrators/blog/BlogCards.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `none`
* Data source: `automation/rss`
  **Props**
  No documented props.

<CustomDivider />

### RssBlogCardLayout

Use **RssBlogCardLayout** when you need multi-column RssBlogCard layout. Use for RSS blog data (non-Ghost sources)..
Source description: Multi-column RssBlogCard layout. Use for RSS blog data (non-Ghost sources).
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { RssBlogCardLayout } from '/snippets/components/integrators/blog/BlogCards.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `none`
* Data source: `automation/rss`
  **Props**
  No documented props.

<CustomDivider />

### SolidityEmbed

Use **SolidityEmbed** when you need fetches and renders a remote Solidity file with syntax highlighting inside a styled container. Lazy-loaded..
Source description: Fetches and renders a remote Solidity file with syntax highlighting inside a styled container. Lazy-loaded.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { SolidityEmbed } from '/snippets/components/integrators/embeds/DataEmbed.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `none`
* Data source: `fetch(url) — raw GitHub .sol file`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `url` | `string` | ``| Yes | Raw GitHub URL to the .sol file. | | `title` | `React.ReactNode` |`` | No | Optional title displayed above the code block. Accepts strings or components. |
  \| `filename` | `string` | \`\` | No | Filename shown on the CodeBlock header. |
  \| `maxHeight` | `string` | `"500px"` | No | Max height of the code container. |
  \| `style` | `object` | `{}` | No | Inline style overrides. |
  \| `className` | `string` | `""` | No | CSS class name. |

<CustomDivider />

### TwitterTimeline

Use **TwitterTimeline** when you need embeds a Twitter/X timeline feed widget via iframe..
Source description: Embeds a Twitter/X timeline feed widget via iframe.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { TwitterTimeline } from '/snippets/components/integrators/embeds/DataEmbed.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `none`
* Data source: `feed.mikle.com widget`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `className` | `string` | `""` | No | CSS class name. |
  \| `style` | `object` | `{}` | No | Inline style overrides. |

<CustomDivider />

### YouTubeVideoData

Use **YouTubeVideoData** when you need renders YouTube video data with video embed and metadata columns..
Source description: Renders YouTube video data with video embed and metadata columns.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { YouTubeVideoData } from '/snippets/components/integrators/video-data/VideoData.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `none`
* Data source: `automation/youtube`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `items` | `Array` | `[` | No | ] - Collection data rendered by the component. |
  \| `limit` | `number` | \`\` | Yes | Limit used by the component. |
  \| `cols` | `number` | `2` | No | Cols used by the component. |
  \| `className` | `string` | `""` | No | CSS class name. |
  \| `style` | `object` | `{}` | No | Inline style overrides. |