Guía para configurar el widget de puntaje Sendmarc

Este artículo incluye instrucciones para crear y configurar el widget de puntaje Sendmarc en tu sitio web.

Secciones en el artículo:

• El widget de puntaje como herramienta de captación de leads
• Configura tu widget de puntuación
• Ver los envíos del widget
• Opciones de configuración del widget
• Valores predeterminados de configuración del widget
• Mostrar la puntuación en una nueva página
• Texto de ejemplo utilizado en el formulario del widget

El widget de puntaje como herramienta de captación de leads

El widget de puntaje es una herramienta de captación de leads para los socios de Sendmarc. Este widget se puede instalar en tu sitio web para obtener leads que se almacenan en el Portal de Socios de Sendmarc.

El widget de puntaje le da a un cliente la posibilidad de consultar su puntaje de dominio (Domain Score) ingresando su dirección de correo electrónico. Esto los lleva a la página de Resultados de Domain Score, que contiene una explicación detallada de las distintas calificaciones que conforman la puntuación general del dominio usado en su correo.

Desde la página de resultados, los clientes pueden ser redirigidos a una página de contacto de tu elección o al flujo de registro para clientes de socios.

También permitimos enviar un reporte detallado directamente a la bandeja de entrada del cliente. Cuando se haga click en el botón "Email Detailed Report", se abrirá un formulario de solicitud separado para mostrar todos los campos necesarios que completar para recibirlo.

Revisa las opciones de configuración del widget para ver cómo puedes modificarlo para que funcione para ti.

Configurar el widget de puntaje

Aquí se listan los pasos necesarios:

• Paso 1: Obtén tu identificador único o token.
• Paso 2: Incluye el código embebido en su sitio web.
• Paso 3: Crea el formulario.

Paso 1: Obtén tu identificador único o token

El widget tiene un código de identificación único (widget token) que está enlazado a tu cuenta en el Portal de Socios de Sendmarc (Partner Portal) y al sitio web donde será incrustado. Todas las solicitudes a través de tu sitio web estarán disponibles en el portal y serán enviados simultáneamente por correo electrónico a la casilla que especifiques. Por esta razón, debe obtener el token primero, el cual luce de forma semejante a:

5de3f4d0-c5br-4f6d-bf14-98ab790b3df1

Para crear el token, sigue estos 5 pasos:

Importante: Inicia sesión en tu cuenta en el partner portal.

1.1. Ve a la sección “Partners” ubicada en el panel de navegación izquierdo.

1.2. Elige el socio que será vinculado con el widget y haz click en el botón de edición a la derecha:

1.3. Haz click en “Widget”. Enseguida aparecerá una ventana modal a la derecha. Haz click en el enlace: “Create One?”:

1.4. Agrega el dominio y las direcciones de correo electrónico donde te gustaría recibir las notificaciones. Luego, da click en “+” en cada entrada para capturar la información suministrada. Puedes agregar más de una dirección de correo electrónico. Haz click en "Save" para guardar:

1.5. Tu token aparecerá arriba en la misma ventana modal. Puedes copiar y pegar desde aquí cuando configures el widget en tu sitio web.  Encontrarás el token en esta sección siempre que lo necesites.

Paso 2: Incluye el código en tu sitio web

Una vez que tengas tu código token único, podrás incluir el código del widget en tu sitio web. El código se brinda a continuación: 

Copia este código y pégalo en la página de tu sitio web donde desees mostrarlo. Reemplaza el texto WIDGET-IDENTIFIER-GOES-HERE con tu identificador/token. También puedes cambiar la variable config para modificar la forma en la que deseas mostrar el widget en tu sitio web para hacerlo coincidir con el estilo y apariencia de tu web. Las opciones de configuración se detallan al final de este artículo.

<script>

(function(w, d, s, o, f, js, fjs) {

w['SendmarcWidget'] = o;

w[o] = w[o] || function() {

(w[o].q = w[o].q || []).push(arguments)

};

js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];

js.id = o;

js.src = f;

js.async = 1;

fjs.parentNode.insertBefore(js, fjs);

}(window, document, 'script', 'smConfig', 'https://madox.sendmarc.com/widget.js'));

const params = new URLSearchParams(window.location.search);


// The config below is an example that you can use to get started. Change any of the configuration options below to style the widget according to your site

config = {

  target: 'sendmarc-widget-form',
  placement: 'modal',
  modelWidth: '450px',
  styles: {
      success: {
          primary: '#16a34a',
          secondary: '#86efac',
          icon: 'M4.5 12.75l6 6 9-13.5',
          },
      warning: {
          primary: '#ca8a04',
          secondary: '#fde047',
          icon: 'M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5',
          },
       danger: {
           primary: '#dc2626',
          secondary: '#fca5a5',
          icon: 'M6 18L18 6M6 6l12 12',
          },
    },

  call_to_action: {
      title: 'Secure domain now ?',
      href: 'http://sendmarc.com',
      threshold: 4,
      classes: '_sm-call-to-action-button',
  },
}

smConfig('WIDGET-IDENTIFIER-GOES-HERE', config);

</script>

Paso 3: Crea el formulario

El siguiente paso es crear el formulario en la misma página que el código utilizado en el paso 2. Este es el formulario que aceptará una dirección de correo electrónico y proveerá un botón de envío de formulario. Puedes usar el código a continuación.

<form id="sendmarc-widget-form" novalidate>
<input type="email" class="form-control" name="email" placeholder="you@example.com">
<button type="submit"> Check score </button>
</form> 

Hemos incluido la opción para que un usuario "consienta" ser contactado sobre su puntaje. Si esta opción se implementa, el usuario debe marcar la casilla de verificación para dar su consentimiento para almacenar y recopilar su información personal.  

