Guía para configurar el widget de puntaje Sendmarc

Este artículo provee las instrucciones para crear y configurar el widget de puntaje Sendmarc en su sitio web.

Secciones en el artículo:

• Configurar el widget de puntaje
• Ver los envíos del widget
• Configuración del Widget
• Mostrar los resultados en una nueva página

Configurar el widget de puntaje

Aquí se listan los pasos necesarios:

• Paso 1: Obtenga su identificador único o token.
• Paso 2: Incluya el código embebido en su sitio web.
• Paso 3: Cree el formulario.

Paso 1: Obtenga su identificador único o token

El widget tiene un código de identificación único (widget token) que está enlazado a su cuenta en el portal de socios de Sendmarc (Partner Portal) y al sitio web donde será incrustado. Todas las solicitudes a través de su sitio web estarán disponibles en el portal de socios y serán simultáneamente enviados por correo electrónico a la casilla que usted especifique. 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, por favor siga estos 5 pasos:

NB: Inicie sesión en su cuenta en el partner portal.

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

1.2. Elija el socio que será vinculado con el widget y haga clic en el botón de edición a la derecha:

1.3. Clic en “Widget” y una ventana modal aparecerá a la derecha. Haga clic en el enlace: “Create One?”:

1.4. Agregue el dominio y las direcciones de correo electrónico donde le gustaría recibir las notificaciones. Clic en “+” luego de cada entrada para capturar la información suministrada. Puede agregar más de una dirección de correo electrónico. Clic en "Save" para guardar:

1.5. Su token aparecerá arriba en la misma ventana modal. Puede copiar y pegar desde aquí cuando configure el widget en su sitio web.  Podrá encontrar el token en esta sección siempre que lo necesite.

Paso 2: Incluya el código en su sitio web

Una vez que tenga su código token único, puede incluir el código del widget en su sitio web. El código se brinda a continuación: 

Copie este código y péguelo en la página de su sitio web donde desee mostrarlo. Reemplace el texto WIDGET-IDENTIFIER-GOES-HERE con su identificador/token. Puede además, cambiar la variable config para cambiar la forma en la que desea que el widget se muestre en su sitio web, además que puede hacerlo coincidir con el estilo y apariencia de este. 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: Cree 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. Puede 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> 

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 cual puede accederse 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 su sitio web. Esas opciones se brindan a continuación:

Estilizar

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 definen las opciones para manejar los desencadenadores cuando el puntaje de dominio se encuentra por debajo de cierto valor o umbral.

Opciones de visualización

placement: 'widget-scoring-result'

Ejemplo de configuración del Widget

A continuación se encuentra un ejemplo de cómo podría verse una dada configuración:

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

Mostrar los resultados en una nueva página

El widget tabmién le permite mostrar los resultados del puntaje en una página diferente. Para esto, siga las instrucciones a continuación:

Página inicial:

1. En la etiqueta del formulario, cambie el modo de envío de POST a GET, y establezca el parámetro de acción a la URL de la página que desee donde desee mostrar los resultados.
2. Establezca el nombre del campo de entrada a: "domain_score";
3. Establezca la llave 'placement' en la configuración del widget con un nombre único, como "widget-results". Estará utilizando este en la página de resultados.
4. Elimine el id="sendmarc-widget-form" de la etiqueta del formulario para que el código javascript no intercepte la llamada y el formulario pueda enviar correctamente a la nueva página.

A continuación se muestra un ejemplo básico del formulario:

<form method="GET" action="/score-results"> 
<input type="email" class="form-control" name="domain_score" placeholder="you@example.com">
<button type="submit"> Check score </button
</form>

Página de resultados:

1. Incluya el código javascript del widget en la página de resultados de puntaje. NOTA: solo se necesita el código en javascript en la página de resultados - no hace falta incluir una forma.
2. Agregue un div a la página de resultados de puntaje en la cual se mostrará su forma. Establezca el id como el nombre único que configuró en su configuración de widget, por ejemplo, "widget-results".

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

Texto de ejemplo a usar en la página del puntaje

Use la página de Sendmarc https://sendmarc.com/know-your-score como ejemplo de diseño y estilo para la página de puntaje. 

Texto de introducción

"Entendiendo su puntaje"

Todos estamos en riesgo de recibir correo de remitentes fraudulentos. ¿Cómo medimos la seguridad de su dominio?

Sendmarc ha desarrollado un algoritmo que puntúa la exposición de una organización a actividades fraudulentas por correo electrónico como la suplantación de identidad, y el riesgo que representa el estado de su dominio para la ciberseguridad de la compañía.

Un puntaje desde 0 hasta 5 se le asigna a la organización.