Open third party Live chat on the same page without opening a separate window

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>

JavaScript
​x
 
     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);
});

JavaScript
 
    <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 :

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>

JavaScript
 
<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
 
.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')
})

JavaScript
 
const chatToggle = document.getElementById('js-chat-toggle');
const chatContainer = document.getElementById('js-chat-container')
​
chatToggle.addEventListener('click', function() {
    chatContainer.classList.toggle('open')
})
​

Advertisement

Answer