Setup

Esta guía cubre todo lo que necesitas configurar antes de que Clerk.io pueda enviar correos electrónicos en tu nombre.

Estos pasos solo se aplican cuando deseas enviar correos electrónicos a través de Clerk.io — campañas, flujos y disparadores automáticos como Carrito Abandonado. Si solo deseas añadir recomendaciones de productos personalizadas a los correos que ya envías mediante Klaviyo, Mailchimp u otra plataforma, nada de esto es necesario. Dirígete directamente a Embeds.

Configuración #

Estos pasos autorizan a Clerk.io para enviar correos electrónicos desde tu dominio, le dan una lista de personas a quienes enviar, y preparan el diseño de tu primer correo. Necesitarás acceso a my.clerk.io, al proveedor de alojamiento de tu dominio y a tu plataforma de correo electrónico existente.

Configuración de DNS #

La configuración de DNS es obligatoria para todas las tiendas que usan Clerk.io Email. Antes de que Clerk.io pueda enviar cualquier correo, debes autenticar tu dominio de envío agregando registros DNS en el proveedor de tu dominio.

Piénsalo así: cuando Clerk.io envía un correo en tu nombre, necesita demostrar al servidor de correo del destinatario que realmente está autorizado. Sin esa prueba, el correo se ve sospechoso — como alguien que afirma ser tú sin identificación. Los servidores de correo no lo aceptan y pueden rechazar el correo o enviarlo directo a spam.

Los registros DNS son la manera de conceder esa autorización. Añades algunos registros a la configuración de tu dominio (dondequiera que lo administres — Route 53, Cloudflare, GoDaddy, etc.) y esos registros le dicen a internet: “Clerk.io puede enviar correos como nosotros”.

Hay tres tipos de registros que debes añadir:

• SPF — Declara qué servicios están autorizados para enviar correos desde tu dominio.
• DKIM — Añade una firma criptográfica a los correos salientes para que los destinatarios puedan verificar que realmente provienen de ti y que no han sido alterados en tránsito.
• CNAME — Usado para el seguimiento de aperturas y clics en tus campañas.

Registros SPF: Un dominio solo puede tener un registro SPF TXT. Si ya tienes uno, debes fusionar la directiva, ej. include:mailgun.org en el registro existente en vez de crear un segundo registro.

Para encontrar tus registros DNS, ve a Email > Configuration > Domain Setup y sigue la guía paso a paso para tu proveedor.

Una vez ingresados tu correo y nombre de remitente, Clerk.io generará los valores exactos que debes añadir. Después de ingresarlos en tu proveedor, vuelve a Email > Configuration > DNS Records y haz clic en Verify Now. Clerk.io confirmará que los tres registros estén correctamente configurados.

Sincronización de Suscriptores #

La sincronización de suscriptores es obligatoria para todas las tiendas que usan Clerk.io Email. Un suscriptor es una dirección de correo que ha aceptado recibir marketing por correo electrónico. Clerk.io debe saber quiénes son antes de poder enviar campañas.

Si ya tienes suscriptores en una plataforma como Klaviyo o Mailchimp, puedes sincronizarlos directamente en Clerk.io. Esto te da la lista completa de suscriptores desde el primer día.

Para configurar la sincronización, ve a Settings > Integrations y conecta tu plataforma de correo electrónico. Una vez guardada la integración, ve a Email > Configuration > Sync Subscribers y habilita el interruptor junto a la integración que desees usar.

Para encontrar la guía de configuración de tu plataforma, búscala en el menú de integraciones en la barra lateral y sigue su guía Sync Data.

Si no usas una plataforma externa, puedes importar suscriptores mediante un archivo CSV o incluirlos en tu data feed usando el atributo subscribed: true en los registros de clientes.

Personalización #

La pestaña de Personalización en Email > Configuration > Personalization te permite configurar el logotipo de la tienda que Clerk.io usará en tus diseños de correo electrónico.

Puedes subir una imagen directamente o usar Auto-detect from website para que Clerk.io busque y obtenga el logotipo automáticamente de tu tienda online. Esta es la opción más rápida si el logo ya es visible en el sitio — Clerk.io lo localizará y aplicará sin necesidad de cargarlo manualmente.

El logo configurado aquí se usará como logo por defecto en los diseños de correo de Clerk.io. Si creas tus diseños manualmente, puedes hacer referencia a la URL de tu logo directamente en el marcado de la plantilla.

Diseño de Email #

