Jak dodać przycisk Apple Business Chat do swojej witryny WordPress?

Opublikowany: 2021-03-01

Apple Message to funkcja, która umożliwia webmasterom dodanie przycisku czatu biznesowego i przycisku telefonu / połączenia do swojej witryny. Jest to bardzo przydatne i wygodne, ponieważ użytkownicy mogą kontaktować się bezpośrednio z właścicielami witryn w celu uzyskania pomocy. Dlatego jako właściciel witryny zdecydowanie powinieneś dodać przycisk czatu biznesowego do swojej witryny WordPress, aby zwiększyć wygodę użytkownika.

Spis treści ukryj
  1. 1. Krok 1: Zarejestruj się na Czat Biznesowy
  2. 2. Krok 2: Dodaj bibliotekę JavaScript
    1. 2.1. Metoda 1: Edytuj kod w pliku motywu
    2. 2.2. Metoda 2: Korzystanie z wtyczki Slim SEO
  3. 3. Krok 3: Wyświetl przycisk czatu biznesowego w żądanej pozycji
  4. 4. Ostatnie słowa

Podczas implementacji musisz użyć trochę kodu HTML, więc jest to stosunkowo trudne dla osób nie obeznanych z technologią. Ale nie martw się, ponieważ przeprowadzimy Cię krok po kroku przez ten proces.

Uwaga : przycisk czatu biznesowego jest dostępny tylko na urządzeniach Apple. Jeśli użytkownicy nie korzystają z tych urządzeń, przycisk zostanie ukryty.

Krok 1: Zarejestruj się na Czat Biznesowy

Najpierw przejdź do strony Apple Business Register i zarejestruj się w Business Chat za pomocą swojego Apple ID. To dość proste, więc nie będę się wdawał w szczegóły.

przejdź do strony Apple Business Register i zarejestruj się w Business Chat za pomocą swojego Apple ID

Teraz masz już swój własny identyfikator czatu biznesowego. Zapisz gdzieś ten identyfikator, ponieważ będziesz go potrzebować w następnym kroku.

Krok 2: Dodaj bibliotekę JavaScript

Następnie musisz dodać bibliotekę JavaScript, aby wyświetlić przycisk Business Chat na stronie. Można to zrobić na dwa sposoby:

Metoda 1: Edytuj kod w pliku motywu

Znajdź tagi <head></head> lub </body> w pliku motywu. Ich lokalizacje będą się różnić w zależności od tematu. Na przykład używam motywu Justread, więc tag <head><head> znajduje się w pliku header.php , a tag </body> jest w pliku footer.php .

Po znalezieniu powyższego tagu dodaj ten kod przed tagiem </body> lub do tagu <head><head> :

 <script src="https://static.cdn-apple.com/businesschat/start-chat-button/2/index.js"></script>

Metoda 2: Korzystanie z wtyczki Slim SEO

Oprócz edycji kodu w pliku motywu, możesz użyć wtyczki Slim SEO, aby dodać kod bez przechodzenia do pliku motywu i szukania tagów <head><head> i </body> .

Slim SEO jest całkowicie darmowy, więc możesz go łatwo znaleźć na wordpress.org. W panelu administratora przejdź do Wtyczki > Dodaj nowy , a następnie zainstaluj i aktywuj wtyczkę jak zwykle.

Slim SEO – szybka i zautomatyzowana wtyczka SEO WordPress Slim SEO – szybka i zautomatyzowana wtyczka SEO WordPress

Autorzy: eLightUp

Aktualna wersja: 3.11.1

Ostatnia aktualizacja: 16 listopada 2021

slim-seo.3.11.1.zip

92% Ratings 10000 Zainstalowano WP 4.5+ Wymaga

Następnie przejdź do Ustawienia > Slim SEO i dodaj powyższy kod do sekcji Kod nagłówka lub Kod ciała .

użyj wtyczki Slim SEO, aby dodać kod, aby wyświetlić przycisk czatu biznesowego Apple

I nie zapomnij kliknąć Zapisz .

Ponadto Slim SEO ma wiele innych przydatnych funkcji, które pomagają automatycznie optymalizować witryny WordPress pod kątem SEO. Możesz dowiedzieć się więcej o tych funkcjach tutaj.

Krok 3: Wyświetl przycisk czatu biznesowego w żądanej pozycji

W tym ostatnim kroku musisz wyświetlić przycisk Czat biznesowy w wybranym obszarze widżetów. Można to zrobić poprzez dodanie kodu HTML do widżetu. Kod HTML musi mieć następującą strukturę:

 <div class="nazwa-klasy-jabłek" nazwa-atrybutu-jabłka ></div>

