BragaStyle System od devstyle

Kampanie „pochwal się” od devstyle

Twoje zdjęcie. Ramka kursu. Gotowy post.

BragaStyle to narzędzie, które zbudowaliśmy w devstyle do kampanii naszych kursów. Uczestnik wstawia swoje zdjęcie w ramkę kursu, dopisuje imię, pobiera grafikę i publikuje post. My w panelu przygotowujemy ramki, teksty i akceptujemy posty do galerii.

  • Zdjęcie zostaje w przeglądarce
  • 5 formatów grafiki
  • LinkedIn, Facebook, X
  • Galeria z akceptacją
  • Polski i angielski
  • Gotowy na agentów AI
  • 0zdjęć uczestników zapisanych na naszych serwerach
  • 5formatów: kwadrat, pion, story, zdjęcie profilowe w kole i baner LinkedIn
  • 3pola na grafice: imię i nazwisko, stanowisko, firma
  • APIwszystko, co robi panel, zrobi też agent AI

Dlaczego własne narzędzie

Kampania w marce kursu, od początku do końca

Kiedy ktoś zaczyna albo kończy kurs, chętnie się tym chwali. BragaStyle daje mu gotową grafikę i treść posta, a nam pokazuje, ile osób z tego skorzystało i ile wejść na stronę kursu przyszło z ich postów.

W marce kursu

Uczestnik widzi logo, kolory i adres kursu. Nazwa BragaStyle nie pojawia się na stronie kampanii, a na grafice nie ma cudzego znaku wodnego.

Prywatne z założenia

Zdjęcie uczestnika nie trafia na nasz serwer. Grafika powstaje w jego przeglądarce, na telefonie albo komputerze.

Mierzalne

Link w treści posta ma oznaczenia UTM, także wybranego wzoru. Pobrania, udostępnienia i publikacje liczymy w Plausible, bez ciasteczek.

Dla uczestnika

Kilka kroków do gotowej grafiki

Strona kampanii prowadzi krok po kroku: wybór wzoru, formatu, zdjęcia i danych na grafice. Podgląd zmienia się od razu, a gotowy plik PNG pobiera się jednym przyciskiem.

  • Wzór z miniatur, na przykład „Startuję” albo „Dołączam”, a potem format
  • Zdjęcie z pliku albo prosto z aparatu telefonu
  • Przesuwanie i przybliżanie palcami lub myszą, suwak powiększenia i obrót
  • Imię i nazwisko, stanowisko i firma na grafice; kampania decyduje, które pola są włączone
  • Wpisane dane przeglądarka pamięta przy następnej wizycie, nigdy nie trafiają do linku
  • Strona kampanii po polsku albo po angielsku

Udostępnianie

Od grafiki do posta bez przepisywania

Uczestnik dostaje gotowe treści posta z linkiem do strony kursu i wybiera, jak chce się podzielić grafiką.

Treść posta

Kilka wersji tekstu, link już w środku

W kampanii przygotowujemy kilka wersji treści. Uczestnik wybiera jedną, może ją zmienić i kopiuje jednym kliknięciem.

  • Link do strony kursu z UTM, w tym utm_content z wybranym wzorem
  • Licznik znaków pilnuje limitu LinkedIna
  • „Udostępnij” na telefonie wysyła plik przez systemowe menu
  • „Otwórz LinkedIn” otwiera nowy post z treścią; grafikę dodaje się z pobranego pliku
  • Facebook i X dostają link do kampanii, bez grafiki uczestnika
Opublikuj na LinkedIn

Post z grafiką prosto z kampanii

Gdy ta funkcja jest włączona, uczestnik loguje się LinkedInem i publikuje post z grafiką bez wychodzenia ze strony. Przed zalogowaniem widzi, co się stanie z jego grafiką.

  • Gotowa grafika przechodzi przez nasz serwer prosto do LinkedIna i nie jest zapisywana
  • Nie zapisujemy dostępu do konta LinkedIn
  • Po publikacji uczestnik dostaje link do swojego posta

Panel

