A continuaci贸n, responderemos c贸mo agregar el bot贸n Apple Business chat a un sitio web de WordPress, el cual es conveniente para usuarios con dispositivos Apple.
Si un administrador o desarrollador quiere ampliar y mejorar la experiencia de los usuarios con dispositivo Apple, puede instalar esta funci贸n con lo que el usuario puede desde llamar por tel茅fono o hacer consultas por chat.
Es importante tener en cuenta que si los usuarios no navegan por Internet con iPhone, iMac, iPad, Macbook, etc., esta funci贸n estar谩 oculta. A continuaci贸n, enlistamos los pasos a seguir:
Registrarse en Business Chat
Se debe registrarse para la funci贸n Business Chat en la p谩gina de Apple Business Register. Este proceso es bastante sencillo. Solo necesita una ID de Apple para iniciar sesi贸n.
Despu茅s de eso, SE recibir谩 una identificaci贸n para agregar la funci贸n de chat. No hay que olvidar guardarla.
Agregar la biblioteca Javascript para mostrar el bot贸n Business Chat en el sitio web
Para agregar el bot贸n Business Chat al sitio web, se debe utilizar la biblioteca Javascript de Business Chat.
Esto se puede hacer agregando el siguiente c贸digo en la <head> </head>etiqueta o antes de la </body>etiqueta:
< script src = “https://static.cdn-apple.com/businesschat/start-chat-button/2/index.js” ></ script >
Nota : las etiquetas <head> </head>y se </body> ubicar谩n en diferentes archivos seg煤n su tema. Por ejemplo, cuando se usa el tema Justread y la <head></head> la etiqueta est谩 ubicada en el archivo header.php, y la etiqueta </body> est谩 ubicada en el archivo footer.php.
Si no se desea editar el c贸digo en el archivo del tema, se tiene que probar el complemento Slim SEO (totalmente gratuito), este complemento tambi茅n ayuda a optimizar autom谩ticamente su sitio web para SEO.
Ir a Panel de administraci贸n > Complementos > Agregar nuevo , luego instalar y activar el complemento. Tras la activaci贸n, ir a Panel de administraci贸n > Configuraci贸n > Slim SEO y pegar el siguiente c贸digo en las secciones C贸digo de encabezado o C贸digo de cuerpo y guardar
Agregar c贸digo HTML para mostrar el bot贸n Business Chat
A continuaci贸n, hay que agregar el c贸digo HTML a la posici贸n en la que se desea mostrar el bot贸n Business Chat. Simplemente hay que usar la etiqueta <div>, aqu铆 est谩 su estructura:
<div class = “nombre-clase- manzana ” nombre -atributo-manzana> </ div >.
Si el atributo de Apple tiene el formato de data-apple-business-id, hay que ingresar el ID de Apple que est谩 registrado en el paso 1. Por ejemplo, si mi ID es ca0db090 y quiero agregar el bot贸n de chat en un container-stylebanner, entonces mi etiqueta <div> ser铆a:
<div class = “apple-business-chat-banner-container” data-apple-business-id = “ca0db090” > </ div >
Incluso se puede agregar otros atributos a esta etiqueta, pero hay que tener en cuenta que es necesario usar el atributo data-apple-business-id que ayuda a identificar al propietario del ID de chat y enviarle sus mensajes.
A continuaci贸n, se muestra la lista de clases y atributos populares. Se puede elegir las clases y los atributos que desee:
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: solo el bot贸n de chat
apple-business-chat-phone-container: solo el bot贸n de llamada
Atributos para personalizar la visualizaci贸n de los botones de chat / llamada:
data-apple-banner-font-family: se puede elegir una fuente familiar para el bot贸n Call to action
data-apple-banner-icon-background-color: elegir el color de fondo del icono
data-apple-banner-icon-color: elegri colores de los botones de chat y llamada
Atributos relacionados con la interacci贸n entre clientes y propietarios de sitios web:
data-apple-business-group-id: ayuda a identificar los objetos que reciben los mensajes / llamadas y los maneja seg煤n sus prop贸sitos. Por ejemplo, se puede asignar el ID del departamento “Pago”, “Entrega” a este atributo.
data-apple-business-phone: se puede agregar el n煤mero de tel茅fono al que los clientes pueden comunicarse usando el bot贸n de chat.
Despu茅s de escribir la estructura de la etiqueta <div>, se debe insertar la etiqueta en el editor HTML en la posici贸n deseada. Por ejemplo, se insertar谩 en un widget al pie de p谩gina del tema Justread.
Ir a Panel de control > Apariencia > Widget, elegir el widget HTML personalizado y luego mostrar el widget en el pie de p谩gina.
Agregar este c贸digo al widget:
<div>
class = “apple-business-chat-banner-container”
data-apple-business-id = “ca0db090”
data-apple-business-phone = “0987725475”
data-apple-banner-cta = “驴Tienes preguntas? Podemos ayudar.”
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) “</ div >
Ahora, cuando vaya a la p谩gina de inicio, si est谩 utilizando dispositivos Apple como Macbook, iPhone, iPad, ver谩 el bot贸n de llamada en el pie de p谩gina de la siguiente manera:
Le铆ste: C贸mo agregar el bot贸n Apple Business chat a un sitio web de WordPress, te recomendamos: C贸mo obtener el identificador IDFA en iOS14
Te invitamos a que nos sigas en nuestras redes sociales: Facebook, Twitter, Instagram y Youtube con el perfil:聽@tortugacode
