Here’s a small modification to the chatBanner function that will place the message just above the composer/reply component meaning it is pinned at the bottom and always in view as a reminder. I’ve made this change to support the threadedChat I’m currently developing

// Chat message banner function chatBanner() { var roomName = $("h5[component='chat/header/title']").text().trim(); var bannerContent; if (roomName === "Testing 3") { bannerContent = '<div id="chatbanner">This message will fire for chat rooms with the title of "Testing 3"</div>'; } else { bannerContent = '<div id="chatbanner">This session is for <strong>private discussion only</strong> between the chosen participants. Please do <strong>not</strong> place support requests here and create a <a href="#" onclick="app.newTopic();">new topic</a> instead.</div>'; } var chatMessagesContainer = $('[component="chat/system-message"]:last-of-type'); //var existingMessages = $('[component="chat/message"]'); var existingMessages = $('[component="chat/composer"]'); if (existingMessages.length === 0) { // If there are no messages, append the banner to the messages container chatMessagesContainer.first().after(bannerContent); } else { // If there are messages, add the banner after the last message // existingMessages.last().after(bannerContent); existingMessages.before(bannerContent); } }

There are only two changes here:

var existingMessages = $('[component="chat/message"]');

becomes

var existingMessages = $('[component="chat/composer"]');

and

existingMessages.last().after(bannerContent);

becomes

existingMessages.before(bannerContent);

No no, I said that in the sense that he told me it was simple ^^
I was able to see that this was not the case by targeting the elements he had advised me.

@pwsincd hi. Just following up on this thread (I know it’s old) but was curious to understand if it’s still an issue or not ?

@cagatay you’ll need to define this in the body tag (or another element if you want greater or more granular targets) - for example

body { font-family: "Poppins"; font-size: 16px; }

Essentially, you use the font-size CSS directive.