MeDo

Gerador de Banner de Cookies com IA.

Descreva a experiencia de consentimento de cookies que voce precisa — estilo do banner, rotulos dos botoes, texto legal, esquema de cores — e o MeDo gera codigo pronto para producao instantaneamente. Publique um banner de cookies em conformidade e alinhado com sua marca sem boilerplate.

Banner de Cookies
Banner de Cookies

Banners de cookies sao legalmente obrigatorios — e geralmente terriveis.

O GDPR, CCPA e regulamentacoes ePrivacy exigem consentimento informado antes de definir cookies nao essenciais, e os reguladores aplicam isso ativamente. Mas a maioria dos banners de cookies usa dark patterns, e feia ou quebrada. Um banner de consentimento bem projetado constroi confianca do usuario, reduz rejeicao causada por popups intrusivos e mantem seu site em conformidade sem sacrificar a experiencia. O MeDo ajuda voce a gerar um que parece intencional, nao improvisado.

6 modelos

Modelos de Banner de Cookies que você pode gerar

Cada modelo é um prompt real, não uma captura de tela. Copie para qualquer editor de IA, ou rode no MeDo e receba código React + Tailwind.

Bottom barBaseline

Accept and Reject Bottom Bar

One line of copy, two buttons of equal weight, a policy link. The smallest banner that still gives a genuine choice rather than a dismiss disguised as one.

Create a cookie consent bar fixed to the bottom of the viewport: a short line explaining that non-essential cookies are used for analytics, a link to the cookie policy, and two buttons — Accept all and Reject non-essential — rendered with identical size, contrast and padding so neither is visually demoted. Render it in a region with role="region" and an accessible name, do not trap focus, and place it last in the DOM so it does not sit ahead of the page content in tab order. Persist the decision under a versioned key in localStorage with a timestamp, and keep the bar hidden on every later visit until that version changes. Load no analytics script before a decision exists.

Teste no MeDo
CategoriesGranular

Per-Category Consent Panel

Four categories, three of them off until someone turns them on. The version to build when tags actually differ in purpose rather than all being one analytics script.

Create a cookie consent panel with four categories: Necessary (locked on, with a note explaining it cannot be disabled), Functional, Analytics and Marketing, each a labelled switch with a one-sentence description of what it enables. Every non-essential switch defaults to off. Provide Accept all, Reject all and Save preferences, with Accept all and Reject all identical in weight. Store the result as an object keyed by category alongside a schema version and timestamp, and emit a consent-changed event so tag loading can react without a page reload. Keep the switches keyboard operable with visible focus rings and expose state through aria-checked rather than colour alone.

Teste no MeDo
ModalGate

Centered Consent Modal

Blocks the page until a choice is made. Highest completion rate, highest bounce rate — reach for it only when a decision genuinely has to precede the first render.

Create a centered cookie consent modal with a dimmed backdrop: heading, two sentences of explanation, a cookie policy link, and Accept all, Reject all and Manage preferences buttons with the first two given equal visual weight. Use role="dialog" with aria-modal="true", label it by its heading, move focus to the heading on open, cycle Tab within the dialog, and do not close on Escape or backdrop click since either would leave consent undecided. Persist the choice in a versioned localStorage record with a timestamp and render nothing on subsequent visits. Do not pre-tick any non-essential category, and gate every non-essential script behind the stored value.

Teste no MeDo
ToastCorner

Corner Card Consent Toast

A small card in the bottom corner that leaves the page usable. Least disruptive and least answered — expect a large share of visitors to simply ignore it.

Create a cookie consent card anchored to the bottom-left corner, roughly 360px wide, with a cookie icon, a two-line explanation, a policy link and stacked Accept all and Reject all buttons of matching width and contrast. It must not overlap other fixed UI, so offset it above any support launcher. Do not include a bare X dismiss control — a close button that leaves consent unrecorded means the banner returns on every navigation. Render it after the main landmark in the DOM, keep it out of any focus trap, and persist the decision in a versioned localStorage entry with a timestamp so it stays hidden once answered.

Teste no MeDo
Persistent accessReopen

Banner With a Preferences Trigger