Kampania gotowa bez programisty

Ramki dostarcza grafik albo agent AI. W panelu wgrywamy pliki, ustawiamy miejsce na zdjęcie i tekst, piszemy treści postów i publikujemy stronę.

Ramki

Pozycje ustawiane przeciąganiem

Każdy wzór ma osobną ramkę dla każdego formatu. Obszar zdjęcia i pola tekstowe przeciągamy na podglądzie z przykładowym zdjęciem, a dokładne wartości wpisujemy obok.

  • Warstwy: tło, zdjęcie, nakładka z przezroczystym otworem, teksty
  • Pliki PNG, JPG i SVG; SVG zamieniamy na PNG już przy wgrywaniu
  • Obszar zdjęcia prostokątny albo okrągły
  • Font z Google Fonts albo z własnego pliku, kolor, grubość, wyrównanie
  • Dłuższy tekst sam zmniejsza się do ustawionego minimum
  • Układ jednego formatu kopiujemy do innego
Treści i publikacja

Teksty postów, podgląd szkicu, publikacja

Treści posta piszemy z miejscem na link, a panel od razu pokazuje, jak link będzie wyglądał. Przed publikacją kampania sprawdza się sama.

  • Szablony kampanii: kursant, ukończenie, wydarzenie, prelegent
  • Kopiowanie całej kampanii jednym kliknięciem
  • Link podglądu szkicu z datą ważności, niewidoczny dla wyszukiwarek
  • Lista braków blokuje publikację, na przykład wzór bez ramki
  • Opcjonalna data końca: potem strona pokazuje komunikat i link do kursu
Galeria

Posty uczestników po naszej akceptacji

Uczestnik może wkleić link do swojego publicznego posta na LinkedIn. Post trafia do kolejki w panelu i pokazuje się na stronie kampanii dopiero po akceptacji.

  • Zapisujemy link do posta i imię autora, bez kopii obrazków
  • Osobna, dobrowolna zgoda na pokazanie posta w materiałach kursu, zapisana z datą i treścią
  • Akceptuj, odrzuć albo usuń, także na prośbę autora
  • Posty z LinkedIna wczytują się na stronie dopiero po zgodzie na cookies marketingowe

A do tego

Drobiazgi, które robią różnicę

Licznik „już się pochwaliło”

Jedna przeglądarka liczy się w kampanii raz, niezależnie od liczby pobrań i publikacji. Licznik pokazuje się na stronie od 5 osób.

Statystyki w Plausible

Rozpoczęcie edycji, pobranie, udostępnienie, skopiowanie treści, publikacja i dodanie posta do galerii trafiają do statystyk strony kursu. Bez imion i treści.

Instrukcja krok po kroku

Kampania może pokazać do 10 kroków z obrazkami, na przykład jak oznaczyć profil kursu w poście.

Obrazek do podglądu linku

Przy publikacji powstaje obrazek, który Facebook, LinkedIn i komunikatory pokazują przy linku do kampanii.

Kilka marek w jednym panelu

devstyle i slowbiz mają osobne kampanie, witryny i ustawienia. Do panelu logujemy się kontem Google, tylko z zaproszonych adresów.

Sprawdzone na telefonach

Automatyczne testy przechodzą stronę kampanii w silniku Safari na ekranie iPhone’a i w Chrome. Przed zmianami w edytorze sprawdzamy go też na prawdziwym iPhonie.

Agenci AI

Wszystko przez API, także dla agentów AI

Panel jest tylko jednym z klientów API. Agent AI (na przykład Claude Code) z kluczem API założy kampanię, wgra ramki, ustawi teksty i opublikuje stronę tak samo jak człowiek w panelu.

API z dokumentacją OpenAPI

Kampanie, wzory, ramki, fonty, treści postów, publikacja i galeria. Opis wszystkich operacji w formacie OpenAPI, który agent czyta sam.

Klucze z zakresami

Klucz ma nazwę agenta, zakres (odczyt, zapis, publikacja, moderacja galerii, administracja) i datę ważności. Pokazujemy go raz, a unieważniamy jednym kliknięciem.

