Vanilla

It's available as .
npm install @microlink/vanilla --save
Or via a CDN:
<script src="https://cdn.jsdelivr.net/npm/@microlink/[email protected]/dist/microlink.min.js"></script>
The vanilla bundle is based on the React version and exported as Universal Module Definition (UMD).
Since the bundle doesn't include the dependencies, we recommend loading them from a CDN:
<!-- dependencies -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react-is.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/styled-components.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@microlink/[email protected]/dist/mql.min.js"></script>
<!-- Microlink SDK -->
<script src="https://cdn.jsdelivr.net/npm/@microlink/[email protected]/dist/microlink.min.js"></script>
or even better, you can combine all the things in a single request:
<!-- react + styled-components + microlin -->
<script src="https://cdn.jsdelivr.net/combine/npm/[email protected]/umd/react.production.min.js,npm/[email protected]/umd/react-dom.production.min.js,npm/[email protected]/umd/react-is.production.min.js,npm/[email protected]/dist/styled-components.min.js,npm/@microlink/[email protected]/dist/mql.min.js,npm/@microlink/[email protected]/dist/microlink.min.js"></script>
You can save some bytes if you use instead of React:
<!-- preact + styled-components + microlink -->
<script src="https://cdn.jsdelivr.net/combine/npm/[email protected]/dist/preact.umd.min.js,npm/[email protected]/hooks/dist/hooks.umd.min.js,npm/[email protected]/compat/dist/compat.umd.min.js,gh/smoljs/react/react.js,npm/[email protected]/umd/react-is.production.min.js,npm/[email protected]/dist/styled-components.min.js,npm/@microlink/[email protected]/dist/mql.min.js,npm/@microlink/[email protected]/dist/microlink.min.js"></script>
After that, microlink will be available in the global scope.
<script>
  document.addEventListener('DOMContentLoaded', function (event) {
    // Example 1
    // Replace all `a` tags for microlink cards
    microlink('a')
    // Example 2
    // Replace all elements with `link-preview` class
    // for microlink cards
    microlink('.link-previews')
    // Example 3
    // Replace all elements with `link-preview` class
    // for microlink cards, passing API specific options
    microlink('.link-previews', { size: 'large' })
  })
</script>
We recommend calling the `microlink` method before the DOM finishes loading.
The vanilla interface is pretty simliar to jQuery/Zepto: You need to provide a CSS selector as the target element you want to convert into a preview.
You can pass any API Parameter as an object property, e.g., size.
<script>
  document.addEventListener('DOMContentLoaded', function (event) {
    microlink('.link-previews', {
      size: 'large'
    })
  })
</script>
The API parameters passed there will be attached for all the links.
If you want to pass specific API Parameters just for some cases, you can pass them as
<a
  src="https://www.theverge.com/tldr/2018/2/7/16984284/tesla-space-falcon-heavy-launch-elon-musk"
  class="link-preview"
  data-size="large"
  data-media='["logo", "image"]'
  data-set-data='{"title": "hello world"}'
>
</a>
You can pass objects, arrays, booleans or even JSON structures as data attributes.
Although it's shipped with default styles, you can customize it using
<style>
  .microlink_card {
    font-family: 'Nitti, "Microsoft YaHei", 微软雅黑, monospace';
    max-width: 100%;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function (event) {
    microlink('.link-previews', {
      size: 'large'
    })
  })
</script>

Vanilla

It's available as .
npm install @microlink/vanilla --save
Or via a CDN:
<script src="https://cdn.jsdelivr.net/npm/@microlink/[email protected]/dist/microlink.min.js"></script>
The vanilla bundle is based on the React version and exported as Universal Module Definition (UMD).
Since the bundle doesn't include the dependencies, we recommend loading them from a CDN:
<!-- dependencies -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react-is.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/styled-components.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@microlink/[email protected]/dist/mql.min.js"></script>
<!-- Microlink SDK -->
<script src="https://cdn.jsdelivr.net/npm/@microlink/[email protected]/dist/microlink.min.js"></script>
or even better, you can combine all the things in a single request:
<!-- react + styled-components + microlin -->
<script src="https://cdn.jsdelivr.net/combine/npm/[email protected]/umd/react.production.min.js,npm/[email protected]/umd/react-dom.production.min.js,npm/[email protected]/umd/react-is.production.min.js,npm/[email protected]/dist/styled-components.min.js,npm/@microlink/[email protected]/dist/mql.min.js,npm/@microlink/[email protected]/dist/microlink.min.js"></script>
You can save some bytes if you use instead of React:
<!-- preact + styled-components + microlink -->
<script src="https://cdn.jsdelivr.net/combine/npm/[email protected]/dist/preact.umd.min.js,npm/[email protected]/hooks/dist/hooks.umd.min.js,npm/[email protected]/compat/dist/compat.umd.min.js,gh/smoljs/react/react.js,npm/[email protected]/umd/react-is.production.min.js,npm/[email protected]/dist/styled-components.min.js,npm/@microlink/[email protected]/dist/mql.min.js,npm/@microlink/[email protected]/dist/microlink.min.js"></script>
After that, microlink will be available in the global scope.
<script>
  document.addEventListener('DOMContentLoaded', function (event) {
    // Example 1
    // Replace all `a` tags for microlink cards
    microlink('a')
    // Example 2
    // Replace all elements with `link-preview` class
    // for microlink cards
    microlink('.link-previews')
    // Example 3
    // Replace all elements with `link-preview` class
    // for microlink cards, passing API specific options
    microlink('.link-previews', { size: 'large' })
  })
</script>
We recommend calling the `microlink` method before the DOM finishes loading.
The vanilla interface is pretty simliar to jQuery/Zepto: You need to provide a CSS selector as the target element you want to convert into a preview.
You can pass any API Parameter as an object property, e.g., size.
<script>
  document.addEventListener('DOMContentLoaded', function (event) {
    microlink('.link-previews', {
      size: 'large'
    })
  })
</script>
The API parameters passed there will be attached for all the links.
If you want to pass specific API Parameters just for some cases, you can pass them as
<a
  src="https://www.theverge.com/tldr/2018/2/7/16984284/tesla-space-falcon-heavy-launch-elon-musk"
  class="link-preview"
  data-size="large"
  data-media='["logo", "image"]'
  data-set-data='{"title": "hello world"}'
>
</a>
You can pass objects, arrays, booleans or even JSON structures as data attributes.
Although it's shipped with default styles, you can customize it using
<style>
  .microlink_card {
    font-family: 'Nitti, "Microsoft YaHei", 微软雅黑, monospace';
    max-width: 100%;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function (event) {
    microlink('.link-previews', {
      size: 'large'
    })
  })
</script>