Configurar Newsletter con un formulario web (HTML / Script 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: 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",
      "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.

Paso 3: 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",
            "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 4: 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 desde Segmentos > Búsqueda Rápida.
Confirmá que:
- el contacto existe en WoowUp, y
- tiene el tag que configuraste en el script (por ejemplo newsletter).

Si el contacto aparece con el tag esperado, el registro está bien hecho y la integración quedó funcionando. Si el mensaje de consola dio ✅ pero el contacto no aparece en WoowUp, revisá que la clave pública (app) sea la correcta de esa cuenta.

Parámetros disponibles

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

⚠️ 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".