This article provides instructions on how to create and setup the Sendmarc Partner Scoring Widget, an embedded piece of code that so that you can help your customers score their domains.
Here are the steps needed:
- Step 1: Get your unique widget identifier
- Step 2: Embed the script code on your website
- Step 3: Create the form
Step 1: Get your unique widget identifier
Your widget has a unique identifier code that is ties it to 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, we need the following information from you:
- The website URL that the widget will be embedded on
- The recipient/s that will be receiving the widget submissions via email
Please contact your Partner Manager and supply them with this info, or send an email to partner.managers@sendmarc.com. They will then provide you with an widget identifier that looks like this:
Step 2: Embed the widget script code on your website
Once you have the widget unique, you will then have everything you need to 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. You can also replace the CONFIG-OPTIONS-HERE with any of the configuration options 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')); const params = new URLSearchParams(window.location.search); smConfig('WIDGET-IDENTIFIER-GOES-HERE', {CONFIG-OPTIONS-HERE}); </script>
You can use the scoring page on the Sendmarc site as an example of the kind of content that works for a page like this. Example text is given at the end of this article.
Step 3: Create the form
<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>
NOTE: keep the form id as shown above.
Viewing widget submissions
All submissions through the widget are
- sent via email to the recipients provided in Step 1; and
- available to view on Sendmarc's Partner Portal, which can be accessed at partner.sendmarc.com
Widget Configuration
There are numerous ways to style the widget to fit in with the design of your website. These options are given below.
All config options should be added to the script code from Step 2 where CONFIG-OPTIONS-HERE appears.
Styling
The styles object defines the colors and icons to be used for success, warning, and danger notifications.
Option | Description |
success.primary | The primary color for success notifications. This color is used for the background color of the notification. |
success.secondary | The secondary color for success notifications. This color is used for the border color of the notification. |
success.icon | The icon to use for success notifications. |
warning.primary | The primary color for warning notifications. This color is used for the background color of the notification. |
warning.secondary | The secondary color for warning notifications. This color is used for the border color of the notification. |
warning.icon | The icon to use for warning notifications. |
danger.primary | The primary color for danger notifications. This color is used for the background color of the notification. |
danger.secondary | The secondary color for danger notifications. This color is used for the border color of the notification. |
danger.icon | The icon to use for danger notifications. |
Call to action
The call to object defines the options to handle domain score falls below a certain threshold.
Option | Description |
title | A string that represents the title of the call-to-action button that will be displayed to the user. |
href | A string that represents the URL to which the call-to-action button will navigate when clicked. |
threshold | An integer that represents the email score threshold. If the domain email score falls below this threshold, the call-to-action button will be shown. The threshold is a score out of 5 |
classes | A string that represents the CSS classes to be applied to the call-to-action button. |
Widget Placement options
Option | Description |
placement | This option specifies the placement of the widget scoring results in the form. It can have one of the following values: model: The widget scoring results will be displayed as a modal dialog on top of the form. replace: The widget scoring results will replace the form entirely, taking up the same space. append: The widget scoring results will be inserted under the form, |
modelWidth | This option specifies the width of the widget when it is displayed as a modal dialog |
target | This option specifies the div that contains the form to submit the widget submission |
Widget Example Configuration
Below is an example of how a configuration might look:
{ target: 'sendmarc-widget-form', placement: 'model', 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', }, }
Example text to use on the scoring page
Use the Sendmarc https://sendmarc.com/know-your-score/
Intro Text
"Understanding your score"
Everyone is at risk from email fraudsters. How do we score your domain safety?
Sendmarc has developed an algorithm that rates an organisation’s exposure to fraudulent email activities such as impersonation, phishing and spoofing, and the risk their current domain poses to the cyber security of their company.
A score between 0 and 5 is assigned to an organisation.
5 | A score of five (5) indicates a company has a very low risk of their 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. |
4 | A score of four (4) 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. |
0-3 | A score of three (3) or less indicates no protection at all of their name, and the highest probability that their name will be hijacked by criminals and used in fraudulent email activities. |