离子应用程序的客户实时聊天小部件

Question

我有一个带有三个标签的简单离子标签应用程序。其结构如下：

>TabsPage
  >HomePage
  >AboutPage
  >ContactPage

我想拥有一个客户实时聊天功能，目前我正在尝试使用此功能使用PureChat。

为了在我的应用程序中使用PureChat，我必须在我的应用程序中复制粘贴一个小脚本，并且当前正在将PureChat脚本粘贴到我的index.html中。

1。在index.html中包含脚本会导致PureChat Hello按钮出现在应用程序的所有页面上，但我希望该按钮仅出现在我的ContactPage中。

请建议如何使该按钮仅出现在我的联系页面上。

Answer 1

我已经在我的ionic 3应用程序上进行过这项工作-我的有所不同。

我在菜单上有一个打开实时聊天窗口的链接-但是您的问题非常相似。...我不想使用标准的purechat按钮，我需要菜单链接上的链接。 我添加了在PureChat中选择了“自定义按钮”的小部件

然后开始工作，我将嵌入代码添加到

在我的菜单上添加：

<a (click)="openLiveChat()" menuClose class="menulink">Open Live Chat</a>

然后在我的app.component.ts中添加以下功能：

openLiveChat(){
    console.log("OpenLiveChat has been clicked");
    let element: HTMLElement = document.getElementsByClassName('purechat-collapsed-image')[0] as HTMLElement;
    element.click();
 }

因此，从技术上讲，聊天在每个页面上-但在调用openLiveChat（）函数之前，聊天一直隐藏

Answer 2

将脚本注入联系人页面

export class ContactPage{
  addScript: boolean = false;

  ngAfterViewChecked(): void {
    if (!this.addScript) {
      this.addPureChatScript();
    }
  }

  addPureChatScript() {
    this.addScript = true;
    return new Promise((resolve, reject) => {
      let scripttagElement = document.createElement('script');
      scripttagElement.src = 'location/or/url/of/script';
      scripttagElement.onload = resolve;
      document.body.appendChild(scripttagElement);
    })
  }
}