Automatic Link Preview Help

Design help Custom code
1

This site is a cloneable. When I try to get the dynamic link preview on my other site, it’s not working. On the cloneable, he said I need to get my own thumbnail API. I’m not sure where I get that and where I’m supposed to input the code in the page code.

Cloneable:https://webflow.com/made-in-webflow/website/Automatic-Link-Preview

Page Code:

script type=“text/javascript”>

// Automatic Link Previews by Dhruv Sachdev
const card = document.getElementsByClassName(“card dynamic”)[0];
const CARD_VERTICAL_OFFSET = 16; // vertical space between card and link

let pageHeight = Math.max(
document.body.scrollHeight,
document.documentElement.scrollHeight,
document.body.offsetHeight,
document.documentElement.offsetHeight,
document.body.clientHeight,
document.documentElement.clientHeight
);

// recalculate page height on resize
window.addEventListener(“resize”, function () {
pageHeight = Math.max(
document.body.scrollHeight,
document.documentElement.scrollHeight,
document.body.offsetHeight,
document.documentElement.offsetHeight,
document.body.clientHeight,
document.documentElement.clientHeight
);
});

function getCardPosition(link) {
let cardWidth = parseInt(
window.getComputedStyle(card).getPropertyValue(“width”).slice(0, -2)
); // get computed width because card stays hidden

let transformX = link.offsetLeft - cardWidth / 2 + link.offsetWidth / 2;
let transformY = pageHeight - link.offsetTop + CARD_VERTICAL_OFFSET;

return {
x: transformX,
y: transformY
};
}

// replace below with your screenshot API
function buildScreenshotURL(url) {
return https://image.thum.io/get/allowJPG/${url};
}

// preload and cache preview thumbnail to browser
function preloadPreview(url) {
return $(“”).attr(“src”, url);
}

function getOffset(el) {
const rect = el.getBoundingClientRect();
return {
left: rect.left + window.scrollX,
top: rect.top + window.scrollY
};
}

function buildPreview(link) {
let previewURL = buildScreenshotURL(link.href);
preloadPreview(previewURL);

link.addEventListener(“mouseover”, showCard);

function showCard() {
card.getElementsByTagName(“img”)[0].src = previewURL; // replace image source with link preview
setCardPosition(link);
}
}

function setCardPosition(link) {
let position = getCardPosition(link);
card.style.transform = translate(${position.x}px, -${position.y}px);

// recalculate position on page resize
window.addEventListener(“resize”, function () {
let position = getCardPosition(link);
card.style.transform = translate(${position.x}px, -${position.y}px);
});
}

// build preview on page load
[…document.getElementsByClassName(“dynamic-link-preview”)].forEach(
buildPreview
);