Comment ajouter un bouton Apple Business Chat à votre site Web WordPress

Publié: 2021-03-01

Apple Message est une fonctionnalité qui permet aux webmasters d'ajouter le bouton de chat professionnel et le bouton téléphone/appel à leur site Web. C'est très utile et pratique car les utilisateurs peuvent contacter directement les propriétaires de sites Web pour demander de l'aide. Par conséquent, en tant que propriétaire de site Web, vous devez absolument ajouter le bouton de chat professionnel à votre site Web WordPress pour améliorer l'expérience utilisateur.

Table des matières masquer

1. Étape 1 : Inscrivez-vous au Business Chat
2. Étape 2 : ajouter la bibliothèque Javascript
1. 2.1. Méthode 1 : Modifier le code dans le fichier de thème
2. 2.2. Méthode 2 : Utilisation du plugin Slim SEO
3. Étape 3 : affichez le bouton Business Chat dans la position souhaitée
4. Derniers mots

Pendant la mise en œuvre, vous devez utiliser du code HTML, c'est donc relativement difficile pour les non avertis en technologie. Mais ne vous inquiétez pas, nous vous guiderons pas à pas tout au long de ce processus.

Remarque : le bouton de chat professionnel n'est disponible que sur les appareils Apple. Si les utilisateurs n'utilisent pas ces appareils, le bouton sera masqué.

Étape 1 : Inscrivez-vous au chat d'entreprise

Tout d'abord, accédez à la page Apple Business Register et inscrivez-vous à Business Chat avec votre identifiant Apple. C'est assez facile, donc je n'entrerai pas dans les détails.

Maintenant, vous avez déjà votre propre Business Chat ID. Enregistrez cet identifiant quelque part car vous en aurez besoin à l'étape suivante.

Étape 2 : ajouter la bibliothèque Javascript

Ensuite, vous devez ajouter la bibliothèque Javascript pour afficher le bouton Business Chat sur le site Web. Il y a deux méthodes pour le faire :

Méthode 1 : Modifier le code dans le fichier de thème

Recherchez les balises <head></head> ou </body> dans votre fichier de thème. Leurs emplacements seront différents selon le thème. Par exemple, j'utilise le thème Justread, donc la <head><head> est dans le fichier header.php et la </body> est dans le fichier footer.php .

Après avoir trouvé ces balises ci-dessus, ajoutez ce code avant la </body> ou dans la <head><head> :

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

Méthode 2 : Utilisation du plugin Slim SEO

Outre la modification du code dans le fichier de thème, vous pouvez utiliser le plugin Slim SEO pour ajouter le code sans accéder au fichier de thème et sans rechercher les balises <head><head> et </body> .

Slim SEO est totalement gratuit, vous pouvez donc le trouver facilement sur wordpress.org. Sur le tableau de bord d'administration , accédez à Plugins > Ajouter un nouveau , puis installez et activez le plugin comme d'habitude.

Slim SEO – Plugin de référencement WordPress rapide et automatisé

Auteur(s) : eLightUp

Version actuelle : 3.11.1

Dernière mise à jour : 16 novembre 2021

slim-seo.3.11.1.zip

92% d' évaluations 10 000+ installe WP 4.5+ requis

Après cela, accédez à Paramètres > Slim SEO et ajoutez le code ci-dessus aux sections Code d'en- tête ou Code de corps .

Et n'oubliez pas de cliquer sur Enregistrer .

De plus, Slim SEO possède de nombreuses autres fonctionnalités utiles pour vous aider à optimiser automatiquement les sites Web WordPress pour le référencement. Vous pouvez en savoir plus sur ces fonctionnalités ici.

Étape 3 : affichez le bouton de conversation professionnelle dans la position souhaitée

Dans cette dernière étape, vous devez afficher le bouton Business Chat dans la zone de widget de votre choix. Cela peut être fait en ajoutant du code HTML au widget. Le code HTML doit avoir la structure suivante :

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

