Sendmarc Partner Scoring Widget

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

 Sections in the article:

• Scoring Widget as a Lead Capture Tool
• 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

Scoring Widget as a Lead Capture Tool

The scoring widget is a lead capture tool for Sendmarc Partners. This widget can be installed on your website to obtain leads which are stored in Sendmarc's Partner Portal.

The Scoring Widget gives a customer the ability to check their Domain Score by entering their email address. This takes them to the Domain Score Results page which contains a detailed explanation of the various ratings that make up the overall score for the domain used in their email.

From the results page, customers can be redirected to a contact page of your choice or to the Partner Customer Sign-up Flow.

We also allow the emailing of the detailed report directly to customer's inbox. When "Email Detailed Report" button is clicked it will open a separate request form to display all required fields to complete and receive the detailed report.

Check the widget configuration options to see how you can modify the widget to work for you.

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 = {
  version: '2',
  target: 'sendmarc-widget-form',
  placement: 'modal',
  styles: {
      success: {
          primary: '#16a34a',
          },
      warning: {
          primary: '#ca8a04',
          },
      danger: {
          primary: '#dc2626',
          },
    },
  call_to_action: {
      signup_enabled:true,
      title: 'Sign-up Now',
  },
}

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">
   <input type="checkbox" id="consent" name="consent">
   <label for="consent">Contact me regarding my score</label>
   <button type="submit"> Check score </button>
</form> 

We have included the option for a user to "consent" to being contacted about their score. If this is implemented, the user has to check the checkbox to consent to store and collect their personal information.

If the consent checkbox is implemented and it is unchecked, only the domain of the email address entered will be stored in the Partner Portal and the email notification will include a message that the customer has not consented to being contacted.

If the consent checkbox is not implemented, the user's email (along with any additional information captured in the form - see below) will be stored in the Partner Portal and emailed to the designated recipients. 

If you would like to collect additional contact information, you can do so by using additional input fields. Any fields visible (not hidden) to the user will be considered a required field to complete form submission. 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
5. seat_count
6. region

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

A form setup for Email Detailed Report 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" 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> 

All fields passed through, including hidden fields are considered required for the Email Detailed Report functionality. In the scenario where the widget form should only require the email field, you can make all other fields hidden and they will only be shown in the request form for the Email Detailed Report functionality. If they were shown and completed in the widget form they will be pre-populated. Remember to include the configuration to enable Email Detailed Report, see example below.

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.

Version

The version and detail objects allow you to specify the type of scoring and rating you'd prefer in the widget results.

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.

Email Detailed Report

The email_detailed_report object defines the options on how to handle the emailing of detailed domain report from the widget results page.

You can modify the fields that will appear in the Email Detailed Report request form by passing them in the widget form in Step 3 (see example), all fields passed through whether hidden or not will automatically become require fields to receive the detailed report.

The detailed email report request ignores consent indicated in the widget form. The blurb above the request form refers to consent being given by completing the form, keep this in mind if you are changing the copy. See example of configuration below.

Language and text

The widget text can be customised to follow the language and tone of your website. The language object defines the options on how text can be customised.

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 the option for use to Email Detailed Report as well as customized language settings:

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

Widget configuration defaults

Should configs not be defined the following defaults will apply.

Placement

Styles

Email Detailed Report

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">
  <input type="checkbox" id="consent" name="consent">
  <label for="consent">Contact me regarding my score</label>
  <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: