I whipped up a rudimentary demo, which you can see here. To add it to your site: 1. Go the Layout Template for your forum wrapper and add this inside the <head></head> tags to enable javascript. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>2. Still in that same layout template, add this to the very bottom. This would be the box itself, along with the script that makes it so when you click a certain part of the box ("headerarea"), it'll add/remove a class ("slideup") that changes the container's position on the page.
<div class="chatcontainer">
<div class="headerarea">
<img class="headerimg" src="https://via.placeholder.com/200x50/999/fff">
Click me
</div>
<div class="chatbox">
Here goes your chatbox code
</div>
</div>
<script>
$(".headerarea").click(function() {
$(".chatcontainer").toggleClass("slideup");
});
</script> 3. The sample css, which needs to be added to CSS & Visual Editor > Stylesheet. .chatcontainer { width: 300px; height: 350px; background: white; position: fixed; left: 5%; bottom: 0; -webkit-transform: translateY(250px); -moz-transform: translateY(250px); -o-transform: translateY(250px); -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; }
.headerarea { height: 100px; text-align: center; }
.headerimg { width: 100%; height: 50px; margin-bottom: 10px; }
.chatbox { padding: 10px; }
.slideup { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); }
You'll want to mess around with the dimensions. Depending on how tall the whole thing ends up being, you'll need to adjust its starting position so only the headerarea is visible before clicking: .chatcontainer's height – .headerarea's height = .chatcontainer's translateY(DIFFERENCE IN HEIGHT )To use the dimensions I'd used as an example, it's 350px tall total with a 100px tall header area, hence the translateY(250px).
| 
