Menu
I want to be able to put a "Chat Now" button that pops up a chat window inside any webpage.
I can add the "Chat Now" button using JavaScript, but that inherits css in the page and makes it look bad. So I want to put it in its own page, and embed it in any webpage using an iframe.
This is as close as I can get it. It display the iframe on top of the page, but does not allow clicks to go through. How can I make the button "Click Me" clickable?
I see most live chat do this, so it must be possible.
<html>
<head></head>
<body>
<div><button>Click Me</button></div>
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="https://www.botlibre.com/script?file&id=15069189" style="height:100%; background: none; border: 0px; bottom: 0px; float: none; left: 0px; margin: 0px; padding: 0px; position: absolute; right: 0px; width: 100%;"></iframe>
</body>
</html>
Hopefully it is possible without having to size the iframe exactly, but maybe... it is not? It is odd that the iframe can show the webpage behind it, but cannot allow it to be clicked on.
206
In reality, the iFrame overlay page has a transparent layer above the visible UI with action controls that the attacker wishes the victim to execute. The victim clicks on buttons or other UI elements they see on the page which actually triggers the action controls in the transparent overlaying layer.
You can add allowfullscreen attribute to the iframe so that you can click fullscreen button in the HTML5 player toolbar to go fullscreen.
1. Remove width="100%" from the iframes. 2. Change align="right" to align="left" on the second iframe if you want them completely side-by-side.
I have changed the z-index of the button to 9999 with position relative, and it does allow the clicks to go through.
However since the iframe embeds a page from different domain (since I was on plunker), clicks could not be propagated till the "Chat Now", due to Same origin security
Try this plunker
<!DOCTYPE html>
<html>
<head>
<script>
var openChat = function() {
var iframe = document.getElementById('iframeId');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
innerDoc.getElementById("botlibrechatboxbarmax").click();
};
</script>
</head>
<body>
<div style="z-index:9999; position:relative">
<button onclick="openChat()">Click Me</button>
</div>
<div>
<iframe id="iframeId" allowtransparency="true" frameborder="0" scrolling="no" src="https://www.botlibre.com/script?file&id=15069189" style="height:100%; background: none; border: 0px; bottom: 0px; float: none; left: 0px; margin: 0px; padding: 0px; position: absolute; right: 0px; width: 100%;"></iframe>
</div>
</body>
</html>z-index only works on positioned elements (position:absolute, position:relative, or position:fixed)
So make sure to give your button div container a position
From: https://developer.mozilla.org/en/docs/Web/CSS/z-index
The z-index property specifies the z-order of a positioned element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.
For a positioned box (that is, one with any position other than static), the z-index property specifies:
The stack level of the box in the current stacking context. Whether the box establishes a local stacking context.
And From http://www.w3schools.com/cssref/pr_pos_z-index.asp
Definition and Usage The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
