Run external js script on only one page in ionic


I have a simple Ionic Tab application. The structure is as follows :


I have a js script that lets me include a live customer chat widget i.e. Purechat widget. The widget is displayed as a hello button.

What I want : The idea is to show the hello button only on the contact page. This widget should be hidden on all other pages.

The script is as follows :

<script type='text/javascript' data-cfasync='false'>window.purechatApi = { l: [], t: [], on: function () { this.l.push(arguments); } }; (function () { var done = false; var script = document.createElement('script'); script.async = true; script.type = 'text/javascript'; script.src = ''; document.getElementsByTagName('HEAD').item(0).appendChild(script); script.onreadystatechange = script.onload = function (e) { if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) { var w = new PCWidget({c: '944e29c8-2139-4a0a-973b-80f153233a47', f: true }); done = true; } }; })();</script>

Currently, I have included this js in index.hml which makes the hello button visible throughout the app and that too at a fixed position on the screen which is interfering with the already exisitng ui of my app.

If this cannot be done, kindly suggest any other live chat widget that I can selectively show only on contact page. Anyone who can help me with this would mean a lot as I have been stuck here for too long!

1 Like

I am also concerned with this question. have you found a solution?