CODEWITHSUNDEEP
htmlcsswebchatbot
Abhishek Patel
Abhishek Patel

Reputation: 182

how to pop-open a window on clicking a button/icon using javascript

I have made a chat bot, right now i've hosted it on local server.

Chat bot

I want to embed it in my website, So what exactly I want to have is something like a button/icon hovering on right bottom side of website just like this example.

button

And on clicking it, it should pop open a chat bot window over the website. How should I proceed to do this

open up window

Upvotes: 0

Views: 3178

Answers (1)

Matt Coady
Matt Coady

Reputation: 3856

Basically you're going to have your two things, the popup and the trigger:

<div class="popup">
   ... Popup Stuff
</div>
<button>Click Me</button>

If the popup is hosted off the page you're on, you can use an iframe in the popup to render it:

<div class="popup">
   <iframe src="http://wherever"/>
</div>
<button>Click Me</button>

You want the button to toggle the display state of the popup

const button = document.querySelector('button');
const popup = document.querySelector('.popup');

button.addEventListener('click', ()=>{
  popup.style.display === 'none' ? popup.style.display = 'block' : popup.style.display = 'none';
})

Upvotes: 1

Related Questions