ChannelSight "Where To Buy" button on product pages

Site URL: https://esatto.house/

Site URL: https://esatto.house/
Template: Squarespace 7.1

Hi, I currently have ChannelSight's "Where to Buy" button displaying below each of my product descriptions as a "Buy Now" button. Eg: https://esatto.house/refrigeration/p/84l-upright-freezer-stainless-steel-euf92s

To achieve this, I added the following ChannelSight JS Reference in the Header section of the Code Injection:
 

<script src="https://cscoreproweustor.blob.core.windows.net/widget/scripts/cswidget.loader.js" defer></script>

Since I don't want the button to display below in the Additional Info section of the product page but below the product description. I've added the widget container to the end of the product description manually by added it to the end of the Description field of a CSV file and importing it via Commerce/Inventory:

<button class="cswidget" data-asset-id="2088" data-product-sku="<!–– SKU-NUMBER-HERE ––>" >Buy Now</button>

This method has worked for me initially but it's very manual and every time I make a change to the product description, I'll have to re-add the widget container and reupload the CSV file.

I was wondering if it is possible to inject this widget to each product within a Store via the Store's Page Header Code Injection and <!–– SKU-NUMBER-HERE ––> is pulled from product's SKU field?

Yes, it would be possible to custom code this with JavaScript, assuming that the products don't have variants.

You'd do this by creating a new element and adding it to the required on the the product detail page (PDP) when the page has been loaded. The SKU can then be pulled from the page data (checking for errors and null values) and inserted into the new element. This will create the button automatically so that you don't need to add it manually to each page.

Hi again,

We had someone write some Javascript using your advice above and the button is indeed getting loaded automatically now but it isn't loading the widget from ChannelSight.

These are loaded into the Header via Code Injection

<!--load channelsight loader-->
<script src="https://cdn.channelsight.com/widget/scripts/cswidget.loader.js" defer></script>

<!--load jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

Here is the Javascript written on the Store's Header via Advance/Page Header Code Injection:

<script>
jQuery(document).ready(function (){
  var pathname = window.location.pathname;
jQuery.ajax({
  url: pathname + "?format=json-pretty",
  dataType: "json",
  success: function (data) {
    sku = data.item.structuredContent.variants[0].sku;
console.log(sku);
  }
});  
setTimeout(function(){
  jQuery('.ProductItem-details-excerpt').append('<p><button class="cswidget sqs-block-button-element--small sqs-button-element--tertiary sqs-block-button-element cs-unloaded cswidget-root _xmynltb3v" data-asset-id="2088" data-product-sku="'+sku+'" type="button" data-instanceid="_xmynltb3v">Buy Now</button></p>')
  
}, 1000);
})

</script>

If you look at our test page: https://esatto.house/test/p/7kg-heat-pump-dryer, the top Buy Now button is the one I've placed by adding the code via a .csv file which correctly loads the ChannelSight widget.

The below Buy Now button is the one loaded by Javascript referencing the SKU of the product but it doesn't load the ChannelSight widget. Is there something I can do for the button to load the ChannelSight widget via Javascript?

Thanks in advance.