Adding the JavaScript Library

This code snippet will load Teak's widget functionality into your page by creating a <script> element that begins to download our JavaScript library asynchronously. It then initializes a globaltg object that allows you to queue commands that are executed as soon as the script finishes loading.

<script>
(function(w,d,c,n,s,p){
  w[n] = w[n] || function () { (w[n].q = w[n].q || []).push(arguments) }, w[n].l = +new Date();
  s = d.createElement(c), p = d.getElementsByTagName(c)[0];
  // handling the onerror event is optional, but recommended
  s.onerror = function () { console.log('optionally perform an action here if the script fails to load...'); };
  s.async = s.src = 'https://icw.protecht.com/client-widget.min.js?v=4';
  p.parentNode.insertBefore(s, p);
})(window,document,'script','tg');
</script>

Notes

For single-page applications, this code can be added dynamically to the <head> tag using JavaScript. Otherwise, add the code near the top of the <head> tag and before any other <script> or <style> tags.

Error Handling

In the event that the script fails to load for any reason (network failure, adblocker interception, etc), you may want to perform an action in response. You can listen for this scenario in the onerror event.

For example, in the case that the script fails to initialize on a multi-step checkout form, you may want to programmatically navigate to the next step in the process to prevent customer confusion.

Todo

Add Teak's JavaScript library as a <script> in your checkout page's <head> tag.
Handle the onerror event with logic that makes sense for your particular use case. (optional)