The Microlink SDK is the way to consume Microlink API directly from your UI.
Based on that premise, Microlink SDK has been designed with two premises on the mind.
- Common surface: Although they may have different interface API, every specific integration has the same functionalities.
- Lightweight & fast: The bundle size tend to be equal or less than 10KB (no polyfills included).
- Customizable style: At least you can customize style using universal CSS classes present on the markup.
Since the Microlink SDK consumes the Microlink API and turns the raw data into a beautiful preview, it needs to perform an internal request to obtain it from the target URL.
To do that, our integrations use the standard . However, Microlink SDK doesn't add it as part of the bundle: It will take it from
That means that
window.fetchshould be available and accesible.
Although nowadays the is enough good, you need to be sure the environment under Microlink SDK is running have it available.
We recommend using the CDN for that purpose, it will only load the polyfill if
fetchisn't globally detected.
<script> crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=fetch"> </script>
Just add the above to your main markup before the closing
We don't inject any CSS into your application.
The card previsualization is shipped with a default minimal inline style.
- microlink_card: The root element of the card.
- microlink_card__media: The media element, regardless of whether it's
- microlink_card__media_image: The
background-imageof the image preview of the link.
- microlink_card__media_video_wrapper: The wrapper
divaround the video preview of the link.
- microlink_card__media_video: The
videoelement for the video preview of the link.
- microlink_card__content: The wrapper
divaround the content preview of the link.
- microlink_card__content_title: The
ptag of the card title.
- microlink_card__content_description: The
ptag of the card description.
- microlink_card__content_url: The
spantag of the card url link.