So fügen Sie die Apple Business Chat-Schaltfläche zu Ihrer WordPress-Website hinzu

Veröffentlicht: 2021-03-01

Apple Message ist eine Funktion, die es Webmastern ermöglicht, die Business-Chat-Schaltfläche und die Telefon- / Anrufschaltfläche zu ihrer Website hinzuzufügen. Es ist sehr nützlich und bequem, da Benutzer die Website-Besitzer direkt kontaktieren können, um um Hilfe zu bitten. Daher sollten Sie als Website-Besitzer auf jeden Fall den Business-Chat-Button zu Ihrer WordPress-Website hinzufügen , um die Benutzererfahrung zu verbessern.

Inhaltsverzeichnis ausblenden

1. Schritt 1: Melden Sie sich für den Business-Chat an
2. Schritt 2: JavaScript-Bibliothek hinzufügen
1. 2.1. Methode 1: Code in der Designdatei bearbeiten
2. 2.2. Methode 2: Verwenden des Slim SEO-Plugins
3. Schritt 3: Zeigen Sie den Business-Chat-Button an der gewünschten Position an
4. Letzte Worte

Während der Implementierung müssen Sie etwas HTML-Code verwenden, daher ist dies für technisch nicht versierte Personen relativ schwierig. Aber keine Sorge, wir werden Sie Schritt für Schritt durch diesen Prozess führen.

Hinweis : Die Business-Chat-Schaltfläche ist nur auf Apple-Geräten verfügbar. Wenn Benutzer diese Geräte nicht verwenden, wird die Schaltfläche ausgeblendet.

Schritt 1: Melden Sie sich für den Business-Chat an

Rufen Sie zunächst die Seite des Apple-Unternehmensregisters auf und melden Sie sich mit Ihrer Apple-ID für den Business Chat an. Es ist ganz einfach, daher gehe ich nicht ins Detail.

Jetzt haben Sie bereits Ihre eigene Business-Chat-ID. Speichern Sie diese ID irgendwo, da Sie sie im nächsten Schritt benötigen.

Schritt 2: Fügen Sie die Javascript-Bibliothek hinzu

Als Nächstes müssen Sie die Javascript-Bibliothek hinzufügen, um die Business-Chat- Schaltfläche auf der Website anzuzeigen. Dafür gibt es zwei Methoden:

Methode 1: Code in der Designdatei bearbeiten

Suchen Sie die Tags <head></head> oder </body> in Ihrer Designdatei. Ihre Standorte sind je nach Thema unterschiedlich. Zum Beispiel verwende ich das Justread-Design, daher befindet sich das Tag <head><head> in der Datei header.php und das Tag </body> in der Datei footer.php .

Nachdem Sie das obige Tag gefunden haben, fügen Sie diesen Code vor dem </body> -Tag oder in das <head><head> -Tag ein:

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

Methode 2: Verwenden des Slim SEO-Plugins

Abgesehen vom Bearbeiten des Codes in der Designdatei können Sie das Slim SEO-Plugin verwenden, um den Code hinzuzufügen, ohne in die Designdatei zu gehen und nach den Tags <head><head> und </body> suchen.

Slim SEO ist völlig kostenlos, sodass Sie es leicht auf wordpress.org finden können. Gehen Sie im Admin-Dashboard zu Plugins > Neu hinzufügen und installieren und aktivieren Sie das Plugin wie gewohnt.

Slim SEO – Schnelles & automatisiertes WordPress SEO Plugin

Autor(en): eLightUp

Aktuelle Version: 3.11.1

Zuletzt aktualisiert: 16. November 2021

slim-seo.3.11.1.zip

92% Bewertungen 10.000+ Installiert WP 4.5+ Benötigt

Gehen Sie danach zu Einstellungen > Slim SEO und fügen Sie den obigen Code zu den Abschnitten Header Code oder Body Code hinzu .

Und vergessen Sie nicht, auf Speichern zu klicken.

Darüber hinaus bietet Slim SEO viele weitere nützliche Funktionen, mit denen Sie WordPress-Websites automatisch für SEO optimieren können. Hier erfahren Sie mehr über diese Funktionen.

Schritt 3: Zeigen Sie den Business-Chat-Button an der gewünschten Position an

In diesem letzten Schritt müssen Sie die Schaltfläche Business Chat im gewünschten Widget-Bereich anzeigen. Dies kann durch Hinzufügen von HTML-Code zum Widget erfolgen. Der HTML-Code muss folgenden Aufbau haben:

 <div class="apple-class-name" apple-attribute-name ></div>

