The Microlink SDK is the way to consume Microlink API directly from your UI.
Based on that premise, Microlink SDK has been designed with three things in mind:
- Common surface: Although they may have different interface API, every specific integration has the same functionalities.
- Lightweight & fast: The bundle size tends 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 good enough, you need to be sure that the environment Microlink SDK is running on has 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 the media type (
- microlink_card__media_image: The
background-imageof the image preview.
- microlink_card__media_video_wrapper: The wrapper
divaround the video preview.
- microlink_card__media_audio_wrapper: The wrapper
divaround the audio preview.
- microlink_card__media_video: The
videoelement for the video preview.
- microlink_card__media_audio: The
audioelement for the audio preview.
- microlink_card__content: The wrapper
divaround the content preview.
- 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.