时间戳

首页 > 解决方案 > 我如何在 Angular 应用程序中使用 TawkTo JS API？

angular - 我如何在 Angular 应用程序中使用 TawkTo JS API？

问题描述

在 Angular 应用程序中使用 TawkTo JS API 似乎有点棘手。如何使用它 ？

标签： angulartawk.to

解决方案

我如何继续在我的 Angular 应用程序中使用 TawkTO？

1 - 在 index.html 头部，我导入 Tawk_To

  <script type="text/javascript">var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();(function(){var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];s1.async=true;s1.src='https://embed.tawk.to/xxxxxx'; s1.charset='UTF-8';s1.setAttribute('crossorigin','*');s0.parentNode.insertBefore(s1,s0);})();</script>
  <script> var TAWK_TO_LOAD = 0; </script> // That variable helps to know if TawkTo already loaded

2 - 在 ProductGlobalFunctComponent 中。我到处都调用那个组件。它包含一些全局函数


declare var Tawk_API:any;
declare var TAWK_TO_LOAD:any;

/**@f_TAWKTO_manage Hide / Show TackTo With */
  f_TAWKTO_manage(){
    if(!Tawk_API){ console.log('Window TawkTo API NOT_EXIST  ...'); return; }
 
    var this_ = this; 
    if(!TAWK_TO_LOAD)
    {
      Tawk_API.onLoad =  function(){ TAWK_TO_LOAD++; this_.f_TAWKTO_showhide();  };
    } else {
      this_.f_TAWKTO_showhide();
    }
  }
  /**@f_TAWKTO_showhide Show Hide Widget  */
  f_TAWKTO_showhide(){
    var hidden_on_pages = ['account/liveroom', 'account/b'];  // This Variable contains components where i would like to hide TAWK TO Widget 

   // Get Component Path
    var p = location.pathname.slice(1);  
    var p_arr = p.split('/');
    if( p_arr.length >=3 ){   p = (p_arr[0] +'/' + p_arr[1]);} 
    else if(p_arr.length  <= 2){    p = p_arr[0];   } 

    if(hidden_on_pages.indexOf(p) != -1)  
    {
      console.log('Hidding TAWK_TO  ...');
      Tawk_API.hideWidget();
      return;
    }
    console.log('Showing TAWK_TO  ...');
    Tawk_API.showWidget();    
  }

3- 我在要使用的组件中调用 ProductGlobalFunctComponent。

...
constructor(private productglobalfunc ProductGlobalFunctComponent ){}

ngAfterContentInit()
{
  this.productglobalfunc .f_TAWKTO_manage()
}
...


May it helps someone

推荐阅读