Ich mache ein Beispiel mit einem Attribut in Form von data-apple-business-id . Erinnern Sie sich an die in Schritt 1 erstellte ID? Jetzt ist es an der Zeit, es zu verwenden. Meine ID ist ca0db090 und ich möchte die Chat-Schaltfläche in ein container-style Banner einfügen , daher lautet mein <div> -Tag:

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

Beachten Sie, dass das Attribut data-apple-business-id erforderlich ist. Es wird verwendet, um den Eigentümer der Business Chat-ID anzugeben und Ihre Nachrichten an ihn zu senden.

Außerdem gibt es viele andere Klassen und Attribute, die Sie für den HTML-Code verwenden können. Die beliebtesten Klassen und Attribute finden Sie in der folgenden Liste:

Klassen zum Anzeigen von Chat- oder Anrufschaltflächen:

apple-business-chat-banner-container : Chat- und Anrufschaltflächen anzeigen
apple-business-chat-message-container : Nur Chat-Schaltfläche anzeigen
apple-business-chat-phone-container : nur Anruftaste anzeigen
etc

Attribute zum Anpassen der Anzeige von Chat-/Anrufschaltflächen (Farben, Schriftarten, Größe, …)

data-apple-banner-font-family : Wählen Sie eine Familienschriftart für die Call-to-Action- Schaltfläche
data-apple-banner-icon-background-color : Wählen Sie die Hintergrundfarbe (den Kreis) des Symbols
data-apple-banner-icon-color : Wählen Sie die Farben der Chat- und Anrufschaltflächen
Etc.

Attribute im Zusammenhang mit der Interaktion zwischen Kunden und Websitebesitzern:

data-apple-business-group-id : Bestimmen Sie die Abteilung, die die Anrufe / Nachrichten erhält. Diesem Attribut können Sie beispielsweise die ID der Abteilungen „Kundendienst“ oder „Technischer Support“ zuweisen.
Data-apple-business-phone : Geben Sie die Telefonnummer ein, die Benutzer verwenden, um Sie zu kontaktieren, wenn sie nicht chatten können. Im Falle dass Sie sich dieses Attribut nicht hinzufügen, wird die Anruftaste ausgeblendet werden.
Etc.

Außerdem finden Sie hier alle Attribute und Klassen von Apple.

Nachdem Sie die benötigten <div> -Tags haben, fügen Sie sie mit dem HTML-Editor an der gewünschten Position hinzu. Zum Beispiel möchte ich die Business-Chat-Schaltfläche in einem Widget in der Fußzeile des Justread-Designs anzeigen und hier ist der Weg, dies zu tun.

Gehen Sie im Admin-Dashboard zu Darstellung > Widget , wählen Sie das benutzerdefinierte HTML- Widget aus und wählen Sie dann aus, dass das Widget in der Fußzeile angezeigt werden soll.

Als nächstes fügen Sie den folgenden Code in das Widget ein:

 <div>
	class="apple-business-chat-banner-container"
	daten-apple-business-
	data-apple-business-phone="0987725475"
	data-apple-banner-cta="Haben Sie Fragen? Wir können helfen."
	data-apple-banner-context="Chatten Sie mit einem unserer Profis, um Ihr Angebot für das iPhone Xs zu erhalten."
	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>

Klicken Sie abschließend auf Speichern .

Wir haben die Anzeige der Business Chat-Schaltfläche in der Fußzeile der WordPress-Website abgeschlossen. Ab sofort sehen Apple-Benutzer die Business Chat-Schaltfläche in der Fußzeile wie folgt:

Sie können die Schaltfläche auf dieselbe Weise mit dem obigen Code, den Klassen und Attributen formatieren und an anderen Positionen anzeigen. Probieren Sie es aus und zeigen Sie es uns im Kommentarbereich!

Letzte Worte

Die Verwendung von Code zum Hinzufügen der Business-Chat-Schaltfläche zur WordPress-Website kann für WordPress-Anfänger ziemlich schwierig sein. Aber wenn Sie dieses Tutorial strikt befolgen, wird es definitiv funktionieren. Vergessen Sie nicht, auf Anrufe und Nachrichten von Kunden zu antworten, nachdem Sie die Business Chat-Schaltfläche auf Ihrer Website installiert haben. Es wird dazu beitragen, Vertrauen zwischen Kunden und dem Website-Betreiber aufzubauen, wodurch Ihre Marke verbessert und die Konversion erhöht wird.

Zusätzlich zum Hinzufügen der Business-Chat-Schaltfläche können Sie Ihrer WordPress-Website auch die Live-Chat-Schaltfläche und die Facebook-Kunden-Chat-Schaltfläche hinzufügen. Diese Funktionen helfen Ihnen, Kundenfragen schneller zu beantworten.