The banner plus a permanent footer link that reopens it. Consent that cannot be changed later is the most common defect in a shipped banner, and the fix is one link.

Create a cookie consent bar plus a persistent Cookie preferences button for the site footer that reopens the same panel with the stored values pre-loaded, so a visitor can withdraw consent as easily as they gave it. The panel lists Necessary, Functional, Analytics and Marketing switches with non-essential ones reflecting whatever was saved, and offers Accept all, Reject all and Save preferences. On reopen, move focus to the panel heading and return focus to the footer button on close. Write changes to the same versioned localStorage key with a fresh timestamp and emit a consent-changed event so already-loaded tags can be told to stop.

Teste no MeDo
Geo-awareRegional

Region-Conditional Consent Banner

Shows the full category panel where prior consent is expected and a lighter notice elsewhere, driven by a server-supplied region hint. The requirements vary by jurisdiction, so confirm the rules for each region with counsel.

Create a consent component that takes a region prop resolved server-side from the request and renders one of two variants: a full category panel with all non-essential switches defaulting to off and Accept all, Reject all and Save preferences of equal weight, or a lighter notice with an acknowledge action and a link to a cookie settings page. Never pre-tick a non-essential category in either variant. Store the decision with the region and a schema version so the record explains which variant produced it, and re-prompt when the version changes. Keep the region check server-side so no tracking script loads before the variant is known.

Teste no MeDo

Como personalizar seu Banner de Cookies

Combinar com o design system do seu site

Especifique suas cores de marca, raio de borda e fonte no prompt para que o banner pareca nativo — nao como um widget de terceiros. Usuarios tem mais probabilidade de interagir com um banner que parece pertencer ao site.

Escolher posicao e animacao do banner

Barra inferior, modal centralizado e toast de canto sao os tres padroes principais. Diga ao MeDo qual voce prefere e se deseja slide-up, fade-in ou aparicao instantanea. Barras inferiores sao menos disruptivas; modais sao mais conformes para jurisdicoes rigorosas.

Ajustar a hierarquia dos botoes

Dark patterns (esconder o botao de rejeitar) atraem multas regulatorias. Peca ao MeDo para dar a "Aceitar" e "Rejeitar" peso visual igual, ou usar um CTA neutro "Gerenciar Preferencias" que leva a um modal de consentimento granular.

Adicionar painel de preferencias

Para conformidade mais completa, peca ao MeDo para incluir um painel de preferencias com toggles por categoria (Analytics, Marketing, Funcional). Este e o padrao ouro para conformidade GDPR e confianca do usuario.

Quem usa o componente Banner de Cookies

Produto SaaS

Banner inferior leve com aceitar/rejeitar e um link para a politica de cookies. Nao intrusivo mas conforme — mantem a interface do app em primeiro plano enquanto cumpre as obrigacoes do GDPR.

Loja de e-commerce

Banner de consentimento completo com modal de preferencias cobrindo cookies de analytics, personalizacao e marketing. Critico para lojas que usam pixels de anuncios e retargeting.

Site de marketing ou blog

Aviso de cookies simples com um unico botao "Aceitar" e um link de texto para configuracoes de cookies. Friccao minima para sites focados em conteudo com apenas cookies de analytics.

Empresa ou industria regulamentada

Modal de consentimento granular com toggles por fornecedor, um log de auditoria completo das decisoes de consentimento e uma opcao "Rejeitar Todos" proeminente — construido para satisfazer requisitos rigorosos de DPA.

Padrões de Banner de Cookies para diferentes sites

O mesmo componente banner de cookies, ajustado ao tipo de site em que ele entra.

01 / 06

SaaS Product Consent

A bottom bar with equal-weight accept and reject, and the reject path wired to skip product analytics rather than just hiding the bar. The failure here is a banner on the marketing site and none inside the authenticated app, where most of the event tracking actually happens.

Estilos e variações de Banner de Cookies

Escolha a variação que combina com o resto da página e gere-a.

01 / 06

Bottom Bar Banner

