Setup

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

Estos pasos solo aplican cuando quieres enviar emails 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 emails que ya envías con Klaviyo, Mailchimp u otra plataforma, nada de esto es necesario. Ve directamente a Embeds.

Configuración #

Estos pasos autorizan a Clerk.io para enviar emails desde tu dominio, le dan una lista de destinatarios y preparan el diseño de tu primer email. Necesitarás acceso a my.clerk.io, al proveedor de alojamiento de tu dominio y a tu plataforma de email actual.

Estado de la Configuración #

La pestaña Estado de la configuración en Email > Configuration > Setup Status te da una visión general en vivo sobre si tu configuración de email está completa y saludable.

Cada elemento de la lista muestra un punto de color — verde significa que todo está en orden, rojo indica que falta algo o que hay un error, y naranja señala una advertencia que vale la pena investigar. El propio encabezado de la pestaña muestra un recuento de los pasos obligatorios que faltan para que puedas ver de un vistazo si se requiere alguna acción.

Las verificaciones se agrupan en tres áreas:

Configuración abarca los requisitos básicos de puesta en marcha — si tu tienda y empresa están habilitadas, si el acceso para enviar emails está activo, qué dominio remitente está configurado, cuántos destinatarios suscritos hay disponibles, y si todos tus pasos activos de flujo tienen diseños de email asignados.

Seguimiento en sitio muestra si el rastreo de visitantes está funcionando y cuántos visitantes o carritos se han vinculado a una dirección de email en los últimos siete días. Los números bajos aquí suelen indicar que falta una recopilación de emails.

Flujos y envíos muestra si los flujos activos están configurados, cuántos eventos de flujo están pendientes y cuántos emails se han enviado recientemente, y si la cola de envíos está saludable. Si los emails no se envían como se espera, esta sección es el primer lugar que debes revisar.

Configuración de DNS #

La configuración DNS es obligatoria para todas las tiendas que usan Clerk.io Email. Antes de que Clerk.io pueda enviar cualquier email, debes autenticar tu dominio remitente añadiendo registros DNS en el proveedor de tu dominio.

Piénsalo así: cuando Clerk.io envía un email en tu nombre, debe demostrar al servidor de correo del destinatario que está realmente autorizado para hacerlo. Sin esa prueba, el email se ve sospechoso — como alguien que afirma ser tú sin ninguna identificación. A los servidores de correo no les gusta eso, y rechazarán el email o lo enviarán directamente al spam.

Los registros DNS son la manera de otorgar esa autorización. Añades algunos registros en la configuración de tu dominio (donde gestionas tu dominio — Route 53, Cloudflare, GoDaddy, etc.), y esos registros le dicen a Internet: “Clerk.io puede enviar emails como nosotros”.

Hay tres tipos de registros que debes añadir:

• SPF — Declara qué servicios están autorizados para enviar emails desde tu dominio.
• DKIM — Añade una firma criptográfica a los emails salientes para que los destinatarios puedan verificar que realmente provienen de ti y no se han alterado en tránsito.
• CNAME — Se utiliza para rastrear 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, por ejemplo, include:mailgun.org en él 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 de hosting.

Una vez que hayas introducido tu Email Remitente y Nombre Remitente, Clerk.io generará los valores exactos de los registros que debes añadir. Después de agregarlos en tu proveedor, vuelve a Email > Configuration > DNS Records y haz clic en Verify Now. Clerk.io comprobará que los tres registros estén configurados correctamente.

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 email que ha dado su consentimiento para recibir marketing por email. Clerk.io necesita saber quiénes son estas personas 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 una lista completa de suscriptores desde el primer día.

Para configurar una sincronización, ve a Settings > Integrations y conecta tu plataforma de email. Una vez se guarde la integración, ve a Email > Configuration > Sync Subscribers y activa el interruptor junto a la integración que deseas usar.

