Link Widget (Convert Comma - Delimited URLs into distinct buttons)

cml.xml

<div class="url-list-wrapper-js"> 
  <div class="hidden target_parent_urls-output-js">
    {{urls}}
  </div>
  <div class="link-list-js">                
  </div>
</div>

css.css

.et-click-me {
  box-shadow: 0 0 3px 3px #f05921;
}

.et-clicked {
  box-shadow: 0 0 3px 3px #8cc63e;
}

javascript.js

require(['jquery-noconflict'], function(jQuery) {
    
  //Ensure MooTools is where it must be
  Window.implement('$', function(el, nc){
    return document.id(el, nc, this.document);
  });
  var $ = window.jQuery;
  // Use `$` in here.
  
  $('.target_parent_urls-output-js').each(function(){
    var urls = $(this).text().trim();
    
    if (urls != "No data available") 
    { 
      var urlbtns = ''
          urls = urls.split(",")
            urls.each(function(el, i){
              urlbtns += '<a target="_blank" class="btn et-click-me" href="http://www.'+el.trim()+'"><i class="icon-search"></i> Parent Website '+(i+1)+'</a><br><br>'
                });
      
      console.log(urlbtns);
      
      $(this).closest('.url-list-wrapper-js').find('.link-list-js').html(urlbtns);
    }
  });
  
  $(document).ready(function(){
    setTimeout(function(){
      $('.cml-table-row-title').each(function(){
        var h = $(this).parent('.cml-table-row').height();
        $(this).height(h);
      });  
    }, 200);
  });
  
  $(".et-click-me").click(function(){
    $(this).removeClass('et-click-me').addClass('et-clicked');
    // console.log(a);
  }) 
   
});

These bits of js, css, and cml will take a comma-delimited list of URLs and turn them into distinct and nice-looking buttons. This can also be modified to work with new-line-delimited lists by editing this line of the js:

urls = urls.split(",")

the script is set up to read from a source data column header titled "urls" right now, you can either modify your source data or the javascript to your preferences.