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

Joomla

Si el sitio en el que quieres agregar el código de seguimiento esta sobre el CMS Joomla puedes instalar el plugin oficial de Pimex. Aquí puedes ver una guía de como instalarlo y configurarlo correctamente.

Ver guia

Integrar código de seguimiento en sitios web HTML

Para hacer 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 de la cuenta, estos son entregados por Pimex en el momento de la creación de la cuenta (siempre estarán disponibles en la sección de configuración).
Una vez tengas los datos anteriores a la mano, sigue estos dos sencillos pasos:

1. 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 cuadro siguiente 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 cuenta.

Copy
<!-- Pimex code integration page -->
<script type="text/javascript">
  var pmx_snippet_vars = function(){
     window.pmx_project_id = "ID_board"; //Recuerda reemplazar
     window.pmx_project_token = "Token_board"; //Recuerda reemplazar
  }
</script>
<script type="text/javascript" src="https://services.pimex.co/async.js"></script>
<!-- end Pimex code -->

2. Código de sincronización

Después de tener instalado el código de seguimiento en la etiqueta de tu sitio web vas a tener disponibles algunas funciónes que van a facilitar el envío de los datos que quieres almacenar en Pimex. La mejor manera de implementar este código 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 funciona el código de evento.

- Sincronización por formulario

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

El código anterior envía a Pimex un formulario específico para que almacene los datos, esta función requiere dos parámetros para su correcto funciónamiento:

NameTypeDescription
formstring, domElement, jQueryObjectPor medio de este parámetro le indicarás a Pimex cuál formulario de tu sitio web debe sincronizar, puedes envíarlo por su id: '#pimex-data-form', por su clase '.pimex-form' o por el selector que prefieras. También puedes envíar un objeto ya seleccionado con Jquery o con JavaScript como por ejemplo: $('#pimex-data-for').
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.v

<> Ejemplo de envío de un formulario por medio del evento submit. con jQuery

Copy
<!-- Pimex integration form -->
<script type="text/javascript">
  $(document).ready(function(){
     $('#pimex-data-form').on('submit', function(event){
        event.preventDefault();
        pmxConnect().asyncForm($(this),function(response){
          console.log(response);
        });
     });
  });
</script>
<!-- end Pimex code -->

Debes tener en cuenta que los atributos name de los campos de tu formulario deben ser llamados de la siguiente forma:

NameTypeDescription
nametextSe guardará este campo como el nombre de tu conversión.
emailtextSe guardará este campo como el E-mail de tu conversión.
phonetextSe guardará este campo como el teléfono de tu conversión.
messagetextEn este campo puedes almacenar un mensaje o cualquier tipo de texto.
custom arrayEl campo "custom" te permite enviar datos personalizados a Pimex como por ejemplo : ciudad, empresa o los datos que necesites obtener de tus clientes, no hay ningún límite.

<> Ejemplo de un formulario óptimo 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 funciónales del código de evento o sincronización:

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

<> Código de sincronización directa de datos

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

El código anterior envía a Pimex los datos específico 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 un parámetros para su correcto funciónamiento:

NameTypeDescription
objectDataObjectEnvía un objeto con el valor 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);
    pmxConnect().async({
      name: $("#name").val(),
      email: $("#email").val(),
      phone: $("#phone").val(),
      message: $("#message").val(),
      custom:{
       city: $("#city").val(),
       country: $("#country").val(),
       company: $("#company").val()
      }
     }, function(response){
          console.log(response);
       })
     })
   })
</script>
<!-- end Pimex code -->

A diferencia del código de integración 2. Código de sincronización, Esta 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
namestringSe guardará este campo como el nombre de tu conversión.
emailstringSe guardará este campo como el E-mail de tu conversión.
phonestringSe guardará este campo como el teléfono de tu conversión.
messagestringEn este campo puedes almacenar un mensaje o cualquier tipo de texto.
custom objectEl campo "custom" te permite enviar datos personalizados a Pimex como por ejemplo : ciudad, empresa o los datos que necesites obtener de tus clientes, no hay ningún límite.

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