Añadir el Plugin Web de Atom en tu sitio web te permitirá configurar las siguientes funcionalidades:
- Envío del URL de la página actual en sus links de redirección a WhatsApp.
- Soporte a eventos con Facebook Pixel y Google Analytics en el Plugin Web.
- Envío de mensajes personalizados al Plugin Web cuando el usuario interactúa con elementos de tu sitio web.
A continuación te mostraremos el paso a paso para añadir estas funcionalidades a tu sitio web.
Envío del URL de la página actual en tus links de redirección a WhatsApp
Supongamos que en tu sitio web tiene el siguiente link de redirección a WhatsApp:
<a href="https://api.whatsapp.com/send?phone=50766617374&text=Hola">WhatsApp</a>
Al hacer clic en el link, será redireccionado a WhatsApp y podrás enviar el mensaje “Hola” al número 50766617374.
Si deseas que el URL de esa página aparezca en el mensaje que es enviado a WhatsApp, solo necesitas incluir el texto #page.url en el parámetro text, de la siguiente forma:
<a href="https://api.whatsapp.com/send?phone=50766617374&text=Hola#page.url">WhatsApp</a>
Si el URL de tu página es https://atomchat.io/, cuando hagas clic en el link, serás redireccionado a WhatsApp y podrás enviar el siguiente mensaje:
Hola
https://atomchat.io/
Para las siguientes dos funcionalidades que explicaremos a continuación, deberás pegar el siguiente código justo luego de la etiqueta <body> en tu página web:
<script>
const atomPlugin = new AtomPlugin();
</script>
Es importante mencionar que solo puedes incluir este código una única vez por cada documento html.
En nuestra explicación, a este código lo llamaremos Script 1.
Soporte a eventos con Facebook Pixel y Google Analytics en el Plugin Web
Con esta funcionalidad podrás disparar eventos desde el Plugin Web hacia Facebook Pixel y Google Analytics, permitiéndote, por ejemplo, saber cuántos usuarios decidieron continuar la comunicación por WhatsApp, cuántos por Facebook y cuántos por el Plugin Web.
Para añadir soporte a eventos con Facebook Pixel y Google Analytics en el Plugin Web, debes pegar el siguiente código luego del Script 1 en tu página web:
<script>
atomPlugin.addCommands([
{ name: 'fbq', handler: fbq },
{ name: 'gtag', handler: gtag }
]);
</script>
Envío de mensajes personalizados al Plugin Web cuando el usuario interactúa con elementos de tu sitio web
Supongamos que en tu sitio web tienes el siguiente botón:
<button id="boton1">
Enviar
</button>
Dicho esto, supongamos que deseas que, cuando el usuario haga clic en el botón, se envíe el mensaje “Hola Atom” al Plugin Web. En ese caso, deberás pegar el siguiente código luego del código anterior del botón (después de la etiqueta de cierre </button>):
<script>
atomPlugin.addEvents([{
elementId: 'boton1',
type: 'click',
message: 'Hola Atom'
}]);
</script>
Por medio de este código, le estamos diciendo al Plugin Web que, cuando se dispare el evento ‘click’ en el elemento con el id ‘boton1’, queremos que se envíe el mensaje "Hola Atom".
Puedes enviar mensajes en respuesta a todo tipo de eventos, en todo tipo de elementos, y también puedes agregar el código a tantos elementos como desees; únicamente debes asegurarte de pegar el código después del elemento al que quieres agregar la funcionalidad y que el elementId y el type correspondan con dicho elemento.