Bloki HTML w Notion: kalkulator, quiz i schemat procesu z jednego polecenia

Bloki HTML w Notion to małe, klikalne programy osadzone na stronie: kalkulator, quiz, schemat procesu. Od lipca 2026 robi je Notion AI z jednego polecenia. Dla zespołu to jeden ekran zamiast ściany tekstu, a dla osoby, która odpowiada za proces, poprawka w tekście i jedno zdanie do AI zamiast rysowania schematu od nowa.

Sprawdziłem to 11 listopada 2026 na czterech przypadkach dla zmyślonej firmy sprzątającej biura. Każdy blok powstał w niecałe trzy minuty. Przy procedurze i kalkulatorze AI przy okazji pokazał braki w zasadach, których wcześniej nie zauważyłem. To jest dla mnie największa wartość tych bloków: rysunek procesu albo kalkulator szybko sprawdza, czy zasady są kompletne. Niżej opisuję, czym jest blok HTML, jak o niego poprosić, polecenia do skopiowania i ograniczenia, na które trafiłem.

Czym jest blok HTML w Notion

Blok HTML to plik .html wstawiony na stronę i uruchamiany przez Notion w odizolowanej ramce. Dokumentacja Notion opisuje go wprost: aplikacja wyświetla zawartość pliku interaktywnie, w ramce oddzielonej od reszty strony (dokumentacja API Notion↗). Z blokiem można klikać, wpisywać liczby, odpowiadać na pytania.

Taki blok powstaje na trzy sposoby:

• Notion AI buduje go z treści strony na Twoją prośbę. Tę drogę opisuję w tym tekście.
• Ręcznie, poleceniem /html, gdy masz gotowy plik .html.
• Przez integrację: od 3 lipca 2026 blok można dodać przez API (changelog API Notion↗), a agenci zewnętrzni robią to przez Notion MCP.

Notion ogłosił bloki HTML w wydaniu 3.6 z 1 lipca 2026 i podkreślił, że z gotowego bloku może korzystać i poprawiać go cały zespół (notatka do wydania 3.6↗). W menu / blok widnieje jako HTML z oznaczeniem New, o czym pisałem przy okazji bloków i stron w Notion↗.

Plan. Notion AI jest w planach Business i Enterprise. Na planach Free i Plus dostajesz tylko ograniczoną liczbę darmowych odpowiedzi AI (FAQ Notion AI↗). Czy blok zrobiony przez kogoś innego działa u osoby na planie Free, nie znalazłem w dokumentacji Notion. Tego nie sprawdzałem.

Nad blokiem są trzy ikony: Edit with AI (poprawka przez AI), Open in full screen (pełny ekran) i More.

Jak poprosić Notion AI o blok HTML

Otwierasz stronę, na której jest treść (procedura, cennik, zasady), i piszesz do Notion AI w panelu czatu. Dobre polecenie mówi trzy rzeczy:

• co ma powstać (schemat, kalkulator, quiz, wykres),
• gdzie na stronie (na przykład „na końcu strony”, „pod tabelą”),
• z jakich danych: „bierz tylko to, co jest zapisane na stronie”. To zdanie zmniejsza ryzyko, że AI dopisze własne zasady, ale nie zastępuje sprawdzenia wyniku. Przy kalkulatorze AI i tak przyjął jedno założenie, choć uczciwie je zgłosił. Możesz dopisać jeszcze: „Jeśli czegoś brakuje, wskaż lukę zamiast samodzielnie ją uzupełniać”.

Jedna pułapka z mojego testu: mam podłączony plan ChatGPT, a czat był ustawiony na model GPT. Notion AI odpowiedział „Your ChatGPT plan can't be used right now” i bloku nie zrobił. Po przełączeniu modelu na Auto wszystko zadziałało. Notion wyjaśnia, że Auto i modele spoza GPT korzystają z kredytów AI w Notion, a nie z planu ChatGPT (pomoc Notion o planie ChatGPT↗).

Czas pracy AI w moich czterech przypadkach: od 1 min 42 s do 2 min 59 s. Przy schemacie procedury widziałem w czacie, że AI sam obejrzał swój blok w szerokim oknie i na szerokości telefonu, zanim go wstawił.

Przypadek 1: procedura jako klikalny schemat