Si la casilla de consentimiento está implementada y no está marcada, solo se almacenará el dominio de la dirección de correo electrónico ingresada en el Portal de Socios, y la notificación por correo electrónico incluirá un mensaje indicando que el cliente no ha dado su consentimiento para ser contactado.  

Si la casilla de consentimiento no está implementada, el correo electrónico del usuario (junto con cualquier otra información adicional capturada en el formulario - ver más abajo) se almacenará en el Portal de Socios y se enviará por correo electrónico a los destinatarios designados.  

Si deseas recopilar información de contacto adicional, puedes hacerlo utilizando campos de entrada adicionales. Cualquier campo visible (no oculto) para el usuario se considerará obligatorio para completar el envío del formulario. Los nombres de los campos que pueden almacenarse y luego pasarse a través del correo electrónico son:

1. first_name
2. last_name
3. contact_number
4. company_name
5. seat_count
6. region

Un formulario con todos estos campos podría verse así:

<form id="sendmarc-widget-form" novalidate>
   <input type="email" name="email" placeholder="you@example.com">
   <input type="text" name="first_name" placeholder="First name">
   <input type="text" name="last_name" placeholder="Last name">
   <input type="text" name="contact_number" placeholder="Contact number">
   <input type="text" name="company_name" placeholder="Company name">
   <input type="text" name="seat_count" placeholder="Organization Size">
   <input type="text" name="region" placeholder="Region">
   <input type="checkbox" id="consent" name="consent">
   <label for="consent">Contact me regarding my score</label>
   <button type="submit"> Check score </button>
</form> 

Una configuración de formulario para el reporte detallado de correo electrónico (Email Detailed Report) podría verse así:

<form id="sendmarc-widget-form" novalidate>
<input type="email" name="email" placeholder="you@example.com">
<input type="text" name="first_name" placeholder="First name" hidden>
<input type="text" name="last_name" placeholder="Last name" hidden>
<input type="text" name="contact_number" placeholder="Contact number" hidden>
<input type="checkbox" id="consent" name="consent">
<label for="consent">Contact me regarding my score</label>
<button type="submit"> Check score </button>
</form> 

Todos los campos enviados, incluidos los campos ocultos, se consideran obligatorios para la funcionalidad del reporte detallado de correo. En el caso de que el formulario del widget solo deba requerir el campo de email, puedes ocultar todos los demás campos, y estos solo se mostrarán en el formulario de solicitud para la funcionalidad del reporte detallado de correo. Si fueron visibles y completados en el formulario del widget, se prellenarán automáticamente. Recuerda incluir la configuración para habilitar el reporte detallado de correo (consulta el ejemplo más abajo).

Ver los envíos del widget

Todos los envíos a través del widget:

1. Son enviados por correo electrónico a los destinatarios especificados en el paso 1, y
2. Están disponibles para visualizar en el Portal de Socios Sendmarc, al que puedes acceder en partner.sendmarc.com

Configuración del widget

Existen numerosas formas de estilizar el widget para que coincida con el estilo y diseño de tu sitio web. Esas opciones se brindan a continuación:

Versión

Los objetos de versión y detalle permiten especificar el tipo de puntaje y calificación que prefieres en los resultados del widget.

Opciones de visualización

placement: 'widget-scoring-result'

Estilo

Los objetos de estilos definen el color y los iconos que se utilizarán para notificaciones de tipo: éxito, advertencia y peligro.

Llamada a la acción

Los objetos de llamada a la acción (call_to_action) definen las opciones para manejar los desencadenadores cuando el puntaje de dominio se encuentra por debajo de cierto valor o umbral.

config = {
 version: '2',
 detail: 'false',
 target: 'sendmarc-widget-form',
 placement: 'appends',
 styles: {
   success: {
       primary: '#16a34a',
       },
   warning: {
       primary: '#ca8a04',
       },
   danger: {
       primary: '#dc2626',
       },
 },
 call_to_action: {
   signup_enabled:false,
   title: 'Contact us',
   href: 'https://www.example.com/contact-us',
   classes: 'btn-primary',
 },
 email_detailed_report: {
    enabled: false,
    title: 'Email Detailed Report',
    classes: '_sm-call-to-action-button',
    blurb: 'Please complete the form below to generate your detailed domain report and send it to your inbox. If you\'re at risk one of our experts will be in touch to assist.',
    submit_button_title: 'Email Report',
 },
 language: {
     analysis_header: 'Domain score for:',
     loading_text: 'Checking your score...',
     overall_blurb_danger: 'You don\'t have effective controls in place to protect your domain from impersonation and interception of email communication. This puts your brand and email recipients at risk of attacks, reduces trust, and can damage email deliverability.',
     overall_blurb_warning: 'You have some measures in place to protect recipients from malicious email from your domain. Attention should be paid to areas where controls can be improved. These measures build trust in your brand, protect recipients from attacks and help ensure email is delivered effectively.',
     overall_blurb_success: 'Email from your domain is highly secure from impersonation and interception and recipients will see your branding in communication. These measures build trust in your brand, protect recipients from attacks and help ensure email is delivered effectively.',
   },
}

<form method="GET" action="/score-results"> 
  <input type="email" name="domain_score" placeholder="you@example.com">
  <input type="checkbox" id="consent" name="consent">
  <label for="consent">Contact me regarding my score</label>
  <button type="submit"> Check score </button
</form>

<div id="widget-results">
  <p>This is where the widget will be placed</p>
</div>

Ejemplo de configuración del Widget

Usa la página de Sendmarc https://sendmarc.com/es/puntaje-seguridad-dominio/  como ejemplo de cómo podría lucir una página de ejemplo completamente estilizada.

Texto de ejemplo utilizado en el formulario del widget: