Jak utworzyć wyskakujące okienko Lightbox w swojej witrynie (krok po kroku)

Opublikowany: 2021-12-31

Szukasz sposobu na utworzenie wyskakującego okienka lightbox dla swojej witryny?

Wyskakujące okienko lightbox może być niezwykle skuteczne w przechwytywaniu potencjalnych klientów. Mają przekonywać i nawracać.

Ale konieczność zakodowania jednego od zera to prawdziwy ból. Po pierwsze, musisz znać wystarczająco dużo HTML, CSS i JavaScript, aby utworzyć wyskakujące okienko wraz z regułami wyzwalającymi, kiedy je wyświetlić. Następnie musisz utworzyć ręczną integrację z dostawcą usług poczty e-mail. I na koniec będziesz musiał poradzić sobie z wszelkimi problemami dotyczącymi prywatności i bezpieczeństwa.

Dobra wiadomość: jest o wiele prostszy sposób.

W tym artykule pokażemy, jak uruchomić wyskakujące okienko lightbox bez kodowania w mniej niż 10 minut.

Zanurzmy się.

Co to jest wyskakujące okienko Lightbox?

Wyskakujące okienko lightbox to formularz do wyrażania zgody, który wyskakuje z efektem kinowym. Gdy pojawi się lightbox, zamazuje resztę witryny w tle. W ten sposób cała twoja uwaga skupiona jest na wyskakującym okienku.

Przykład wyskakującego okienka lightbox

Pierwotnie koncepcja kasetonów wywodzi się z reklamy zewnętrznej:

Reklama lightbox

A potem niektórzy programiści pomyśleli, że to naprawdę fajny efekt i stworzyli bibliotekę JavaScript, aby odtworzyć ten sam efekt w zasobach internetowych. Później pojawił się pomysł wykorzystania wyskakujących okienek lightbox.

Dlaczego wyskakujące okienka lightbox działają?

Wyskakujące okienka Lightbox przechwytują więcej e-maili niż tradycyjny formularz zgody na pocztę e-mail.

Ale dlaczego działają?

Rzućmy okiem na główne powody, dla których wyskakujące okienka lightbox działają tak dobrze.

#1. Wyskakujące okienka lightbox zawierają wyraźne wezwanie do działania

Większość ludzi uważa, że ​​oferowanie swoim klientom wielu opcji to świetna rzecz.

Ale to nieprawda.

Jeśli szukasz bezpośrednich konwersji, potrzebujesz jednego, jasnego wezwania do działania, na którym mogą skupić się Twoi odbiorcy. W ten sposób usuniesz wszelkie rozpraszacze z umysłu użytkownika. A wyskakujące okienka lightbox świetnie sprawdzają się, podkreślając Twoją podstawową ofertę i zachęcając ludzi do skupienia się na wezwaniu do działania.

Tak więc, oczywiście, współczynniki konwersji są całkiem dobre.

#2. Wyskakujących okienek Lightbox nie można zignorować

Wyskakujące okienka lightbox zajmują cały ekran i zamazują wszystko inne. Tak więc praktycznie nie można ich zignorować.

Jest to szczególnie ważne, jeśli są animowane:

wyskakujące efekty animacji

Oczywiście musisz upewnić się, że wyskakujące okienka nie będą nachalne. Możesz to zrobić, dostosowując czas wyświetlania różnych wyskakujących okienek w swojej witrynie. Dopóki twoja publiczność nie jest zirytowana przerwą, możesz bardzo łatwo ich przekonać i nawrócić.

#3. Wyskakujące okienka lightbox mają spersonalizowane wyzwalacze

Nie powinieneś pokazywać tej samej oferty wszystkim odwiedzającym. Jeśli prowadzisz sklep eCommerce, będziesz potrzebować bardzo różnych ofert dla nowych i powracających klientów.

Dla nowego klienta możesz uruchomić kampanię powitalną:

Wyskakujące okienko z kuponem

Ale dla powracającego klienta możesz wysłać mu inną ofertę:

Wyskakujące okienko z kuponem zaręczynowym

Zwróć uwagę, że kwoty rabatów dla obu ofert są dokładnie takie same. Ale sposób, w jaki oferta jest ujęta, jest drastycznie inny. A to jest bardzo ważne, ponieważ wyskakujące okienka lightbox są zbudowane z myślą o efektach teatralnych. Tak więc bardziej spersonalizowane podejście na pewno przyniesie znacznie lepsze wyniki.

Możesz nawet spersonalizować ofertę w oparciu o preferencje treści użytkownika. Jeśli czytają artykuł o przepisach na obiad, rozsądniej jest pokazać im ofertę związaną z przepisami na obiad, niż pokazywać im ofertę na samochody.

Wyskakujące okienko wyjścia na wieś

#4. Wyskakujące okienka lightbox mogą przyciągnąć opuszczających użytkowników

Lightboxy to tylko metoda wyświetlania wyskakującego okienka. Tak więc naprawdę nic nie stoi na przeszkodzie, aby dostosować wyzwalacz w dowolnym stopniu. Zalecamy tworzenie wyskakujących okienek lightbox z zamiarem wyjścia.

Zamknij wyskakujące okienko intencji

Wyskakujące okienka z zamiarem wyjścia są uruchamiane, gdy użytkownicy próbują opuścić witrynę. W rezultacie zatrzymujesz ogromną liczbę odwiedzających, którzy w innym przypadku porzuciliby Twoją witrynę. Tak więc, jeśli cierpisz z powodu porzucania witryny, zdecydowanie powinieneś utworzyć wyskakujące okienko lightbox z zamiarem wyjścia.

Jak utworzyć wyskakujące okienko Lightbox

Teraz, gdy już wiesz, czym jest wyskakujące okienko lightbox i dlaczego chcesz je utworzyć, w jaki sposób masz wyskakujące okienko lightbox? Zalecamy używanie OptinMonster do tworzenia wyskakujących okienek.

Strona główna OptinMonster

OptinMonster to zestaw narzędzi do konwersji nr 1 na świecie i sami go używaliśmy. OptinMonster bardzo ułatwia tworzenie potężnych wyskakujących okienek, które konwertują. I nigdy nie będziesz musiał używać żadnego kodowania.

Napisaliśmy nawet pełną recenzję OptinMonster.

Możesz to sprawdzić lub rozpocząć kampanię już teraz. Wszystko, co musisz zrobić, to zarejestrować się w OptinMonster i śledzić resztę tego artykułu.

Krok 1: Utwórz kampanię

Przejdź do pulpitu nawigacyjnego OptinMonster i naciśnij przycisk Utwórz :

Utwórz nową wyskakującą kampanię

Wybierz typ kampanii Lightbox Popup :

utwórz wyskakujące okienko lightbox

Następnie wybierz szablon kampanii. Możesz wybrać dowolny szablon, ale w tym samouczku będziemy korzystać z prostego typu kampanii.

Wybierz wyskakujący motyw kampanii

Teraz nadaj nazwę swojej kampanii. Pamiętaj, ta nazwa kampanii jest dla Ciebie i prawdopodobnie utworzysz całą masę takich wyskakujących okienek z różnymi opcjami kierowania. Nadaj więc kampanii sensowną nazwę, w przeciwnym razie będziesz później naprawdę zdezorientowany.

Ponadto, w zależności od planu, możesz również używać OptinMonster w wielu witrynach. Wybierz więc również witrynę, w której chcesz wyświetlać swoją kampanię.

Utwórz tożsamość kampanii

Gdy skończysz, naciśnij Rozpocznij budowanie .

Krok #2: Edytuj swoje wyskakujące okienko

Dzięki OptinMonster otrzymasz wizualny kreator wyskakujących okienek typu „przeciągnij i upuść”. Po zakończeniu tworzenia kampanii będziesz mógł edytować nawet najdrobniejsze szczegóły dotyczące wyskakującego okienka. Zacznij od edycji nagłówka wyskakującego okienka:

Edytuj nagłówek

Najbardziej niesamowitą częścią jest to, że po prostu klikasz dowolny tekst, który chcesz edytować i zmieniasz go w tekście. Nie ma potrzeby wypełniania formularza ani edytowania kodu HTML w wyskakującym okienku.

Następnie dostosuj tekst i wygląd przycisku, aby stworzyć wyraźne wezwanie do działania:

Dostosuj CTA

Gdy jesteś zadowolony z wyglądu wyskakującego okienka, możesz przejść do bardziej zaawansowanych ustawień.

Krok 3: Ustaw reguły wyświetlania

Reguły wyświetlania mają na celu określenie, kiedy Twoja kampania pojawia się w Twojej witrynie i kto ją widzi.

Zasady wyświetlania wyskakujących okienek

Naszym zaleceniem jest zmiana warunku wyzwalacza na zamiar wyjścia:

Wyskakujące okienko lightbox z zamiarem wyjścia

Kliknij Następny krok , aby wybrać akcję . W tym przypadku zalecamy ustawienie opcji Pokaż widok kampanii na widok Optin, ustawienie pokazu z MonsterEffect na dowolną animację wpisu i odtworzenie efektu dźwiękowego na dowolny efekt dźwiękowy w wyskakującym okienku.

Ustawienia akcji kampanii

A następnie kliknij przycisk Następny krok . Możesz zobaczyć pełny zakres swoich ustawień na karcie Podsumowanie.

Krok 4: Skonfiguruj integrację poczty e-mail

Następnym krokiem jest skonfigurowanie integracji poczty e-mail. Kliknij Dodaj nową integrację na karcie Integracje i wybierz dostawcę usług poczty e-mail:

Integracje OptinMonster

Zalecamy korzystanie z Drip do marketingu e-mailowego, jeśli nie masz jeszcze dostawcy usług e-mail.

Krok 5: Opublikuj wyskakujące okienko Lightbox

Gdy tworzysz nową kampanię, jest ona domyślnie wstrzymana .

Przejdź do zakładki Publikuj z górnego menu, aby zobaczyć Opcje publikowania . Następnie ustaw status na Opublikuj i wybierz platformę internetową:

Opublikuj kampanię OptinMonster

Jeśli prowadzisz witrynę WordPress, wtyczka OptinMonster automatycznie obsługuje resztę konfiguracji. To samo dotyczy Shopify i BigCommerce. W przypadku dowolnej innej witryny kliknij Dowolna witryna i wklej kod do osadzenia w nagłówku swojej witryny:

Globalne osadzenie

I jesteś skończony!

Zawijanie

To wszystko na ten jeden, ludzie!

Daj nam znać, czy ten artykuł pomógł. Tworzenie wyskakujących okienek w witrynie może pomóc w konwersji ruchu na subskrybentów e-maili i prawdziwych potencjalnych klientów biznesowych. I zdecydowanie zalecamy natychmiastowe rozpoczęcie tworzenia wyskakujących okienek lightbox.

A jeśli szukasz niedrogiego sposobu na zwiększenie ruchu, zalecamy korzystanie z powiadomień push. Powiadomienia push mogą pomóc w zwiększeniu powtarzalnego ruchu i zaangażowania w witrynie. Możesz także tworzyć automatyczne kampanie powiadomień push, które generują sprzedaż.

Nieprzekonany? Sprawdź te zasoby:

  • 7 inteligentnych strategii zwiększających zaangażowanie klientów
  • Czy powiadomienia push są skuteczne? 7 statystyk + 3 porady ekspertów
  • Jak skonfigurować powiadomienia push o porzuconym koszyku (łatwy samouczek)

Zalecamy używanie PushEngage do tworzenia kampanii powiadomień push. PushEngage to oprogramowanie do powiadomień push nr 1 na świecie. Tak więc, jeśli jeszcze tego nie zrobiłeś, zacznij korzystać z PushEngage już dziś!