Teste intro.js crachá

intro.js

const style = document.createElement("link")
style.href = "https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/introjs.css";
style.type = "text/css";
style.rel = "stylesheet";
document.head.appendChild(style);

document.body.style.paddingTop = "1px";
document.body.style.marginTop = "-1px";

const nome = document.querySelector('div.profile h3').firstChild.textContent.split(' ')[0];

document.querySelector('div.photo img').setAttribute("data-intro", `Essa pessoa bonida da foto é o(a) ${nome}`);
document.querySelector('div.photo img').setAttribute("data-step", 1);

document.querySelector('a.add-book i').setAttribute("data-intro", `Utilize este botão para adicionar o(a) ${nome} à sua agenda`);
document.querySelector('a.add-book i').setAttribute("data-step", 2);

document.querySelector('#link-edit').setAttribute("data-intro", `Se o(a) ${nome} é você, utilize este botão para alterar as suas informações que aparecem aqui`);
document.querySelector('#link-edit').setAttribute("data-step", 3);

document.querySelector('div.social').setAttribute("data-intro", `Para saber mais sobre nós, acesse nossas redes sociais...`);
document.querySelector('div.social').setAttribute("data-step", 4);

document.querySelector('div.media-card').setAttribute("data-intro", `Ou assista ao nosso vídeo`);
document.querySelector('div.media-card').setAttribute("data-step", 5);

import("https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/intro.js").then(() => introJs().start());