How to change the format of event messages

[mivyard she/her]

Hi!

I was wondering how to change the format of event messages in Simple Chat v3.0.1! For example, I'd like to remove "(reply message)", "(cheer message)", etc. from the end of event messages. I don't have experience coding widgets or using CSS/HTML, so I've poked around the code and looked in the docs but haven't been able to figure out how to do this!

Thank you!

 

[Zaytri she/her]

oh for the test messages? those are just a helpful guide for widget developers wanting to add specific styling to different message types, they don't appear in real messages

you can always send messages in your own chat to manually test

I do plan on adding a system to control what test messages are sent instead of it being completely randomized

 

[Seaconcomber She/Her]

oh for the test messages? those are just a helpful guide for widget developers wanting to add specific styling to different message types, they don't appear in real messages

you can always send messages in your own chat to manually test

I do plan on adding a system to control what test messages are sent instead of it being completely randomized

Hi Zaytri !

I don't create a new subject because this one match with my question, I think?

I'm also interrest by edit the format of events message but I don't know how to do it. I search on the forum if there are a tutorial because i'm not good enough with javascript to understand how to do... Is it difficult for someone like me who's not familiar with JavaScript?

Thx ♥

 

[Zaytri she/her]

Hi Zaytri !

I don't create a new subject because this one match with my question, I think?

I'm also interrest by edit the format of events message but I don't know how to do it. I search on the forum if there are a tutorial because i'm not good enough with javascript to understand how to do... Is it difficult for someone like me who's not familiar with JavaScript?

Thx ♥

Can you be more specific in what you're trying to do? Can you show an example?

 

[Seaconcomber She/Her]

Can you be more specific in what you're trying to do? Can you show an example?

I created a sketch on Paint (lol), but the goal is to write distinct CSS properties for each type of message, such as changing colors, fonts, or any possible styling in CSS!

 

[Zaytri she/her]

I created a sketch on Paint (lol), but the goal is to write distinct CSS properties for each type of message, such as changing colors, fonts, or any possible styling in CSS!

View attachment 117

Oh okay yea the sketch helps a lot!

So, in the script file, find this code:

function onMessage(message) {
  if (!evaluateFilters(message)) return
  const { animations, sound } = slime2.widget.getData()

  // extract the necessary data from the message
  const { parts, user } = message

  // clone the main message template to insert the message data into
  // the templates are all defined in the HTML file
  const messageClone = $(slime2.cloneTemplate('message-template'))

And then we're going to add classes based on the message type, so add this line underneath that code:

messageClone.find('.message').addClass(`message-${message.type}`)

This will add in a class for all message types, which are detailed here: https://docs.slime2.stream/twitch/message
After that, you can refer to those classes via CSS, these are all the CSS classes that will be generated:

• .message-basic
• .message-action
• .message-highlight
• .message-cheer
• .message-reply
• .message-redeem
• .message-resub
• .message-announcement

 

[Seaconcomber She/Her]

Oh okay yea the sketch helps a lot!

So, in the script file, find this code:

function onMessage(message) {
  if (!evaluateFilters(message)) return
  const { animations, sound } = slime2.widget.getData()

  // extract the necessary data from the message
  const { parts, user } = message

  // clone the main message template to insert the message data into
  // the templates are all defined in the HTML file
  const messageClone = $(slime2.cloneTemplate('message-template'))

And then we're going to add classes based on the message type, so add this line underneath that code:

messageClone.find('.message').addClass(`.message-${message.type}`)

This will add in a class for all message types, which are detailed here: https://docs.slime2.stream/twitch/message
After that, you can refer to those classes via CSS, these are all the CSS classes that will be generated:

• .message-basic
• .message-action
• .message-highlight
• .message-cheer
• .message-reply
• .message-redeem
• .message-resub
• .message-announcement

Thanks a lot ♥♥♥