Cómo integrar tu formulario web con WoowUp (HTML / JS)

Requisitos previos

Clave pública de la cuenta de WoowUp. Se obtiene desde Configuración → Claves para desarrolladores y es necesario tener rol de Super-Admin para verla. (Acá podés ver cómo obtenerla).
Un formulario, popup o landing en tu sitio donde captures los datos del usuario (como mínimo el email).
Acceso al código del sitio para insertar el script, o a tu gestor de tags (por ejemplo GTM).
Opcional: jQuery cargado en la página. Los ejemplos usan jQuery 2.2.4, aunque también se puede hacer con fetch nativo (ver más abajo).

Paso 1: Obtener la clave pública

Ingresá al panel de WoowUp con un usuario Super-Admin.
Andá a Configuración → Claves para desarrolladores.
Copiá la clave pública. Es el valor que va en el campo app del llamado.

Paso 2: Definir los campos y precargar los atributos extendidos

Antes de armar el script, decidí qué campos vas a enviar. Hay dos tipos:

Campos nativos: email, first_name, last_name, tags, gender, birthdate, telephone, mailing_enabled. Estos ya existen en WoowUp, no requieren ninguna configuración previa.
Atributos extendidos (custom_attributes): cualquier dato propio tuyo que no sea nativo (por ejemplo source, interes, popup_home). Estos NO existen por defecto: hay que crearlos antes en WoowUp.

⚠️ Importante: si en el script enviás un atributo extendido que no fue creado previamente en WoowUp, el dato no se va a guardar. Este es el error más común al copiar y pegar el script tal cual: el custom_attributes del ejemplo (source) no existe en tu cuenta hasta que lo crees.

Para precargar los atributos extendidos:

Ingresá a WoowUp.
Andá a la sección de atributos extendidos de la cuenta.
Creá cada atributo que vayas a enviar, con el mismo nombre (clave) que vas a usar en el script y el tipo correspondiente (texto, fecha, número, etc.).

Recién con los atributos ya creados, pasá a armar el script.

Paso 3: Armar el llamado AJAX

El registro se hace con un POST al endpoint de eventos de WoowUp:

POST https://events.woowup.com/events/users 
Content-Type: application/json

En el cuerpo del llamado va la clave pública en app más los datos del usuario. Ejemplo mínimo con jQuery:

html

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
  var settings = {
    "async": true,
    "crossDomain": true,
    "url": "https://events.woowup.com/events/users",
    "type": "POST",
    "headers": {
      "cache-control": "no-cache",
      "content-type": "application/json"
    },
    "data": JSON.stringify({
      "app": "CLAVE_PUBLICA_WOOWUP",
      "email": "[email protected]",
      "first_name": "John",
      "last_name": "Doe",
      "tags": "ecommerce,newsletter",
      "mailing_enabled": "enabled",
      // "source" debe existir como atributo extendido en WoowUp (ver Paso 2)
      "custom_attributes": {
        "source": "popup_home"
      }
    })
  }

  $.ajax(settings).done(function (response) {
    console.log(response);
  }).fail(function (error) {
    console.log(JSON.stringify(error));
  });
</script>

💡 Para un registro de newsletter conviene enviar "mailing_enabled": "enabled" para dejar explícito el opt-in del contacto, y usar un tag (por ejemplo newsletter) que después te permita segmentar en WoowUp.

Si no vas a usar campos propios, podés borrar el bloque custom_attributes directamente y quedarte solo con los campos nativos.

Paso 4: Conectar el formulario

Para que el script tome los valores reales que carga el usuario, se enganchan los input del formulario al llamado. Ejemplo funcional completo con jQuery 2.2.4:

html

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Newsletter</title>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js" crossorigin="anonymous"></script>
</head>
<body>
  <form action="">
    <table>
      <tr>
        <td>Email:</td>
        <td><input type="text" name="email"/></td>
      </tr>
      <tr>
        <td>Nombre:</td>
        <td><input type="text" name="first_name"/></td>
      </tr>
      <tr>
        <td>Apellido:</td>
        <td><input type="text" name="last_name"/></td>
      </tr>
      <tr>
        <td>¿Cómo nos encontraste?:</td>
        <td>
          <select name="source">
            <option value="recomendacion">Recomendación</option>
            <option value="via_publica">Publicidad vía pública</option>
            <option value="internet">Publicidad Internet</option>
          </select>
        </td>
      </tr>
      <tr><td colspan="2"><button type="button" id="sent">Enviar</button></td></tr>
    </table>
  </form>

  <script>
    $(document).ready(function () {
      $("#sent").click(function () {
        var email = $('input[name=email]').val();
        var tags = "ecommerce,newsletter,popup";

        var settings = {
          "async": true,
          "crossDomain": true,
          "url": "https://events.woowup.com/events/users",
          "type": "POST",
          "headers": {
            "cache-control": "no-cache",
            "content-type": "application/json"
          },
          "data": JSON.stringify({
            "app": "CLAVE_PUBLICA_WOOWUP",
            "email": email,
            "first_name": $('input[name=first_name]').val(),
            "last_name": $('input[name=last_name]').val(),
            "tags": tags,
            "mailing_enabled": "enabled",
            // "source" debe existir como atributo extendido en WoowUp (ver Paso 2)
            "custom_attributes": {
              "source": $("select[name=source]").val()
            }
          })
        }

        $.ajax(settings).done(function (response) {
          console.log("✅ Cliente creado en WoowUp:", email, "| tags:", tags);
          console.log("Respuesta:", response);
        }).fail(function (error) {
          console.log("❌ No se pudo crear el cliente en WoowUp:", email);
          console.log("Error:", JSON.stringify(error));
        });
      });
    });
  </script>
