Parameters copied to the clipboard

Param  Default  Options  Description
  SP ●  mon              css Style Prefix
  IS                     Image Style (eg img-fluid) to add. 
  DI     Y      Y or N   Display Monitor Cover image
  DN     5      0 to 5   Display Number of monitor items
  MC ♦   AS              Monitor Content
  ID     Y      Y or N   Item Detail displayed
  IB     Y      Y or N   Include Bullets on article list
  JSH    N     N,D or C  JSH style (N=No, D=Detailed, C=Condensed)
 JSHDT   Y      Y or N   Display JSH style Title

     ● Allows you to have multiple versions of this widget,
       each with their own associated CSS, on a single web page

     ♦ AS (All Stories), PE (CS Perspective), CO (Commentary),
       VW (View), CU (Culture), HF (Home Forum)

Javascript code copied to the clipboard

<head>
...
<script type='text/javascript' src='https://christianscience.org.uk/rwidgets/js/tmwidgets.js'></script>
<script type='text/javascript'>
getWidgetData('monitors','DN=2','MONwidget');
</script>
...
</head>
<body>
...
<div id='MONwidget'></div>
...
</body>

Notes
● The getWidgetData (javascript function) has three elements
  1=Widget reference, 2=parameters and 3=div id where widget content is to be displayed
● Put javascript references in page head section
● Put referenced widget div in page body section for content display
● There is no javascript dependency on jQuery

Styling example copied to the clipboard

<style type='text/css'>
  .monTopLogo{padding-bottom:10px;}
  .monHdrImage{display:block;margin-left:auto;margin-right:auto;}
  .monItem{font-family:Arial;color:#000;padding:10px 0;width:100%;}
  .monImage{float:left;padding-right:10px;width:25%;}
  .monTitle{font-size:17px;padding:10px 0;line-height:19px;}
  .monInfo{font-size:14px;}
  .monSummary{font-size:14px;padding-bottom:10px;}
  .monclear{clear:both;}
  ul.monBlt{list-style-type:square;list-style-position:outside;margin:0;padding:10px;}
  ul.monBlt li{padding:0 0 5px 0;font-size:16px;}
  a.monLink{text-decoration:none;color:#000099;}
  a.monLink:hover,a.monLink:active{text-decoration:none;color:#000;}
/* Following is used only by the JSH option */
  .monWrapper{padding:10px;border:1px solid #69c;margin-bottom:10px;overflow:hidden;}
  .monCover{margin-right:10px;float:left;}
  .monCover img{border:1px solid #000;width:130px;}
  .monDescription{font-family:Arial;line-height:22px;}
  .monHeader{font-size:20px;padding-bottom:5px;font-weight:bold;}
  .monHeader a,.monMore a{text-decoration:none;cursor:pointer;color:#000099;}
  .monHeader a:hover,.monMore a:hover{color:#000;}
  .monQuote{font-size:12px;font-style:italic;line-height:16px;padding-bottom:5px;}
  .monLast{font-size:16px;padding-bottom:5px;}
  a.monMore{text-decoration:none;cursor:pointer;color:#000099;}
  a.monMore:hover{color:#000;text-decoration:none;}
</style>