It is available as a npm package:
npm install microlinkjs --save
Optionally you can link it directly from the CDN as well:
<!-- Microlink SDK Vanilla/UMD bundle -->
<script src="//[email protected]/umd/microlink.min.js"></script>
<!-- Microlink SDK AMD bundle -->
<script src="//[email protected]/amd/microlink.min.js"></script>
<!-- Microlink SDK CJS bundle -->
<script type="text/javascript" src="//[email protected]/cjs/microlink.min.js"></script>

Basic Usage

Microlink SDK provides the microlink method which takes a CSS selector (similar to jQuery/Zepto) to target elements you want to convert into beautiful preview cards.
Here are some usage examples:
  // Example 1
  // Replace all `a` tags for microlink cards

  // Example 2
  // Replace all elements with `link-preview` class
  // for microlink cards

  // Example 3
  // Replace all elements with `link-preview` class
  // for microlink cards, passing API specific options

Don't run it too late!

You need to add microlink to the page early in the page load.
We recommend calling the microlink method before the DOM finishes loading:
<!-- Add microlink before the closing body tag. -->
<script type="text/javascript" src="//[email protected]/umd/microlink.min.js"></script>

<!-- Call microlink to replace links with cards previews -->
...or on DOMContentLoaded:
  // Replace all elements with `link-preview` class
  // after DOM loaded
  document.addEventListener('DOMContentLoaded', function (event) {


You can pass specific API parameters to microlink as a second argument:
// Replace all elements with `link-preview` class
// for microlink large cards
microlink('.link-previews', {
  size: 'large'
You can also pass parameters as a data-attribute in the HTML markup of each element:
<a class="link" data-size="large" href=""></a>
Check API parameters reference in order to know what options you can use.


We don't inject any CSS into your application. The card previsualization is shipped with a default minimal inline style.
If you need to adapt the look and feel, each component of the card has been assigned a BEM class name:


The root div of the card.


The div holding the background-image of the image preview of the link.


The wrapper div around the video preview of the link.


The video element for the video preview of the link.


The wrapper div around the content preview of the link.


The p tag of the card title.


The p tag of the card description.


The span tag of the card url link.
In order to apply your specific style, just declare your custom CSS rules using the properly class name.
For example, lets modify the font family used in the preview cards:
  .microlink-card {
    font-family: 'Nitti, "Microsoft YaHei", 微软雅黑, monospace';
    max-width: 100%;
and voilá!