Custom button with hideable section

If you wish to design your own button from scratch and you'd like it to include a section (bubble) which should be hidden when an X element is clicked you can extend this simple example with your design:

<div style="bottom: 30px; left: 10%; z-index: 999997; position: fixed;">
    <div style="background:red; padding:30px; position:relative;">
        This is bubble with close button.
        <div onclick="(event.target || event.srcElement).parentNode.parentNode.style.display = 'none'; if (event.stopPropagation) {event.stopPropagation();} else {event.cancelBubble = true;} if (event.preventDefault) {event.preventDefault();} LiveAgentTracker.closeBubbleButton('{$buttonid}');" style="position:absolute; top:10px; right:10px;">
            X
        </div>
    </div>
</div>
<div style="bottom: 0; left: 10%; z-index: 999997; position: fixed;">
    <div style="background:gray;">
        This is chat button bottom, which stay displayed.
    </div>
</div>

To create a custom HTML button you'd go in your agent panel to Configuration->Chat->Chat buttons->Create and at the top you'd go to the Custom section where you'd select the option By writing your own HTML code.

Custom button with hideable section

Other Articles