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 Microlink SDK consume Microlink API and turn the raw data into a beauty preview, it needs to perform an internal request for getting from the target URL.
For doing that, our integrations use standard fetch. 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 fetch browser compatibility is enough good, you need to be sure the environment under Microlink SDK is running have it available.
We recommend use polyfill.io CDN for that purpose, it will only load polyfill if fetch is not globally detected.
<script> crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=fetch"> </script>
Just add it in your main markup before closing your
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:
- microlink_card: The root
divof 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.