Back to top

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:

  1. 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.

  2. 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’.

  3. 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.

 

<!-- Pimex code integration page -->
<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.

 

<!-- Pimex code integration page -->
<script type="text/javascript">
  Pimex.asyncForm(form, callback);
</script>
<!-- end Pimex code -->

 

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.

<!-- Pimex integration form -->
<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>
<!-- end Pimex code -->

 

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.

<!-- Pimex integration form -->
<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>
<!-- end Pimex code -->

 

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 demo@pimex.co 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

<!-- Pimex code integration page -->
<script type="text/javascript">
    Pimex.async(objectData, callback)
</script>
<!-- end Pimex code -->

 

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

<!-- Pimex code integration page -->
<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>
<!-- end Pimex code -->

 

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
email 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 demo@pimex.co y la contraseña demo. Podrás encontrar las conversiones realizadas desde este formulario en el tablero llamado Di Apartamentos.

 

<!-- Pimex integration form -->
<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>
<!-- end Pimex code -->

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

<!-- Pimex code integration page -->
<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() ".

<!-- Pimex code integration page -->
<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>
<!-- end Pimex code -->

Pimex, all rights reserved. 2019