Pimex, all rights reserved. 2016 ©

Pimex integration on your website

Pimex could be integrated with any modern site, you only will need basics knowledge on HTML and JavaScript to connect and start sync leads.

Let's start following the next steps.

1.

Make sure you are sign up on Pimex

You will have a register account on pimex to integrate it with your site. If you don't have one, create one here.

2.

Create a board

Note that your should link your Pimex board with the website you want to integrate. If you have any doubdt about creating boards follow this guide.

3.

Connect the Website

Now you can start adding the Pimex tracking code on your website. To add this code choose the way you prefer to do it on the options below.

How to start?

¿Qué tecnología usa tu sitio web?

Pimex could be integrated with any website on HTML and JavaScript; If your site is developed with any kind of Content Management System (CMS) like Wordpress we also have a simple guide for you.

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.

See guide

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.

See guide

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.

See guide

Integrar código de seguimiento en sitios web HTML

To integrate the Pimex tracking code developed on HTML and JavaScript you will just need the ID and account token, those are delivered to you when you create a new board (always available on settings section).
Una vez tengas los datos anteriores a la mano, sigue estos dos sencillos pasos:

1. Installing the tracking code.

First you will need to do is add the tag on your website, in order to do this, copy the tag on the following field and paste it between the tags <head></head> on the page you want to make the integration. Remember to replace the ID and Token with your own.

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. Sync code

Once you installed the previous tag, you will have available some features to facilitate the sending data to store on Pimex. The best way to add this code is after an event e.g. Click on the button "Send" (Submit).

- Async form

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

The previous code send to Pimex from a specific form data to save. This function requires two params to work:

NameTypeDescription
formstring, domElement, jQueryObjectThrough this parameter you will indicate Pimex what form your website should synchronize, you can send it by its ID: '# PIMEX-data-form', by its class '.pimex-form' or the selector you prefer. You can also send an already selected object with jQuery or JavaScript as: $ ( '# PIMEX-data-for').
callbackfunctionThis parameter receives a function that runs after the data is sent to Pimex, providing the answer to your users or customers.

<> Example of sending a form using the submit event. 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 -->

You must keep in mind the name attributes of the fields in your form must be called as follows:

NameTypeDescription
nametextThis field will save as your lead name
emailtextThis field will save as your lead email
phonetextThis field will save as your lead phone
messagetextThis field will save a message or any kind of text
custom arrayThis field lets your send personalize data, extra info you want to storage like city, company or anything without limits.

<> Optimal form for Pymex sync

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

<> Examples of sync code

If you still have doubts, there is some functional examples of the event's code or sync:

Every example is configurate with a test account where you can login anytime to see Pimex in action. You can login through Pimex and login with the user : "demo" and password: "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
namestringThis field will save as your lead name
emailstringThis field will save as your lead email
phonestringThis field will save as your lead phone
messagestringThis field will save a message or any kind of text
custom objectThis field lets your send personalize data, extra info you want to storage like city, company or anything without limits.

<> Optimal form for Pymex sync

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