Procedura „Odejście osoby z zespołu” to osiem kroków: kto, co i kiedy, od daty odejścia po przekierowanie poczty. Na stronie to zwykła lista numerowana. Poprosiłem o schemat w trzech kolumnach (tydzień przed, ostatni dzień, po odejściu), z kolorem kafelka według osoby.

Zrób z tej procedury klikalny schemat w bloku HTML na końcu strony: kolumny tydzień przed, ostatni dzień, po odejściu, kolor kafelka według osoby. Kliknięcie kafelka pokazuje cały krok. Bierz tylko to, co jest zapisane na stronie.

Po 1 min 42 s schemat był na stronie. Klik w kafelek pokazuje cały krok, więc zespół widzi na jednym ekranie, kto, kiedy i co dokładnie robi.

Tu przyszła niespodzianka. Sześć z ośmiu kroków AI odłożył do pola „Termin nieokreślony”, a kolumna „Po odejściu” została pusta. Powód był prosty: przy tych krokach nie napisałem, kiedy je zrobić. Czytając listę, tego nie zauważyłem. Na schemacie widać to od razu, bo kolumny są pytaniem „kiedy?”, a kroki bez odpowiedzi wypadają na bok.

Dopisałem terminy w tekście procedury, na przykład „Do środy przed odejściem” albo „Dzień po odejściu”, i napisałem do AI jedno zdanie:

Dopisałem terminy przy krokach. Zaktualizuj schemat na końcu strony.

Po 1 min 29 s każdy krok stał w swojej kolumnie.

To jest podział pracy, który mi się podoba: zespół czyta schemat, a osoba odpowiedzialna za proces poprawia tylko tekst. Schematu nikt nie rysuje od nowa. Kolumny i kolory działają przy tym jak kontrola kompletności, ale sprawdzają tylko te pytania, które wpiszesz w polecenie. Kroku, którego w procedurze w ogóle nie ma, schemat nie wyłapie.

Jeśli Twoje procedury są dziś w głowach albo w luźnych notatkach, zacznij od ich spisania. Darmowy szablon Procedury firmy Lite trzyma procedury, zasady i checklisty w jednym miejscu, każdą z osobą odpowiedzialną i datą następnego przeglądu.

Przypadek 2: kalkulator wyceny z cennika

Cennik firmy sprzątającej ma stawki za metr kwadratowy w trzech progach, częstotliwość sprzątania, dodatki, minimum 400 zł miesięcznie i rabat 5% przy umowie na rok. Poprosiłem o kalkulator:

Zrób z tego cennika kalkulator wyceny w bloku HTML na końcu strony: pola metraż, częstotliwość, dodatki i umowa na 12 miesięcy; wynik netto, VAT i brutto z rozpisaniem, jak policzono. Stawki i zasady bierz tylko z tej strony.

Kalkulator był gotowy po 2 min 59 s. Sprawdziłem go na liczbach policzonych osobno: 150 m², sprzątanie dwa razy w tygodniu, mycie okien, środki higieniczne i umowa roczna. Wyszło 1 325,25 zł netto, 304,81 zł VAT i 1 630,06 zł brutto, co do grosza tak samo jak w moim wyliczeniu.

Ciekawsze było to, co AI napisał w czacie. Zgłosił dwie dziury w moim cenniku. Pierwsza: cennik nie mówi, czy minimum 400 zł liczyć przed rabatem, czy po nim. Przy 80 m² sprzątanych raz w tygodniu z umową roczną wychodzi przez to 380 zł zamiast 400 zł. Druga: stawki są „do 100 m²” i „od 101 m²”, więc dla 100,5 m² nie ma żadnej stawki. AI przyjął założenie, wypisał je pod wynikiem i zaznaczył lukę w kalkulatorze.

Klient, który policzy wycenę sam, trafiłby na tę samą dwuznaczność. Lepiej, żeby wyłapał ją kalkulator na etapie testu. Zanim użyjesz takiego kalkulatora w prawdziwych wycenach, sprawdź nie jeden wynik, tylko każdą zasadę osobno: progi stawek, minimum, rabat i zaokrąglenia.

Przypadek 3: quiz dla nowej osoby

