Sin categoría

¿Sabes cómo conectar tu sitio web en WordPress con Pimex?

7 octubre, 2019

author:

¿Sabes cómo conectar tu sitio web en WordPress con Pimex?

¿Sabes cómo conectar tu sitio web en WordPress con Pimex?

En Pimex siempre trabajamos para que la integración de nuestra plataforma con los formularios de los sitios web de nuestros usuarios, sea lo más sencillo posible. Por eso te contamos las posibilidades que tenemos si tu sitio está construido con el CMS WordPress.

La primera opción sería la forma común de integrar un sitio web desarrollado con cualquier tecnología. Se trata de agregar el código de sincronización que te entrega tu tablero de Pimex, en medio de las etiquetasde las páginas donde están los formularios de tu sitio. Para conocer más de este método haz clic aquí (https://dev.pimex.co/integration#integrar-pimex-en-sitios-html)

La otra opción que podemos usar es cuando en nuestro sitio web utilizamos los plugins de “Contact Form 7” o “Ninja Forms” para la creación de los formularios de nuestra página. En este caso Pimex ha facilitado mucho más la integración con la plataforma, desarrollando plugins específicos para cada unos de estos.

Cuando usamos “Contact Form 7” para los formularios debemos descargar el plugin de WordPress llamado “Pimex for Contact Form 7”, este nos habilitará un módulo en la configuración de nuestros formularios para realizar la integración con nuestro tableros de Pimex. Si este es tu caso de uso haz clic aquí para ver el paso a paso de integración. (https://dev.pimex.co/cms/wordpress)

Otro caso es cuando usamos “Ninja Forms” para la creación de los formularios, en este caso, el nombre del plugin que podemos descargar es “Pimex for Ninja Forms”, el cual también nos habilita un módulo en los formularios de Ninja forms para poder realizar la integración. Haz clic aquí para ver el paso a paso de integración. (https://dev.pimex.co/cms/wordpress)

Si utilizamos alguno de estos dos plugins, la integración con Pimex será sencilla en caso de que no tengas conocimientos técnicos y nos permite además tener un control mayor sobre la integración, ya que podemos enlazar cada formulario a un tablero en específico de Pimex o todos los formularios al mismo tablero.

Vamos a poner un par de ejemplos de uso con los que podrías llegar a necesitar algo así: 

  1. El primer ejemplo de esto podría ser cuando en tu sitio web ofreces distintos productos o servicios y te interesa segmentar tus clientes potenciales de acuerdo al formulario que deciden completar; por ejemplo, digamos que eres una universidad con distintos programas académicos o una constructora con diferentes proyectos inmobiliarios dentro de tu sitio web, o un concesionario con distintos modelos de autos. En cualquiera de los casos podrías entonces crear un tablero en Pimex por cada producto y enlazarlo a cada uno de sus respectivos formularios.
  2. Ahora, imaginemos que el sitio web tiene varios formularios pero todos para promocionar el mismo producto, digamos que vendes joyas personalizadas o un libro. En este tipo de casos, no sería necesario que crearas varios tableros, todos los formularios se enlazarían a un solo tablero de Pimex. En este caso basta con que sigas las instrucciones básicas de la documentación agregando la código de integración en la etiqueta head de tu sitio web.
  3. Otro caso que nos gustaría que tuvieras en cuenta es cuando en un formulario tenemos una lista desplegable con diferentes opciones de categorías o servicios. En este caso es posible que quieras darle un tratamiento distinto a la gestión de estos usuarios dependiendo de la opción que escojan en el formulario. Para este tipo de casos te recomendamos crear un tablero para cada opción de la lista desplegable y dependiendo de la opción que elijan los usuarios, podrás enviar los datos a cada uno de los tableros creados respectivamente.

Para este tipo de integración ya no podrás apoyarte en los plugins mencionados anteriormente, ni de la integración global con el código de sincronización. En este caso debes realizar una integración manual, que consiste en escuchar el evento de envío del formulario y obtener los datos diligenciados en este, para poder enviarlos a Pimex. 

Este método es un poco más complejo y necesita que la persona que la vaya a realizar tenga conocimientos técnicos para realizar esta integración. Si no eres la persona que va a realizar la integración puedes compartir este enlace en donde tu desarrollador podrá encontrar la documentación necesaria donde se explica cómo se realiza este proceso.

Pasos para integrar tu lista desplegable con Pimex

A continuación se detalla el código y ajustes necesarios para integrar cada item de la lista desplegable con un tablero personalizado en la plataforma Pimex.

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

2. Estructura del formulario

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

<form >
        Nombre:<br>
        <input type=»text» name=»name» >
        <br><br>
        Apellido:<br>
        <input type=»text» name=»lastname»>
        <br><br>
        Email <br>
        <input type=»email» name=»email»>
        <br><br>
        Teléfono <br>
        <input type=»text» name=»phone»>
        <br><br>
        Ciudad <br>
        <input type=»text» name=»custom-city»>
        <br><br>
        <select> Opciones
            <option value=»opcion 1″>Opción 1</option>
            <option value=»opcion 2″>Opción 2</option>
            <option value=»opcion 3″>Opción 3</option>
        </select>
        <br><br>
        <input type=»submit» value=»Submit»>
  </form> 

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

4. 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 –>
  <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>
<!– end Pimex code –>

El próximo paso es agregar en el footer o sección de scripts del sitio web el siguiente código indicando el nombre del tablero y reemplazar las entradas ‘Option#’ con su respectivo nombre asociado a cada item de la lista desplegable. De la misma manera debemos reemplazar el valor ‘NumberID’ por el número del tablero correspondiente en Pimex, y así sucesivamente por cada item de la lista desplegable.

<script>
    document.addEventListener( ‘wpcf7mailsent’, function( event ) {
      // Pimex.test().async()
      var formFields = event.detail.inputs
      var formElement = jQuery(event.target).find(‘form’)
      function getPmxDataByForm (form) {
          let str = form.custom[‘menu-983’]
          <!– Custom Pimex Table code –>
          console.log(str)
         console.log(str.indexOf(‘Option1’))
              if (str.indexOf(‘Option1’) > -1) {
            return { id: NumberID, token: ‘ ‘ }
            }
           console.log(str.indexOf(‘Option2’))
              if (str.indexOf(‘Option2’) > -1) {
               return { id: NumberID, token: ‘ ‘ }
            }
           console.log(str.indexOf(‘Option3’))
               if (str.indexOf(‘Option3’) > -1) {
               return { id: NumberID, token: ‘ ‘ }
            }
         <!– End Custom Pimex Table code –>
       }
       function formatData (fields) {
           var data = {
             custom: {}
           };
           var validKeys = [‘name’, ‘nombre’, ‘email’, ‘correo’, ‘phone’, ‘telefono’, 
‘subject’, ‘asunto’, ‘comment’, ‘comentario’, ‘message’, ‘mensaje’];
          for (i in fields) {
             if(!fields[i].value) continue
             if (fields[i].name.indexOf(‘[]’) > -1) {
                     fields[i].name = fields[i].name.substring(fields[i].name.length – 2, 0)
                 }
             if(fields[i].name.indexOf(‘custom-‘) < 0 && validKeys.indexOf(fields[i].name) > -1 && !data[fields[i].name]){
               data[fields[i].name] = fields[i].value;
               continue
             }
             if (fields[i].name.indexOf(‘custom-‘) > -1) {
               fields[i].name = fields[i].name.substring(7)
             }
             data.custom[fields[i].name] = fields[i].value;
           }
         return data
       }
    let objData = formatData(formFields)
       Pimex.async(objData, getPmxDataByForm(objData), function (err, res) {
           if(err) return console.log(err)
          console.log(res)
       })
     }, false );
</script>

 

Finalmente con estas indicaciones podrás conectar exitosamente tu sitio web con Pimex y disfrutar de todos beneficios de manejar tus leads.

Si tienes alguna duda o problema con la integración puedes comunicarte con nosotros vía email a  soporte@pimex.com o puedes abrir un chat personalizado desde nuestro sitio web es.pimex.co. Con gusto alguno de nuestros asesores te brindará la ayuda necesaria.