Today my girlfriend HelloMissPotter (who streams a variety of games on Twitch) was sent a few LIFX Bulbs and a ZStrip from LIFX for her to show off to her followers. I thought it would be cool for her stream viewers to be able to change the color of the lights behind her as she streamed.
A bit of background for my usual readers: on Twitch, viewers type into a chat window, and often streamers enable commands to do cool stuff, such as make song requests, find out how long the streamer has been streaming for, and much more. This usually takes the form of !command.
So, here’s what you’ll need.
A Twitch account
A Nightbot account (Sign in with your Twitch account)
An IFTTT account
A LIFX Account (make this on the mobile app when you set up the bulbs)
A LIFX Bulb or ZStrip
Part One: Setting up IFTTT
First up, we want to go into IFTTT and create a new applet. We want to search and find Webhook. (This is a fancy term for website that triggers things).
Then choose Receive a web request
Since you can use this as many times as you want in IFTTT, you have to enter a unique name. I chose lifx_color, but you can call it whatever you like, such as your dogs name. Remember it for later.
So, that’s the “If This” part done. In this case, we’ve chosen “if webhook with the event name lifx_color”. Now it’s time for the “Then That” part. In our case, its interacting with a LIFX bulb, so go ahead and search and find that.
Here you’ll need to sign into your LIFX account. Once that is done, you’ll see the menu of possible actions. For this, we will choose Change color of lights, but you could explore the other options later.
In the setup, choose your light. This will take a moment to load as IFTTT asks LIFX for a list of your lights.
Now, leave most unchanged, and scroll to the bottom of the card.
In the Advanced options field type “color: “ (no u), then click on the Add Ingredient button. Choose Value1. Then type a semicolon to close off the small bit of code. We’ll populate value1 with a color value later on.
The final result should look like color: ;
(The underline and 1 are a browser plugin I have installed for spelling. Colour is the correct way to spell this in my part of the world.)
Next up is to extract the Webhook URL from IFTTT for use later in Nightbot/Twitch.
Click Services
(I have been tinkering more than you might have…)
Click Webhooks
Click Documentation and you’ll see this rather scary page. I’ve blacked out my keys so you don’t fiddle with my lights. Remember: with this, you’ve exposed to the whole world the ability to change your lights, but you need a rather long and obscure URL, so you’re probably safe.
In the first red box, enter the name of the webhook event you chose, remember we went with lifx_color above.
In the next, type ‘red’.
Now, the moment of truth, click Test It. In no more than 20 seconds, your lights should change to red.
(Hint: For LIFX, make sure the lights are not red, and the app is closed - they tend to fight for control).
Huzzah! You should be successful. If not, double check these instructions. Make sure the event names match, you chose Value1, and you typed the code correctly as per the screenshot.
From here, you have a URL to use. However, to include the color, you need to add a bit to the end of it. And that is ?value1=red. (Or your colour of choice)
So, your full Webhook URL for NightBot/Twitch will be:
https://maker.ifttt.com/trigger/lifx_color/with/key/XXXXXXXXXXXXXXXX?value1=color
Part Two: Setting up NightBot
Next up, log into NightBot and navigate to Commands, Custom. Click + Add Command.
In here, choose a name for your command, I will use !color and my chat participants will type !color red, !color green … etc.
In the message field, we will use the urlfetch command, which basically access a website. Huzzah, early we set up a wehbook which is also a website, which when accessed changes our lights color! This hopefully should be starting to make sense.
Now we need to write the command and add a bit of code to pass the name of the color through. The command is:
$(urlfetch <url_from_earlier>?value1=$(querystring))
Notice how I substituted red for $(querystring), this means “put what the person typed after !color in here”. So if they type !color green, the result will be:
$(urlfetch <url_from_earlier>?value1=green))
Here’s a full screenshot to show my working command.
You can also change other settings like user level (Mod, Sub, You, Anyone etc) and Cooldown.
Next up, you need to add Nightbot to your twitch chat as a moderator, so in Nightbot’s Dashboard you need to click Join Channel, and follow the instructions provided to make Nightbot a moderator.
Now, head to your twitch chat and type the command and a color afterwards, and once again wait up to 20 seconds for the command to work and see your lights change!
In this post, we used red and green as color options, but you can also do: white, red, orange, yellow, cyan, green, blue, purple, or pink. You can read more here, where you can test even more.
For experts who know hex colors, you can also use these, even in your command, so !color ff0000 will set the red. Google is your friend for finding more options.
To suppress the output (eg “Congratulations! You've fired the lifx_color event”) from the API, you can put your own result such as “You changed my lights! (give it a sec…)” in another command, such as !colorresult, and the put !colorresult in the Alias field in the dialog above.
