Sendmarc partner scoring widget setup guide

This article provides instructions on how to create and setup the Sendmarc Partner Scoring Widget on your website.

 Sections in the article:

• Set up your scoring widget
• Viewing widget submissions
• Widget configuration options
• Widget configuration defaults
• Showing the Score on a new page
• Example text for the score results

Set up your scoring widget

Here are the steps needed:

• Step 1: Get your unique widget identifier/token
• Step 2: Embed the script code on your website
• Step 3: Create the form

Step 1: Get your unique widget identifier/token

Your widget has a unique identifier code (widget token) that is tied into your account on the Partner Portal and to the website that you choose to embed it on. All submissions will be available on the Partner Portal and each submission will also be sent via an email notification to an email address or addresses that you specify. For this reason, you need to set up your widget token first, which will look something like this:

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

To create your widget token, follow these 5 steps below:

NB: Log into your account on the partner portal.

1.1. Go to the “Partners” tab located on the left navigation.

1.2. Choose which partner you would like to create a widget for and click the pencil (edit) icon on the right:

1.3. Click the “Widget” button and a modal will open on the right of the screen. Select the “Create One?” link:

1.4. Add the relevant domain name in the text field and the email address/es where you would like the submission notifications to be sent to. Click the “+” (add) icon after each entry to capture the data. You can add more than one email address for notifications. Click save.

1.5. Your widget token will appear above on the same modal. You can copy and paste this from here to use when setting up your scoring widget on a website or landing page. You can always find the token here if needed.

Step 2: Embed the widget script code on your website

Once you have your unique widget token, you can then embed the widget code in your site. The widget script code is given below. 

Copy this code and paste it in the page on your site where you wish the widget to appear. Replace the text WIDGET-IDENTIFIER-GOES-HERE with your unique widget identifier/token. You can also change the config variable to change how you wish the widget to show on your site, as well as to match the styling of your site. The configuration options are detailed at the end of this article.

<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'));

// 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',
          },
      warning: {
          primary: '#ca8a04',
          },
      danger: {
          primary: '#dc2626',
          },
    },
  call_to_action: {
      signup_enabled:true,
      threshold: 4,
  },
}

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

</script>

Step 3: Create the form

The next step is to create the form on the same page as the code from Step 2. This is the form that will accept an email address and provide a form submit button. You can use the code below.

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

If you would like to collect additional contact information, you can do so by using additional input fields. The names of the fields that can store and then pass through to you via email are :

1. first_name,
2. last_name,
3. contact_number,
4. company_name,

A form with all of these could look like this:

<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">
   <button type="submit"> Check score </button>
</form> 

Viewing widget submissions

All submissions through the widget are 

1. sent via email to the recipients provided in Step 1; and
2. available to view on Sendmarc's Partner Portal, which can be accessed at partner.sendmarc.com

Widget configuration options

There are numerous ways to style the widget to fit in with the design of your website. These configurations need to be defined in the config section of the script. The options are given below.

Placement

The placement object defines the placement of results when form is submitted.

placement: 'widget-scoring-result'

Styling

The styles object defines the colours used for the low, moderate and high risk graph on the results page. 

Call to action

The call to action object defines the options on how to handle the button on results page when domain score falls below a certain threshold.

Widget language and text

The widget text can be customised to follow the language and tone of your website.

Widget configuration example 

Below is an example of what a custom configuration can look like where the results are appended to the current form and the call-to-action redirects to a contact us page with customized language settings:

config = {
 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', 
   threshold: 4,
   classes: 'btn-primary',
 },
 language: {
     analysis_header: 'Domain analysis results',
     loading_text: 'Checking your score...',
     legacy_score_blurb_danger: 'There is little or no protection at all of your domain, with the highest probability that your domain and therefore your company name may be hijacked by criminals and used in fraudulent email activities.',
     legacy_score_blurb_warning: 'Your domain configuration requires one more change. Deliverability of rightful email may be affected by being sent to spam or junk folders and savvy criminals could impersonate your domain.',
     legacy_score_blurb_success: 'Your company has a very low risk of your name being used by criminals in fraudulent email activities. Domains with a score of 5 are 100% DMARC compliant and are protected from impersonation and phishing attacks.',
   },
}

Widget configuration defaults

Should configs not be defined the following defaults will apply.

Placement

Styles

Language

Showing the score results on a new page

The widget also allows you to show the results of the scoring on a separate page. To do this, you need to do the following:

Starting page:

1. In the form tag, change the form submission method from POST to GET, and set the action parameter to the url of the page you wish to show the results on;
2. Set the name of the input field to "domain_score";
3. Set the 'placement' key on the widget config to a unique name, such as "widget-results". You will be using this on the results page.
4. Remove the id="sendmarc-widget-form" from the form tag so that the javascript doesn't intercept the call and the form can then post correctly to the new page.

Here is a basic example of the form:

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

Results Page:

1. Include the widget javascript on the score results page. NOTE: you only need the javascript on the results page - you do not need to include a form.
2. Add a div to your score results page that the form will be shown in. Set the id to the unique name you set in your widget config, i.e. "widget-results".

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

Example text to use on the scoring page

Use the Sendmarc https://sendmarc.com/know-your-score page as an example of what a fully styled example page could look like.

Example text used with Widget Form: