Target Environment: WordPress VIP header.php
goal: click icon div to open third party chat, toggle to close if needed, chat icon to persist acrross all pages.
Hi All
I’ve been tasked with integrating a 3rd Party Chat app in our site. I want it to perform like a traditional chat in-page chat app (in a div) , however, the shared script uses js the window.open method and open the chat into a separate window. I’ve tried unsuccefully to use , tags. Suspect this shouldnt be to hard but I can’t figure it out. I hope I have enough information here.
Thanks in advance! The code I am replacing is straight forward yet opens into a new window but I need the window to look like a modern chat
script type="text/javascript " const chatFunc = () => { var x = screen.width - 550; var y = screen.height - 800; var params = 'height=550,width=375,popup=yes,left='+x+',top='+y; var Url = 'thridpartychat link'; **window.open(Url, '', params);** // this seems to be the issue } script <div id="test" class="chat" onClick="chatFunc()" data-toggle="tooltip" data-placement="top" title="Chat" style=""> </div>
My attempt:
<div id="test" class="chat fas fa-comment-dots fa-7x embed-responsive" data-toggle="tooltip" data-placement="top" title="Chat now!" style=""> <iframe id="chatIframe" class="embed-responsive-item" style="border:none" seamless> </iframe> </div> var x = screen.width - 550; var y = screen.height - 800; var params = "height=550,width=375,popup=yes,left=" + x + ",top=" + y; var Url = "[link to third Party Chat]"; var test = document.getElementById('test'); test.addEventListener("click", function() { // Get Iframe - I had exception catch here -didnt work var iframe = document.getElementById('chatIframe'); // Assign Attr-Used Object.assign at one point to no avail iframe.setAttribute('left', '+' + x + '+'); iframe.setAttribute('top', '+' + y, ); iframe.setAttribute('height', '550'); iframe.setAttribute('weight', '375'); iframe.setAttribute('src', 'Url'); this.parentNode.appendChild(iframe); this.parentNode.removeChild(this); });
Here is how I want the chat to look :
Advertisement
Answer
No idea why you are over complicating this. is there a specific reason you want to load the iframe after? if not using css to style it and just toggling it to be visible is the best solution.
HTML
<body> <header> <button id="js-chat-toggle" class="chat fas fa-comment-dots fa-7x embed-responsive" data-toggle="tooltip" data-placement="top" title="Chat now!" style=""> Chat now! </button> </header> <div class="chat-container" id="js-chat-container"> <iframe id="chat-iframe" class="embed-responsive-item" seamless src="https://google.com"> </div> </iframe> </body>
CSS
.chat-container { display: none; position: absolute; bottom: 10px; right: 10px; max-width: 320px; overflow:hidden; } .chat-container.open { display: block; } .chat-container iframe { width: 100%; border: none; overflow:hidden; }
JavaScript
const chatToggle = document.getElementById('js-chat-toggle'); const chatContainer = document.getElementById('js-chat-container') chatToggle.addEventListener('click', function() { chatContainer.classList.toggle('open') })