I am currently working on integrating a third-party chatbot into my web application using an iframe in ASP.NET MVC. Like with any chatbot, a button is provided to start a chat (located on the right-hand side below the screen). When this button is clicked, the chatbot expands to cover the entire right-hand side of the web app, overlapping any buttons present on the parent window. Here is a snippet of the code:
<div id="chatBot">
<iframe frameborder="0" id="chatwindow" src="@System.Web.Configuration.WebConfigurationManager.AppSettings["ChatBotUrl"]"></iframe>
</div>
CSS:
#chatwindow {
height: 100vh;
width: 100%;
right: 15px;
}
#chatBot {
position: fixed;
right: 0;
bottom: 0;
height: 100vh;
width: 390px;
z-index: 11111;
}
The issue I am encountering is that when the chatbot div covers the entire right-hand side, any buttons or links behind it are not clickable. I have tried the following options:
- Setting pointer-event: none
- Attempting to subscribe to click events within the iframe and manipulate attributes (however, this approach is not effective due to cross-domain restrictions).
- Using window blur to detect a click (but this does not work as the chatbot is closed using a button within the iframe).
If you have any suggestions on how to resolve this issue, please let me know.