Widżet tip.BOX to prosty widżet, który można łatwo dodać do każdej strony www, na przykład bloga. Pozwala odwiedzającym przekazywać drobne darowizny (napiwki) jako formę podziękowania za interesujący wpis czy wartościową recenzję. To efektywny sposób na monetyzowanie ruchu na swojej stronie.
Jeżeli chcesz użyć tip.BOX w swoich social mediach, przejdź do Twój profil tipbox.link.
Utwórz widżet
Zaloguj się do swojego konta wydawcy, a następnie przejdź do zakładki Widżet tip.BOX –> Widżet i ustawienia. Wprowadź dane rozliczeniowe niezbędne do wypłaty środków. Następnie kliknij Utwórz.
Dopasuj wygląd (konfigurator)
Dopasuj wygląd swojego widżetu tip.BOX, nadając mu osobisty charakter. To ma duże znaczenie dla tego, jak Twoja społeczność odbierze tip.BOX. Atrakcyjny design widżetu oraz opis Twojej twórczości lub celu zwiększą zaangażowanie odbiorców, którzy chętniej zostawią Ci napiwek jako formę uznania za Twoją pracę.
Krok 1 – ustaw treści i kolory
Na początek wybierz stronę, dla której chcesz skonfigurować widżet tip.BOX, a następnie postępuj według poniższych kroków:
- Ustaw kolory poszczególnych elementów (np. nagłówek, tekst, przyciski z kwotami) widżetu tak, aby pasowały do Twojej strony.
- Dodaj zdjęcie profilowe.
- Wpisz treść nagłówka.
- Dodaj tekst zachęty, który będzie wyświetlany internautom.
- Wpisz tekst podziękowania, wyświetlany internautom po dokonaniu wpłaty napiwku.
- Wpisz domyślne wartości napiwków. Pamiętaj, że pojedynczy napiwek wpłacany przez internautów musi mieścić się w przedziale od 5,00 do 1 500,00 zł.
Krok 2 – wyróżnij swój widżet ikonkami
- Dodaj ikonę, która wyświetli się przy kwotach,
- oraz wybierz jej wersję kolorystyczną: kolorową lub monochromatyczną. Wersja monochromatyczna w widżecie przyjmuje kolory tekstu przycisków.
Na koniec zapisz zmiany i gotowe 🙌
Wstawianie na stronę
Aby wstawić widżet na stronę, skopiuj jego kod 1 i wstaw go na swojej stronie w miejscu, w którym chcesz go wyświetlać 2.
Pamiętaj! Jeżeli korzystasz z platformy WordPress, widżet możesz wstawiać za pomocą gotowej wtyczki do WordPressa.
Przekazywanie własnych parametrów
W widżecie tip.BOX możesz przekazywać własne dane – takie jak np. identyfikator użytkownika lub podstrony, nazwa podstrony, typ treści, kategoria itp. – za pomocą specjalnych parametrów p1, p2 i p3.
To przydatna funkcja, jeśli chcesz później analizować, z jakiej strony, sekcji lub kampanii pochodziła darowizna. Przekazane wartości są zapisane razem z każdym napiwkiem i dostępne w Twoim panelu użytkownika na liście wpłat.
Aby przekazać własne dane, w kodzie widżetu użyj atrybutów: bb-p1, bb-p2 oraz bb-p3.
Przykład użycia
<div
class="bb-widget"
data-bb-type="tipbox"
data-bb-space-id="1111"
data-id="abc123"
bb-p1="{WARTOŚĆ}"
bb-p2="{WARTOŚĆ}"
bb-p3="{WARTOŚĆ}"
></div>💡 Za {WARTOŚĆ} podstaw własne dane. Możesz wykorzystać jeden, dwa lub wszystkie trzy parametry.
Modyfikowanie domyślnych ustawień
Domyślna konfiguracja Twojego widżetu tip.BOX jest pobierana z ustawień zapisanych w panelu użytkownika. Jeśli chcesz jednak dostosować widżet indywidualnie dla konkretnej podstrony lub dynamicznie, możesz nadpisać te ustawienia bezpośrednio w kodzie HTML widżetu, dodając odpowiednie atrybuty.
Poniżej znajdziesz listę dostępnych parametrów, które możesz wykorzystać.
💬 Tekst widżetu – personalizacja treści
| Atrybut | Opis |
|---|---|
bb-header-label | Treść nagłówka widżetu |
bb-description-label | Krótkie zachęcenie do wsparcia |
bb-thanks-label | Treść podziękowania po wpłacie |
bb-avatar | Adres URL grafiki awatara (proporcję 1:1) |
💰 Kwoty napiwków – podmień domyślne wartości
| Atrybut | Opis |
|---|---|
bb-amounts-1 | Wartość pierwszego sugerowanego napiwku |
bb-amounts-2 | Wartość drugiego napiwku |
bb-amounts-3 | Wartość trzeciego napiwku |
💡 Podaj wartości jako liczby, np. bb-amounts-1="5". Pamiętaj, że kwoty napiwków muszą mieścić się w granicach od 5 do 1 500 zł.
🎨 Wygląd – kolory, które pasują do Twojej strony
| Atrybut | Opis |
|---|---|
bb-background-color | Kolor tła widżetu |
bb-header-color | Kolor nagłówka |
bb-text-color | Kolor tekstu opisu i etykiet |
bb-frame-color | Kolor obramowania widżetu |
bb-button-background-color | Kolor tła przycisków |
bb-button-text-color | Kolor tekstu na przyciskach |
💡 Akceptowany format: kody hex (np. #FFFFFF).
Przykład pełnego kodu osadzenia z własną konfiguracją
<div
class="bb-widget"
data-bb-type="tipbox"
data-bb-space-id="1111"
data-id="abc123"
bb-header-label="Wesprzyj moją pracę!"
bb-description-label="Każda kawa to dla mnie dodatkowy czas na tworzenie wartościowychtreści."
bb-thanks-label="Dziękuję za Twoje wsparcie! 💛"
bb-amounts-1="5"
bb-amounts-2="10"
bb-amounts-3="20"
bb-background-color="#1E2A38"
bb-header-color="#FFC107"
bb-text-color="#FFFFFF"
bb-frame-color="#FFC107"
bb-button-background-color="#FFC107"
bb-button-text-color="#1E2A38"
></div>
