Question

我正在尝试设置自定义聊天并且它期望这样的事情：

<script>
  window.fcSettings = {
    token: "737838-363673273278-782828",
    host: "https://wchat.freshchat.com",
    externalId: "john.doe1987",     // user’s id unique to your system
    firstName: "John",              // user’s first name
    lastName: "Doe",                // user’s last name
    email: "john.doe@gmail.com",    // user’s email address
    phone: "8668323090",            // phone number without country code
    phoneCountryCode: "+1"          // phone’s country code
  };
</script>
<script src="https://wchat.freshchat.com/js/widget.js" async></script>

我创建了一个简单的vue组件，在created（）下面我有以下函数：

    updateChat() {
        axios.get('/api/user-info')
            .then((resp) => {
                const user = resp.data

        window.fcSettings = {
                token: "737838-363673273278-782828",
                host: "https://wchat.freshchat.com",
                externalId: user['id'],
                firstName: user['name'],
                lastName: user['surname'],
                email: user['email'],
              };

            })
            .catch((err) => {alert(err); console.log(err);})
    },

我不确定如何在此函数运行后加载https://wchat.freshchat.com/js/widget.js。我尝试将其作为普通标签添加到我的bundle.js标签下，但它不起作用。我该怎么做？感谢。

Answer 1

一个非常糟糕的方法是将其作为文本加载异步并使用eval() ...但是，为什么你之前加载它，将它包装成一个函数并稍后调用它？

Answer 2

在index.html文件中，将以下代码添加到该部分

<script src="https://wchat.freshchat.com/js/widget.js"></script>

然后在main.js文件中，在下面添加代码：

mounted() {
    axios.get('/api/user-info')
            .then((resp) => {
                const user = resp.data

        window.fcWidget.init({
                token: "737838-363673273278-782828",
                host: "https://wchat.freshchat.com",
                externalId: user['id'],
                firstName: user['name'],
                lastName: user['surname'],
                email: user['email'],
              });

            })
            .catch((err) => {alert(err); console.log(err);})
    }
  }
});

Vue.js中的外部JS

2 个答案: