Jak dodać przycisk „kliknij, aby zadzwonić” w witrynie WordPress?

W HeroThemes wkładamy wiele wysiłku w tworzenie wysokiej jakości motywów i wtyczek w bazie wiedzy WordPress, które sprawiają, że odwiedzający Twoją witrynę nie muszą dzwonić do Ciebie po pomoc.

Jednak ludzie nadal będą potrzebować wsparcia telefonicznego, a istnieje również wiele powodów niezwiązanych z obsługą, dla których możesz chcieć ułatwić odwiedzającym Twoją witrynę telefoniczną.

Ale kiedy ludzie przeglądają internet na urządzeniu mobilnym, ostatnią rzeczą, którą chcesz zrobić, to zmusić ich do samodzielnego wpisania numeru telefonu lub spróbować kliknąć mały numer telefonu. Zamiast tego przycisk „kliknij, aby zadzwonić” jest znacznie lepszą opcją.

W tym poście pokażemy, jak dodać funkcję „kliknij, aby połączyć” WordPress do swojej witryny, korzystając zarówno z prostych bezpłatnych wtyczek, jak i z własnego kodu HTML. Bez względu na Twój poziom wiedzy technicznej, będziesz mógł podążać dalej i stworzyć świetnie wyglądający przycisk „kliknij, aby zadzwonić”.

Czy powinieneś używać wtyczki „kliknij, aby wywołać” lub kodu HTML?

Korzystanie z wtyczki to najprostszy sposób na stworzenie czegoś, co wygląda świetnie. Więc jeśli chcesz czegoś, co „po prostu zadziała” od razu, byłby to dobry powód, aby przejść na ścieżkę wtyczek. Jednak ograniczysz się do wyświetlania przycisku połączenia tylko w lokalizacjach obsługiwanych przez wtyczkę.

Jeśli chcesz mieć możliwość dodania przycisku „kliknij, aby połączyć” w dowolnym miejscu w witrynie lub po prostu nie masz ochoty korzystać z innej wtyczki, dodanie funkcji „kliknij, aby połączyć” za pomocą własnego kodu HTML jest prawie tak proste, jak wstawienie hiperłącza, więc nadal jest to dość przyjazne dla użytkownika podejście. Jednak prawdopodobnie będziesz musiał dodać podstawowy niestandardowy kod CSS, aby wyglądał dobrze, o czym należy pamiętać.

W tym przewodniku pokażemy Ci obie metody . Zacznijmy, zaczynając od trasy wtyczki…

Podejście 1: Użyj darmowej wtyczki przycisku „kliknij, aby zadzwonić” do WordPressa

Istnieje kilka różnych wtyczek do WordPressa „kliknij, aby zadzwonić”, ale pokażemy Ci szczegółowe przewodniki dla tylko trzech z nich:

• Naprawdę prosty pasek „kliknij, aby zadzwonić” – zamiast dodawać samodzielny przycisk, ta wtyczka dodaje cały pasek na dole ekranów użytkowników mobilnych. Jeśli chcesz, aby ludzie mogli do Ciebie zadzwonić, jest to naprawdę oczywiste/łatwe, jest to dobra opcja.
• Przycisk Zadzwoń teraz – oprócz pełnego paska, takiego jak powyższa wtyczka, ta wtyczka pozwala również na użycie pływającego przycisku wywołania w stylu przycisku akcji.
• Call Now Button Ultimate – ta wtyczka dodaje ten sam dolny pasek Call Now. Ale wyjątkową rzeczą jest to, że pozwala ustawić „godziny pracy”, gdy jesteś dostępny przez telefon. Poza godzinami pracy przycisk będzie zachęcał odwiedzających do wysłania e-maila zamiast dzwonienia.

Naprawdę prosty samouczek dotyczący wtyczki Click to Call Bar

Ta wtyczka jest bezpłatna i dostępna na WordPress.org, więc możesz ją zainstalować bezpośrednio z pulpitu WordPress, przechodząc do Wtyczki → Dodaj nowy .

Po zainstalowaniu i aktywacji wtyczki przejdź do Ustawienia → Naprawdę proste kliknięcie, aby zadzwonić , aby skonfigurować wtyczkę. Tam możesz:

• Włącz funkcję przycisku „kliknij, aby połączyć”
• Dodaj tekstowe wezwanie do działania obok przycisku połączenia
• Wybierz numer telefonu, pod który zadzwonią odwiedzający
• Skonfiguruj kolory używane na przycisku „kliknij, aby połączyć”

Następnie zapisz zmiany, aby przycisk był aktywny. Ten przycisk będzie widoczny tylko dla użytkowników mobilnych, więc nie zobaczysz go podczas przeglądania na komputerze stacjonarnym.

Oto przykład tego, jak może wyglądać na urządzeniach mobilnych:

Samouczek dotyczący wtyczki przycisku Zadzwoń teraz

Jak wspomnieliśmy powyżej, wtyczka przycisku Call Now jest nieco bardziej elastyczna, ponieważ umożliwia również użycie pływającego przycisku wywołania akcji teraz oprócz podejścia z paskiem wywołania teraz.

