Cómo agregar el botón de chat empresarial de Apple a su sitio web de WordPress

Publicado: 2021-03-01

Apple Message es una función que permite a los webmasters agregar el botón de chat comercial y el botón de teléfono / llamada a su sitio web. Es muy útil y conveniente porque los usuarios pueden comunicarse directamente con los propietarios del sitio web para pedir ayuda. Por lo tanto, como propietario de un sitio web, definitivamente debe agregar el botón de chat comercial a su sitio web de WordPress para aumentar la experiencia del usuario.

Tabla de contenido ocultar

1. Paso 1: Regístrese en Business Chat
2. Paso 2: agregue la biblioteca Javascript
1. 2.1. Método 1: editar código en el archivo de tema
2. 2.2. Método 2: uso del complemento Slim SEO
3. Paso 3: muestre el botón Business Chat en la posición deseada
4. Últimas palabras

Durante la implementación, es necesario utilizar algo de código HTML, por lo que es relativamente difícil para los que no son expertos en tecnología. Pero no se preocupe porque lo guiaremos paso a paso a través de este proceso.

Nota : El botón de chat empresarial solo está disponible en dispositivos Apple. Si los usuarios no usan estos dispositivos, el botón se ocultará.

Paso 1: Regístrese en Business Chat

Primero, vaya a la página de Apple Business Register y regístrese en Business Chat con su ID de Apple. Es bastante fácil, así que no entraré en detalles.

Ahora, ya tiene su propia ID de chat comercial. Guarde esta identificación en algún lugar porque la necesitará en el siguiente paso.

Paso 2: agregue la biblioteca Javascript

A continuación, debe agregar la biblioteca Javascript para mostrar el botón Business Chat en el sitio web. Hay dos métodos para hacerlo:

Método 1: editar código en el archivo de tema

Busque las etiquetas <head></head> o </body> en su archivo de tema. Sus ubicaciones serán diferentes según el tema. Por ejemplo, estoy usando el tema Justread, por lo que la etiqueta <head><head> está en el archivo header.php y la etiqueta </body> está en el archivo footer.php .

Después de encontrar la etiqueta anterior, agregue este código antes de la etiqueta </body> o en la etiqueta <head><head> :

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

Método 2: uso del complemento Slim SEO

Además de editar el código en el archivo de tema, puede usar el complemento Slim SEO para agregar el código sin ir al archivo de tema y buscar las etiquetas <head><head> y </body> .

Slim SEO es totalmente gratuito, por lo que puede encontrarlo fácilmente en wordpress.org. En el Panel de administración , vaya a Complementos > Agregar nuevo , y luego instale y active el complemento como de costumbre.

Slim SEO - Complemento de WordPress SEO rápido y automatizado

Autor (es): eLightUp

Versión actual: 3.11.1

Última actualización: 16 de noviembre de 2021

slim-seo.3.11.1.zip

92% Calificaciones 10,000+ Instalaciones WP 4.5+ Requiere

Después de eso, vaya a Configuración > Slim SEO y agregue el código anterior a las secciones Código de encabezado o Código de cuerpo .

Y no olvide hacer clic en Guardar .

Además, Slim SEO tiene muchas otras características útiles para ayudarlo a optimizar automáticamente los sitios web de WordPress para SEO. Puede obtener más información sobre estas funciones aquí.

Paso 3: muestre el botón Business Chat en la posición deseada

En este paso final, debe mostrar el botón Business Chat en el área de widgets que desee. Esto se puede hacer agregando código HTML al widget. El código HTML debe tener la siguiente estructura:

 <div class = "nombre-clase-manzana" nombre-atributo-manzana> </div>

Hago un ejemplo con un atributo en forma de data-apple-business-id . ¿Recuerda la identificación que tomó en el paso 1? Ahora es el momento de usarlo. Mi ID es ca0db090 y quiero agregar el botón de chat en un banner container-style , por lo que mi etiqueta <div> es:

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

Tenga en cuenta que el atributo data-apple-business-id es obligatorio. Se utiliza para especificar el propietario del ID de Business Chat y enviarle sus mensajes.

Además, hay muchas otras clases y atributos que puede utilizar para el código HTML. Puede encontrar las clases y atributos más populares en la siguiente lista:

Clases para mostrar botones de chat o llamada:

apple-business-chat-banner-container : muestra los botones de chat y de llamada
apple-business-chat-message-container : mostrar solo el botón de chat
apple-business-chat-phone-container : mostrar solo el botón de llamada
etc

Atributos para personalizar la visualización de los botones de chat / llamada (colores, fuentes, tamaño,…)

data-apple-banner-font-family : elija una fuente familiar para el botón de llamada a la acción
data-apple-banner-icon-background-color : elija el color de fondo (el círculo) del icono
data-apple-banner-icon-color : elija los colores de los botones de chat y llamada
Etc.

Atributos relacionados con la interacción entre clientes y propietarios de sitios web:

data-apple-business-group-id : determina el departamento que recibe las llamadas / mensajes. Por ejemplo, puede asignar el ID de los departamentos de "Servicio al cliente" o "Soporte técnico" a este atributo.
Data-apple-business-phone : ingrese el número de teléfono que los usuarios usan para comunicarse con usted si no pueden chatear. En caso de que no agregue este atributo, el botón Llamar estará oculto.
Etc.

Además, puedes encontrar todos los atributos y clases de Apple aquí.

Después de tener las etiquetas <div> necesarias, agréguelas a la posición deseada usando el editor HTML. Por ejemplo, quiero mostrar el botón Business Chat en un widget al pie de página del tema Justread y esta es la forma de hacerlo.

En el Panel de administración , vaya a Apariencia > Widget , elija el widget HTML personalizado y luego elija mostrar el widget en el pie de página.

A continuación, inserte el siguiente código en el widget:

 <div>
	class = "apple-business-chat-banner-container"
	datos-apple-business-
	datos-apple-business-phone = "0987725475"
	data-apple-banner-cta = "¿Tienes preguntas? Podemos ayudarte".
	data-apple-banner-context = "Chatea con uno de nuestros profesionales para obtener tu oferta para 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>

Finalmente, haz clic en Guardar .

Terminamos de mostrar el botón Business Chat en el pie de página del sitio web de WordPress. A partir de ahora, los usuarios de Apple verán el botón Business Chat en el pie de página de esta manera:

Puede diseñar el botón y mostrarlo en otras posiciones de la misma manera con el código, las clases y los atributos anteriores. Pruébalo y muéstranoslo en la sección de comentarios.

Ultimas palabras

Usar código para agregar el botón Business Chat al sitio web de WordPress puede ser bastante difícil para los principiantes de WordPress. Pero si sigue este tutorial estrictamente, definitivamente funcionará. Una vez que tenga el botón Business Chat en su sitio, no olvide responder a las llamadas y mensajes de los clientes. Ayudará a generar confianza entre los clientes y el propietario del sitio web, mejorando así su marca y aumentando la conversión.

Además de agregar el botón de chat de negocios, también puede agregar el botón de chat en vivo y el botón de chat de cliente de Facebook a su sitio web de WordPress. Estas funciones le ayudan a responder a las preguntas de los clientes con mayor rapidez.