Cada campaña y flujo automatizado necesita un diseño de correo electrónico — la plantilla visual que Clerk.io usa para construir el correo que envía.

La manera más sencilla de crear uno es usando Ask Clerk.io Design Studio. Describe lo que quieres en lenguaje natural — disposición, colores, qué productos mostrar, cómo mostrar los precios en oferta — y genera una vista previa instantánea en el chat para que la revises y ajustes. También puedes indicarle tu sitio o adjuntar una captura de pantalla y igualará el estilo. Lee más en la guía de Design Studio.

Para un mayor control, el editor MJML integrado de Clerk.io te permite escribir los diseños con marcado estructurado. MJML se compila en HTML que se renderiza de forma consistente en Gmail, Outlook y Apple Mail. Consulta la guía de MJML Designs para un recorrido completo y ejemplos.

Todos los diseños de correo en Clerk.io son responsivos — se adaptan automáticamente a cualquier tamaño de pantalla, luciendo bien en desktop, tablet y móvil sin trabajo extra.

Si deseas incluir imágenes estáticas en tus diseños — banners, logos, cabeceras estacionales — puedes alojarlas directamente en los servidores de Clerk.io usando la Media Library. Las imágenes cargadas obtienen una referencia de plantilla como {{ media.your-image }} que puedes añadir directamente en cualquier diseño. También puedes adjuntar una imagen directamente en Ask Clerk.io y pedir que la suba y la use en el diseño creado — se encargará de todo.

Enlaces de Baja #

Todo correo de marketing debe incluir una forma para que los destinatarios se den de baja. Cómo hacerlo dependerá de cómo envías los correos.

Usando una plataforma externa (Klaviyo, Mailchimp, etc.) — Sigue usando el enlace de baja de tu plataforma. Ella gestiona la baja y mantiene tu lista sincronizada automáticamente.

Enviando todos los correos con Clerk.io — Añade el enlace de baja de Clerk.io al diseño. Si usas Ask Clerk.io para construir el correo, solo indícale que incluya un enlace de baja y él se encargará de todo.

Para los diseños creados manualmente, utiliza el siguiente enlace. La variable {{ email }} será reemplazada por la dirección del destinatario al enviar. Sustituye YOUR_PUBLIC_API_KEY por la Public Key de Developers > API Keys.

<a href="https://api.clerk.io/v2/subscriber/unsubscribe?key=YOUR_PUBLIC_API_KEY&email={{ email }}&redirect=true">Unsubscribe</a>

Para darse de baja solo de una lista específica, añade list_id:

<a href="https://api.clerk.io/v2/subscriber/unsubscribe?key=YOUR_PUBLIC_API_KEY&email={{ email }}&list_id=FSY27248&redirect=true">Unsubscribe from this list</a>

Para redirigir a tu página de confirmación tras la baja, añade redirect_url:

<a href="https://api.clerk.io/v2/subscriber/unsubscribe?key=YOUR_PUBLIC_API_KEY&email={{ email }}&redirect=true&redirect_url=https://yoursite.com/unsubscribed">Unsubscribe</a>

Configuración en el Sitio #

Estos pasos requieren cambios en tu tienda y habilitan la personalización, flujos automatizados y Carrito Abandonado. No todas son necesarias en todas las tiendas — cuáles necesitas depende de qué quieras enviar.

Captura de Email #

Obligatorio para todos los flujos automatizados — abandono de navegación, series de bienvenida y Carrito Abandonado.

Cada visitante en tu sitio recibe un ID de visitante. Clerk.io lo utiliza para rastrear lo que ve, busca y añade al carrito.

El problema es que el ID de visitante empieza anónimo — Clerk.io no puede enviarle correos hasta saber su correo electrónico. La captura de email es el paso que los conecta.

Una vez enlazado el correo a un ID de visitante, todo el comportamiento de su sesión puede usarse para activar y personalizar correos.

Hay dos situaciones en que se necesita hacer esta conexión:

Cuando un visitante escribe su correo — Si un visitante introduce su correo en cualquier parte del sitio (campo de pago, suscripción a newsletter, formulario de login), Clerk.io lo detecta y registra automáticamente. Esto se maneja con la función collect_email, que puedes habilitar en tu configuración de Clerk.js o desde Developers > Clerk.js Config en my.clerk.io.

Cuando un cliente ya está logueado — Si un cliente vuelve ya autenticado, su correo está disponible inmediatamente. En este caso, un pequeño script en cada página puede registrar el correo una vez por sesión, así la conexión se realiza sin que el cliente tenga que escribir nada.

