集成Zoho聊天机器人到Angular并在登录后出现

Question

我希望zoho聊天机器人出现后，我登录到该网站。

我的index.html中有以下代码

<script type="text/javascript">
    var $zoho=$zoho || {};$zoho.salesiq = $zoho.salesiq ||
    {widgetcode:"d4c6b39bfbf717b01de5e6c794342659bec9d4c47c1287ce05a846c37084d4aabbbd2477760b48dca461c2fc738ec49d", values:{},ready:function(){}};
    var d=document;s=d.createElement("script");s.type="text/javascript";s.id="zsiqscript";s.defer=true;
    s.src="https://salesiq.zoho.com/widget";t=d.getElementsByTagName("script")[0];t.parentNode.insertBefore(s,t);d.write("<div id=‘zsiqwidget’></div>");
</script>

但是，即使我没有登录，聊天机器人图标也会出现。

所以基本上，我希望它在登录后出现。

Answer 1

把你的代码

var $zoho=$zoho || {};$zoho.salesiq = $zoho.salesiq ||
    {widgetcode:"d4c6b39bfbf717b01de5e6c794342659bec9d4c47c1287ce05a846c37084d4aabbbd2477760b48dca461c2fc738ec49d", values:{},ready:function(){}};
    var d=document;s=d.createElement("script");s.type="text/javascript";s.id="zsiqscript";s.defer=true;
    s.src="https://salesiq.zoho.com/widget";t=d.getElementsByTagName("script")[0];t.parentNode.insertBefore(s,t);d.write("<div id=‘zsiqwidget’></div>");

执行salesiq.js操作并保存在资源文件夹中

在angular项目中添加您的baseComponent -在登录后调用

const url = 'assets/pathto/salesiq.js'; //your path to js file where joho code are there

export class MyAppComponent {
    loadAPI: Promise<any>;

   ngOnInit(): void {
        this.loadAPI = new Promise((resolve) => {
            console.log('resolving promise...');
            this.loadScript();
        });
    }

    public loadScript() {
        console.log('preparing to load...')
        let node = document.createElement('script');
        node.src = url;
        node.type = 'text/javascript';
        node.async = true;
        node.charset = 'utf-8';
        document.getElementsByTagName('head')[0].appendChild(node);
    }
}