Podobnie jak inne, jest wymieniony na WordPress.org, co oznacza, że ​​możesz go zainstalować, przechodząc do Wtyczki → Dodaj nowy .

Po zainstalowaniu i aktywacji wtyczki przejdź do Ustawienia → Przycisk Zadzwoń teraz , aby skonfigurować wtyczkę.

U góry możesz:

• Włącz przycisk
• Wpisz numer telefonu, pod który zadzwonią odwiedzający
• Wybierz tekst przycisku (w razie potrzeby )

Możesz również wyświetlić więcej ustawień, klikając łącze Ustawienia zaawansowane . To pozwoli Ci zmienić pozycjonowanie, kolory, dodać śledzenie kliknięć i nie tylko:

Po włączeniu przycisku będzie on wyświetlany tylko użytkownikom mobilnym, więc musisz wyświetlić jego podgląd na urządzeniu mobilnym, aby zobaczyć go w akcji.

Oto przykład z naszej strony dotyczący pływającego przycisku akcji:

Zadzwoń teraz Button — najlepszy samouczek dotyczący wtyczek

Unikalną cechą wtyczki Call Now Button Ultimate jest to, że możesz wybrać godziny, w których odwiedzający będą mogli do Ciebie dzwonić. Poza godzinami pracy, gdy Twój numer telefonu jest niedostępny, możesz wyświetlić monit dla odwiedzających o wysłanie e-maila.

Podobnie jak inne, możesz zainstalować i aktywować tę darmową wtyczkę, przechodząc do Wtyczki → Dodaj nowy na pulpicie WordPress.

Gdy to zrobisz, przejdź do obszaru Call Now Button Ultimate na pulpicie nawigacyjnym WordPress, aby go skonfigurować.

U góry możesz włączyć wtyczkę i wpisać swój numer telefonu oraz adres e-mail:

Następnie w dalszej części strony możesz wpisać godziny pracy i skonfigurować tekst i kolory przycisków:

Podobnie jak inne wtyczki, przycisk Zadzwoń teraz będzie wyświetlany tylko użytkownikom mobilnym.

Oto jak to wygląda w godzinach pracy:

A oto jak to wygląda poza godzinami pracy:

Podejście 2: Przycisk Kliknij, aby wywołać HTML na WordPressie

Jako alternatywę dla wtyczek WordPress typu „kliknij, aby zadzwonić”, możesz również użyć własnego kodu HTML typu „kliknij, aby zadzwonić”, aby utworzyć przycisk. Zaletą tego podejścia jest możliwość dodania przycisku w dowolnym miejscu w witrynie.

Aby utworzyć taki przycisk, możesz po prostu użyć normalnego hiperłącza i umieścić swój numer telefonu w schemacie tel :.

Oto jak to wygląda – wystarczy zastąpić przykładowy numer telefonu swoim własnym i w razie potrzeby edytować tekst CTA:

<a href="tel:+1-123-456-7890">Call HeroThemes!</a>

To wszystko!

Jeśli chcesz, możesz użyć własnego niestandardowego CSS, aby utworzyć przycisk zamiast zwykłego hiperłącza.

Na przykład możesz użyć tego kodu HTML:

<a href="tel:+1-123-456-7890" class="call-button">Call HeroThemes!</a>

Następnie możesz dodać niestandardowy kod CSS do swojej witryny WordPress, aby przekształcić go w przycisk. Na przykład:

.call-button {
color: #fff !important;
background: #0ba9d5;
padding: 20px;
border-radius: 5px;
display: inline-block;
border: none;
}

Możesz bezpiecznie dodać niestandardowy CSS za pomocą WordPress Customizer lub darmowej wtyczki, takiej jak Simple CSS.

Pamiętaj jednak. Domyślnie przycisk HTML typu „kliknij, aby połączyć” będzie widoczny dla wszystkich odwiedzających, także tych korzystających z komputerów stacjonarnych.

Jeśli chcesz to zmienić, możesz użyć zapytań o media CSS, aby wyświetlić przycisk tylko na urządzeniach mobilnych. Na przykład ten fragment kodu ukryje przycisk na ekranie o szerokości powyżej 600 pikseli:

@media only screen and (min-width: 600px) {
.call-button {
display: none;
}
}

Zacznij korzystać z przycisku „kliknij, aby zadzwonić” na WordPressie już dziś!

Niezależnie od tego, czy używasz wtyczki, czy własnego niestandardowego kodu HTML, łatwo jest utworzyć przycisk „kliknij, aby połączyć” w WordPress.

Gdy Twój przycisk jest na miejscu, odwiedzający mobilni będą mogli łatwiej się z Tobą skontaktować.

Pamiętaj tylko – rozmowy telefoniczne obciążają zasoby ludzkie.

Jeśli chcesz zmniejszyć liczbę otrzymywanych połączeń telefonicznych, utworzenie bazy wiedzy WordPress lub sekcji FAQ umożliwia odwiedzającym uzyskanie potrzebnej pomocy bez konieczności indywidualnej pomocy telefonicznej. A to może zaoszczędzić mnóstwo czasu i wysiłku.

Dowiedz się, jak zacząć korzystać z naszej wtyczki Heroic Knowledge Base, motywu KnowAll lub Heroic FAQs.