Dziennik zmian

Każda zmiana ma autora: osobę z panelu albo konkretny klucz API. Wiadomo, co zrobił człowiek, a co agent.

Zasady

Reguły, których się trzymamy

Kilka zasad, które wyznaczają działanie BragaStyle.

  • Zdjęcie zostaje u uczestnika

    Zdjęcie nie opuszcza urządzenia. Jedyny wyjątek to gotowa grafika przy „Opublikuj na LinkedIn”, przekazana dalej bez zapisu.

  • Bez kont uczestników

    Uczestnik nie zakłada konta i nie dostaje identyfikatora. Statystyki są tylko zbiorcze.

  • Żadnych danych w linku

    Imienia, stanowiska ani firmy nie da się przekazać w adresie strony. Uczestnik wpisuje je sam.

  • Galeria tylko po akceptacji

    Żaden post nie pokaże się na stronie kampanii, dopóki ktoś z nas go nie zaakceptuje w panelu albo przez API.

  • Wgrany plik to obcy plik

    Sprawdzamy typ po zawartości, wymiary i rozmiar. SVG nigdy nie jest serwowane jako SVG, tylko jako PNG.

  • Strony kampanii poza wyszukiwarką

    Strona kampanii ma znacznik noindex. Trafia na nią ten, kto dostał link.

Prywatność i bezpieczeństwo

Nie zbieramy zdjęć uczestników

Do zrobienia grafiki nie potrzebujemy zdjęcia uczestnika, więc go nie zbieramy. Zapisujemy tylko to, bez czego kampania nie działa.

Grafika w przeglądarce

Zdjęcie, kadr i teksty składamy w przeglądarce uczestnika. Strona kampanii mówi to wprost: „Zdjęcie zostaje na Twoim urządzeniu”.

LinkedIn bez zapisu

Przy „Opublikuj na LinkedIn” gotowa grafika przechodzi przez nasz serwer prosto do LinkedIna. Nie zapisujemy ani grafiki, ani dostępu do konta.

Galeria: link i imię

Z posta w galerii trzymamy tylko link i imię autora. Osadzony post wczytuje się dopiero po zgodzie na cookies marketingowe.

Pola pamięta tylko przeglądarka

Wpisane imię, stanowisko i firmę pamięta tylko przeglądarka uczestnika, żeby nie wpisywał ich drugi raz.

AWS we Frankfurcie

Aplikacja działa na naszym koncie AWS w regionie Frankfurt. Baza danych jest w Supabase, w osobnej schemie z własną rolą, bez dostępu do innych danych.

Kopie zapasowe i limity

Codzienna kopia bazy, przechowywana 30 dni. Publiczne punkty API, takie jak licznik i galeria, mają limity zapytań.

Domena kursu

Kampania pod adresem kursu

Każda kampania ma własną ścieżkę na domenie kursu, na przykład architektjutra.pl/bede. Strona kampanii działa na naszej infrastrukturze, a na domenie kursu pokazuje się dzięki jednej linii w pliku _redirects strony kursu na Netlify. Panel podaje tę linię gotową do wklejenia.

  • Kilka kampanii jednego kursu, każda pod swoją ścieżką
  • Statystyki kampanii w Plausible strony kursu, razem z jej landingiem
  • Na start przygotowujemy kampanię „Będę Architektem Jutra” pod architektjutra.pl/bede
# _redirects strony kursu
# (linia gotowa w panelu)
/bede/* <strona kampanii>:splat 200

Mniej znaczy pewniej

Czego celowo nie zbudowaliśmy

Każda z tych funkcji wymagałaby zbierania danych uczestników albo robiłaby z prostego narzędzia edytor graficzny. Ramki przygotowuje grafik, a BragaStyle dokłada do nich zdjęcie i tekst.

  • Wysyłanie zdjęć na serwer
  • Konta uczestników
  • Dane uczestnika w linku
  • Edytor graficzny ramek
  • Teksty pisane przez AI na żywo
  • Masowe generowanie grafik