Guide to Building Learning Moments

The guide details how to embed interactive learning moments in HTML phishing templates using three key data attributes—data-step to order steps, data-intro to display instructional text, and data-hint to provide additional information—illustrated with an example and a starter template for creating custom simulated phishing emails in the Phin app.

Building Learning Moments in HTML

This guide explains how to build learning moments within an HTML file to create custom phishing templates tailored to your audience.

Note: This guide assumes a novice-level understanding of HTML and HTML attributes.

Learning moments consist of three components:

1.data-step: Syntax is data-step="[insert_value]". The value defines the step in the learning moment journey. For example, the first learning moment should have data-step="1". Steps are typically ordered top-to-bottom for a natural reading progression.
2.data-intro: Syntax is data-intro="[insert_value]". This value is the information shown to the user at this step.
3.data-hint: Syntax is data-hint="[insert_value]". This value usually matches the data-intro, but can provide additional or alternative information to elaborate on the point.

Note: Completion of a learning moment requires the end-user to step through all data-intros and click the "Done" button. Reviewing all data-hints is not required.

Example Usage

Suppose you want to highlight a simulated malicious "vanity" URL. You would use the data attributes as follows:

<a href="{{action_url}}" data-step="1" data-intro="This is a suspicious link." data-hint="Look for subtle misspellings or unusual domains.">Click here</a>

This would present the user with a learning moment when they interact with the link, guiding them through the steps you've defined.

Starter Template

Below is a starter HTML template you can use as a base for developing a simulated phishing email. This template can be uploaded to the Phin app via the Template Builder.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
  <title>Replace Title</title>
</head>
<body style="font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; background-color: #ffffff;">
  <div style="display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all;">
    Replace with preview text.
  </div>
  <table role="presentation" align="center" width="100%" border="0" cellspacing="0" cellpadding="0" style="max-width: 600px; background-color:#FFFFFF;">
    <tr>
      <td align="center" style="vertical-align:top; padding:0px; max-width:600px; background-color:#FFFFFF;">
        <table role="presentation" align="center" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#FFFFFF;">
          <!-- Start of Content -->
          <tr>
            <td align="center" style="vertical-align:top; background-color: #ffffff; padding: 20px;">
              Replace content.
            </td>
          </tr>
          <!--End of Content -->
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

You can copy and paste this code into a text editor and modify it to suit your needs for simulated phishing campaigns.