customer live chat widget for ionic app

Question

I have a simple ionic tab application with three tabs. Structure of which is as follows :

>TabsPage
  >HomePage
  >AboutPage
  >ContactPage

I want to have a customer live chat feature for which currently I am trying to use PureChat.

In order to use PureChat in my app, I have to copy paste a small script in my app, and I'm currently pasting the PureChat script in my index.html.

1. Having the script in index.html is causing the PureChat Hello button to appear on all the pages in my app but I want that button to appear only on my ContactPage.

Please suggest how to have that button appear only on my contact page.

Answer 1

I've got this working on my ionic 3 app - mine is a little different.

I've got a link on the menu to open the live chat window - however your problem is very similar.... I didn't want to use the standard purechat button i needed a link on a menu link instead. I added widget with the 'custom button' selected in PureChat

Then get it to work I added the embed code into the

On my menu i added:

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

Then in my app.component.ts I added this function:

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

So technically the chat is on every page - but its hidden until the openLiveChat() function is called

Answer 2

Inject the script into the contact page

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);
    })
  }
}