Vanilla

It's available as


npm install @microlink/vanilla --save

Or via a CDN:


<script src="https://cdn.jsdelivr.net/npm/@microlink/vanilla@latest/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/react@16/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-is@latest/umd/react-is.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/styled-components@5/dist/styled-components.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@microlink/mql@latest/dist/mql.min.js"></script>
<!-- Microlink SDK -->
<script src="https://cdn.jsdelivr.net/npm/@microlink/vanilla@latest/dist/microlink.min.js"></script>

or even better, you can combine all the things in a single request:


<!-- react + styled-components + microlink -->
<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>

You can save some bytes if you use

preact

instead of React:


<!-- preact + styled-components + microlink -->
<script src="https://cdn.jsdelivr.net/combine/npm/preact@10/dist/preact.umd.min.js,npm/preact@10/hooks/dist/hooks.umd.min.js,npm/preact@10/compat/dist/compat.umd.min.js,gh/smoljs/react/react.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>

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 Microlink API query 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

data attributes


<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

CSS variables

or CSS classes.


<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>