首页 > 解决方案 > 离子应用程序的客户实时聊天小部件

问题描述

我有一个带有三个选项卡的简单离子选项卡应用程序。其结构如下:

>TabsPage
  >HomePage
  >AboutPage
  >ContactPage

我想要一个客户实时聊天功能,目前我正在尝试使用 PureChat。

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

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

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

标签: widgetionic3livechatmulti-device-hybrid-apps

解决方案


我已经在我的 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() 函数之前它是隐藏的


推荐阅读