Full-width strip pinned to the bottom, one line of copy, two buttons. The least disruptive pattern and the safest default. Watch the mobile height — a three-line bar covering a sticky Add to cart button is a conversion bug, not a design detail.

Banner de Cookies em React, Next.js, Vue e Svelte

React, Next.js, Vue 3, SvelteKit, Astro ou HTML puro — o mesmo banner de cookies, seis formas de integrar.

01 / 06

React Cookie Banner

Consent belongs in a context provider at the app root, not in the banner — the banner is one reader of that state and every gated feature is another. Read localStorage in an effect so the first render matches the server.

src/components/ConsentProvider.tsx

const KEY = 'consent.v2'

export function ConsentProvider({ children }) {
  const [consent, setConsent] = useState(null)

  useEffect(() => {
    setConsent(JSON.parse(localStorage.getItem(KEY) ?? 'null'))
  }, [])

  return (
    <Ctx.Provider value={{ consent, setConsent }}>{children}</Ctx.Provider>
  )
}

Como adicionar o seu Banner de Cookies a um projeto

Quatro passos, de escolher um modelo de banner de cookies até subir para produção.

01~30s

Pick a Consent Pattern

Choose by how many distinct cookie purposes you actually have — a bottom bar for one analytics script, a category panel once marketing and functional tags are separate concerns.

02~10s

Copy the Prompt

Paste it into MeDo, Lovable, Bolt, v0 or Cursor. Replace the category descriptions with the tags you really run, since that list is what your policy page has to agree with.

03~1min

Generate and Refine

You get React + Tailwind with a live preview. Follow up in plain English — "give reject all the same weight as accept", "expand preferences in place", "add a footer trigger that reopens it".

04~2min

Gate Your Scripts and Verify

Wire analytics and pixel loading to the stored value, then load the site fresh and confirm no non-essential request fires before a choice. Specific consent obligations vary by jurisdiction — have counsel review what you ship.

Perguntas comuns sobre Banner de Cookies

Como criar um banner de cookies com IA?

No MeDo, descreva o banner de consentimento de cookies que voce precisa — sua posicao, rotulos dos botoes, quais cookies voce usa e seu estilo visual. O MeDo gera o codigo completo do componente, que voce pode copiar para seu projeto ou continuar refinando com prompts de acompanhamento. Sem necessidade de procurar boilerplate.

Qual e o melhor gerador de banner de cookies com IA?

O MeDo e construido especificamente para gerar componentes de sites prontos para producao, incluindo banners de cookies. Diferente de ferramentas de IA genericas, o MeDo produz codigo limpo e semantico com markup acessivel e padroes sensiveis para rotulagem em conformidade com GDPR — nao apenas um template bruto que voce precisa corrigir.

A IA pode gerar um banner de cookies em conformidade com GDPR?

O MeDo pode gerar banners de cookies que seguem padroes de melhores praticas do GDPR: botoes aceitar/rejeitar com peso visual igual, um link para sua politica de cookies e toggles opcionais de consentimento por categoria. No entanto, a verdadeira conformidade legal depende de suas praticas de dados especificas e jurisdicao — sempre tenha sua equipe juridica revisando a implementacao final.

Como adicionar um botao "Rejeitar Todos" ao meu banner de cookies?

Simplesmente inclua no seu prompt — por exemplo, "adicione um botao Rejeitar Todos com peso visual igual ao botao Aceitar". O MeDo gerara ambos os botoes com estilos correspondentes e conectara os placeholders de logica apropriados.

Posso gerar um modal de preferencias de cookies com IA?

Sim. Peca ao MeDo para incluir um painel de preferencias com toggles por categoria (ex.: Analytics, Marketing, Cookies funcionais). O MeDo gerara um modal completo com interruptores, descricoes de categorias e acoes de salvar/confirmar.

O banner de cookies com IA funciona com Google Analytics e Meta Pixel?

O MeDo gera a interface do usuario e a logica de consent-gate. Voce pode solicitar que inclua hooks placeholder para bloquear ou carregar scripts de analytics com base no consentimento do usuario. Conectar isso ao seu gerenciador de tags ou SDK de analytics especifico requer uma pequena etapa de integracao apos a geracao.