Stworzenie kalkulatora to połowa roboty – musi on żyć na twojej stronie, a nie pod osobnym linkiem, do którego odwiedzający muszą klikać. Oto jak działa osadzanie i jak je skonfigurować na platformie, której używasz.
Osadzanie kalkulatora oznacza umieszczenie go bezpośrednio wewnątrz strony na twojej własnej witrynie, dzięki czemu odwiedzający wchodzą z nim w interakcję bez opuszczania twojej strony lub otwierania nowej karty. Na Kalkulatorly.online każdy opublikowany kalkulator jest wyposażony w kod do osadzenia, który wklejasz na swojej stronie — bez osobnego hostingu ani konfiguracji technicznej, wystarczy skopiować i wkleić snippet.
Ten poradnik opisuje ogólny proces osadzania oraz szczegółowe instrukcje dla WordPress, Webflow i Squarespace.
Dlaczego osadzenie jest ważniejsze niż to, gdzie hostujesz plik
Kalkulator istniejący tylko pod osobnym linkiem przerywa przepływ odwiedzającego: musi kliknąć poza twoją stronę, traci kontekst i branding twojej witryny i może nie wrócić. Osadzenie trzyma kalkulator wewnątrz twojej istniejącej strony, obok informacji o cenach, opisu usługi lub formularza kontaktowego, dzięki czemu wydaje się naturalną częścią twojej strony, a nie zewnętrznym narzędziem.
Jak osadzić kalkulator – metoda ogólna
Osadzanie działa tak samo na każdej platformie: publikujesz kalkulator, kopiujesz jego kod do osadzenia i wklejasz ten kod na stronie, na której ma się pojawić.
Krok 1 – Opublikuj swój kalkulator
Dokończ budowę kalkulatora na Kalkulatorly.online — niezależnie od tego, czy zbudowałeś go od zera, czy zaimportowałeś z Excela — i go opublikuj. Publikacja sprawia, że kalkulator jest aktywny i generuje kod do osadzenia potrzebny w kolejnym kroku.
Krok 2 – Skopiuj kod do osadzenia
Po opublikowaniu ustawienia kalkulatora zawierają gotowy snippet do osadzenia, dostępny jako znacznik script lub iframe (patrz porównanie poniżej). Skopiuj ten kod dokładnie tak, jak jest podany.
Krok 3 – Wklej go na swojej stronie
Otwórz stronę, na której ma pojawić się kalkulator, przejdź do części edytora obsługującej niestandardowy kod lub HTML i wklej snippet. Zapisz i podejrzyj stronę — kalkulator powinien teraz pojawiać się inline, dopasowany do swojego kontenera.
Instrukcje dla poszczególnych platform
WordPress
W edytorze blokowym WordPress dodaj blok „Niestandardowy HTML" do swojej strony lub wpisu, wklej w nim kod do osadzenia, a następnie zaktualizuj lub opublikuj stronę. Jeśli używasz wtyczki page buildera, szukaj zamiast tego elementu „Niestandardowy HTML", „Embed" lub „Kod" i wklej tam snippet.
Webflow
W Webflow Designer przeciągnij element „Embed" na swoją stronę, wklej kod do osadzenia do panelu kodu, który się otworzy, i opublikuj stronę. Kalkulator renderuje się wewnątrz elementu embed dokładnie tam, gdzie go umieściłeś.
Squarespace
Dodaj blok „Kod" do sekcji strony, gdzie chcesz umieścić kalkulator, wklej w nim kod do osadzenia i zapisz. Blok Kod Squarespace obsługuje zarówno znaczniki script, jak i iframe, więc każda opcja osadzenia z Kalkulatorly.online zadziała.
Dowolna strona z własnym HTML
Jeśli zarządzasz własnym kodem HTML — stroną zbudowaną od zera lub motywem, który kontrolujesz bezpośrednio — wklej kod do osadzenia w szablonie strony w miejscu, gdzie ma pojawić się kalkulator, tak samo jak dodałbyś dowolny widget zewnętrzny.
iframe vs znacznik script – które wybrać
| Typ osadzenia | Najlepszy dla | Uwagi |
|---|---|---|
| Znacznik script | Większość stron i page builderów | Ładuje kalkulator inline i dostosowuje się do szerokości strony |
| iframe | Platformy obsługujące tylko iframe lub gdy potrzebujesz izolacji od stylów strony | Działa na praktycznie każdej platformie, w tym podstawowych blokach kodu CMS |
Jeśli twoja platforma obsługuje oba, znacznik script jest prostszym rozwiązaniem domyślnym dla większości stron. Jeśli nie wiesz, co obsługuje twoja platforma, najpierw spróbuj wersji iframe — działa w prawie każdym bloku kodu, wszędzie.
Praktyczny przykład
Agencja marketingowa zbudowała kalkulator wyceny i początkowo jedynie linkowała do niego ze strony z cenami. Kliknięcia w osobny link były niskie. Gdy osadzili ten sam kalkulator bezpośrednio na stronie z cenami za pomocą znacznika script, odwiedzający wchodzili z nim w interakcję nie opuszczając strony wcale — ten sam kalkulator, ta sama logika, tylko umieszczony tam, gdzie ludzie już patrzyli.
Dla kogo jest ten poradnik
Ten poradnik jest dla każdego, kto zbudował lub zaimportował kalkulator i teraz musi umieścić go na swojej działającej stronie — zazwyczaj właściciela firmy zarządzającego własną stroną, marketera publikującego landing page lub kogokolwiek edytującego stronę WordPress, Webflow lub Squarespace bez zespołu deweloperskiego pod ręką. Jeśli twoja strona jest zarządzana przez zewnętrznego dewelopera lub agencję, możesz po prostu przesłać im kod do osadzenia i te instrukcje.
Sprawdzanie, czy osadzenie wygląda dobrze na urządzeniach mobilnych
Zanim uznasz osadzenie za skończone, otwórz stronę na telefonie — nie tylko w przeglądarce desktopowej przy węższym oknie. Większość page builderów inaczej podgląda desktop i mobile, a kalkulator wyglądający idealnie na ekranie laptopa może być niezgrabnie ułożony, ucięty lub wypychać inne treści na małym ekranie. Przewiń do kalkulatora, wypełnij pole i sprawdź, czy wynik rzeczywiście pojawia się bez dodatkowego przewijania lub powiększania. Ta dwuminutowa kontrola na prawdziwym telefonie wyłapuje więcej problemów z układem niż jakikolwiek podgląd desktopowy.
Jeśli zarządzasz wieloma stronami
Jeśli prowadzisz kilka stron — dla różnych klientów, marek lub lokalizacji — ten sam kod do osadzenia można ponownie użyć w niezmienionej postaci wszędzie tam, gdzie jest istotny, ponieważ zawsze pobiera najnowszą opublikowaną wersję kalkulatora. Nie ma potrzeby przebudowywania kalkulatora dla każdej strony; publikujesz go raz na Kalkulatorly.online, a osadzona wersja na każdej stronie aktualizuje się automatycznie.
Często zadawane pytania
Czy muszę znać programowanie, żeby osadzić kalkulator na swojej stronie?
Nie. Osadzanie wymaga jedynie skopiowania gotowego snippetu z Kalkulatorly.online i wklejenia go w blok kodu lub embed na twojej stronie — nie piszesz ani nie edytujesz żadnego kodu.
Czy mogę osadzić kalkulator na WordPress bez wtyczki?
Tak. Edytor blokowy WordPress zawiera wbudowany blok „Niestandardowy HTML", który przyjmuje kod do osadzenia bezpośrednio, bez żadnej dodatkowej wtyczki.
Jaka jest różnica między osadzaniem przez iframe a znacznik script?
Znacznik script ładuje kalkulator inline i dostosowuje się do szerokości strony, podczas gdy iframe ładuje go wewnątrz stałej ramki; oba wyświetlają ten sam kalkulator, a to, który wybrać, zależy od tego, co obsługuje twoja platforma.
Czy osadzony kalkulator będzie działać na urządzeniach mobilnych?
Tak. Kalkulatory opublikowane na Kalkulatorly.online są zaprojektowane tak, aby dostosowywać się do ekranu, na którym są wyświetlane, w tym do telefonów i tabletów — bez żadnej dodatkowej konfiguracji z twojej strony.
Czy mogę osadzić ten sam kalkulator na więcej niż jednej stronie lub witrynie?
Tak. Możesz wkleić ten sam kod do osadzenia na wielu stronach, a nawet wielu witrynach; każda z nich wyświetla ten sam aktywny, opublikowany kalkulator.
Osadź swój pierwszy kalkulator już dziś
Gdy twój kalkulator jest już zbudowany, umieszczenie go na stronie wymaga jednego kopiowania i wklejenia. Zacznij za darmo na Kalkulatorly.online, opublikuj swój kalkulator i osadź go na swojej stronie już dziś. Nowy w budowaniu kalkulatorów? Zacznij od naszego poradnika o zamianie pliku Excel w kalkulator webowy lub budowaniu kalkulatora cenowego od zera. Masz więcej pytań? Sprawdź nasze często zadawane pytania lub przeglądaj więcej poradników.