Seguimiento del Carrito #

Obligatorio para Carrito Abandonado.

Cuando un visitante se va sin comprar, Clerk.io puede enviarle un correo mostrando los productos exactos que dejó en el carrito — pero solo si sabe qué había en el carrito.

El seguimiento del carrito debe llamarse cada vez que el carrito cambie: cuando se añada, elimine o actualice un producto. Sin esto, el flujo de Carrito Abandonado no tiene datos de productos para usar.

Formularios de Suscripción #

Opcional — solo si estás recolectando altas directamente con Clerk.io.

Si usas Clerk.io como tu principal plataforma de correo, necesitas una manera para que nuevos visitantes se apunten directamente desde tu sitio. Esto hace que tu lista de suscriptores crezca dentro de Clerk.io sin depender de plataformas externas para las altas.

Si prefieres seguir captando suscriptores en Klaviyo u otra plataforma, mantén la sincronización de suscriptores activa de forma continua para que las nuevas altas se importen en Clerk.io regularmente. En ese caso, los formularios de alta no son necesarios — puedes saltar esta sección.

Consulta la sección de implementación abajo para obtener un formulario de alta listo para usar.

Con Clerk.js #

La configuración de DNS y la sincronización de suscriptores siempre se hacen desde Email > Configuration y Settings > Integrations en my.clerk.io — no requieren código.

Captura de Email #

Detección automática de campos de email — Si usas uno de los plugins instalables de Clerk.io (DanDomain Classic, Magento 1, Magento 2, PrestaShop, Shopware 6, VTEX o WooCommerce), activa collect_email directamente desde la configuración del plugin. De lo contrario, habilítalo en tu configuración de Clerk.js. Clerk.js monitorizará todos los campos de correo en la página y registrará la dirección automáticamente al escribir.

Clerk('config', {
  key: 'your-public-api-key',
  collect_email: true
});

Esto funciona para campos de pago, newsletter, formularios de login y cualquier otro <input type="email"> en la página.

Clientes logueados — Si un cliente ya está logueado al entrar al sitio, registra su correo una vez por sesión. Usa sessionStorage para evitar hacer la llamada en cada carga de página:

if (!sessionStorage.getItem('clerk_email_logged')) {
  Clerk('call', 'log/email', {
    email: 'CUSTOMER_EMAIL'
  });
  sessionStorage.setItem('clerk_email_logged', '1');
}

Sustituye CUSTOMER_EMAIL por la dirección real de correo de tu plataforma. Solo muestra este script en páginas donde esté disponible el correo — omítelo completamente para visitantes invitados.

Seguimiento del Carrito #

Si usas los plugins de Magento 1, Magento 2, PrestaShop, o WooCommerce, el seguimiento del carrito es automático — no necesitas código extra.

Para otras configuraciones, informa a Clerk.io del contenido actual del carrito usando el método set. Llama cada vez que cambie el carrito, pasando la lista actual de IDs de productos. Cada llamada se ata automáticamente a la sesión de visitante actual.

Clerk('cart', 'set', [1234, 5678, 42]);

Lee más sobre la integración con el carrito aquí.

Formularios de Suscripción #

A continuación hay un formulario de alta listo para usar que puedes insertar en tu sitio — footer, home, popup. Estílalo como quieras.

<div class="clerk-sign-up">
   <h2 class="clerk-sign-up-headline">Sign up now!</h2>
   <div class="clerk-sign-up-subtitle">Get personal offers and stay up-to-date with trends.</div>
   <div class="clerk-input-wrapper">
      <input type="text" id="clerk-add-subscriber-input" placeholder="Enter your email">
      <button id="clerk-add-subscriber-btn" onclick="add_subscriber()">Subscribe</button>
   </div>
   <div id="clerk-subscribe-message"></div>
</div>

<script>
   function add_subscriber() {
      var clerk_btn = document.getElementById("clerk-add-subscriber-btn");
      var clerk_input = document.getElementById("clerk-add-subscriber-input");
      var clerk_message = document.getElementById("clerk-subscribe-message");
      Clerk("call", "subscriber/subscribe", {
         email: clerk_input.value
      },
      function(response) {
         clerk_message.style.color = "#008001";
         clerk_message.innerText = "You are now subscribed!";
         clerk_btn.innerText = "Subscribed!";
         clerk_btn.style.opacity = "0.5";
         clerk_btn.disabled = true;
      },
      function(response) {
         clerk_message.style.color = "#EE360E";
         clerk_message.innerText = "Could not subscribe. Please try again.";
      });
   }
