⚠️ Para implementar esta funcionalidade, é necessário mexer no código. Se JavaScript não é seu forte, envie esta página para seu desenvolvedor preferido!
Alguns serviços acabam ficando ocultos se o visitante não aceitar os cookies:
seu chat online (Zendesk, iAdvize, Gorgias, Crisp...)
vídeos hospedados externamente (YouTube, Dailymotion, Vimeo...)
posts de redes sociais (X/Twitter, Instagram, TikTok, Facebook...)
mapas interativos (Google Maps, OpenStreetMap...)
widgets de avaliações (Trustpilot, Avis Vérifiés/Skeepers...)
formulários de contato
ou ainda pixels de rastreamento
Felizmente, Axeptio permite evitar isso graças ao consentimento contextual. Você pode apresentar seus cookies de forma diferente, destacando claramente o interesse para o usuário.
✅ Esta funcionalidade condiciona o disparo de um iframe (YouTube, Google Maps...) quando o usuário aceita os cookies.
Princípio de funcionamento
Enquanto o visitante não aceita os cookies de um serviço, o conteúdo correspondente (iframe, widget…) permanece bloqueado.
Em seu lugar, você exibe uma mensagem clara ou um botão de substituição permitindo dar consentimento para aquele serviço específico.
Quando clica nesta mensagem ou botão, o banner Axeptio abre automaticamente, com o cookie do serviço em questão destacado para que ele possa aceitá-lo diretamente.
Assim que o consentimento é dado, o conteúdo é carregado instantaneamente.
Etapa 1: Adicione o script com a lógica global
Escrevemos um script que se comporta conforme descrito acima: exibe uma mensagem ou um botão de substituição enquanto o visitante não aceita o serviço, e carrega automaticamente o conteúdo assim que o consentimento é dado.
Você pode usar este script como está, ou personalizá-lo de acordo com sua necessidade.
👉 Integre este script no <head> do seu site ou em uma tag do seu container Google Tag Manager.
No <head>
No <head>
// On enregistre une fonction à exécuter une fois que le SDK Axeptio est prêt
(_axcb = window._axcb || []).push(function(sdk) {
// Quand l'utilisateur a terminé de faire ses choix de cookies
sdk.on('cookies:complete', function(choices){
// 1. Masquer les messages/boutons si le service a été accepté
document
.querySelectorAll('[data-hide-on-vendor-consent]')
.forEach(el => {
const vendor = el.getAttribute('data-hide-on-vendor-consent');
el.style.display = choices[vendor] ? 'none' : 'inherit';
});
// 2. Charger les contenus (iframes) seulement si le service est accepté
document
.querySelectorAll('[data-requires-vendor-consent]')
.forEach(el => {
const vendor = el.getAttribute('data-requires-vendor-consent');
if (choices[vendor]) {
// On remplace data-src par src pour déclencher le chargement
el.setAttribute('src', el.getAttribute('data-src'));
}
});
});
});
No GTM
No GTM
<script>
"use strict";
// On enregistre une fonction à exécuter une fois que le SDK Axeptio est prêt
(_axcb = window._axcb || []).push(function (sdk) {
// Quand l'utilisateur a terminé de faire ses choix de cookies
sdk.on('cookies:complete', function (choices) {
// 1. Masquer les messages/boutons si le service a été accepté
document.querySelectorAll('[data-hide-on-vendor-consent]').forEach(function (el) {
var vendor = el.getAttribute('data-hide-on-vendor-consent');
el.style.display = choices[vendor] ? 'none' : 'inherit';
});
// 2. Charger les contenus (iframes) seulement si le service est accepté
document.querySelectorAll('[data-requires-vendor-consent]').forEach(function (el) {
var vendor = el.getAttribute('data-requires-vendor-consent');
if (choices[vendor]) {
// On remplace data-src par src pour déclencher le chargement
el.setAttribute('src', el.getAttribute('data-src'));
}
});
});
});
</script>
Etapa 2: Adapte o código de integração iframe para adiar o carregamento até o consentimento
Para adiar o carregamento do conteúdo até o momento em que o usuário der seu consentimento, vamos modificar ligeiramente o comportamento padrão do iframe.
Em vez de colocar a URL diretamente no atributo src (que dispara automaticamente o carregamento, o que não é desejável neste caso), armazenamos em um atributo personalizado data-src.
Também adicionamos um atributo específico data-requires-vendor-consent indicando que este conteúdo requer consentimento de um serviço específico.
O script da etapa 1 então cuida de monitorar o consentimento do usuário e, somente quando o usuário aceita, coloca a URL de volta no atributo src para iniciar o carregamento efetivo do conteúdo.
Obtenha o código do seu iframe.
Substitua o atributo
srcpordata-src.Adicione o atributo
data-requires-vendor-consentcom o valor do nome técnico do seu serviço.
Exemplo para YouTube
Código de integração padrão do YouTube (copiado via Compartilhar > Incorporar):
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen>
</iframe>
Versão modificada para consentimento contextual:
<iframe
width="560"
height="315"
data-src="https://www.youtube.com/embed/VIDEO_ID" <!-- src substituído por data-src -->
data-requires-vendor-consent="youtube" <!-- NOVO atributo -->
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen>
</iframe>
Etapa 3: Adicione uma mensagem ou botão de substituição
Se não tiver feito isso ainda, adicione agora seu serviço ao seu banner de cookies.
Para desbloquear este iframe, você precisa oferecer ao usuário uma ação que lhe permita validar o cookie em questão, para poder "desbloquear" a exibição do nosso iframe.
Aqui está uma proposta de botão muito básico:
<!-- Contêiner exibido enquanto o consentimento para o serviço não é dado -->
<div data-hide-on-vendor-consent="NomDoServico">
<p>Para visualizar este conteúdo, você deve aceitar o cookie NomDoServico.</p>
<!-- Botão personalizável -->
<button onclick="window.axeptioSDK.requestConsent('NomDoServico')">
Eu aceito o 🍪 NomDoServico
</button>
</div>
Exemplo para YouTube:
<div data-hide-on-vendor-consent="youtube">
<p>Para visualizar este vídeo, você deve aceitar o cookie YouTube.</p>
<button onclick="window.axeptioSDK.requestConsent('youtube')">
Eu aceito o 🍪 YouTube
</button>
</div>
O que este botão faz:
Abre automaticamente o banner Axeptio.
Destaca o cookie do serviço em questão para que o usuário possa aceitá-lo diretamente.
Assim que for feito, o script principal carrega o iframe e oculta este bloco.
⚠️ Pontos importantes para o script da etapa 1 funcionar corretamente:
O contêiner deve ter o atributo
data-hide-on-vendor-consentcom o nome exato do serviço (mesmo nome que emdata-requires-vendor-consentno iframe).O botão (ou link clicável) deve chamar
window.axeptioSDK.requestConsent('NomDoServico')para disparar o banner Axeptio.
💡 Você pode personalizar o estilo, o texto e até exibir uma pré-visualização desfocada do conteúdo para incentivar o clique.