Integración de Pimex en tu sitio web
Pimex se puede integrar con cualquier sitio web moderno, solo necesitas entender un poco de HTML y JavaScript para que tu sitio pueda conectarse y empezar a sincronizar tus leads.
Antes de comnezar con la integración debes tener en cuenta lo siguiente:
-
Estar registrado en Pimex
Para iniciar con la integración es necesario tener una cuenta registrada en Pimex. Si no tienes una cuenta puedes crearla aquí. Solo necesitas una cuenta de email.
-
Crear un tablero
Ten en cuenta que para poder empezar a recibir y administrar tus leads debes tener un tablero, el cual es el que vas a integrar con tu sitio web. Este lo puedes crear una vez hayas iniciado sesión en Pimex, en la opción ‘Agregar tablero’.
-
Conectar sitio web
Ahora puedes empezar a agregar el código de seguimiento de Pimex que entrega tu nuevo tablero en tu sitio web. Para agregar este código elige la forma en la que prefieres hacerlo. Puedes encontrar las opciones más abajo.
¿Cómo empezar?
¿Qué tecnología usa tu sitio web? Pimex se puede integrar con todos los sitios web desarrollados con HTML y JavaScript; si tu sitio web está desarrollado con algún tipo de administrador de contenidos o CMS también tenemos una sencilla guía para tí.
HTML / JavaScript
Agregar el código de seguimiento a tu sitio web es muy fácil, solo debes tener conocimientos básicos de HTML y JavaScript. Aquí podrás tener más información de cómo hacer esta integración.
Ver guía
Wordpress
Si el sitio en el que quieres agregar el código de seguimiento esta sobre el CMS Wordpress puedes instalar el plugin oficial de Pimex. Aquí puedes ver una guía de como instalarlo y configurarlo correctamente.
Ver guía
JQuery no requerido
Para facilitar la lectura, todos los ejemplos mostrados a continuación usan jQuery para obtener elementos del DOM. Este solo es usado en los ejemplos y no es necesario para el correcto funcionamiento del código de integración de Pimex.
Integrar Pimex en sitios HTML ¶
Para la integración de Pimex en un sitio web escrito o desarrollado en HTML y JavaScript solo necesitas tener a la mano el ID y token del tablero, estos son entregados por Pimex en el momento de la creación del tablero (estos siempre estarán disponibles en la sección de configuración del panel administrativo de Pimex). Una vez tengas estos datos a la mano, puedes empezar con la implementación del código.
Instalar código de seguimiento
Lo primero que debes llevar a cabo es instalar la etiqueta en tu sitio web, para esto solo copia la etiqueta del siguiente cuadro y pégala entre las etiquetas
de la página en la que quieres realizar el seguimiento. Recuerda reemplazar el ID y token con los de tu tablero.
<script>
!function(e,n,t,c,y,s,r,u){s=n.createElement(t),r=n.getElementsByTagName(t)[0],
s.async=!0,s.src=c,r.parentNode.insertBefore(s,r),
s.onload = function () {Pimex.init(y, true)}}
(window,document,'script','//statics.pimex.co/services/async.js', {id: "ID_BOARD", token: "TOKEN_BOARD"});
script>
Nombres de campos de formulario
El nombre de los campos del formulario (parametro “name”) son muy importantes para el proceso de envío, por esto deben ser llamados de la siguiente manera para que Pimex pueda detectarlos y enviarlos.
Lista de nombres de campos básicos detectados por Pimex
Nombre del campo | Tipo | Descripción |
---|---|---|
* name, nombre, nom | text | Nombre del usuario |
* last_name, apellido, lastname | text | Apellido del usuario |
* email, correo, mai | text, email | Email o correo electrónico del usuario |
phone, telefono, tel, celular, cellphone, mobile | text, tel | Teléfono del usuario |
subject, asunto | text | Asunto de contacto del usuario |
message, mensaje, comment, comentario | text | Mensaje o comentario del usuario |
El siguiente es un ejemplo de un formulario con la estructura adecuada para el envío de datos con Pimex
<form>
<label>Nombre <br>
<input type="text" name="name">
label>
<label>Apellido <br>
<input type="text" name="lastname">
label>
<label>Email <br>
<input type="text" name="email">
label>
<label>Teléfono <br>
<input type="text" name="phone">
label>
<label>Ciudad <br>
<input type="text" name="custom-city">
label>
<label>Mensaje <br>
<textarea name="message">textarea>
label>
<input type="submit" value="Enviar">
form>
Usando parametros perzonalizados con pmx-data
En caso de que cambiar los nombres de los campos del formulario sea algo complicado, el código de integración de Pimex también puede obtener los datos de los campos agregando el atributo perzonalizado pmx-data="*" donde el * es el nombre del campo a que Pimex tomaría para enviarlo.
En el siguiente ejemplo podemos ver la estructura correcta de un formulario usando atributos personalizados
<form>
<label>Nombre <br>
<input type="text" pmx-data="name" name="53543">
label>
<label>Apellido <br>
<input type="text" pmx-data="lastname" name="545fdrw23">
label>
<label>Email <br>
<input type="text" pmx-data="email" name="c45345">
label>
<label>Teléfono <br>
<input type="text" pmx-data="phone" name="sdsafds453">
label>
<label>Asunto <br>
<input type="text" pmx-data="subject" name="4645654">
label>
<label>Ciudad <br>
<input type="text" pmx-custom="city" name="547rghrt">
label>
<label>Mensaje <br>
<textarea pmx-data="message" name="56756hr">textarea>
label>
<input type="submit" value="Enviar">
form>
Enviando datos personalizados
Aparte de los campos básicos, Pimex puede obtener campos personalizados de los formularios de los sitios web. Por defecto Pimex envía los campos que considera personalizados con el nombre que contiene el parámetro name.
Para que Pimex pueda detectar estos campos de una manera más óptima el parámetro name debe ser llamado: “custom-*” donde el “*” sería el nombre con el que se desea almacenar el dato.
Como podemos ver en el siguiente ejemplo para enviar un campo personalizado con el nombre ciudad, el parámetro name debería ser llamado: “custom-ciudad”
<form>
<label>Nombre <br>
<input type="text" name="name">
label>
<label>Género <br>
<input type="text" name="custom-genero">
label>
<label>Email <br>
<input type="text" name="email">
label>
<label>Empresa <br>
<input type="text" name="custom-empresa">
label>
<label>Ciudad <br>
<input type="text" name="custom-city">
label>
<input type="submit" value="Enviar">
form>
Enviar campos perzonalizados usando el parámetro pmx-custom="*"
Al igual que con los campos básicos, Pimex cuenta con un atributo para los datos personalizados del formulario en caso de no poderse cambiar el atributo name
En el siguiente ejemplo podemos ver un formulario que usa campos personalizados usando el atributo pmx-custom="*"
<form>
<label>Nombre <br>
<input type="text" name="name">
label>
<label>Email <br>
<input type="text" name="email">
label>
<label>Empresa <br>
<input type="text" pmx-custom="empresa" name="fghfg566">
label>
<label>Ciudad <br>
<input type="text" pmx-custom="ciudad" name="field-ciudad">
label>
<input type="submit" value="Enviar">
form>
Escuchando formularios
El código de sincronización de Pimex escanea las páginas del sitio web, buscando los formularios actualmente disponibles y en espera del envío de los datos. En el momento del envío, este da formato a los datos que el usuario ingresó, para enviarlos a Pimex automáticamente.
Para que el envío automático de datos sea posible, el formulario debe contar con la estructura correcta como lo podemos ver en la sección nombres de campos de formulario.
Métodos de sincronización de datos
Después de tener instalado el código de seguimiento en la etiqueta
de tu sitio web, vas a tener disponibles algunas funciones que van a facilitar el envío de los datos que quieres almacenar en Pimex. La mejor manera de implementar estos métodos es después de un evento como por ejemplo: Clic en un botón de tu sitio o el envío de un formulario (submit). Veamos con más detalle como funcionan los métodos de Pimex.
Sincronizando un formulario específico
El método .asyncForm procesa los campos de un formulario específico, el cual se le pasa como parámetro. El proceso de lectura de datos identifica los campos básicos y personalizados automáticamente para enviarlos a Pimex.
<script type="text/javascript">
Pimex.asyncForm(form, callback);
script>
Nombre | Tipo | Descripción |
---|---|---|
form | string, domElement, jQueryObject | Por medio de este parámetro le indicarás a Pimex cuál formulario de tu sitio web debe sincronizar, puedes enviarlo por su id: ‘#pimex-data-form’, por su clase ‘.pimex-form’ o por el selector que prefieras. También puedes enviar un objeto ya seleccionado con Jquery o con JavaScript como por ejemplo: $(’#pimex-data-for’). |
callback | function (err, res) | Este parámetro recibe una función que se ejecutará después de que los datos se envíen a Pimex, facilitando la respuesta a tus usuarios o clientes. |
El siguiente es un ejemplo de la implementación del método .asyncForm
En el ejemplo se usa jQuery para capturar el evento submit de un formulario el cual tiene por id #pimex-data-form y pasando el objeto del formulario (this) como parámetro al método para ser procesado y enviado.
Como segundo parámetro se pasa una función de llamada o callback.
<script type="text/javascript">
$(document).ready(function(){
$('#pimex-data-form').on('submit', function(event){
event.preventDefault();
Pimex.asyncForm($(this), function(err, response){
if (err) return console.log(err)
console.log(response);
});
});
});
script>
Para que el método .asyncForm pueda escanear correctamente los datos del formulario, este debe contar con la estructura correcta de sus campos, usando el parámetro name o el parámetro personalizado pmx-data como se explica en la sección: nombres de campos de formulario.
Ejemplo de un formulario con la estructura correcta para la sincronización con Pimex.
<form action="/" id="pimex-data-form" class="form pimex-form">
<input type="text" name="name" placeholder="Nombre">
<input type="email" name="email" placeholder="E-mail">
<input type="tel" name="phone" placeholder="teléfono">
<input type="text" name="custom-city" placeholder="Ciudad">
<input type="text" name="custom-country" placeholder="País">
<input type="text" name="custom-company" placeholder="Empresa">
<textarea name="message" placeholder="Mensaje" rows="8" cols="40" >textarea>
<input type="submit" name="send" value="envíar">
form>
Ejemplos del código de sincronización de Pimex
Si aún tienes dudas, aquí tienes algunos ejemplos funcionales del evento de sincronización .asyncForm
Todos los ejemplos están configurados con una cuenta de prueba a la que puedes acceder en cualquier momento para ver todo el poder de Pimex en tiempo real. Solo tienes que ingresar a Pimex e iniciar sesión con el usuario y la contraseña demo. Podrás encontrar las conversiones realizadas desde este formulario en el tablero llamado Di Apartamentos.
See the Pen Pimex demo async
Enviar datos directamente a Pimex
El método .async tiene la funcionalidad de enviar los datos directamente a Pimex por medio de un objeto JavaScript, en el caso que los datos no necesariamente vengan desde un formulario o la estructura no pueda ser modificada para que Pimex lo pueda detectar automáticamente.
Código de sincronización directa
<script type="text/javascript">
Pimex.async(objectData, callback)
script>
El código anterior envía a Pimex los datos en un objeto el cual se le envía como parámetro al método .async. En el ejemplo que veremos a continuación se obtiene el valor de cada campo del formulario por su respectivo ID. " $("#campo").val() ".
El método .async requiere de unos parámetros para su correcto funciónamiento:
Nombre | Tipo | Descripción |
---|---|---|
objectData | Object | Envía un objeto con los valores de cada campo del formulario. { name:, email:, phone:, message:, custom:{} } |
callback | function | Este parámetro recibe una función que se ejecutará después de que los datos se envíen a Pimex, facilitando la respuesta a tus usuarios o clientes. |
<> Ejemplo de envío de un formulario por medio del evento submit. con jQuery
<script type="text/javascript">
$(document).ready(function(){
$('.pimex-form').on('submit', function(event){
event.preventDefault();
var form = $(this);
Pimex.async({
name: $("#name").val(),
email: $("#email").val(),
phone: $("#phone").val(),
message: $("#message").val(),
custom:{
city: $("#city").val(),
country: $("#country").val(),
company: $("#company").val()
}
}, function(err, response){
if (err) return console.log(err)
console.log(response);
})
})
})
script>
A diferencia del código de sincronización, Este código nos permite enviar los datos captados desde cualquier lugar a pimex. Los campos que no hacen parte del información básica (nombre,email,teléfono, mensaje), deben de enviarse como “custom”.
Nombre | Tipo | Descripción |
---|---|---|
name | string | |
string | ||
phone | string | |
message | string | |
custom | object |
** Ejemplo de un formulario óptimo para la sincronización manual con Pimex
Todos los ejemplos están configurados con una cuenta de prueba a la que puedes acceder en cualquier momento para ver todo el poder de Pimex en tiempo real. Solo tienes que ingresar a Pimex e iniciar sesión con el usuario y la contraseña demo. Podrás encontrar las conversiones realizadas desde este formulario en el tablero llamado Di Apartamentos.
<form action="/" id="pimex-data-form" class="pimex-form">
<input type="text" id="name" name="name" placeholder="Nombre">
<input type="email" id="email" placeholder="E-mail">
<input type="tel" id="phone" placeholder="teléfono">
<input type="text" id="city" placeholder="Ciudad">
<input type="text" id="country" placeholder="País">
<input type="text" id="company" placeholder="Empresa">
<textarea id="message" placeholder="Mensaje" rows="8" cols="40" >textarea>
<input type="submit" name="send" value="envíar">
form>
See the Pen Pimex demo async
Enviar datos a diferentes tableros
Cuando necesitamos enviar datos a diferentes tableros en Pimex, y tenemos múltiples formularios es muy sencillo, porque simplemente debemos vincular cada formulario con su respectivo tablero. Para hacer esta integración, si usamos los plugins de Contact Form 7 o Ninja Forms, la podemos realizar con ayuda de los plugins con los que cuenta Pimex para realizar su integración con estos formularios. Solo es en la configuración de cada formulario poner los datos del tablero al que deseamos asociar. Para más información sobre la integración con los plugins de Pimex para WordPress haz clic aquí.
Pero qué pasa si no estamos usando estos plugins para la creación de nuestros formularios, para estos casos nos tocaría realizar una integración manual, donde usaremos el método Pimex.async visto anteriormente. El primer paso que debemos realizar es agregar el código de sincronización de Pimex, pero en este caso no le pondremos ningún ID y Token de tablero si no se le pasará false, así cómo se muestra en el siguiente código:
Código de sincronización
<script>
!function(e,n,t,c,y,s,r,u){s=n.createElement(t),r=n.getElementsByTagName(t)[0],
s.async=!0,s.src=c,r.parentNode.insertBefore(s,r),
s.onload = function () {Pimex.init(y, false)}}
(window,document,'script','//statics.pimex.co/services/async.js', false);
script>
Con este código insertado en nuestra página, tendremos a disposición los métodos de Pimex para trabajar con ellos, en este caso vamos a usar el método Pimex.async para enviar los datos a Pimex.
Código método Async
<script type="text/javascript">
Pimex.async(objectData, objectBoard, callback)
script>
El método .async requiere de unos parámetros para su correcto funciónamiento:
Nombre | Tipo | Descripción |
---|---|---|
objectData | Object | Envía un objeto con los valores de cada campo del formulario. { name:, email:, phone:, message:, custom:{} } |
objectBoard | Object | Envía un objeto con el id y token del tablero al cuál deseas enviar los datos { id: ‘’, token: ‘’ } |
callback | function | Este parámetro recibe una función que se ejecutará después de que los datos se envíen a Pimex, facilitando la respuesta a tus usuarios o clientes. |
<> En el ejemplo que veremos a continuación se obtiene el valor de cada campo del formulario por su respectivo ID. " $("#campo").val() ".
<script type="text/javascript">
$(document).ready(function(){
$('.pimex-form').on('submit', function(event){
event.preventDefault();
var form = $(this);
Pimex.async({
name: $("#name").val(),
email: $("#email").val(),
phone: $("#phone").val(),
message: $("#message").val(),
custom:{
city: $("#city").val(),
country: $("#country").val(),
company: $("#company").val()
}
},
{
id: 'id_del_tablero',
token: 'token_del_tablero'
}, function(err, response){
if (err) return console.log(err)
console.log(response);
})
})
})
script>