I have two different implementations of a livechat script. On my sandbox site, the livechat is fixed to the bottom right of the page and scrolls with the window. However, on my live site (where this specific code comes from), it is attached to the footer.
On my sandbox site, I am only using the script and the div ID tags for the top and bottom, not the middle.
Here is the code snippet used on my live site:
<script type="text/javascript">
(function() {
var c = document.createElement('script');
c.type = 'text/javascript'; c.async = true;
c.src = "http://northamericahvac.smartertrack.com/ChatLink.ashx?config=0&id=stlivechat0";
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(c,s);
})();
</script>
<style>
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
</style>
<div class="fixed">
<div id="stlivechat0"></div>
</div>
The additional code is an attempt to format the livechat button so that it remains fixed to the bottom right of the page and scrolls along with it.
I have tried creating a div class to style elements within it, but it seems like the styling does not apply to the div ID tag. Could it be that the div ID already has its own formatting which overrides the div class?
I even added a colored bar with the code #73AD21 to test if it stays fixed, but even that doesn't work as expected.