时间戳

首页 > 解决方案 > 如何在运行时在 Angular 中添加 Freshdesk 小部件？

angular - 如何在运行时在 Angular 中添加 Freshdesk 小部件？

问题描述

我正在使用 Angular 9 并尝试将 Freshdesk 小部件添加到我的应用程序中。该小部件的片段如下所示：

<script>
window.fwSettings={
'widget_id': <MY PERSONAL ID>,
'locale': 'en'
};
!function(){if("function"!=typeof window.FreshworksWidget){var n=function(){n.q.push(arguments)};n.q=[],window.FreshworksWidget=n}}()

如果我将代码段直接添加到我的index.html文件中，它可以正常工作，但我希望能够以编程方式将locale属性设置为当前用户选择的任何语言。

这意味着这个片段需要在运行时添加，但我不知道如何在 Angular 中添加它。

有任何想法吗？

标签： angularfreshdesk

解决方案

我解决了。在我app.component.ts加载我的应用程序区域设置后，我将代码段放入一个函数中：

loadFreshDesk(locale): void {
   window.fwSettings = {
      widget_id: MY_WIDGET_ID,
      locale: MY_FRESH_DESK_LOCALE,
    };

    !(function () {
      if ('function' !== typeof window.FreshworksWidget) {
        const n = function () {
          n.q.push(arguments);
        };
        (n.q = []), (window.FreshworksWidget = n);
      }
    })();
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://widget.freshworks.com/widgets/MY_WIDGET_ID.js';
    document.getElementsByTagName('head')[0].appendChild(script);
}

推荐阅读