⚠️ Para implementar este recurso, é necessário mexer no código. Se JavaScript não é seu forte, envie esta página para seu desenvolvedor preferido!

Infelizmente, alguns serviços ficam 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, Verified Reviews/Skeepers...)
formulários de contato
ou ainda pixels de rastreamento

Felizmente, o Axeptio permite evitar isso com o consentimento contextual. Você poderá apresentar seus cookies de forma diferente, destacando claramente o interesse para o usuário.

✅ Este recurso condicionada o disparo de uma iframe (YouTube, Google Maps...) quando o usuário aceita os cookies.

Princípio de funcionamento

Enquanto o visitante não aceitar 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 que permite dar consentimento para esse serviço específico.
Quando ele clica nesta mensagem ou botão, o banner do Axeptio abre automaticamente, com o cookie do serviço em questão destacado para que possa aceitá-lo diretamente.
Assim que o consentimento é dado, o conteúdo é carregado instantaneamente.

Etapa 1: Adicionar o script com a lógica global

Escrevemos um script que funciona conforme descrito acima: exibe uma mensagem ou 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 suas necessidades.

👉 Integre este script no <head> do seu site ou em uma tag do seu contêiner Google Tag Manager.

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

<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: Adaptar o código de integração do iframe para adiar o carregamento até o consentimento

Para adiar o carregamento do conteúdo até o momento em que o usuário dá seu consentimento, vamos modificar ligeiramente o comportamento padrão do iframe.

Em vez de colocar a URL diretamente no atributo src (que dispara o carregamento automaticamente, o que não é desejável neste caso), a armazenamos em um atributo personalizado data-src.

Também adicionamos um atributo específico data-requires-vendor-consent indicando que este conteúdo requer o consentimento de um determinado serviço.

O script da etapa 1 então monitora o consentimento do usuário e, apenas quando o usuário aceita, coloca a URL de volta no atributo src para iniciar o carregamento efetivo do conteúdo.

Recupere o código do seu iframe.
Substitua o atributo src por data-src.
Recupere o nome técnico do seu serviço.
Adicione o atributo data-requires-vendor-consent com o nome técnico do seu serviço como valor.

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 remplacé par data-src --> 
  data-requires-vendor-consent="youtube" <!-- NOUVEL attribut -->
  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: Adicionar uma mensagem ou botão de substituição

Se ainda não o fez, adicione agora seu serviço ao seu banner de cookies.

Para desbloquear este iframe, você precisará oferecer ao usuário uma ação que 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:

<!-- Conteneur affiché tant que le consentement pour le service n'est pas donné -->
<div data-hide-on-vendor-consent="NomDuService">

  <p>Para visualizar este conteúdo, você deve aceitar o cookie NomDuService.</p>

  <!-- Botão personalizável -->
  <button onclick="window.axeptioSDK.requestConsent('NomDuService')">
    Aceito o 🍪 NomDuService 
  </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')">
    Aceito o 🍪 YouTube 
  </button>
</div>

O que este botão faz:

Abre automaticamente o banner do Axeptio.
Destaca o cookie do serviço em questão para que o usuário possa aceitá-lo diretamente.
Assim que isso é feito, o script principal carrega o iframe e oculta este bloco.

⚠️ Pontos importantes para que o script da etapa 1 funcione corretamente:

O contêiner deve ter o atributo data-hide-on-vendor-consent com o nome exato do serviço (mesmo nome que em data-requires-vendor-consent no iframe).
O botão (ou link clicável) deve chamar window.axeptioSDK.requestConsent('NomDuService') para disparar o banner do Axeptio.

💡 Você pode personalizar o estilo, o texto e até exibir uma visualização desfocada do conteúdo para incentivar o clique.

Exemplo de implementação de consentimento contextual

Gerenciar os serviços que exibem conteúdo no seu site (YouTube, Maps, chat...)