Robię przykład z atrybutem w postaci data-apple-business-id . Czy pamiętasz dowód tożsamości z kroku 1? Teraz nadszedł czas, aby z niego skorzystać. Mój identyfikator to ca0db090 i chcę dodać przycisk czatu w banerze w container-style , więc mój tag <div> to:

 <div class="apple-business-chat-banner-container" data-apple-business-></div>

Pamiętaj, że atrybut data-apple-business-id jest wymagany. Służy do określania właściciela identyfikatora czatu biznesowego i wysyłania do niego wiadomości.

Poza tym istnieje wiele innych klas i atrybutów, których możesz użyć w kodzie HTML. Na poniższej liście znajdziesz najpopularniejsze klasy i atrybuty:

Klasy do wyświetlania przycisków czatu lub połączenia:

  • apple-business-chat-banner-container : wyświetlaj przyciski czatu i połączenia
  • apple-business-chat-message-container : wyświetlaj tylko przycisk czatu
  • apple-business-chat-phone-container : wyświetl tylko przycisk połączenia
  • itp

Atrybuty umożliwiające dostosowanie wyświetlania przycisków czatu / połączeń (kolory, czcionki, rozmiar, …)

  • data-apple-banner-font-family : wybierz rodzinną czcionkę dla przycisku wezwania do działania
  • data-apple-banner-icon-background-color : wybierz kolor tła (kółko) ikony
  • data-apple-banner-icon-color : wybierz kolory przycisków czatu i połączenia
  • Itp.

Atrybuty związane z interakcją między klientami a właścicielami witryn:

  • data-apple-business-group-id : określ dział, który odbiera połączenia/wiadomości. Na przykład możesz przypisać do tego atrybutu identyfikator działu „Obsługa klienta” lub „Pomoc techniczna”.
  • Data-apple-business-phone : wprowadź numer telefonu, którego użytkownicy używają do kontaktowania się z Tobą, jeśli nie mogą czatować. Jeśli nie dodasz tego atrybutu, przycisk Zadzwoń będzie ukryty.
  • Itp.

Oprócz tego znajdziesz tutaj wszystkie atrybuty i klasy Apple.

Po uzyskaniu potrzebnych <div> dodaj je do żądanej pozycji za pomocą edytora HTML. Na przykład chcę wyświetlić przycisk Business Chat w widżecie w stopce motywu Justread i oto sposób, aby to zrobić.

W panelu administracyjnym przejdź do opcji Wygląd > Widżet , wybierz Niestandardowy widżet HTML , a następnie wybierz wyświetlanie widżetu w stopce.

wyświetlać widżet w stopce strony WordPress

Następnie wstaw następujący kod do widżetu:

 <div>
	class="kontener-czatu-firmy-jabłko-baner"
	dane-apple-biznes-
	data-apple-business-phone="0987725475"
	data-apple-banner-cta="Masz pytania? Możemy pomóc."
	data-apple-banner-context="Porozmawiaj z jednym z naszych profesjonalistów, aby otrzymać ofertę na iPhone'a Xs."
	data-apple-banner-scale="1"
	data-apple-banner-background-color="rgb(27, 63, 104)"
	data-apple-banner-text-color="rgb(255, 255, 255)"
	data-apple-banner-icon-background-color="rgb(255, 255, 255)"
	data-apple-banner-icon-color="rgba(0, 210, 143, 0.3)"></div>

Użyj kodu, aby wstawić przycisk czatu biznesowego

Na koniec kliknij Zapisz .

Zakończyliśmy wyświetlanie przycisku Czat biznesowy w stopce witryny WordPress. Od teraz użytkownicy Apple zobaczą w stopce przycisk Business Chat w następujący sposób:

Wyświetl przycisk Czat biznesowy w stopce witryny WordPress.

Możesz stylizować przycisk i wyświetlać go w innych pozycjach w ten sam sposób za pomocą powyższego kodu, klas i atrybutów. Wypróbuj i pokaż nam w sekcji komentarzy!

Ostatnie słowa

Używanie kodu do dodania przycisku Czat biznesowy do witryny WordPress może być dość trudne dla początkujących WordPress. Ale jeśli będziesz ściśle przestrzegać tego samouczka, na pewno zadziała. Po umieszczeniu przycisku Czat biznesowy na swojej stronie nie zapomnij odpowiadać na połączenia i wiadomości klientów. Pomoże budować zaufanie między klientami a właścicielem serwisu, poprawiając tym samym Twoją markę i zwiększając konwersję.

Oprócz dodania przycisku czatu biznesowego możesz również dodać przycisk czatu na żywo i przycisk czatu klienta na Facebooku do swojej witryny WordPress. Te funkcje pomagają szybciej odpowiadać na pytania klientów.