</script>

<style>
   .clerk-sign-up {
      width: 50%;
      padding: 60px 0;
      max-width: 800px;
      min-width: 500px;
      margin: 40px auto;
      background-color: #FEFAF4;
   }
   .clerk-sign-up-headline {
      margin: 0 14px 14px;
      text-align: center;
   }
   .clerk-sign-up-subtitle {
      margin: 14px 14px 28px;
      text-align: center;
      color: #808080;
   }
   .clerk-input-wrapper {
      margin: 10px auto;
      text-align: center;
   }
   #clerk-add-subscriber-input {
      height: 28px;
      width: 50%;
      padding: 0 0 0 6px;
      border: 1px solid #D3D3D3;
   }
   #clerk-add-subscriber-btn {
      height: 30px;
      background-color: #008001;
      border: 1px solid #008001;
      color: white;
      cursor: pointer;
   }
   #clerk-subscribe-message {
      height: 20px;
      margin: auto;
      text-align: center;
   }
</style>

Para suscribirse a una lista específica en vez de globalmente, añade list_id a la llamada. Los IDs de listas se encuentran en Email > Subscribers > Lists.

Clerk("call", "subscriber/subscribe", {
  email: "customer@example.com",
  list_id: "FSY27248"
});

Lee más sobre la gestión de suscriptores y listas aquí.

Con la API #

Esta sección cubre la configuración usando llamadas directas a la API. Es relevante para integraciones del lado del servidor que no usan Clerk.js.

Al usar la API, debes generar y mantener el ID de visitante para cada sesión. Consulta la guía de seguimiento para más detalles.

Registrar Email #

Usa log/email para asociar un ID de visitante con un email. Llama una vez por sesión cuando haya correo disponible — tanto si el cliente inicia sesión como si vuelve ya logueado.

curl -X POST https://api.clerk.io/v2/log/email \
  -H 'Content-Type: application/json' \
  -d '{
    "key": "your-public-api-key",
    "email": "customer@example.com",
    "visitor": "SESSION_VISITOR_ID"
  }'

Sustituye SESSION_VISITOR_ID por el ID de visitante de la sesión actual. Omite esta llamada para visitantes invitados si no hay email.

Seguimiento del Carrito #

Usa log/cart/update para establecer el estado actual del carrito. Llama cada vez que el carrito cambie, pasando la lista completa de productos que hay en el carrito.

curl -X POST https://api.clerk.io/v2/log/cart/update \
  -H 'Content-Type: application/json' \
  -d '{
    "key": "your-public-api-key",
    "visitor": "SESSION_VISITOR_ID",
    "products": [
      {"id": 1234, "quantity": 2},
      {"id": 5678, "quantity": 1}
    ]
  }'

También puedes pasar email en lugar de (o además de) visitor si el correo ya es conocido al momento de la llamada.

Formularios de Suscripción #

Usa subscriber/subscribe para añadir un email como suscriptor cuando un visitante se apunte en tu sitio.

curl -X POST https://api.clerk.io/v2/subscriber/subscribe \
  -H 'Content-Type: application/json' \
  -d '{
    "key": "your-public-api-key",
    "email": "customer@example.com"
  }'

Para suscribirse a una lista específica, incluye list_id:

curl -X POST https://api.clerk.io/v2/subscriber/subscribe \
  -H 'Content-Type: application/json' \
  -d '{
    "key": "your-public-api-key",
    "email": "customer@example.com",
    "list_id": "FSY27248"
  }'

Lee la referencia completa en docs.clerk.io/reference/subscriberssubscribe.

Darse de Baja #

Usa subscriber/unsubscribe para dar de baja un correo por programación — por ejemplo, desde una página de baja personalizada o un flujo en el backend.

curl -X POST https://api.clerk.io/v2/subscriber/unsubscribe \
  -H 'Content-Type: application/json' \
  -d '{
    "key": "your-public-api-key",
    "email": "customer@example.com"
  }'

Esto da de baja globalmente. Para darte de baja solo de una lista específica, incluye list_id:

curl -X POST https://api.clerk.io/v2/subscriber/unsubscribe \
  -H 'Content-Type: application/json' \
  -d '{
    "key": "your-public-api-key",
    "email": "customer@example.com",
    "list_id": "FSY27248"
  }'

Lee la referencia completa en docs.clerk.io/reference/subscribersunsubscribe.