Compartilho um exemplo prático de como integrar um bloco de notícias dinâmicas dentro do WHMCS, puxando artigos relevantes sobre WordPress, desenvolvimento de software, criação de sites e hospedagem, utilizando a API do GNews. O conteúdo inclui imagem, título, descrição e link direto para a notícia, com tratamento de erros e carregamento assíncrono. Ideal para B2B que querem agregar valor e manter os clientes informados diretamente no painel.

<div id="newsBlock" style="border:1px solid #ccc; padding:15px; max-width:400px; font-family: Arial, sans-serif;">

<img id="newsImage" src="https://via.placeholder.com/400x200?text=Carregando..." alt="Imagem da notícia" style="width:100%; height:auto; object-fit:cover; border-radius:4px; margin-bottom:10px;" />

<div id="newsContent">

<h3>Carregando notícia...</h3>

<p>Por favor, aguarde.</p>

</div>

</div>

{literal}

<script>

document.addEventListener('DOMContentLoaded', () => {

const url = https://gnews.io/api/v4/search?q=wordpress OR "desenvolvimento de software" OR desenvolvedor OR "desenvolvimento web" OR "programação web" OR "hospedagem em nuvem" OR ui/ux OR "dados em nuvem"&lang=pt&max=1&apikey=SUA-CHAVE-API-GNEWS-AQUI;

fetch(url)

.then(res => {

if (!res.ok) throw Erro HTTP ${res.status};

return res.json();

})

.then(data => {

const article = data.articles?.[0];

if (!article) throw "Nenhuma notícia encontrada";

const img = document.getElementById("newsImage");

const content = document.getElementById("newsContent");

// Se a notícia tem imagem, usa; senão, usa placeholder

if (article.image) {

img.src = article.image;

img.alt = article.title;

} else {

img.src = "https://via.placeholder.com/400x200?text=Sem+imagem";

img.alt = "Imagem padrão";

}

// Monta o conteúdo da notícia

content.innerHTML = `

<h3>${article.title}</h3>

<p>${article.description || ""}</p>

<a href="${article.url}" target="_blank" rel="noopener noreferrer"><button style="padding:8px 12px; cursor:pointer; border:none; background:#007bff; color:#fff; border-radius:4px;">Ler mais</button></a>

`;

})

.catch(err => {

console.warn("Erro ao carregar notícia:", err);

const content = document.getElementById("newsContent");

content.innerHTML = "<p>Não foi possível carregar a notícia.</p>";

});

});

</script>

{/literal}

muito interessante, obrigado por compartilhar!