Depending on how obsessive you are with your chat log, you might want to have total control over the spacing of API-supplied chat messages --- by which I mean aligning each chat message flush with the left side of the chat panel, and right up against the bottom of the message before: I'll post examples for those who don't find this quick summary helpful, but in short, the trick is to contain your chat message within a <div> block, styled with negative top and left margins to move it into place, relative positioning (to place it "in front of" the automatic time stamp), and some sort of background to cover said timestamp, AND to feed a random string of characters to the "from" parameter in your sendChat call to make sure the timestamp always appears . (It was this last bit that struck me as a Eureka moment and made me think I should post this here for others who might be wondering how to get around this niggling problem :) ) The values I've found to work for my main div block are as follows; it's designed to allow you to nest another div block inside it, styled however you like: div { margin : -35 px 0 px 0 px -42 px ; padding : 0 px ; position : relative ; font-size : 0 px ; /* eliminates any white-space in your code from causing issues */ } Of course, that's in CSS, so you'll need to convert it to inline styling and a string for use in a JS API script. A function works well for this, I find: const chatBlock = ( contents ) => `<div style=" margin: -35px 0px 0px -42px; padding: 0px; position: relative; font-size: 0px; "> ${ contents } </div>` However, there's a problem: If you send this to sendChat as-is, you'll sometimes find that your chat messages shift up too far, and overlap with the bottom of the chat message above. This is because that "From:" timestamp you're trying to cover up doesn't always appear --- if two chat messages come from the same source quickly enough, the second message will just be appended to the first without a line break. To avoid this, just make sure every one of your API chat calls sets a unique "From" value (after all, you're covering this up anyways). A simple randomizer makes that easy enough, and then you can wrap it all up in a new sendChat() function that basically works as a "paste this block of code exactly after the last one in the chat menu" --- with an optional target for whispering, if you so choose: sendChatBlock = ( contents , target ) => { sendChat ( _. sample ( "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz" . split ( "" ), 5 ). join ( "" ), // from ` ${ target ? `/w ${ target } ` : "" } <div style=" // message margin: -35px 0px 0px -42px; padding: 0px; position: relative; font-size: 0px; "> ${ contents } </div>` ) } DISCLAIMER: Will this work with all browsers? I have no idea --- plenty of aspects of the Chat panel are hard-coded in pixels, so I think doing the same here should behave consistently everywhere else. Also, the "font-size: 0px" thing is a lazy hack I picked up awhile back after struggling too many times to figure out why something wasn't lining up only to spot a stupid piece of whitespace in my code messing everything up --- it's probably not necessary if you know what you're doing ;)
