---
url: "/pl/bannerify/export/inject-custom-code.md"
description: "Opcjonalnie możesz wstawić dowolny własny kod HTML, CSS i JavaScript do wszystkich banerów z poziomu panelu ustawień eksportu HTML."
---

# Wstawianie własnego kodu HTML/CSS/JS do banerów HTML

> Opcjonalnie możesz wstawić dowolny własny kod HTML, CSS i JavaScript do wszystkich banerów z poziomu panelu ustawień eksportu HTML.

### Poradnik wideo: dodawanie własnego kodu HTML, CSS i JavaScript do banerów eksportowanych z Figmy

Ten film pokazuje, jak za pomocą wtyczki Bannerify dodać własny kod HTML, CSS i JavaScript do banerów eksportowanych z Figmy.
[Embedded media](https://www.youtube-nocookie.com/embed/Uwe6PLmErRU)

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

Jeśli chcesz dodać własny kod HTML/CSS/JavaScript do wszystkich eksportowanych banerów HTML, włącz przełącznik **Inject Custom Code** w ustawieniach eksportu. Pozwala to dodać własny kod HTML przed zamykającym znacznikiem `` (aby dodać treść) lub `` (aby dodać metatagi lub linki do zasobów), dodać własny CSS w nowym znaczniku **style** albo dodać własny kod JavaScript w nowym znaczniku ``.

> **Tip:** **Przykład nakładki z przełączanym zastrzeżeniem**. Jako podstawowy przykład typowego zastosowania tej funkcji możesz wykorzystać [ten przykład kodu HTML/CSS/JS w CodePen](https://codepen.io/hypermatic/pen/YzbPjvK), który dodaje do banerów wyskakujące okno z zastrzeżeniem, otwierane i zamykane przełącznikiem. Możesz dowolnie kopiować i modyfikować style oraz treść.

## Zapisane ustawienia własnego kodu (opcjonalnie) {#saved-custom-code-presets-optional}

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

Funkcja **Saved Custom Code Presets** pozwala zapisywać i ponownie wykorzystywać różne konfiguracje własnego kodu HTML, CSS i JavaScript podczas eksportu banerów. Aby z niej skorzystać, wpisz własny kod w czterech dostępnych polach (Head HTML, Body HTML, CSS i JavaScript), podaj opisową nazwę i kliknij **Save as New Preset**, aby zapisać konfigurację do przyszłego użytku.

Zapisane ustawienie możesz szybko wczytać z listy rozwijanej **Load Saved Preset (Optional)**, aby od razu wypełnić wszystkie pola własnego kodu zapisaną konfiguracją. Dzięki temu nie musisz ręcznie kopiować i wklejać fragmentów kodu przy każdym eksporcie banerów o innych wymaganiach. Ustawieniami możesz zarządzać: usuwać te, których już nie potrzebujesz, albo aktualizować istniejące – wczytaj je, wprowadź zmiany i zapisz pod tą samą nazwą. Wszystkie ustawienia są przechowywane lokalnie w bieżącej aplikacji Figma (za pomocą API [clientStorage](https://www.figma.com/plugin-docs/api/figma-clientStorage/) z Figmy) i pozostają dostępne po każdym ponownym otwarciu panelu kodu Bannerify, także w innych plikach Figmy. Ułatwia to utrzymanie spójnego kodu w wielu sesjach eksportu.

## Dodawanie własnych fontów do edytowalnego tekstu HTML {#adding-custom-fonts-to-editable-html-text}

Użyj pliku fontu webowego dla każdej grubości i stylu używanych w edytowalnym tekście. Zainstalowanie fontu w Figmie nie dołącza go do eksportu HTML.

1. Zdobądź zatwierdzone przez markę pliki **.woff2** lub **.woff** przeznaczone do użytku w sieci.
2. Włącz [eksport tekstu jako akapitów](/pl/bannerify/export/html#export-text-as-paragraph-tags-instead-of-svg-images). Edytowalny tekst pozostaw w Figmie odblokowany.
3. W panelu eksportu HTML włącz **Inject Custom Code**, a potem wybierz **Add custom CSS styles**.
4. Wklej regułę `@font-face` do pola CSS bez otaczającego znacznika ``. Zastąp przykładową rodzinę dokładną nazwą rodziny fontów używaną w Figmie i w deklaracji `font-family` eksportowanego tekstu, a grubość i styl dopasuj do faktycznego fontu.

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

5. Dodaj osobną regułę dla każdej dodatkowej grubości lub stylu (na przykład `700` dla pogrubienia lub `italic` dla pliku kursywy).
6. Wyeksportuj i rozpakuj baner. Umieść pliki fontów w folderze `fonts` obok pliku HTML każdego baneru, a potem ponownie spakuj całą zawartość tego baneru. Bannerify wstawia CSS, ale nie kopiuje tych lokalnych plików fontów do pliku ZIP. Względne URL-e fontów są rozwiązywane względem lokalizacji arkusza stylów – jeśli CSS jest zapisany w innym folderze, dostosuj ścieżkę.
7. Przetestuj paczkę na lokalnym serwerze WWW lub w podglądzie platformy docelowej, także na urządzeniu bez zainstalowanego fontu. Sprawdź wczytywanie fontu, łamanie wierszy i dłuższe teksty zastępcze. Pliki fontów wliczają się do rozmiaru paczki, a platforma docelowa musi na nie zezwalać.

Zamiast tego możesz użyć bezpośredniego URL HTTPS do hostowanego pliku fontu, jeśli Twoja platforma reklamowa zezwala na zewnętrzne żądania fontów. Serwer fontów musi zezwalać na wczytywanie fontów z innych domen (cross-origin). Zobacz [dokumentację MDN dotyczącą @font-face](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@font-face).