</body>
</html>

Alternativa sin jQuery (fetch)

Si el sitio no tiene jQuery, se puede hacer el mismo llamado con fetch nativo:

html

<script>
  document.getElementById("sent").addEventListener("click", function () {
    var email = document.querySelector('input[name=email]').value;
    var tags = "ecommerce,newsletter,popup";

    fetch("https://events.woowup.com/events/users", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        app: "CLAVE_PUBLICA_WOOWUP",
        email: email,
        first_name: document.querySelector('input[name=first_name]').value,
        last_name: document.querySelector('input[name=last_name]').value,
        tags: tags,
        mailing_enabled: "enabled"
      })
    })
      .then(function (res) {
        if (res.ok) {
          console.log("✅ Cliente creado en WoowUp:", email, "| tags:", tags);
        } else {
          console.log("❌ No se pudo crear el cliente en WoowUp:", email, "| status:", res.status);
        }
        return res.json();
      })
      .then(function (data) { console.log("Respuesta:", data); })
      .catch(function (err) { console.log("Error:", err); });
  });
</script>

Paso 5: Verificar

La creación del contacto se valida de dos formas complementarias: por consola y directamente en WoowUp.

1. Validación por consola

Completá y enviá el formulario de prueba.
Abrí la consola del navegador (F12 → Console).
Si el registro fue correcto, vas a ver un mensaje como:

   ✅ Cliente creado en WoowUp: [email protected] | tags: ecommerce,newsletter,popup

Si algo falló, vas a ver el mensaje de error con el status de la respuesta:

   ❌ No se pudo crear el cliente en WoowUp: [email protected] | status: 400

2. Validación en WoowUp

El mensaje de consola confirma que el llamado se envió bien, pero la validación definitiva es comprobar que el contacto exista realmente en la cuenta:

Ingresá a WoowUp.
Buscá al contacto por el email que usaste en la prueba.
Confirmá que:
- el contacto existe en WoowUp,
- tiene el tag que configuraste en el script (por ejemplo newsletter), y
- si enviaste atributos extendidos, que hayan quedado cargados con su valor en el contacto.

Si el contacto aparece con el tag esperado, el registro está bien hecho y la integración quedó funcionando.

Casos comunes si algo no cierra:

La consola dio ✅ pero el contacto no aparece → revisá que la clave pública (app) sea la correcta de esa cuenta.
El contacto aparece pero falta un atributo extendido → ese atributo no estaba precargado en WoowUp (volvé al Paso 2). El nombre (clave) del atributo en el script tiene que coincidir exactamente con el creado en WoowUp.

Parámetros disponibles

Parámetro	Obligatorio	Descripción	Ejemplo
`app`	Sí	Identificador de la cuenta (clave pública de WoowUp).
`document`	No	Documento del cliente.	30300300
`email`	No*	Email del cliente. *Recomendado como identificador para newsletter.	[email protected]
`telephone`	No	Teléfono del cliente.	5491173682446
`tags`	No	Tags separadas por coma. Útiles para segmentar.	"ecommerce,newsletter,popup"
`birthdate`	No	Fecha de nacimiento. Formato: `AAAA-MM-DD`.	1992-03-31
`gender`	No	Género del cliente. Debe ser `"F"` o `"M"`.	M
`first_name`	No	Nombre del cliente.	Christian
`last_name`	No	Apellido del cliente.	Vitale
`mailing_enabled`	No	Habilita/deshabilita envío de emails. Valores: `"enabled"`, `"disabled"`.	enabled
`mailing_enabled_reason`	No	Motivo por el cual el usuario no puede recibir emails.	"unsuscribed"
`sms_enabled`	No	Habilita/deshabilita envío de SMS. Valores: `"enabled"`, `"disabled"`.	enabled
`sms_enabled_reason`	No	Motivo por el cual el usuario no puede recibir SMS.	"unsuscribed"
`custom_attributes`	No	Objeto con atributos personalizados (se guardan como extended attributes).	"popup_home"

⚠️ En los custom_attributes de tipo fecha, el valor debe ir en formato AAAA-MM-DD.

Códigos de respuesta HTTP

Código	Nombre	Descripción
200	Ok	Todo salió bien.
400	Bad Request	Parámetros inválidos.
403	Forbidden	La cuenta no existe.

Notas importantes

La clave pública se obtiene solo con rol Super-Admin desde Configuración → Claves para desarrolladores.
Enviá email (o algún identificador como document o telephone ) para que WoowUp pueda crear al contacto.
Para dejar registrado el opt-in del suscriptor, incluí "mailing_enabled": "enabled".
Las fechas (birthdate y custom_attributes de tipo fecha) siempre en formato AAAA-MM-DD.
El campo gender solo acepta "F" o "M".