## Table of Contents

- [Embed: SDK](#embed-sdk)
- [Quick start](#quick-start)
    - [React](#react)
    - [Vue](#vue)
    - [Vanilla / CDN](#vanilla--cdn)
- [Card or iframe — your call](#card-or-iframe--your-call)
- [Everything else lives in the SDK reference](#everything-else-lives-in-the-sdk-reference)
- [Choose between SDK and the other approaches](#choose-between-sdk-and-the-other-approaches)
- [Next step](#next-step)

---

[API](https://microlink.io/docs/api/getting-started/overview)

[GUIDES](https://microlink.io/docs/guides) [MQL](https://microlink.io/docs/mql/getting-started/overview) [SDK](https://microlink.io/docs/sdk/getting-started/overview) [CARDS](https://microlink.io/docs/cards/getting-started/overview)

API GUIDES MQL SDK CARDS

Getting Started

[Overview](https://microlink.io/docs/guides)

[What is Microlink](https://microlink.io/docs/guides/what-is-microlink)

[Screenshot](https://microlink.io/docs/guides/screenshot)

[Customizing output](https://microlink.io/docs/guides/screenshot/customizing-output)

[Browser settings](https://microlink.io/docs/guides/screenshot/browser-settings)

[Page interaction](https://microlink.io/docs/guides/screenshot/page-interaction)

[Delivery and embedding](https://microlink.io/docs/guides/screenshot/embedding)

[Caching and performance](https://microlink.io/docs/guides/screenshot/caching-and-performance)

[Private pages](https://microlink.io/docs/guides/screenshot/private-pages)

[Troubleshooting](https://microlink.io/docs/guides/screenshot/troubleshooting)

[Data extraction](https://microlink.io/docs/guides/data-extraction)

[Defining rules](https://microlink.io/docs/guides/data-extraction/defining-rules)

[Page preparation](https://microlink.io/docs/guides/data-extraction/page-preparation)

[Delivery and response shaping](https://microlink.io/docs/guides/data-extraction/delivery-and-response)

[Caching and performance](https://microlink.io/docs/guides/data-extraction/caching-and-performance)

[Private pages](https://microlink.io/docs/guides/data-extraction/private-pages)

[Troubleshooting](https://microlink.io/docs/guides/data-extraction/troubleshooting)

[Embed](https://microlink.io/docs/guides/embed)

[SDK](https://microlink.io/docs/guides/embed/sdk)

[Iframe parameter](https://microlink.io/docs/guides/embed/iframe)

[Custom HTML/CSS](https://microlink.io/docs/guides/embed/metadata-api)

[Custom previews with AI](https://microlink.io/docs/guides/embed/custom-previews-with-ai)

[Caching and performance](https://microlink.io/docs/guides/embed/caching-and-performance)

[Private pages and proxy](https://microlink.io/docs/guides/embed/private-pages-and-proxy)

[Troubleshooting](https://microlink.io/docs/guides/embed/troubleshooting)

[Markdown](https://microlink.io/docs/guides/markdown)

[Choosing scope](https://microlink.io/docs/guides/markdown/choosing-scope)

[Delivery and response shaping](https://microlink.io/docs/guides/markdown/delivery-and-response)

[Function](https://microlink.io/docs/guides/function)

[PDF](https://microlink.io/docs/guides/pdf)

[Page size and layout](https://microlink.io/docs/guides/pdf/page-size-and-layout)

[Page preparation](https://microlink.io/docs/guides/pdf/page-preparation)

[Delivery and embedding](https://microlink.io/docs/guides/pdf/embedding)

[Caching and performance](https://microlink.io/docs/guides/pdf/caching-and-performance)

[Private pages](https://microlink.io/docs/guides/pdf/private-pages)

[Troubleshooting](https://microlink.io/docs/guides/pdf/troubleshooting)

[Metadata](https://microlink.io/docs/guides/metadata)

[Choosing fields](https://microlink.io/docs/guides/metadata/choosing-fields)

[Extending results](https://microlink.io/docs/guides/metadata/extending-results)

[Delivery and response shaping](https://microlink.io/docs/guides/metadata/delivery-and-response)

[Page preparation](https://microlink.io/docs/guides/metadata/page-preparation)

[Caching and performance](https://microlink.io/docs/guides/metadata/caching-and-performance)

[Private pages](https://microlink.io/docs/guides/metadata/private-pages)

[Troubleshooting](https://microlink.io/docs/guides/metadata/troubleshooting)

[Insights](https://microlink.io/docs/guides/insights)

[Technology detection](https://microlink.io/docs/guides/insights/technology-detection)

[Lighthouse reports](https://microlink.io/docs/guides/insights/lighthouse-reports)

[Caching and performance](https://microlink.io/docs/guides/insights/caching-and-performance)

[Troubleshooting](https://microlink.io/docs/guides/insights/troubleshooting)

[Common patterns](https://microlink.io/docs/guides/common/caching)

[Caching patterns](https://microlink.io/docs/guides/common/caching)

[Private pages](https://microlink.io/docs/guides/common/private-pages)

[Proxy](https://microlink.io/docs/guides/common/proxy)

[Troubleshooting](https://microlink.io/docs/guides/common/troubleshooting)

[Production patterns](https://microlink.io/docs/guides/common/production-patterns)

API GUIDES MQL SDK CARDS

Getting Started

[Overview](https://microlink.io/docs/guides)

[What is Microlink](https://microlink.io/docs/guides/what-is-microlink)

[Screenshot](https://microlink.io/docs/guides/screenshot)

[Customizing output](https://microlink.io/docs/guides/screenshot/customizing-output)

[Browser settings](https://microlink.io/docs/guides/screenshot/browser-settings)

[Page interaction](https://microlink.io/docs/guides/screenshot/page-interaction)

[Delivery and embedding](https://microlink.io/docs/guides/screenshot/embedding)

[Caching and performance](https://microlink.io/docs/guides/screenshot/caching-and-performance)

[Private pages](https://microlink.io/docs/guides/screenshot/private-pages)

[Troubleshooting](https://microlink.io/docs/guides/screenshot/troubleshooting)

[Data extraction](https://microlink.io/docs/guides/data-extraction)

[Defining rules](https://microlink.io/docs/guides/data-extraction/defining-rules)

[Page preparation](https://microlink.io/docs/guides/data-extraction/page-preparation)

[Delivery and response shaping](https://microlink.io/docs/guides/data-extraction/delivery-and-response)

[Caching and performance](https://microlink.io/docs/guides/data-extraction/caching-and-performance)

[Private pages](https://microlink.io/docs/guides/data-extraction/private-pages)

[Troubleshooting](https://microlink.io/docs/guides/data-extraction/troubleshooting)

[Embed](https://microlink.io/docs/guides/embed)

[SDK](https://microlink.io/docs/guides/embed/sdk)

[Iframe parameter](https://microlink.io/docs/guides/embed/iframe)

[Custom HTML/CSS](https://microlink.io/docs/guides/embed/metadata-api)

[Custom previews with AI](https://microlink.io/docs/guides/embed/custom-previews-with-ai)

[Caching and performance](https://microlink.io/docs/guides/embed/caching-and-performance)

[Private pages and proxy](https://microlink.io/docs/guides/embed/private-pages-and-proxy)

[Troubleshooting](https://microlink.io/docs/guides/embed/troubleshooting)

[Markdown](https://microlink.io/docs/guides/markdown)

[Choosing scope](https://microlink.io/docs/guides/markdown/choosing-scope)

[Delivery and response shaping](https://microlink.io/docs/guides/markdown/delivery-and-response)

[Function](https://microlink.io/docs/guides/function)

[PDF](https://microlink.io/docs/guides/pdf)

[Page size and layout](https://microlink.io/docs/guides/pdf/page-size-and-layout)

[Page preparation](https://microlink.io/docs/guides/pdf/page-preparation)

[Delivery and embedding](https://microlink.io/docs/guides/pdf/embedding)

[Caching and performance](https://microlink.io/docs/guides/pdf/caching-and-performance)

[Private pages](https://microlink.io/docs/guides/pdf/private-pages)

[Troubleshooting](https://microlink.io/docs/guides/pdf/troubleshooting)

[Metadata](https://microlink.io/docs/guides/metadata)

[Choosing fields](https://microlink.io/docs/guides/metadata/choosing-fields)

[Extending results](https://microlink.io/docs/guides/metadata/extending-results)

[Delivery and response shaping](https://microlink.io/docs/guides/metadata/delivery-and-response)

[Page preparation](https://microlink.io/docs/guides/metadata/page-preparation)

[Caching and performance](https://microlink.io/docs/guides/metadata/caching-and-performance)

[Private pages](https://microlink.io/docs/guides/metadata/private-pages)

[Troubleshooting](https://microlink.io/docs/guides/metadata/troubleshooting)

[Insights](https://microlink.io/docs/guides/insights)

[Technology detection](https://microlink.io/docs/guides/insights/technology-detection)

[Lighthouse reports](https://microlink.io/docs/guides/insights/lighthouse-reports)

[Caching and performance](https://microlink.io/docs/guides/insights/caching-and-performance)

[Troubleshooting](https://microlink.io/docs/guides/insights/troubleshooting)

[Common patterns](https://microlink.io/docs/guides/common/caching)

[Caching patterns](https://microlink.io/docs/guides/common/caching)

[Private pages](https://microlink.io/docs/guides/common/private-pages)

[Proxy](https://microlink.io/docs/guides/common/proxy)

[Troubleshooting](https://microlink.io/docs/guides/common/troubleshooting)

[Production patterns](https://microlink.io/docs/guides/common/production-patterns)

## Embed: SDK

[Copy for LLM](https://microlink.io/docs/guides/embed/sdk.md "Copy content for LLM")

\|

[View as Markdown](https://microlink.io/docs/guides/embed/sdk.md "View content as Markdown")

The SDK is the fastest way to embed any URL: drop one component into your markup, pass a `url`, and get a live preview. It handles the API call, lazy-loading, the iframe-vs-card choice, and CSS theming.

Pick the SDK when you want something rendered today with zero markup decisions. If you would rather render previews yourself, see [metadata API with custom HTML/CSS](https://microlink.io/docs/guides/embed/metadata-api). If you only need the provider's native player, see [iframe parameter](https://microlink.io/docs/guides/embed/iframe).

## Quick start

#### React

```bash
npm install @microlink/react styled-components
```

```jsx
import Microlink from '@microlink/react'

<Microlink url='https://stripe.com' />
```

#### Vue

```bash
npm install @microlink/vue
```

```
<template>

  <Microlink url="https://www.youtube.com/watch?v=9P6rdqiybaw" />

</template>

<script>

import { Microlink } from '@microlink/vue'

export default { components: { Microlink } }

</script>
```

#### Vanilla / CDN

```html
<script src="https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/react-is@16/umd/react-is.production.min.js,npm/styled-components@5/dist/styled-components.min.js,npm/@microlink/mql@latest/dist/mql.min.js,npm/@microlink/vanilla@5/dist/microlink.min.js"></script>

<a class="link-preview" href="https://www.youtube.com/watch?v=9P6rdqiybaw"></a>

<script>

  document.addEventListener('DOMContentLoaded', () => {

    microlink('.link-preview', { size: 'large' })

  })

</script>
```

The vanilla integration is selector-driven — pass any CSS selector and the SDK replaces matching elements with previews.

For the full per-integration reference, see [React](https://microlink.io/docs/sdk/integrations/react), [Vue](https://microlink.io/docs/sdk/integrations/vue), and [Vanilla](https://microlink.io/docs/sdk/integrations/vanilla).

## Card or iframe — your call

The single embed-relevant decision the SDK adds is the `media` prop. Toggle it to switch between a static rich card and the provider's interactive iframe:

```jsx
// Static card — cheaper to render, better for long-scrolling pages

<Microlink url='https://www.youtube.com/watch?v=9P6rdqiybaw' media='image' />

// Real YouTube player

<Microlink url='https://www.youtube.com/watch?v=9P6rdqiybaw' media='iframe' />
```

`media` also accepts an array describing a fallback cascade:

```jsx
<Microlink url='...' media={['iframe', 'video', 'audio', 'image', 'logo']} />
```

The SDK picks the first field that exists in the response — so one component handles YouTube, Spotify, GitHub READMEs, and plain articles without branching. See the [media reference](https://microlink.io/docs/sdk/parameters/media).

## Everything else lives in the SDK reference

Every Microlink API parameter works as an SDK prop, and the SDK adds a few of its own:

| Prop                                                              | What it does                                                                       | Reference                                                                |
| ----------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
| `apiKey`                                                          | Authenticate requests for Pro features                                             | [apiKey](https://microlink.io/docs/sdk/parameters/api-key)               |
| `lazy`                                                            | Defer the API call until the card is in view (default `true`)                      | [lazy](https://microlink.io/docs/sdk/parameters/lazy)                    |
| `setData` / `fetchData`                                           | Skip the runtime fetch when you already have the metadata (SSR, build-time crawls) | [setData](https://microlink.io/docs/sdk/parameters/set-data)             |
| `size`, `contrast`, `direction`                                   | Visual layout knobs                                                                | [size](https://microlink.io/docs/sdk/parameters/size)                    |
| Any API parameter (`screenshot`, `iframe`, `palette`, `meta`,...) | Forwarded to the API call                                                          | [API parameters](https://microlink.io/docs/api/getting-started/overview) |

For the full prop list and styling (CSS variables, BEM classes, `styled-components` wrappers), see the [SDK overview](https://microlink.io/docs/sdk/getting-started/overview) and [SDK styling](https://microlink.io/docs/sdk/getting-started/styling).

## Choose between SDK and the other approaches

| If you want                                                  | Use                                                                                                |
| ------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- |
| A drop-in component, no boilerplate                          | SDK (this page)                                                                                    |
| Pre-built layouts and AI prompts to match your design system | [Generate custom previews with AI](https://microlink.io/docs/guides/embed/custom-previews-with-ai) |
| Full control over markup, server-rendered HTML, no client JS | [Metadata API + custom HTML](https://microlink.io/docs/guides/embed/metadata-api)                  |
| Just the provider's native player or widget                  | [iframe parameter](https://microlink.io/docs/guides/embed/iframe)                                  |

You can mix them: use the SDK for inline links inside posts and a custom HTML hero for the article header. They share the same underlying API.

## Next step

If you'd rather skip the SDK and have your AI coding assistant generate previews styled to your project, see [generate custom previews with AI](https://microlink.io/docs/guides/embed/custom-previews-with-ai).

Last updated on May 14, 2026

[Edit on GitHub](https://github.com/microlinkhq/www/blob/master/src/content/docs/guides/embed/sdk.md)