---
url: "/pt/bannerify/export/inject-custom-code.md"
description: "Você pode injetar (se quiser) qualquer HTML, CSS e JavaScript personalizado em todos os seus banners pelo painel de configurações da exportação HTML."
---

# Injetar código HTML/CSS/JavaScript nos banners HTML

> Você pode injetar (se quiser) qualquer HTML, CSS e JavaScript personalizado em todos os seus banners pelo painel de configurações da exportação HTML.

### Vídeo tutorial: adicione HTML, CSS e JavaScript personalizados às exportações de banners do Figma

Este vídeo mostra como adicionar HTML, CSS e JavaScript personalizados às exportações de banners do Figma usando o plugin Bannerify.
[Embedded media](https://www.youtube-nocookie.com/embed/Uwe6PLmErRU)

[Video](/assets/videos/bannerify/export/inject-custom-code.mp4)

Se você precisa adicionar seu próprio HTML/CSS/JavaScript a todas as exportações de banners HTML, ative a opção **Inject Custom Code** nas configurações de exportação. Com ela, você pode adicionar HTML personalizado antes das tags de fechamento `` (para adicionar conteúdo) ou `` (para adicionar meta tags ou links de recursos), adicionar CSS personalizado em uma nova tag **style** ou adicionar código JavaScript personalizado dentro de uma nova tag ``.

> **Tip:** **Exemplo de aviso legal sobreposto com botão de alternância**. Você pode usar [este exemplo de código HTML/CSS/JS no CodePen](https://codepen.io/hypermatic/pen/YzbPjvK) como referência básica de um caso de uso comum deste recurso: ele injeta um pop-up de aviso legal que pode ser aberto e fechado sobre os seus banners. Fique à vontade para copiar e modificar os estilos e o conteúdo como precisar.

## Predefinições de código personalizado salvas (opcional) {#saved-custom-code-presets-optional}

[Video](/assets/videos/bannerify/export/saved-code-presets.mp4)

O recurso **Saved Custom Code Presets** permite salvar e reutilizar diferentes configurações de código HTML, CSS e JavaScript personalizado ao exportar banners. Para usá-lo, preencha seu código personalizado nas quatro áreas disponíveis (Head HTML, Body HTML, CSS e JavaScript), digite um nome descritivo e clique em **Save as New Preset** para guardar essa configuração e usá-la depois.

Depois de salvar, você pode carregar rapidamente qualquer predefinição no menu suspenso **Load Saved Preset (Optional)** para preencher na hora todas as áreas de código personalizado com a configuração salva. Assim, você não precisa copiar e colar trechos de código manualmente cada vez que exportar banners com requisitos diferentes. Você pode gerenciar suas predefinições apagando as que não precisa mais ou atualizando as existentes: carregue a predefinição, faça as alterações e salve com o mesmo nome. Todas as predefinições ficam armazenadas localmente no seu app do Figma atual (usando a API [clientStorage](https://www.figma.com/plugin-docs/api/figma-clientStorage/) do Figma) e continuam disponíveis sempre que você abre o painel de código do Bannerify em diferentes arquivos do Figma, o que facilita manter um código consistente em várias sessões de exportação.

## Adicionar fontes personalizadas ao texto HTML editável {#adding-custom-fonts-to-editable-html-text}

Use um arquivo de web font para cada peso e estilo usado no seu texto editável. Instalar uma fonte no Figma não a inclui no pacote de uma exportação HTML.

1. Obtenha os arquivos **.woff2** ou **.woff** aprovados pela marca para uso na web.
2. Ative a [exportação de texto em parágrafos](/pt/bannerify/export/html#export-text-as-paragraph-tags-instead-of-svg-images). Deixe o texto editável desbloqueado no Figma.
3. No painel de exportação HTML, ative **Inject Custom Code** e escolha **Add custom CSS styles**.
4. Cole uma regra `@font-face` no campo de CSS, sem uma tag `` em volta. Substitua a família de exemplo pelo nome exato da família usado no Figma e na declaração `font-family` do texto exportado e use o peso e o estilo reais da fonte.

```css
@font-face {
  font-family: "Your Brand Font";
  src: url("fonts/brand-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
```

5. Adicione uma regra separada para cada peso/estilo adicional (por exemplo, `700` para negrito ou `italic` para um arquivo itálico).
6. Exporte e descompacte o banner. Coloque os arquivos de fonte em uma pasta `fonts` ao lado do arquivo HTML de cada banner e depois compacte de novo todo o conteúdo desse banner. O Bannerify injeta o CSS, mas não copia esses arquivos de fonte locais para o ZIP. URLs de fonte relativas são resolvidas a partir do local da folha de estilo; ajuste o caminho se o CSS estiver salvo em outra pasta.
7. Teste o pacote em um servidor web local ou na pré-visualização da plataforma de destino, inclusive em um dispositivo sem a fonte instalada. Confira o carregamento da fonte, as quebras de linha e textos de substituição mais longos. Os arquivos de fonte contam para o tamanho do pacote, e o destino precisa permitir esses arquivos.

Em vez disso, você pode usar a URL HTTPS direta de um arquivo de fonte hospedado, se a sua plataforma de anúncios permitir requisições externas de fontes. O servidor de fontes precisa permitir o carregamento de fontes entre origens (cross-origin). Veja a [referência de font-face do MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@font-face).