// instalacja
Dodaj gotowy formularz do swojej strony lub udostępnij klientom link od Offerandum. Poniżej znajdziesz opis obu możliwości i instrukcję instalacji, którą możesz też przekazać osobie obsługującej Twoją stronę.
// dwa sposoby
W obu przypadkach klienci korzystają z tego samego formularza — z Twoim logo, kolorami i cennikiem. Możesz zacząć od linku, a później dodać formularz do swojej strony.
offerandum.com/twoja-firma/formularz
Twój formularz ma własną stronę w Offerandum, z nazwą i identyfikacją wizualną Twojej firmy. Link możesz wysłać klientowi, dodać do stopki e-maila lub umieścić pod przyciskiem „Wycena online” na swojej stronie.
twojafirma.pl/wycena
Umieść formularz tam, gdzie klienci szukają ceny: na podstronie „Wycena”, przy opisie produktu lub w cenniku. Wystarczy wkleić kod z panelu. Formularz dopasuje się do dostępnej szerokości na komputerze i telefonie.
// krok po kroku
Przygotuj dostęp do panelu Offerandum i edytora swojej strony. Następnie skopiuj kod, wklej go na stronie, dodaj jej adres w panelu i sprawdź działanie formularza.
Otwórz stronę „Start” w panelu Offerandum i znajdź opublikowany formularz. W sekcji „Kod do wklejenia na stronę” wybierz „Kopiuj kod”. Poniżej pokazujemy przykład — kod skopiowany z panelu zawiera już identyfikator Twojego formularza zamiast f_TWOJ_KALKULATOR.
<script type="module" src="https://offerandum.com/widget.js"></script>
<offerandum-form form-id="f_TWOJ_KALKULATOR"></offerandum-form>Pierwsza linia wczytuje skrypt Offerandum. Druga określa, który formularz wyświetlić i w którym miejscu strony. Jeśli korzystasz z powyższego przykładu, zastąp f_TWOJ_KALKULATOR identyfikatorem z panelu.
Najprościej: w edytorze strony otwórz wybraną podstronę, dodaj blok HTML i wklej do niego obie linijki razem. Zapisz zmiany i opublikuj stronę. Formularz zajmie szerokość bloku, w którym go umieścisz. Nazwy odpowiednich bloków w popularnych systemach znajdziesz poniżej.
Lepiej dla statystyk: pierwszą linijkę (skrypt) wklej raz w nagłówku całej witryny, w miejscu, które Twój system nazywa „kod w sekcji head”, a na podstronie z formularzem zostaw sam element. Skrypt obecny na każdej stronie zapamiętuje, skąd klient wszedł na witrynę, więc w panelu zobaczysz, że zapytanie przyszło z reklamy albo z wyszukiwarki, nawet gdy klient dotarł do formularza dopiero z trzeciej podstrony. Bez elementu skrypt nic nie rysuje ani nie wysyła.
<script type="module" src="https://offerandum.com/widget.js"></script><offerandum-form form-id="f_TWOJ_KALKULATOR"></offerandum-form>Kolejność nie ma znaczenia i nic się nie zepsuje, gdy skrypt znajdzie się na stronie dwa razy: element zadziała tak czy inaczej.
W panelu, pod kodem do wklejenia, znajdziesz sekcję „Strony, na których działa formularz”. Sprawdź, czy jest tam adres Twojej witryny, np. https://twojafirma.pl. Jeśli go brakuje, dodaj go do listy. Osobno dodaj adres strony testowej lub drugiej domeny, jeśli z nich korzystasz.
Lista ogranicza możliwość umieszczania formularza na innych stronach. Adres podany przy wdrożeniu dodajemy za Ciebie. Potrzebujesz pomocy? Napisz na kontakt@offerandum.com.
Otwórz stronę z formularzem na komputerze i telefonie. Sprawdź, czy formularz wyświetla się poprawnie. Do wysłania próbnego zapytania użyj linku testowego dostępnego w panelu — dzięki temu zgłoszenie będzie oznaczone jako testowe.
Jeśli testujesz formularz osadzony na stronie, dodaj do jego kodu atrybut test-token z tokenem z linku testowego. Zastąp wartości w przykładzie własnym identyfikatorem i tokenem. Po zakończeniu prób usuń ten atrybut, aby przyjmować zwykłe zapytania od klientów.
<offerandum-form form-id="f_TWOJ_KALKULATOR" test-token="TOKEN_Z_PANELU"></offerandum-form>// popularne systemy
Znajdź system, z którego korzystasz, i wybierz wskazany blok lub element. Jeśli potrzebujesz pomocy, napisz na kontakt@offerandum.com — pomożemy Ci przejść przez instalację.
Blok „Własny HTML” (Custom HTML) lub widget „HTML” w Elementorze
Wklej cały kod do jednego bloku HTML w miejscu, w którym chcesz wyświetlić formularz. Następnie zapisz zmiany i sprawdź opublikowaną stronę.
Skrypt w nagłówku witryny: wtyczka typu „WPCode” albo „Insert Headers and Footers”, pole „Header”; w wielu motywach także Wygląd → Dostosuj → „Kod w nagłówku”.
Element „Embed” (Code Embed)
Dodaj element Embed w wybranym miejscu strony i wklej do niego cały kod. Opublikuj stronę, aby sprawdzić działanie formularza.
Skrypt w nagłówku witryny: Project settings → Custom code → „Head code”, potem opublikuj projekt.
Blok „Kod” (Code block)
Wklej cały kod do bloku w trybie HTML. Jeśli Twój plan nie pozwala uruchamiać własnych skryptów, możesz udostępnić klientom link do formularza.
Skrypt w nagłówku witryny: Settings → Advanced → Code Injection → „Header” (plany Business i wyżej).
Sekcja „Custom Liquid” lub szablon strony
Dodaj sekcję Custom Liquid na wybranej stronie i wklej do niej cały kod. Zapisz zmiany i sprawdź, czy formularz jest widoczny dla klientów.
Skrypt w nagłówku witryny: edycja kodu motywu, plik theme.liquid, przed znacznikiem zamykającym head.
Element „Osadź kod” → „Osadź HTML”
Wklej cały kod do elementu HTML. Ustaw wysokość ramki tak, aby mieściła formularz, i sprawdź widok na telefonie. Możesz też użyć gotowego linku do formularza.
Skrypt w nagłówku witryny: Ustawienia witryny → Kod niestandardowy → „Head”. Element w Wixie działa w ramce, więc wklej do niego obie linijki mimo skryptu w nagłówku.
Plik strony, np. wycena.html
Dodaj skrypt raz, w sekcji head lub przed formularzem. Element offerandum-form umieść tam, gdzie ma się wyświetlić formularz.
Skrypt w nagłówku witryny: wspólny szablon albo plik nagłówka, który dołączają wszystkie podstrony.
Instrukcje krok po kroku dla Twojego systemu: Shoper, Squarespace, Webflow, Wix, WooCommerce, WordPress
// dla osoby technicznej
Skrypt dodaje do strony element <offerandum-form>, który wyświetla formularz w osobnej ramce z runtime.offerandum.com. Dzięki temu style strony i formularza są od siebie oddzielone.
offerandum.com. Filmy produktowe są wczytywane z Cloudflare Stream.Bez tych wpisów widget nie wczyta się na stronie. Dopisz je do nagłówka Content-Security-Policy:
script-srchttps://offerandum.comskrypt widgetuconnect-srchttps://offerandum.comceny, zgłoszenia i asystentframe-srchttps://runtime.offerandum.comhttps://offerandum.comformularz i sprawdzenie, czy odwiedzający nie jest botemmedia-srchttps://*.cloudflarestream.comfilmy produktówimg-srchttps://*.cloudflarestream.comminiatury filmówJeśli Twoja strona korzysta z polityki bezpieczeństwa CSP, przekaż powyższe ustawienia osobie, która nią zarządza. Polityka musi zezwalać na połączenia potrzebne do działania formularza.
// pytania
Formularz wczytuje dodatkowe zasoby, więc może wpływać na czas ładowania strony. Sam formularz działa w osobnej ramce. Po instalacji sprawdź szybkość strony, szczególnie na telefonie.
Tak. Dodaj skrypt tylko raz, a dla każdego formularza wstaw osobny element <offerandum-form> z odpowiednim identyfikatorem z panelu.
Formularz nie zapisuje ciasteczek śledzących. Informację o danych i zgody marketingowe klient widzi w samym formularzu, z Twoją firmą jako administratorem. Zasady przetwarzania opisują polityka prywatności i umowa powierzenia.
Tak. Wklej ten sam kod na nowej stronie. Jeśli zmieniasz też domenę, dodaj jej adres w panelu, w sekcji „Strony, na których działa formularz”. Następnie sprawdź, czy formularz wyświetla się poprawnie.
Nie. Klient może wypełnić formularz i wysłać zapytanie bez zakładania konta. Logowanie jest potrzebne Twojemu zespołowi do obsługi zapytań w panelu Offerandum.
Tak. Napisz na kontakt@offerandum.com i podaj adres swojej strony. Ustalimy, jak dodać do niej formularz, i pomożemy sprawdzić jego działanie. W międzyczasie możesz już udostępniać klientom gotowy link od Offerandum.
Prześlij swój cennik — nie musisz go specjalnie przygotowywać. W ciągu 48 godzin otrzymasz pierwszą wersję formularza, którą sprawdzisz na przykładach własnych wycen.