Strona „Zasady dla nowej osoby” mówi o urlopach, chorobie, hasłach, awariach, mailach od klientów i paragonach. Poprosiłem o quiz:

Zrób z tej strony quiz dla nowej osoby w bloku HTML na końcu strony: 5 pytań jednokrotnego wyboru, po każdej odpowiedzi krótkie wyjaśnienie ze strony, na końcu wynik i przycisk „Od nowa”. Pytania tylko z tego, co jest na stronie.

Po 1 min 42 s quiz był gotowy. Po każdej odpowiedzi pokazuje wyjaśnienie zbudowane z tekstu zasad, a na końcu wynik.

Nowa osoba może w pierwszym tygodniu sama sprawdzić, co zapamiętała z zasad. Quiz nigdzie nie zapisuje wyników, więc to narzędzie do nauki, a nie do kontroli.

Wykres z bazy: zdjęcie danych, nie widok na żywo

Czwarty test był najważniejszy, bo dotyczy ograniczenia. Na stronie „Raport przychodu” jest tabela z ośmioma zleceniami. Poprosiłem o wykres:

Pod tabelą Zlecenia dodaj blok HTML z wykresem słupkowym: suma kwot netto w każdym miesiącu, z kwotą nad słupkiem. Dane tylko z tej tabeli.

Wykres powstał po 1 min 59 s, z poprawnymi sumami: 2 790 zł we wrześniu, 5 460 zł w październiku i 6 500 zł w listopadzie. AI sam dopisał, że wykres pokazuje dane ze stanu na 11 listopada 2026 i nie aktualizuje się automatycznie.

Zajrzałem do plików moich bloków. Liczby są wpisane w plik HTML w chwili tworzenia i w żadnym z nich nie ma zapytania o dane z zewnątrz. W moich testach nowe zlecenie w tabeli nie zmieniłoby więc wykresu, trzeba poprosić AI o nową wersję. Kalkulator ma stawki wpisane tak samo: zmiana w cenniku nie zmieni go, dopóki AI go nie przebuduje. Czy każdy blok HTML działa w ten sposób, dokumentacja Notion nie mówi; opisuję to, co zmierzyłem.

Dlatego do danych, które zmieniają się codziennie, lepszy jest zwykły widok wykresu w bazie Notion, bo liczy się na bieżąco. Blok HTML sprawdza się tam, gdzie dane zmieniają się rzadko: procedura, cennik, zasady, raport na koniec miesiąca.

Ograniczenia, które sprawdziłem

• Pełny ekran: jest. Ikona Open in full screen otwiera blok na całe okno. Tak najwygodniej się w nim klika.
• Na stronie najechanie kursorem na blok pokazuje szarą nakładkę Interact, a w ciasnym oknie bloku część treści chowa się pod przewijaniem. Panel ze szczegółami kroku w schemacie pojawiał się poza widocznym fragmentem bloku.
• Kopia strony zachowuje blok. Po zduplikowaniu strony w tym samym workspace kopia ma ten sam plik HTML. Kopii do innego workspace nie sprawdzałem.
• Telefon: działa, ale ciasno. W przeglądarce zwężonej do 430 px blok miał około 220 px szerokości, kafelki stanęły w jednej kolumnie, a nazwy łamały się co słowo. W aplikacji mobilnej nie sprawdzałem.
• Strona publiczna: bloku nie widziałem. Opublikowałem stronę testową przez Publish to web i otworzyłem ją dwa razy w przeglądarce bez logowania. Cała treść strony była, a bloku HTML nie. Nie znalazłem w dokumentacji Notion informacji o blokach HTML na stronach publicznych, więc traktuj to jako wynik jednego testu, a nie zasadę.

Od czego zacząć

Weź jedną stronę, którą zespół powinien znać, a której nikt nie czyta do końca: procedurę, cennik albo zasady dla nowych osób. Skopiuj polecenie z przypadku, który pasuje, i zmień w nim tylko kolumny albo pola. Potem przeczytaj, co AI napisał w czacie, bo tam pojawiają się luki w Twoich zasadach. Jeśli polecenie sprawdzi się kilka razy, zapisz je jako skill w Notion↗, żeby zespół nie musiał go przepisywać. Więcej o tym, co jeszcze potrafi Notion AI, piszę w przewodniku Notion AI↗.