Para encontrar la guía de instalación para tu plataforma de email, búscala en el menú de integraciones de la barra lateral y sigue su guía de sincronización de datos.

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

Personalización #

La pestaña Personalización en Email > Configuration > Personalization te permite configurar un logo de tienda que Clerk.io usará en tus diseños de email.

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

El logo configurado aquí se usa como logo predeterminado en los diseños de email hechos con Clerk.io. Si creas tus diseños manualmente, igual puedes referenciarlo usando la URL de tu logo en el marcado de tu plantilla.

Diseño de Email #

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

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

Para un control más avanzado, el editor MJML incorporado de Clerk.io te permite escribir diseños como marcado estructurado. MJML se compila a HTML que se muestra de forma uniforme en Gmail, Outlook y Apple Mail. Consulta la guía de diseños MJML para una explicación completa y ejemplos.

Todos los diseños de email en Clerk.io son responsivos — se adaptan automáticamente a cualquier tamaño de pantalla, así que se ven bien en escritorio, tablet y móvil sin trabajo adicional.

Si deseas incluir imágenes estáticas en tus diseños — banners, logos, cabeceras de temporada — puedes alojarlas directamente en los servidores de Clerk.io usando la Media Library. Las imágenes subidas ahí reciben una referencia de la forma {{ media.your-image }} que puedes insertar en cualquier diseño. También puedes adjuntar una imagen directamente en Ask Clerk.io y pedirle que la suba y la use en el diseño que crea — él se ocupará de todo.

Enlaces para Darse de Baja #

Todo email de marketing debe incluir un modo para que los destinatarios se den de baja. Cómo hacerlo depende de cómo estés enviando los emails.

Usando una plataforma externa (Klaviyo, Mailchimp, etc.) — Sigue usando el enlace para darse de baja de tu plataforma actual. Ella gestiona la baja y mantiene la lista de suscriptores en sincronía de forma automática.

Enviando todos los emails a través de Clerk.io — Añade el enlace para darse de baja de Clerk.io a tu diseño. Si usas Ask Clerk.io para crear el email, solo tienes que decirle que incluya un enlace para darse de baja y lo hará por ti.

Para diseños hechos manualmente, usa el siguiente enlace. La variable {{ email }} se reemplaza por la dirección del destinatario al momento del envío. Reemplaza YOUR_PUBLIC_API_KEY con la clave pública encontrada en 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 propia página de confirmación después de darse de 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 Sitio #

Estos pasos requieren cambios en tu tienda y desbloquean la personalización, los flujos automáticos y Carrito Abandonado. No todos son necesarios para cada tienda — los que necesitas dependen de lo que quieres enviar.

Recopilación de Emails #

Requerido para todos los flujos automáticos — abandono de navegación, serie de bienvenida y Carrito Abandonado.

Cada visitante de tu sitio recibe un ID de visitante. Clerk.io usa este ID para rastrear lo que ve, busca y añade a su carrito.

El problema es que ese ID comienza siendo anónimo — Clerk.io no puede enviarle emails a ese visitante a menos que sepa su dirección. La recopilación de emails es el paso que conecta ambos datos.

Una vez que el email de un visitante se vincula a su ID de visitante, todo su comportamiento de sesión puede usarse para activar y personalizar emails.

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

Cuando el visitante escribe su email — Si un visitante introduce su email en cualquier lugar del sitio (campo de pago, suscripción a newsletter, formulario de login), Clerk.io puede detectarlo y registrarlo automáticamente. Esto se gestiona mediante la función collect_email, que puede activarse en la configuración de Clerk.js o desde Developers > Clerk.js Config en my.clerk.io.

Cuando un cliente ya está autenticado — Si un cliente vuelve a tu sitio ya autenticado, su email está disponible de inmediato. En este caso, un pequeño script en cada página puede registrar su email una vez por sesión, haciendo la conexión sin que el cliente deba escribir nada.

Seguimiento de Carrito #

