Pimex, all rights reserved. 2016 ©

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.

Para empezar a organizar tus leads y optimizar tus ventas debes seguir los siguientes pasos.

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 una cuenta

Ten en cuenta que debes vincular tu cuenta de Pimex con el sitio web donde quieres hacer la integración. Si tienes dudas sobre la creación de cuentas en Pimex puedes seguir esta guía

3.

Conectar sitio web

Ahora puedes empezar a agregar el código de seguimiento de Pimex 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 guia

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 guia

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 código de seguimiento en sitios web HTML

Para la integración del código de seguimiento 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 <head></head> de la página en la que quieres realizar el seguimiento. Recuerda reemplazar el ID y token con los de tu tablero.

Copy
<!-- 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 campoTipoDescripción
* name, nombre textNombre del usuario
* email, correo text, emailEmail o correo electrónico del usuario
phone, telefono text, telTeléfono del usuario
subject, asunto textAsunto de contacto del usuario
message, mensaje, comment, comentario textMensaje o comentario del usuario

El siguiente es un ejemplo de un formulario con la estructura adecuada para el envío de datos con Pimex

Copy
 <form>
   <input type="text" name="name">
   <input type="text" name="custom-lastname">
   <input type="text" name="email">
   <input type="text" name="phone">
   <input type="text" name="custom-city">
   <textarea name="message"><textarea>
   <input type="submit" value="send">
 </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

Copy
 <form>
   <input type="text" pmx-data="name" name="53543">
   <input type="text" pmx-data="email" name="c45345">
   <input type="text" pmx-data="phone" name="sdsafds453">
   <input type="text" pmx-data="subject" name="4645654">
   <input type="text" pmx-custom="city" name="547rghrt">
   <textarea pmx-data="message" name="56756hr"><textarea>
   <input type="submit" value="send">
 </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"

Copy
 <form>
   <input type="text" name="name">
   <input type="text" name="custom-lastname">
   <input type="text" name="custom-empresa">
   <input type="text" name="custom-ciudad">
   <input type="submit" value="send">
 </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="*"

Copy
 <form>
   <input type="text" name="name">
   <input type="text" pmx-custom="ciudad" name="field-ciudad">
   <input type="text" pmx-custom="empresa" name="fghfg566">
   <input type="submit" value="send">
 </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 <head></head> 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: Click 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 pasado como parámetro, el proceso de lectura de datos identifica los campos básicos y personalizados automáticamente para enviarlos a Pimex.

Copy
<!-- Pimex code integration page -->
<script type="text/javascript">
  Pimex.asyncForm(form, callback);
</script>
<!-- end Pimex code -->
NameTypeDescription
formstring, domElement, jQueryObjectPor 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').
callbackfunction (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 con el 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 enváa la función de llamada o callback

Copy
<!-- 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 scanear correctamente los datos del formulario este deben contar con la estructura básica 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.

Copy
<!-- 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 y la contraseña demo.

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

Copy
<!-- 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 específicos solicitados en cada etiqueta (name, email, phone, message, custom{}), para que almacene los datos. En este ejemplo llamamos el valor por el ID de cada campo del formulario " $("#campo").val() ". Esta función requiere de unos parámetros para su correcto funciónamiento:

NameTypeDescription
objectDataObjectEnvía un objeto con los valores de cada campo del formulario. {name:, email:, phone:, message:, custom}
callbackfunctionEste 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

Copy
<!-- 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 integración 2. 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"

NameTypeDescription
namestring
emailstring
phonestring
messagestring
custom object

<> Ejemplo de un formulario óptimo para la sincronización con Pimex.

Copy
<!-- 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