Je fais un exemple avec un attribut sous la forme de data-apple-business-id . Vous souvenez-vous de la pièce d'identité prise à l'étape 1 ? Maintenant, il est temps de l'utiliser. Mon identifiant est ca0db090 et je souhaite ajouter le bouton de discussion dans une bannière de container-style , donc ma <div> est :

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

Notez que l'attribut data-apple-business-id est obligatoire. Il est utilisé pour spécifier le propriétaire de l'ID Business Chat et lui envoyer vos messages.

En outre, il existe de nombreuses autres classes et attributs que vous pouvez utiliser pour le code HTML. Vous pouvez trouver les classes et les attributs les plus populaires dans la liste ci-dessous :

Cours pour afficher les boutons de chat ou d'appel :

apple-business-chat-banner-container : affiche à la fois les boutons de chat et d'appel
apple-business-chat-message-container : afficher uniquement le bouton de discussion
apple-business-chat-phone-container : afficher uniquement le bouton d'appel
etc

Attributs pour personnaliser l'affichage des boutons de chat/appel (couleurs, polices, taille, …)

data-apple-banner-font-family : choisissez une police de famille pour le bouton Call to action
data-apple-banner-icon-background-color : choisissez la couleur de fond (le cercle) de l'icône
data-apple-banner-icon-color : choisissez les couleurs des boutons de chat et d'appel
Etc.

Attributs liés à l'interaction entre les clients et les propriétaires de sites Web :

data-apple-business-group-id : détermine le service qui reçoit les appels/messages. Par exemple, vous pouvez attribuer à cet attribut l'ID des départements « Service client » ou « Assistance technique ».
Data-apple-business-phone : Saisissez le numéro de téléphone que les utilisateurs utilisent pour vous contacter s'ils ne peuvent pas discuter. Si vous n'ajoutez pas cet attribut, le bouton Appeler sera masqué.
Etc.

De plus, vous pouvez trouver tous les attributs et classes d'Apple ici.

Après avoir <div> balises <div> nécessaires, ajoutez-les à la position souhaitée à l'aide de l'éditeur HTML. Par exemple, je souhaite afficher le bouton Business Chat dans un widget au pied du thème Justread et voici comment procéder.

Sur le tableau de bord d'administration , accédez à Apparence > Widget , choisissez le widget HTML personnalisé , puis choisissez d'afficher le widget dans le pied de page.

Ensuite, insérez le code suivant dans le widget :

 <div>
	class="apple-business-chat-banner-container"
	data-apple-business-
	data-apple-business-phone="0987725475"
	data-apple-banner-cta="Vous avez des questions ? Nous pouvons vous aider."
	data-apple-banner-context="Discutez avec l'un de nos professionnels pour obtenir votre offre pour iPhone 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>

Enfin, cliquez sur Enregistrer .

Nous avons fini d'afficher le bouton Business Chat dans le pied de page du site Web WordPress. Désormais, les utilisateurs Apple verront le bouton Business Chat s'afficher dans le pied de page comme ceci :

Vous pouvez styliser le bouton et l'afficher dans d'autres positions de la même manière avec le code, les classes et les attributs ci-dessus. Essayez-le et montrez-nous dans la section des commentaires!

Derniers mots

L'utilisation de code pour ajouter le bouton Business Chat au site Web WordPress peut être assez difficile pour les débutants WordPress. Mais si vous suivez ce tutoriel strictement, cela fonctionnera certainement. Une fois que vous avez le bouton Business Chat sur votre site, n'oubliez pas de répondre aux appels et aux messages des clients. Cela aidera à renforcer la confiance entre les clients et le propriétaire du site Web, améliorant ainsi votre marque et augmentant la conversion.

En plus d'ajouter le bouton de chat professionnel, vous pouvez également ajouter le bouton de chat en direct et le bouton de chat client Facebook à votre site Web WordPress. Ces fonctionnalités vous aident à répondre plus rapidement aux questions des clients.