Guide

Ignoring Streamlabs “essential” custom alert code

By 12 February, 2018 No Comments

I’ve been doing animated Twitch alert ever since Streamlabs had it all in one tab. There’s been small bugs and there’s been some giant bugs. The giant bugs didn’t really start to appear until they switched to separating out the CSS from the HTML—come thing about it might have been when they added in alternate alerts. I even wrote an article about the difference between Muxy and Streamlabs custom animated alerts (a lot of those issues in that article have been fixed now… but new ones have appeared).

What’s the bug?

Let’s be clear there’s a A LOT of bugs with the alerts. The main alerts have a different setup from the alternate alerts. Try using the arrow keys while setting up a alternate alert? I have… it closes the window. I could go on but let’s focus on one major “bug”—why I’ve put that in quotation marks will become apparent.

The bug is that when you enter in your own HTML code and your own CSS code (perfectly fine HTML and CSS by the way) the alert only triggers the first time. It then just stops working. Why? “essential” code apparently.

What’s “essential” code?

It’s the original code that is entered once you hit “Enable Custom HTML/CSS”. How do we know this? It was mentioned as a response to one of my clients. This after plenty of other people (including me) trying to get the right answer. The strange part? Nowhere on the site is it mentioned that it is essential code (depending on when you read this it might have been added now).

Is it really “essential”?

Yes and no… but we can really just ignore it.

How to avoid the “essential” Streamlabs code

This might be personal preference but when I code I want to do it with my tools (atom.io). That way I can test directly and not have to save in a clunky UI with a bad UX (Streamlabs). This give me the most control and a quick way to code animated Twitch alerts for my clients.

Are you the same? Good. Then I’ll teach you how to avoid this bug and at the same time nullify the “essential” code.

The fix:

  • Keep the original HTML code intact.
  • Add your own code below (or above the “essential” code).
  • Do the same in the CSS tab (not sure if it’s also “essential” but let’s do it just in case).
  • Add the following CSS code to below all of you CSS code
    #alert-image, #alert-user-message, #alert-message, #alert-image-wrap, #alert-image, #alert-text-wrap, #alert-text {display: none!important;}
    #alert-image {background-image: none!important;}

We simply are telling Streamlabs that the “essential” parts should not be shown.

Keep in mind that even if you do this some custom animations DO NOT play nice with Streamlabs and reintroduces the glitch even with “essential” code intact.


I know that I haven’t really been doing any posts for the past weeks. I actually ended up being really sick for a few weeks—and didn’t really recover until just earlier this week. I fell behind on work and on emails and those had to be the first things I sorted out once I were back. Now however I’m feeling better and will star to post more often. It will probably be a bit sporadic but I’l hopefully get a hang of it again.

If you’re interesting in getting your own animated Twitch alerts then you should check out my Twitch branding services (where you can get animated Twitch alerts). Talk to you soon!

LiveSpace

LiveSpace

Do you need a Twitch website done the right way? Or do you need a Twitch branding strategy? If you're ready then take a look at the Twitch services and see if they fit into your future. twitch.livespace.se