Requerido para Carrito Abandonado.

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

El seguimiento de carrito debe invocarse cada vez que el carrito cambie: cuando se añade o elimina un producto, o cuando el carrito se actualiza por completo. Sin esto, el flujo de Carrito Abandonado no tiene datos de productos con los que trabajar.

Formularios de Suscripción #

Opcional — solo necesario si recopilas nuevos registros directamente a través de Clerk.io.

Si usas Clerk.io como tu principal plataforma de email, necesitas una manera para que nuevos visitantes se suscriban en tu sitio. Así tu lista de suscriptores sigue creciendo dentro de Clerk.io sin depender de una plataforma externa.

Si prefieres seguir recopilando suscriptores en Klaviyo u otra plataforma, mantén sincronizada la lista constantemente para que los nuevos registros se importen periódicamente a Clerk.io. En ese caso, no necesitas formularios de suscripción — puedes saltarte esta sección.

Consulta la sección de implementación más abajo para un formulario de registro listo para usar.

Con Clerk.js #

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

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, actívalo en tu configuración de Clerk.js. Clerk.js monitorizará todos los campos de email en la página y registrará la dirección automáticamente cuando el visitante la escriba.

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

Funciona con campos de pago, formularios de newsletter, logins y cualquier otro <input type="email"> de la página.

Clientes autenticados #

Si un cliente ya está autenticado al entrar en el sitio, registra su email una vez por sesión. La implementación exacta depende de tu plataforma, pero lo importante es usar Clerk('call', 'log/email') para enviar la dirección de email a Clerk.io tan pronto como se pueda identificar al usuario en la sesión.

Aquí tienes un ejemplo usando 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');
}

Reemplaza CUSTOMER_EMAIL con la dirección real de email de tu plataforma. Asegúrate de solo incluir el script en páginas donde esté disponible un email — omítelo completamente para visitantes invitados.

Seguimiento de Carrito #

Si usas el plugin de Magento 1, Magento 2, PrestaShop o WooCommerce, el seguimiento de carrito se gestiona automáticamente — no necesitas código extra.

Para todas las demás configuraciones, notifica a Clerk.io el contenido actual del carrito usando el método set. Llámalo cada vez que el carrito cambie, pasando la lista de IDs de producto actuales. Cada llamada se asocia automáticamente a la sesión de visitante correspondiente.

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

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

Formularios de Suscripción #

Aquí tienes un formulario de registro listo para que lo agregues en tu sitio — footer, home, popup. Estílalo como prefieras.

<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 concreta en vez de globalmente, añade list_id a la llamada. Los IDs de lista se encuentran en Email > Subscribers > Lists.

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

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

Con la API #

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

Cuando uses la API, eres responsable de generar y mantener el ID de visitante para cada sesión. Consulta la guía de seguimiento para saber cómo hacerlo.

Registrar Email #

Usa log/email para asociar un ID de visitante con una dirección de email. Haz la llamada una vez por sesión cuando esté disponible el email — tanto cuando el cliente inicia sesión activamente como cuando vuelve ya autenticado.

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"
  }'

Reemplaza SESSION_VISITOR_ID por el ID de visitante de la sesión actual. Omite la llamada completamente para visitantes que no tienen email conocido.

Seguimiento de Carrito #

Usa log/cart/update para establecer el carrito en su estado actual. Haz la llamada cada vez que el carrito cambie, pasando la lista completa de productos actuales 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 vez de (o además de) visitor si la dirección de email ya es conocida en el momento de la llamada.

Formularios de Suscripción #

Usa subscriber/subscribe para añadir una dirección de email como suscriptor cuando un visitante se registre 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 concreta, 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"
  }'

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

Darse de Baja #

Usa subscriber/unsubscribe para dar de baja una dirección de email de forma programática — por ejemplo, desde una página personalizada de baja o un flujo automatizado de 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 darse de baja solo de una lista concreta, 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"
  }'

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