#dev-chat
warm cobalt
real dune
go to the hyper link and they should give you an option to download or "save" the files you got
then you can upload them to the SE editor and use them for alerts
warm cobalt
cheers mate just cracked it took me a while, thanks for your help mate
real dune
👍 np
stone hinge
is there some documentation about the OAuth process`
finite heath
there is no oauth process (yet)
stone hinge
im trying to configure pajbot1 (a chat bot) and i need streamelements OAuth clientID and clientSecret
oh so the OAuth process was removed?
finite heath
i think they mean your account ID and JWT
both can be found on https://streamelements.com/dashboard/account/channels
stone hinge
You can try what we have configured already
It redirects to a SE OAuth page
but thank you, we can use the new authorization system if that changed
viral patrol
@stone hinge JWT Token is enough for auth. ChannelID can be obtained automatically via calling /channels/me with Authorization: Bearer JWT-TOKEN
unreal jungle
we need to change whole system bc of it
idk how it ended up here
might be nuuls forsenga
timber talon
Happy New Fam!
Anyone know why perhaps the End Stream Credits widget I am using would randomly reset on all fields but cheers? I haven't made any changes to the code btw
viral patrol
It is not randomly, it is 15 minutes post stream
And cheers not reseting is a known issue
serene turtle
Is there a more appropriate place for my questions StreamElements staff?
https://canary.discordapp.com/channels/141203863863558144/259680142459142144/528335291476606996
Oh, I forget it's holiday season. Just might not of gotten to it yet.
viral patrol
No problem. It is better to write twice 😉
So, you can pass ${sender} as GET parameter but it will give you only username of that person. You can call bot/:channelId/levels Which will provide you list of assigned users to bot accesslist. You can also query twitch directly to obtain userdata by username
And about second one I am forwarding that to our magicians
@serene turtle I hope that one will help you a bit
Oh. Great timing 😉
serene turtle
hmm, ${sender} should work...
lol
I'll just have to make 2 calls to the Twitch api then. No biggie
1 to get the id and another to determine moderator status
Thanks!
viral patrol
You can also listen to our websocket to have locally hosted list of mods/subs/tippers
With usernames
serene turtle
Isn't that basically the chatters endpoint?
But more realtime
oh, via username. I see what you were getting at.
viral patrol
You can either create a webhook to gather data (alertbox can send data via XHR) or connect to websocket and listen to events
serene turtle
Thanks for the help. I'm sure I can get there from here. 😄
twilit torrent
Hey guys!
I am making a switch from SLOBS to StreamElements but I can't get my NerdOrDie alerts working properly. The issue is that I am unable to properly edit them and that some of the text seems to be unaffected by the custom CSS rules after importing them to the editor.
How/can I properly import my alerts? I am using the Apex package if that makes any difference.
Happy New Year!
I believe the "usermessage" is a matter of changing it to "message" but animation still looks a bit wonky and I am unable to edit it
twilit torrent
After an entire night of no sleep trying to figure this out, I am happy to say that I at least in part have seemed to find a solution and I am going to paste it here for anyone who might be in a similar situation.
For the Apex sub alerts to properly show you need to replace the following:
<div id="alert-user-message">{userMessage}</div>
With:
<div id="alert-user-message">{ {message} }</div>
NOTE: Delete the space between each { { - I had to make that as otherwise discord formats the message.
Then go to CSS and scroll all the way to the bottom and replace
#alert-user-message {
position: relative;
left: 50%;
transform: translateX(-50%);
width: 600px;
text-align: center;
text-shadow: 0px 0px 1px #000, 0px 0px 2px #000, 0px 0px 3px #000, 0px 0px 4px #000, 0px 0px 5px #000;
}
With:
#alert-user-message {
margin-top: 10px;
color: #FFF;
position: relative;
left: 50%;
transform: translateX(-50%);
width: 600px;
text-align: center;
text-shadow: 0px 0px 1px #000, 0px 0px 2px #000, 0px 0px 3px #000, 0px 0px 4px #000, 0px 0px 5px #000;
}
Hope it helps if anyone runs into a similar issue. I have no code experience so there might be better way to fix it, but I had to make do with what I could come up with 😃
cinder lintel
@twilit torrent can you add code blocks? Use the ` key. three of them on either side create the block like this: test
makes it easier to read
ivory heath
hey guys, sorry for the noob question, but does anyone know of/have javascript template that i can use to learn how to connect to the API and collect information about events? I'm learning Javascript and arduino and have a upcoming project that i'm researching for. I have had a look at the documentation and have no clue how to implement so i can start digging around for the cool data that it returns
cinder lintel
Check the document pinned here, then I use StackOverflow for doing that.
ivory heath
i have read the API documentation, but there is insufficient info there to get me started. just wondered if anyone had anything on hand that can jumpstart my learning. All cool if not
cinder lintel
I understand you read the API doc, I am pointing at pinned documents 😉
While it is focused on the custom CSS/HTML/JS widget, it provides a lot of good information
cinder lintel
pulsar willow
is there an api for discord?
cinder lintel
yes
pulsar willow
oh
timber talon
Where can I find the most current streamelements overlay custom manual ver?
Document that is
cinder lintel
@timber talon pinned
if you are talking about the custom widget. If you are talking about chat commands, there is a page for that under chat commands in your dashboard
timber talon
@cinder lintel yeah the widget and all the different calls etc. where is it pinned?
Cause the one pinned in this channel is an old revision
cinder lintel
this channel
timber talon
The latest one I have is 3
cinder lintel
that is the guy that put the doc together ⤴
viral patrol
No, there are no revisions
timber talon
Understood
viral patrol
I was just discovering new things over time
timber talon
I just want to make sure my front end developer has the latest document
viral patrol
Once we have new version I publish it here and remove previous one
timber talon
Appreciate u
viral patrol
Also if your webdev wants some samples, they are on our github repo: https://github.com/StreamElements/widgets
timber talon
Thanks I’ll pass it along to him!
languid escarp
Hey! So ive had a lot of questions kinda related to the Rotator Widget and now i have kind of in the same area. Is there a way to make a roation of both static and dynamic text? Like have a constantly updating subgoal, but also on the roation have Like my twitter, YT, IG, etc? all on the same widget is what i mean.
wise basalt
@viral patrol i saw the samples and the documentation for the custom widgets and was dismayed that there are no repeatable fields/groups in the fields schema
something like: json { "someList": { "type": "repeater", "fields" : { "someText": { "type": "text", "label": "Some Text", "value": "Default text" }, "someTextField": { "type": "textfield", "label": "Some Text", "value": "Default other text" }, "someColor": { "type": "color", "label": "Some color", "value": "#ff0000" } } } }
viral patrol
Hi
One moment, let me catch up 😉
@languid escarp try this one, as this allows you to add multiple blocks in HTML code: https://github.com/StreamElements/widgets/tree/master/TopEventsRotator
You can mix your socials with data
@wise basalt Unfortunately there is nothing like that yet. Personally I would love to see it as well especially for chat listening widgets:
{
"command": {
"type": "repeater",
"fields" : {
"commandName": {
"type": "text",
"label": "Command to trigger action",
"value": "!showcat"
},
"privileges": {
"type": "dropdown",
"label": "Accessible to",
"value": "everybody",
"options":{
"everybody":"Everybody",
"subs":"Subscribers",
"mods":"Mods",
"streamer":"Streamer"
}
}
}
}
}
I think I messed up with {}
wise basalt
its cool, i get it.
viral patrol
But Unfortunately it is not a thing
wise basalt
i have been working exclusively for @timber talon making overlays with fancy animations but i built most of them prior to the custom field schemas so i wanted to implement that but most of his options are lists of configurations.
viral patrol
I forwarded that idea to one of StreamElements magicians, but I'm afraid it won't be a priority task as this feature would be used by you and me only 😉
wise basalt
they would have to make the widget editor recursive
viral patrol
I think that not fully recursive, but having an array field type would be the thing I love 😉
Nesting without limits would be problematic I think
wise basalt
yea even only 1 level would be useful
viral patrol
Also - @timber talon You should definitely apply for Dreamteam as you meet requirements - https://streamelements.com/dreamteam
I would love to see you with orange nickname here 😉
@wise basalt You can also create external "config creator" and request config onWidgetLoad by XHR call, but I think it is not what you are trying to achieve
timber talon
@viral patrol I did already unfortunately I never heard back
timber talon
Yeah my dude 
viral patrol
I shook the tree, I hope any apple will fall 😉
wise basalt
@viral patrol is config creator an object or widget that exists in the SE panel?
sorry, ive been almost legit hacking in code because of some limitations or lack of documentation for certain things
viral patrol
Nah. For example you can have selfhosted python/php/node something that creates JSON object with values, then just:
let config
window.addEventListener('onWidgetLoad', function (obj) {
config=$.getJSON("https://yourpage/script?script="+script);
}):
Yup
And about sniffing - is there anything you found?
To be honest - this is the way I've created this documentation.
wise basalt
console.log = function(){
console.dir.apply(null, arguments)
}```
😉i need this a lot
shhh, don't tell nobody
viral patrol
Some time ago console was disabled, so my sniffing was pushing JSON.stringify(object) over web to my listener 😉
wise basalt
someone fumbled the code cause console.dir is not properly disabled but please don't nerf it cause i need that
🙏
viral patrol
I think every single thing in data we provide is within detail which is iteratable
wise basalt
do you have any advice to working with the SE data api in a custom widget?
it doesnt look like the frame is init with a library that i can tell
theres no like se.api.getTopTips()
viral patrol
Yup
timber talon
@viral patrol appreciate you yet again
viral patrol
For SE API - there's not any, as it is potential risk
In situations where somebody's overlay url leaks
Then you can access their data
wise basalt
gotcha
viral patrol
But....
I made some kind of walkaround wit that - created PHP script as MITM to exchange data from SOME endpoints that are not fragile
wise basalt
yea but that requires a service that @timber talon would have to run locally
viral patrol
So in worst case scenario somebody could manipulate virtual points, but never could refresh my overlays, get more tipping data (for example full history) and so on
No. It doesn't have to be run locally
It can be hosted somewhere. It doesn't even need to be over https (as you can override mixed content policy by chromium flag as OBS parameter)
wise basalt
btw, i dont think its any more of a security risk than the rest of the widgets in the overlay if the whole overlay url gets leaked
cause i was able to simply inspect network traffic in my browser to get the api authorized calls and replay them with insomnia to test endpoints
viral patrol
Oh. That is something I didn't know
wise basalt
request headers tell everything
viral patrol
But they don't have Authorization header AFAIK
wise basalt
they do
the browser makes the api call directly and grabs it with authorization: apikey jkshdflkgiu298789af for example
other resources it sets authorization: Bearer [key]
viral patrol
Is Bearer also in overlay?
wise basalt
yes, you can start an overlay without any widgets and both will be exposed in network traffic IIRC
if not then just adding one SE premade widget will do the trick
i cant check atm though
viral patrol
I am looking into that rn and I can't see anything like that
wise basalt
yea GET https://api.streamelements.com/kappa/v2/speech/voices
viral patrol
I wonder if I'm looking correctly
wise basalt
in XHR tab
viral patrol
Oh. Apikey
wise basalt
i think bearer is only exposed in editor my bad
but yea most of the data i would need is coming from the api that uses that specific authorization anyway which is already exposed
i dont know if the constructive criticism/pointing out potential problems is wanted here. its just what ive been working against in the recent months.
viral patrol
Just checked. With that authorization method you have readonly access to some endpoints
You scared me, like really
wise basalt
mhm sorry about that
but thats what im saying. even a read only library to get SE data would be useful
i think my example usage was getTopTips()
viral patrol
So about API and JWT - this is why I suggest to use MITM service to be a gateway
With JWT Token you have full access, so you could do a lot of harm, with apikey auth you have read access for some endpoints.
wise basalt
10-4
viral patrol
Also - you don't have to listen to any request to get apikey - it is included in overlay URL 😉
viral patrol
dmed you
As you would find it eventually and this is not hard to
But coming back to API access - if you want to do something interacting with viewers
I recommend using MITM. For example there's wheel of fortune widget on #widget-share channel, there you can provide URL to your endpoint to add points to viewers automatically
brb
back
sharp island
Yeah the api key is a different auth level than the jwt token
You should still protect it with your life
And if it does get compromised, it can be reset
wise basalt
yep, lx clue'd me in
sharp island
I have big plans for overhauling the custom widgets, but it’s still months out
wise basalt
@sharp island let me know if i can help. custom widget is the only thing i develop with!
sharp island
Sure thing. lx can already tell you that I bounce things off him, so having another resource is something I’ll actually use
languid escarp
i hate to ask but is there a way some1 could assist me with the Multiple HTML @viral patrol mentioned earlier. Im pretty Shite at coding in general and am leanig atm haha
languid escarp
So ive had a lot of questions kinda related to the Rotator Widget and now i have kind of in the same area. Is there a way to make a roation of both static and dynamic text? Like have a constantly updating subgoal, but also on the roation have Like my twitter, YT, IG, etc? all on the same widget is what i mean.
i was told to use this: https://github.com/StreamElements/widgets/tree/master/TopEventsRotator but im pretty garbage at coding and was looking for help if possible lol
languid escarp
@wise basalt
wise basalt
sure thing,
first things first, it looks like this code is basically just a slider
you put more .myslides blocks and its going to go through more of them
you can test that by copy and pasting one of the blocks and changing the content
<div class="mySlides">
<div class="icon">
<span class="fa fa-money-bill-wave"> </span>
</div>
<div class="username">
Recent D: <span id="recent-donator"></span>
</div>
</div>
<div class="mySlides">
<div class="icon">
<span class="fa fa-money-bill-alt"> </span>
</div>
<div class="username">
Top Donator: <span id="top-donator"></span>
</div>
</div>
<div class="mySlides">
<div class="icon">
<span class="fa fa-gem"> </span>
</div>
<div class="username">
Top Cheerer: <span id="top-cheerer"></span>
</div>
</div>
<div class="mySlides">
<div class="icon">
<span class="fa fa-gem"> </span>
</div>
<div class="username">
This is a new slide
</div>
</div>``` like thisso the code for the entire Custom widget is all in that link right? there was another one after the orignal JavaScript code that i wasnt too sure what to do with it, and for the "field" section of code, what should i try and put in there?
wise basalt
in the github link there should be 4 files
css js html and json
copy each files content into a new custom widget in the proper sections
languid escarp
thats the one. Json? i dont have that lol i have one called Field.
languid escarp
ahhh okay.
wise basalt
the json describes what gui editor controls to show in the left panel when you highlight the widget
the values of the fields in the editor are then passed into the js code when it is run
wise basalt
@languid escarp how did it go? were you able to add it to your overlay?
languid escarp
i think i actually found a bit of an easier way around it since im a bit more experienced with GFX than coding lmao im using the image rotator widget instead and just making a few GFX for what i want to do. Seemed much moresimple
Sorry to waste you time though/
ACTUALLY! I have one more question ive been forgeting to ask about when im here
For the rotator widget, when it comes to subs it has the number of months subs are resubbing for in parenthesis. Is there a way to rid the parenthesis and make it an X after the number? and tbh, the Donation, bitts are also in parenthesis. Id like to rid them but whenever i try i F up the code lol
amber lagoon
Hello, I am trying to tether a redemption to a chat command. Is there anyway to have a redemption response call a chat command?
viral patrol
Which one widget are you using @languid escarp ? Please remind me
From widget share or github?
@amber lagoon unfortunately there is no possibility to call chat commands other way than via typing that command/alias or keyword to chat.
You can however send message to chat as bot via PUT /bot/:channel/sayAPI endpoint
amber lagoon
Ok, what would a work around be for the coding to only allow people who have redeemed “x” to be able call !y
viral patrol
Unfortunately it is not possible ATM.
amber lagoon
Ahhh, ok, I will see if I can figure something out! Thank you!
Can I set custom definitions for user levels? Or can a redemption increase someone’s user level?
languid escarp
@viral patrol the widget share rotator widget
viral patrol
REPLACE:
if (listener === 'follower-latest') {
arr[0]='Follower: '+data["name"];
} else if (listener === 'subscriber-latest') {
arr[1]='Subscriber: '+data["name"] + '('+data["amount"]+')';
} else if (listener === 'host-latest') {
arr[4]='Host: '+data["name"]+'('+data["amount"]+')';
} else if (listener === 'cheer-latest') {
arr[2]='Cheer: '+data["name"]+'('+data["amount"]+')';
} else if (listener === 'tip-latest') {
arr[3]='Donate: '+data["name"]+'('+data["amount"]+')';
}
WITH:
if (listener === 'follower-latest') {
arr[0]='Follower: '+data["name"];
} else if (listener === 'subscriber-latest') {
arr[1]='Subscriber: '+data["name"] + 'x'+data["amount"];
} else if (listener === 'host-latest') {
arr[4]='Host: '+data["name"]+data["amount"];
} else if (listener === 'cheer-latest') {
arr[2]='Cheer: '+data["name"]+'x'+data["amount"];
} else if (listener === 'tip-latest') {
arr[3]='Donate: '+data["name"]+data["amount"];
}
AND:
arr[0]='Follower: '+data["follower-latest"]["name"];
arr[1]='Subscriber: '+data["subscriber-latest"]["name"] + '('+data["subscriber-latest"]["amount"]+')';
arr[2]='Cheer: '+data["cheer-latest"]["name"]+'('+data["cheer-latest"]["amount"]+')';
arr[3]='Donate: '+data["tip-latest"]["name"]+'('+data["tip-latest"]["amount"]+')';
arr[4]='Host: '+data["host-latest"]["name"]+'('+data["tip-latest"]["name"]+')';
WITH:
arr[0]='Follower: '+data["follower-latest"]["name"];
arr[1]='Subscriber: '+data["subscriber-latest"]["name"] + 'x'+data["subscriber-latest"]["amount"];
arr[2]='Cheer: '+data["cheer-latest"]["name"]+'x'+data["cheer-latest"]["amount"];
arr[3]='Donate: '+data["tip-latest"]["name"]+data["tip-latest"]["amount"];
arr[4]='Host: '+data["host-latest"]["name"]+data["tip-latest"]["name"];
Okay maybe im just an idiot, but when i do this it just completely reverts back to the basic text style
it completely messes up the code somehow
and it actually seems like my cide is different than that one
this is my JS
viral patrol
So if you have changes in your code, just remove +')' and +'(' parts
languid escarp
yeah igot rid if the perenthesis but im not sure where to add X
wise basalt
Wow, sorry I was on lunch I missed a lot
wise basalt
I should fork the GitHub samples so I can add some for people
Widgets with some more style
viral patrol
It would be great if you would like to publish some of your work
And to add X It has to be +'x'
languid escarp
this is how i did the x
arr[1]='<span class="type">Sub </span><span class="user">'+data["name"] + '</span><span class="amount">'+data["amount"]+'x'</span>';
at the end. is that right?
it didnt work so i assume not haha
viral patrol
One second
arr[1]='<span class="type">Sub </span><span class="user">'+data["name"] + '</span><span class="amount">x'+data["amount"]+'</span>';
wise basalt
since you are using the widgets in chrome (because OBS uses a version of chrome), i would suggest using template literals for readability if you are adding HTML into js code
like this: ```js
arr[1] = <span class="type">Sub </span><span class="user">${data["name"]}</span><span class="amount">x${data["amount"]}</span>;
basically template literals in general for much of this widget
and heres the doc: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
but also, dont use html in JS lol
languid escarp
I actually just got it work! The only other question is that is there a way to add a space between the person who donated bitts and the number? i dont have anything preeceeding the number amount so i cant use the space bar to do it
arr[1]='<span class="type"> </span><span class="user">'+data["name"] + '</span><span class="amount"> x'+data["amount"]+'</span>';(edited)
} else if (listener === 'Cheer-latest') {
arr[2]='<span class="type">Cheer </span><span class="user">'+data["name"] + '</span><span class="amount"> '+data["amount"]+'</span>';
} else if (listener === 'tip-latest') {
arr[3]='<span class="type"> </span><span class="user">'+data["name"] + '</span><span class="amount"> $'+data["amount"]+'</span>';
wise basalt
you can add literal spacesjs arr[1] = `<span class="type">Sub </span> <span class="user">${data["name"]}</span> <span class="amount">x${data["amount"]}</span>`;
since spans are inline elements
though, you cannot add multiple whitespace characters like this
languid escarp
how would you actually type a literally space on this part?
arr[2]='<span class="type">Cheer </span><span class="user">'+data["name"] + '</span><span class="amount"> '+data["amount"]+'</span>';
wise basalt
arr[2]=`<span class="type">Cheer </span><span class="user">${data["name"]}</span> <span class="amount"> ${data["amount"]}</span>`;```but if you are doing it to all of them, consider using a margin style
this might do the trick css .username span + span { margin-left: 5px; }
assuming you are using the same base html as the widget and inserting the spans into the username div
languid escarp
would that go in the CSS?
wise basalt
yes
languid escarp
okay ill try that real fast
wise basalt
just remember to remove the spaces between the spans
wise basalt
yes, remove all the spaces and let the margin handle it
arr[2]=`<span class="type">Cheer</span><span class="user">${data["name"]}</span><span class="amount">${data["amount"]}</span>`;```that way you can guarantee there is even spacing between each
and if you so choose you can independently override them with say css .username .user { margin-left: 10px; }
languid escarp
Okay i did this and the margins after the Username didnt move. Was this correct?
wise basalt
oh lol
my bad
add this css .username span { display: inline-block; } since spans default to inline not inline-block
and you cannot margin or pad an inline element
also you have an error on your line 3
#span specifies an element with id="span"
instead of all span elements on the page
languid escarp
thats where iw ant it to be clear haha
okay. So does that go anywhere specific in the css?
wise basalt
just remove the # on line 3
and then add that inline block style on line 7 before the margin style
languid escarp
ok did that. Still the same ill send you a pic
dont mind the 26000 unread emails please haha
wise basalt
you need both style blocks
the .username span and the .username span + span
you removed the one that sets the margin and replaced it with one that only lets you set the margin
.username span {
display: inline-block;
}
.username span + span {
margin-left: 5px; /* or more depending on what you need */
}
you need both
languid escarp
hmmm. ill send you another picture. Im sorry im really know nothing about coding and am trying to learn as i go lol
viral patrol
@wise basalt because of using html in js I made a new rotator instead of initializing new domdocument in JS
wise basalt
a little explanation about this css so you understand:
- the last item in a selector is the thing you are selecting
- things that are in a list without commas mean that they should be looked for in children of the previous selector
- there are a lot of ways to select sibling elements
.username span means you are trying to select any span element that is any depth child from .username
<div class="username">
<span>Something</span>
<div class="child">
<span>This one will also get selected</span>
</div>
</div>```
`.username span + span` means you are going to select any `span` that is right after another span at any depth under `.username`
```html
<div class="username">
<span>Something</span>
<div class="child">
<span>something before</span>
<span>Only this one will get selected</span>
</div>
</div>```And I am more than happy to see you helping others 😉
wise basalt
this is literally my profession lol
viral patrol
I do know that. But helping is not a profession, it is a choice.
wise basalt
i remember when i was trying to teach myself web development many years ago and i would ask a lot of questions like @languid escarp and people would get really frustrated and i remember not liking that feeling and it would in turn make me frustrated
also its not enough to handhold, but also explain why something does something because otherwise they wont know what they implemented
i am glad to help
viral patrol
Yup. I do know that "Google it, thread closed" was a huge problem
languid escarp
I genuinly appreciate that @wise basalt Im considering going to school for coding once im out of the military haha
wise basalt
@languid escarp just pay it forward once you learn 🤣
languid escarp
oh for sure!
Well i basically got 95% of everything i needed done, but i gotta start up in like 45 min and need to do things. If your not busy tomorrow i would really love to talk more about this becasue its all finally starting to come together now haha
wise basalt
you can dm me if you have more questions
viral patrol
or if you are old enough "Go comp.lang.c instead of asking at comp..ai"
languid escarp
Sounds good. Thanks, you both!
wise basalt
👍
pulsar willow
How would I import a NerdorDie overlay from SLOBS?
pure trellis
probably will need to copy pasta there html, css, js and put all of that in a custom widget.
pulsar willow
How would I find that
cinder lintel
you can import that directly using our SL import tool, then just need to change a few things
wise basalt
hey @viral patrol , can the api retrieve the total tip amount or total bits a specific user has ever sent?
viral patrol
@wise basalt AFAIK there's no endpoint for single user aggregated data endpoint.
dapper jolt
Hello everybody, i have a question, the api has some call to make redeemtion from the store?
wise basalt
thanks @viral patrol i will have to work around it
viral patrol
@dapper jolt I think it is POST /kappa/v2/store/:channel/redemptions/:itemId
dapper jolt
@viral patrol i will see it, thanks
fickle drift
I made a twitch custom module that plays a sound, I'm using the following code to play the sound:
let audio = new Audio(soundSettings.SoundFile);
audio.volume = soundSettings.Volume * .01;
audio.play();
It plays the sound in the overlay but not on the stream, is that a problem with the code or OBS settings somewhere? The stream still plays other sounds such as follow alerts etc
wise basalt
maybe related to chrome's autoplay policy?
fickle drift
wouldn't that also affect it playing in the overlay when you load it on SE?
It still functions there
wise basalt
you are comparing the overlay loaded in browser vs in an OBS browser source?
fickle drift
yeah
wise basalt
i remember hearing that chrome changed autoplay off for audio recently
you only need to make a single user gesture to allow audio and video to play
maybe use an audio context rather than created an html audio element?
if its an html element you may need to document.body.appendChild(audio); before you play it
var audioCtx = new AudioContext();
var xhr = XMLHttpRequest();
xhr.onload = function(e){
var sourceNode = audioCtx.createBufferSource();
audioCtx.decodeAudioData(e.response, function (buffer) {
sourceNode.buffer = buffer;
sourceNode.connect(audioCtx.destination);
sourceNode.start();
})
}
xhr.open('GET', 'http://example.com/audio.wav');
xhr.responsetype = 'arraybuffer';
xhr.send();``` something like this?Hi all, back again with another newbie question. My setup is that I'm trying to get an arduino ESP8266 microcontroller to connect to the SE websockt for my stream. The issue is that I keep getting a disconnected statement. I enabled debugging and got the log where it tries to connect. It would seem im getting service unavailabe messages. Can anyone see any obvious mistakes as to why I can't connect? https://pastebin.com/TT13AUcH
fickle drift
@wise basalt All good, managed to get it working. It wasn't chrome's autoplay settings, something with the OBS scene wasn't configured correctly I guess
Thanks for the help
😃
wise basalt
lol i went too deep!
viral patrol
Autoplay restrictions of unmuted stuff doesn't affect OBS fortunately
wise basalt
obs doesn't support the flag or its just on by default?
viral patrol
It is by default off there
wise basalt
weird
wise basalt
@ivory heath which library are you using to handle the WS connection?
oh my bad this is connection to a SE websocket feed
its responding with a 503 though
ivory heath
@wise basalt yes i'm attempting to connect to Streamelements websockets using WebSocketsClient (socket.io-arduino-client-master library)
not sure why i'm getting the 503
wise basalt
bad auth?
ivory heath
it's not even getting to the auth stage.
my (limited) understanding is that it establishes the websocket connection, and then writes the auth info, but i'm getting 503 and no evidence of being connected
@wise basalt i think you have hit on something. re-reading the log i can see the connection message. i think i need to figure out how to present the auth message to the server. (don't mind me. I'm building a sand castle. Just one grain of sand at a time)
wise basalt
sorry i got pulled into a meeting for a moment
ivory heath
no worries, if this is an auth issue, i have to figure how to format the auth writeback using the webSocket.sendTXT function as opposed to the socket.emit function in the example
spring cypress
@ivory heath read socketio since they use it... it had a specific way to sen messages
ivory heath
@spring cypress and @wise basalt i have just changed my code to connect to twitch pubsub and i notice something interesting in the debug log that doesn't happen when connecting to StreamElements
there is a switching protocols entry
[WS-Client][sendHeader] sending header... Done (27132us).
[WS-Client][handleHeader] RX: HTTP/1.1 101 Switching Protocols
[WS-Client][handleHeader] RX: Upgrade: websocket
[WS-Client][handleHeader] RX: Connection: Upgrade
isn't connecting to a websocket like connecting to a websocket which like connecting to a websocket?
or are there different implementations?
ivory heath
hmm that just confuses me as i'm using a socket.io websocket lib
or so i beleive 🤔
to be clear, this code is running on an esp8266 not in a webpage. essentially i'm trying to get a piece of hardware connected to SE websockets, but i my go the pubsub route which is a shame as i really wanted to capture donation events
viral patrol
If you are having 503 it is not auth. Maybe host or something else
wss://realtime.streamelements.com/socket.io/
If you are using socket.io it probably automatically adds path
ivory heath
@viral patrol i have to be honest, i do not have auth in my code. i have been working progressively towards a working system.
Local WiFi connection [check]
Connection to the outside world [check]
Connection to websocket [nope]
Auth and connect to channel data [TBC]
Rest of application [TBC]
Have you followed example on website https://developers.streamelements.com/websockets ?
ivory heath
I have a connected satament in there and some code commented out for auth, but i need to get past this
yeah that's what i've been using as a guideline
wild tendon
Hello friends. I previously purchased and set up an overlay/alert package from Nerd or Die on SLOBS. I want to convert to obslive but i am unsure how to convert their SLOBS specific files to a type that I can import into obslive. #helpdesk-selive suggested someone here might be more experienced in what I want to do.
SLOBS has a feature to export the overlay into a .overlay file. However I do not think obs can import this file type.
I really want to move to obslive
Appreciate any help 
wise basalt
Hoo boy, I was away from my computer most of the day. I will be home shortly @ivory heath and I have experience with socket.io
ivory heath
Thanks @wise basalt , all good here. Let me know when you can 😉
wise basalt
let me read back
@ivory heath yea iirc socket.io goes to a path so it can do the handshake
its expecting to work with a socket.io server, not generic websockets
pulsar willow
g
ivory heath
@wise basalt I was using a socket.io complient library so not sure why I was getting the service unavailable
Pubsub is a bit limited in that I can get sub and bits data, but from what I understand Streamelements should give me the full gambit of events
"IF" I can get is working
viral patrol
@wild tendon if you go to alert editor in SL you will see code of this alertbox. You can also use our import tool to get your alerts from SL. If there's any problem with conversion just come here and I think we will be able to help you.
woven field
Hi gyus, i have some questions please :
- Tiers : 1000 is Tier 1 i guess, so 2000 is for tier 2, 3000 for t3 right ? (unless it's "prime")
- Amount is how many months (1 in this case but can be 6, etc) right ?
finite heath
@woven field yes to both, and tier can also be "prime" for prime afaik
woven field
Thx @finite heath
cobalt fable
Hello Streamelements Team,
I have the following question: I want to maky my Twitch Alerts as Custom CSS but in the Cheer Alert, the Cheer Emotes aren't show up when i want to show the User Message. Can someone send me an JS Code to get the Cheer Emotes and replace for example "cheer100" with the correct animation of twitch?
viral patrol
And amount can be cumulative subs given for gifted subscription.
pulsar willow
is there more documentation on the store redemptions? I'm on developers.streamelements.com and all I see is a blank page for the store endpoint
cobalt fable
Edit of my Post Yesterday. If someone can help me to set this up, this would be nice too. I already got a small solution from @wheat kelp in September but i'm still stuck.
cobalt fable
Here is an Image that shows what i want to do
indigo flume
@cobalt fable In your custom css are you using {{message}} in the html?
to show the cheer message?
@pulsar willow We are writing the documentation as we speak.
There were a couple of endpoints, so unless you want a specific one, i'd suggest to wait a bit for the documentation to go live.
cobalt fable
@indigo flume yes
indigo flume
@cobalt fable I just checked, this is a known issue for custom css and there is no work around currently for it. Its set to be fixed, but no ETA on when.
cobalt fable
@indigo flume so it should be in the {{message}} Parameter itself but it's not working at the Moment. Right?
indigo flume
yes
thin venture
Hi there guys, I'd to ask you about some kind of "train" or "podium" widget in which I can show the name of the top chatters in a period of time. Chatters, not Super Chatters.
I mean, a widget to display in the stream a rotating bar or podium with the 3 followers/subscribers that participated the most in the chat during a stream, changing positions dynamically if somebody writes more than the other
It seems it can be done through some API command, as Sean suggested. Thanks!
wise basalt
@viral patrol is there a boolean field option for custom widget fields?
viral patrol
I think you can use checkbox, but I used dropdown for that
ivory heath
@wise basalt had another go at this and I'm still getting errors connecting to the websocket. I'm not attempting to auth, just get the "connected" message. Once i have that i can move on to the auth request on receiving the connected message.
https://pastebin.com/dqVsuYM4
I'm using this Arduino socket.io lib https://github.com/timum-viw/socket.io-client
wise basalt
@ivory heath i dont code on arduino but i can try to rig up a JS sample to see whats going on with the service
but it will have to be later as i am at work right now
ivory heath
@wise basalt thanks man. no expectations this side of the wire so as and when. I appreciate the help 👍
wise basalt
oh yea @viral patrol i dont know what i didnt mention it earlier but you cannot automatically grab the apikey from the url because of course you cant access the parents location because the iframe that runs your script is not in the same origin as the page that runs the iframe
wise basalt
so the only thing i did was write it in a variable
cobalt fable
Question: Does it mean, i have to put the percantage down to get more winners? Oder over 100% to get more winners? Confused because you can go up to 200%
zenith folioBOT
@cobalt fable
The slider increases the payout if you manage to win
Less than 100 on the slider means people will not win money over time using the slot machine. 80-100 is a good range
less emotes = higher win chance
its like 5 emotes = 3%, 4 emotes = 7%, 3 = 12%
actual formula : n / n^3
n = number of emotes
woven field
Hi guys, i would like to create a HTML CSS JS overlay who's listening to SE events to get animated, and show data. How do you recommand doing that please ? i managed to connected to the api and stuff but i'm refreshing the response every 1 min, is there a way to "autolisten" for them please ?
indigo flume
Our overlays already have widgets that support custom css
Alert widget handles all event processing and each type of event can have its own custom css:
We also have a custom widget where you might have to add logic handling in the JS part
woven field
Oh nice ! i didn't see that 😮
indigo flume
variables for it can be found in the doc pinned in this channel
woven field
thanks a lot @indigo flume
indigo flume
👍
viral patrol
And about this pinned message. You asked about autorefreshing results from API, there are events accessible within custom CSS you can listen to, so you can trigger your code by those events
woven field
Testing/preview alerts is supposed to trigger "onEventReceived" ? i might broke something otherwise
viral patrol
It should
woven field
damn ok
woven field
That's finally working properly lol, that's aids to build it from the editor lol but hey, it's working thanks guys 😃
viral patrol
I usually do most of the code in my IDE then copypaste it to editor
woven field
yeah i guess but i'm not skilled enought i have to test almost every 5 lines LUL
viral patrol
I copypaste alot between them for testing (I know I could create event emiter, but I see no reason for that).
ivory heath
@wise basalt might be an odd question but do you know what version of socket.io is implemented? I've just seen a library that supposedly supports v1.x, suggesting the issues I'm getting might be a version conflict
wise basalt
catch me up, the version implemented where?
ivory heath
On the server. Is there any way of getting that with a query?
wise basalt
realtime.streamelements.com implements socket.io?
that i was not aware of
i havent gotten time to test it honestly
ivory heath
Hmm. That's the thing the post I saw said the library they wrote supported socket.io v1.x
Ok no worries. Hoped it was going to be an easy answer. But in life nothing is lol
wise basalt
have you tried npm i socket.io@1.7.4 to test?
ok i just did a test
in js if you dont supply a path it tries to go to https://realtime.streamelements.com/socket.io
you can manually specify the path but then im getting a 404 / CORS policy error
even though the response allowed origins are *
ivory heath
I'll do some testing tonight when i get in. Just wrapping my day job. Thanks for the advice 👍
wise basalt
oh duh
file:// doesnt count as an origin lol
one sec
welp
reading documentation actually works
by default when you set up socket.io it uses transport=polling in the query
you need to set it to transport=websocket
const socket = io('https://realtime.streamelements.com', {
transports: ['websocket']
});```like this
btw i am using 1.7.4 just to be sure
i was also able to connect (sorta) with insomnia to the service with a few header options
it went into 101 Switching Protocols
> Host: realtime.streamelements.com
> User-Agent: insomnia/6.3.2
> Cookie: __cfduid=dc004b2920d0be366ae06119722fbb1f91546633877
> Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
> Sec-WebSocket-Key: Bxm/dnDYC0hlxtgqPt4u0w==
> Sec-WebSocket-Version: 13
> Upgrade: websocket
> Accept: */*
< HTTP/1.1 101 Switching Protocols
< Date: Thu, 10 Jan 2019 17:23:25 GMT
< Connection: upgrade
< Upgrade: websocket
< Sec-WebSocket-Accept: ssiPpgtE7qSQZc7e1Kh7xvBmYFI=
< Sec-WebSocket-Extensions: permessage-deflate
< Strict-Transport-Security: max-age=15552000; preload
< X-Content-Type-Options: nosniff
< Expect-CT: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
< Server: cloudflare
< CF-RAY: 4970d4c3feadab4e-YYZ```
floral fable
ivory heath
@wise basalt the issue i get is that i do not get the "Switching Protocols" statment, i just fails with 503 service unavailable
wise basalt
can you send me a link again of your raw headers?
@viral patrol i can't believe it! THIS IS GLORIOUS!
ivory heath
@viral patrol & @wise basalt is V2 webhooks? if that's the case i may have better luck with that API given my constraints
wise basalt
@ivory heath can you shove an EIO=3 into your query, socket io seems to add it every time but im not sure what it used for yet
hmm
i just did some testing
the only things that seem to be mandatory are ?transport=websocket and these headersSec-WebSocket-Key Sec-WebSocket-Version Upgrade
not even that awkward origin threw it off for me
ivory heath
hmm, ok i'll have a play around and see what i get. thanks for your patience @wise basalt
wise basalt
nah its ok
i wish i could nail it down better
most recent test in Insomnia ```> GET /socket.io/?transport=websocket HTTP/1.1
Host: realtime.streamelements.com
User-Agent: insomnia/6.3.2
Cookie: __cfduid=dc004b2920d0be366ae06119722fbb1f91546633877
Upgrade: websocket
Sec-WebSocket-Key: yTp1kEU9CAv6+MmM19QClw==
Connection: Upgrade
Sec-WebSocket-Version: 13
Origin: file://
Accept: /
< HTTP/1.1 101 Switching Protocols
< Date: Thu, 10 Jan 2019 21:24:56 GMT
< Connection: upgrade
< Upgrade: websocket
< Sec-WebSocket-Accept: wsDOYtH96ZXGQOFZzCJWyWy2vk8=
< Strict-Transport-Security: max-age=15552000; preload
< X-Content-Type-Options: nosniff
< Expect-CT: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
< Server: cloudflare
< CF-RAY: 4972369e1a87ab78-YYZ```
im using almost all the headers you have
so weird
but 503 means the server responded and its not being intercepted totally by CF otherwise you would get a cf-cache-status: HIT header
i havent ever gotten 503 though
400 and 404
but then again, i am testing JS based
@viral patrol a lot of the endpoints here that i know can be accessed by apikey say bearer, are they being switched over?
GET https://api.streamelements.com/kappa/v2/activities/channel/top for example
viral patrol
A lot of data can be accessed with apikey, but those endpoints provide data that is displayed on overlays. For example /activities/channel/top will provide you a list of top tippers/cheers, but no e-mail address of those tippers
wise basalt
gotcha
is there separate documentation then for endpoints accessible with apikey or should i just assume most get methods?
viral patrol
Not most of them, I would bet (as I never used apikey auth) it will work only on GET methods for items that can be shown on overlay and don't have any sensitive data.
wise basalt
gotcha
well yea most of the live data i need comes from that auth
i built something absolutely ludicrous for 9ks board because i just wasnt able to work with the data as efficiently 🤣
in the process of doing so i found out that the stats from /top are not very clean
i got many duplicates
viral patrol
Some time ago I wrote API wrapper in PHP to have MITM service to interact
viral patrol
For example there's "Wheel of fortune" on #widget-share - if you have MITM you can automatically give "points rewards" to user.
viral patrol
You can host it externally. I was using ovh for looong time.
Their service is both cheap & cheap 
wise basalt
hehe
i wrote a whole front end database that is used in the overlay
on session it pulls and builds
and then i can query it like mongo
it was WAY over the top
viral patrol
Oh. Sounds nice. When I saw that InnoDB and cookies are not usable there I started to use keyvalue.xyz
wise basalt
loki.js
viral patrol
For some time I was using it as it is desired to be used
storing key=value
But some time after that I started to do key=JSON-OBJECT-BECAUSE-I-CAN
wise basalt
database like wrapper using js object literals
just doing what you were doign but with a nice wrapped library
viral patrol
Just looking at that now
wise basalt
i can share the code for it once i get home
im also writing an SE api lib that i plan to share later
wise basalt
but one that doesnt apply to me lol
viral patrol
I think that I could scrape every endpoint there and check automatically if it works with apikey auth
sturdy socket
Hey @viral patrol have you seen much about the new streamdeck sdk
low ocean
Not sure if this is a known bug or not, but i seem to have stumbled upon a duplicate glitch when trying to add loyalty points through the rest api. It seems like it creates a duplicate entry if parts of the name sent through the api is in uppercase when the name is entered in lowercase on the loyalty leaderboard. I seem to be unable to remove the duplicate through the "reset current points" button, and im also unable to either subtract or add to the duplicate entry. The only way of removing it seems to be through the "reset" button which resets the entire leaderboard.
Has anyone encountered this before?
Seems like the only fix for this is to first export your leaderboard points, then reset the leaderboard.
Make sure you remove/change any uppercase names, then re-import the points.
mortal wagon
Anyone know how i can fix this so instead of it showing "£" before a tip it actually shows the currency that was donated ?
function updateWidgetText(){
if(topTipper){
document.getElementById("tipper-name").innerText = topTipper.toString().toUpperCase() + " ";
document.getElementById("tipper-amount").innerText = {currency} + weeklyTippperAmount;
document.getElementById("Weekly-tipper").style.display = "inline";
^ I tried this but it just renders the tip empty
This is what it was for those curious
function updateWidgetText(){
if(topTipper){
document.getElementById("tipper-name").innerText = topTipper.toString().toUpperCase() + " ";
document.getElementById("tipper-amount").innerText = " £ " + weeklyTippperAmount;
document.getElementById("Weekly-tipper").style.display = "inline";
I suck with code >.<
Also would be cool to get it to show tips as $.2.30 instead of $2.3 ? Its so freaking weird to see (Yet again i am clueless though).
Dm me for full code if needed
pulsar willow
@indigo flume cool, just saw your message about the documentation. I'll wait for you fine ladies and gentlemen to be finished. Thank yoU!
indigo flume
@mortal wagon If you use {{amount}} and {{user}} in the JS code you have to assign them to a variable like so:
let username = '{user}';
let moneyAmount = '{amount}';
and then a manipulate them it what ever way you want
@pulsar willow The API doc is out
pulsar willow
awesome! I've got some work ahead of me this weekend then 😃
indigo flume
Check this channel's description
mortal wagon
r/woosh
viral patrol
@sturdy socket unfortunately I don't have streamdeck and never played with that
ivory heath
@viral patrol i've been looking at the API documentation and boy there is a lot of data that can be got. do you happen to know if there is alert data in there too as i could not see it. I'm scoping out an application that responds to alerts (Follow, Sub, Bits & Donations). if i can access alert data i can use that as a trigger, if not i might have to load a variable and check to see when it changes to trigger an event
viral patrol
You have /activities/ endpoint which contains every event that trigger alerts
You can add ?after=timestamp_in_miliseconds&before=timestamp_in_miliseconds&types=tips&types=cheers
So after is your PREVIOUS call before, and before is current timestamp
So you can get new events only
ivory heath
👍 just looking at that section now
the string "channel" where is that obtained? is that a twich channel ID or something that is picked up from the SE dashboard?
viral patrol
This is channel id, you can get it automatically
Just query /channels/me with Authorization: Bearer JWT_TOKEN
It will be in response
ivory heath
@viral patrol sorry for the dumb question but what is considered the root for that url ? would it be formatted https://api.streamelements.com/kappa/v2/channel/me
viral patrol
ivory heath
bingo, just playing with postman to see the data before getting my head into the IDE
ivory heath
@viral patrol having some strange results, some of the endpoints are returning data
https://api.streamelements.com/kappa/v2/overlays/channel
but others are giving me a forbidden 403 message
https://api.streamelements.com/kappa/v2/tips/channel/leaderboard
why would this be? both need the bearer token for auth
also not able to get a list of activities using
https://api.streamelements.com/kappa/v2/activities/channel/top?period=alltime
it just returns [], but ground control lists data
viral patrol
@ivory heath what authorization method are you using?
ivory heath
Authorization: Bearer JWT
as a header
this bit is the same in all queries, I'm just changing the string to access the endpoint and add any parameters
just odd it works for some and not for others
unless there is a different approach for the ones that are failing
viral patrol
One moment
ivory heath
👍
viral patrol
Oh. You didn't provide a type in top
?type=cheer&period=alltime
Wait... It is missing in docs
ivory heath
ahhh ok so you have to specify the activity type? that's not specified in the doc
that the activity is just returning "[]" not sure if that is an indication of an array, but i was expecting a json return there are no bracers '{}'
putting type does return data
i was looking to see what event 'types' i can return
i'm trying to see what an activiyId looks like and where to get it from
viral patrol
types are cheer/tip
ivory heath
so what about subs and follows. i know they won't be in top, but i want to see this data to trigger an event
interesting that there is more parameter data documented here - https://developers.streamelements.com/endpoints/activities
going by the response from the server it looks like i need to use session data and set variables and compare if they have changed on polling
from that i can trigger an event
my only worry is missing an event if more than one comes in during the polling window
scratch that - i can see the *-recent value
@viral patrol is there not a single endpoint to get tip, cheer, subscriber and follower data? using session data is going to be a headache for me
activities only seems to have tips and cheers
Would have been ideal with the before/after string
mortal wagon
How can i get the JS to pull the right currency i got tipped, Iv got it right now as "$" but if i get tipped "£" the symbol wont change ?
cinder lintel
there should be a variable for {currency}, it is what is used in the alert I believe
mortal wagon
Doesnt work {currency}
pulsar willow
hey is there any way to get the currency for onWidgetLoad as i tried to google "StreamElements onWidgetLoad" but there seems to be no documents at all for onWidgetLoad
the one that would go with obj["detail"]["session"]["data"]["tip-weekly-top-donator"]["amount"]
cinder lintel
@viral patrol or @indigo flume would know the answer to these
indigo flume
Pinned message for the that answer.
viral patrol
window.addEventListener('onWidgetLoad', function (obj) {
userCurrency = obj.detail.currency;
});
ty ill try that
Nope thats not it Uncaught TypeError: Cannot set property 'innerText' of null that comes back as null
oh i see that send back as a objact
got it with currency = obj.detail.currency; weeklyTippperCurrency = currency["symbol"];
rugged rapids
How to display either the last cheer or last donator visible with the amont in a single text box, depending on which of these events happened at latest?
I am not looking for some sort of rotating slider.
(I am mod for a channel looking to setup the tipping settings in the future on SE.)
Thank you very much.
dim zephyr
Will you guys be making a download link for mac users
sturdy socket
hey @viral patrol how would i just run a php page with the $customapi command variable
or would i need to use somehting else cause theres no variables going into it its just running a script
or if anyone else knows. basically want it to visit a url and run a php script at that domain
floral fable
I am not sure on the script itself, but to just call something like that from a command, the format for the response would be something like $(customapi.http://awesomesite.com/script.php)
sturdy socket
ah okay so i just have to point to the script. cause i was trying it with index.php and it was just returning the script into chat
like the string for the command with customapi in it and everything
lemme try with the php file name on the end
thanks kite
chucking the file on the end fixed it
floral fable
sturdy socket
its replying with "jdude.tv returned status code 408 Request Timeout"
even though the script is running
cause my lights are changing 🤔
floral fable
That is beyond my skill set 
sturdy socket
all good
viral patrol
@rugged rapids in that case the easiest way is to use our "Custom Event List" ( https://github.com/StreamElements/widgets/tree/master/CustomEventList ) With setup: displayed items: 1, types displayed: cheer, tip
@sturdy socket it seems you don't have PHP parser on your hosting
Or your script starts with <? instead of <?php and you have short_open_tag disabled
sturdy socket
@viral patrol how would i check or the php parser
i just have cpanel access
<?php
$url='https://api.lifx.com/v1/lights/label:left/state/delta';
$authToken = "..............................";
$headers = array('Authorization: Bearer ' . $authToken);
$data = 'brightness=1.0&power=on&duration=1&hue=120&saturation=1';
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS,$data);
$x = 1;
while($x <= 10) {
$response = curl_exec($ch);
$x++;
sleep(0.5);
}
if (!$response)
{
die('error');
}
$status = json_decode($response,true);
if (isset($status['error'])) die ($status['error']);
else die ('success!');
?>```the code im running for context
just more light changing stuff
viral patrol
If you open it via browser, do you see code?
viral patrol
Huh. And if you run it via customcode it doesn't work?
sturdy socket
customcode?
viral patrol
bot call
sturdy socket
it runs then spits out the big error into chat
half way through
for the other light effects it says success
but on this it says the status code 408
request timeout
viral patrol
Ohhh. I think I misunderstood you in first place
sturdy socket
yea kite got it working
viral patrol
I thought it was returning code text
sturdy socket
it was
kites change fixed it
now its returning the long error
but running the code fine
viral patrol
So it is maybe taking to long to execute script and hosting company kills this process
Then sends you info, that it happened
sturdy socket
maybe
like it is timing out the bots connection waiting for the response
but still running the script server side
because of the while loop?
viral patrol
Most likely you have no exit from that loop
sturdy socket
it runs 10 times half a second each
then ends
like on the webpage if you load it directly it says success
after 5 seconds
viral patrol
It should give the same response on bot
sturdy socket
but its just taking too long
should i make it respond quicker
instead of after the loop
sturdy socket
will the queries queue up per se
on the api end
usually
ill test it quickly
getting rid of the wait
and see if it still executes it 10 times
got rid of the sleep and its still taking the same time
would the max execution time be a server thing or SE bot thing
viral patrol
max execution time is usually server thing. Bot might have it's own as well
I wonder what is this script about that it is taking that time to execute
Is it animation on your lights or something?
sturdy socket
yeah
but i think its the $response = curl_exec($ch);
they are waiting for an api response back
before running hte next one
like any response whether an error or successfull
cause if i have 6 of them
runs fine
7 times out
rest of the script doesnt matter on timing
viral patrol
I wonder what can you do to achieve animation
sturdy socket
im gonna keep researching and see if theres another way to do it
viral patrol
Instead of this php script
viral patrol
I think you could do that in overlay and listen to bot response there
And overlay could send requests one by one to your php script
So instead one script with waits, there would be a script that does one thing and it would be controlled by JS in overlay
As this has no execution time limits
sturdy socket
cause it would be running independently
theres a lan protocol
maybe i can make the chat bot run something locally
to acoid the api all together
avoid*
OML they literally start talking about building lifx packets
like at the binary level
end me
someone made an open source gui
built in python
well time to look into the source code of this app and see if i can hook it into the chat bot 
sturdy socket
like the app i found
can do exactly what i want
but no way to hook into chat / anything external
just manually toggling it
unless i can use their source code and figure out python enough to make a chat toggleable thing
rugged rapids
I have copied and set up the Credit Roll for your Stream End scene from the #widget-share .
But there are always the cheer events from before 13 days or so listed and I can't reset them.
Already tried reset the session. No fix.
This effect just happens for the cheer events.
How can i "delete" the cheer session data properly for the widget?
Information:
Channel: moonthebear
Overlay: "new overlay - PINELYN STREAM END" [custom widget 23]
(I have full access to the channel.)
viral patrol
We know that cheer data is not reset, and it is in progress now. However there's no ETA on that
rugged rapids
Thank you very much for the info. 
rugged rapids
I have got still an issue regading the Credit roll from the widget-share channel.
I thought when I switch to the scene in OBS, it would strart automatically, but it doesn't.
How can I trigger the credit roll?
zenith folioBOT
Make sure to :ballot_box_with_check: “Shutdown source when not visible” for all browser sources (all OBS scenes). If using studio mode, uncheck “Swap Preview/Output scenes After Transitioning.” Also keep in mind that sound can play from any overlay loaded in the browser (editor or launched). https://i.imgur.com/FegZJQS.png https://i.imgur.com/yY0wcFl.png
rugged rapids
well... my fault. didn't thought about that. thx a lot.
keen sonnet
hello! I got myself new custom made alertbox but noticed that emotes dont show up in sub / resub / gift / tip and cheer alerts
http://prntscr.com/m6btqt
whole alertbox is made in cusom css
rugged rapids
Is there a way to store all moderators who are online in the channels chat at this point in an array in JS, when the widgetLoad Event (custo widget) is triggered?
covert talon
Hello. I don't know where to ask. Sorry for being impatient, I spent 2 days by compiling, reading documentation, installing, alternating cmake scripts. When I'm trying prepare obs-browser for compilation, cmake wants path to LibcurlConfig.cmake or libcurl-config.cmake, which is not provided by any curl source package. Why is it so? I think I have everything else, compiling cef-project was hell, it is kind obsolete. I'm compiling on Linux, and everything looks that it should work.
viral patrol
@rugged rapids you can listen to onEventReceived with if(obj.listener==="message") check to gather this data, but I think that mod data is almost static, so you could create a field to keep comma-separated list of mods
zenith folioBOT
@covert talon For the best OBS support, please join their Official Discord @ discord.gg/obsproject
viral patrol
I think that it is the best way to find help about compiling OBS on Linux.
covert talon
obs-browser is added to obs.live as plugin. obs-browser is using libcurl to download SE overlays. They will send me back.
viral patrol
Ohhh. OK
covert talon
but thank you for reaction
viral patrol
The only thing I could find: https://github.com/bazukas/obs-linuxbrowser/releases
Unfortunately I've never tried to build OBS on linux
covert talon
I think that if it will have all dependencies, it will compile. I can't see anything platform dependent. Some features are enabled just for Windows (browser panel), but browser plugin should be working. It can work on Linux and Mac. As Twitch is no more just about games, many streamers can use Mac for chat or art. That is why I'm digging into it.
quartz gull
is there anyways to see if a tipper added a video in the customwidget?
rugged rapids
When using the SendMessage-Function of the API (https://docs.streamelements.com/v2.0/reference#botsaybychannelpost)
I just receive the following Error:
{"statusCode":500,"error":"Internal Server Error","message":"An internal server error occurred"}
And yeah, I changed the variable channelname.
Any help on how to fix this?
viral patrol
@rugged rapids can you please give us more details?
rugged rapids
@viral patrol do you have acces to the overlays of the channel "moonthebear"?
viral patrol
I don't have without invitation
rugged rapids
give me a second. I'll copy the overlkay real quick onto my SE account and will give you access.
viral patrol
Got it
cunning forge
Hello, I'm a little new to streamelements so I am trying to learn a little bit about it, I was using streamlabs but with its API documentation, I was not able to integrate it into my current JS. I have found though that this API documents the redemption system, which is what streamlabs did not do. Basically I'm trying to make a redemption system that when a user redeems an item called "hurt", it takes a "heart" of an HP bar, and when they redeem a "Heal", then it gives a heart back to the HP bar. This is all for another streamer, but I'm just trying to help them out and trying to figure out a way to automate this process. Is there anyone here who would be able to assist?
cinder lintel
one of the other guys will have better input than me, but the way I would do it would be to poll the current user redemptions api (https://docs.streamelements.com/v2.0/reference#get-my-store-redemptions-by-channel-id), and compare to the last poll. Anything new would be processed (IE: 3 new redemptions since the last one, first is to take a heart, second is to give, third is to give). The only issue I see with that is that you would have to query it on a regular interval (5-10 seconds). Problems with that can be avoided with a certain delay between redeeming items (global and user cooldowns)
cunning forge
okay, also where would you find the redemption ID?
cunning forge
Oh really? Again sorry I'm new to streamelements lol
viral patrol
let health=0;
window.addEventListener('onEventReceived', function (obj) {
if (obj.detail.event.listener !== "redemption-latest") {
const item = obj.detail.event.redemption;
const user=obj.detail.event.name;
if (item==="heal") heal();
else if (item ==="dmg") smashWithHammer();
}
}
function heal(){
health+=10;
$("#health").css("width",health+"px");
}
function smashWithHammer(){
health-=10;
$("#health").css("width",health+"px");
}
event.name is username, let me check what's item name
cunning forge
sorry so you need the item's name or my twitch username?
viral patrol
Fixed code above
So if you have item called "heal" redemption would trigger heal() function
You can also check pinned message for overlay coding manual
cinder lintel
told you he would do better xD
vapid iron
Code Gurus 
cunning forge
thank you so much! That'll definitely make things easier lol
cunning forge
Okay, so I've only got one error coming up in the code, and that is at the "const item = obj.detail.event.redemption;" Is there something that is going wrong there that I'm missing?
yeah it seems that the redemptions themselves still aren't connecting to the widget, as they don't show anything when I redeem it.
cunning forge
here is so far what I have for the code, you probably will find I did somethin wrong when editing it lol
mortal wagon
How can i make a empty donation bar that still has a "goal" im trying to make a HP bar to blend in with this game but it looks broken AF with the text 😦
Im gunna split it into a "empty dono bar" and then a 2nd simple design widget for the text
but no idea how to do it with no text
twin ore
Custom widget.
twin ore
This is basically the custom coding channel though. 🤔
mortal wagon
Also whats with the poor ass alignment between Chrome & OBS... Something can look ligned up in Chrome but looks fucked up in OBS...
Trippy as fuck
Looks ok here
https://cruxedkat.live/s/201904545921.png
but broken here
https://cruxedkat.live/s/201904551560.png
Like 
twin ore
I... don't see a difference.
mortal wagon
The text is slightly higher in OBS
twin ore
I think that's just due to scaling.
twin ore
...as in, canvas scaling.
mortal wagon
Just the way something looks in Chrome (alignment) doesn't always replicate identically in OBS 😦 So its not a 1:1 conversion, like for something to look fine in OBS you have to bump the item down a few pixels in Chrome (editor)
twin ore
Looks about right to me, though you did change things while I was trying to make a point.
mortal wagon
yeah had to nudge the tip bar down a few pixels to fix it for OBS
or else the text was 2 high
spare cedar
hello i was redirected here by kiwa to ask if its possible to upload videos to streamelements twitch widgets and have them appear and disappear with chat commands a? maybe a custom widget?
finite wraith
Does anyone know how GrandPooBear did his custom widget that seems to integrate a Hype Boss of sorts? It looks really slick, I can link a clip if that helps. Rotates between top cheerer, top tipper, latest sub, latest follow, and Hype Boss.
floral fable
I have a feeling that he either paid good money for that, or that someone from his community offered to do it. That looks to be a pretty complex widget and would require a ton of work. I also dont know if we would have a way through our API to show the boss how he shows his, but maybe on of the gurus here would have more insight. I would say, if you can, to get a clip or something and share it to show exactly what it does, because it is an insanely cool thing he has setup.
quartz gull
you probably want to look into this for the rotator thingy: https://github.com/StreamElements/widgets/tree/master/TopEventsRotator
@finite wraith
lunar yew
Not sure if this is the right place to ask this, but is there docs on how use use custom alerts for the alert box widget? I'm struggling to understand what I can and can't do and how to format stuff like getting the name and what other variables are available to me
viral patrol
@iWyze#4616 Hi, you can take a look at pinned message with examples of data available in alertbox custom code
late patio
Hi, I'm new here and have a quick question... I have a background in web development and recently started creating my own HTML/CSS overlays for my own streams and I was wondering if there is a better way of interacting with StreamElements other than the "Enable Custom CSS" option in the Overlay Editor.
I looked at some of the existing overlays in the theme gallery but the code for those appears to be only accesible from the browser inspector. Is there any documentation I can reference to?
many thanks!!
indigo flume
You can see all available data for custom widgets in the pinned doc in this channel.
It also includes variables that can be used for custom html/css for the alert widget.
Do note that if you are oging to make a custom html/css for an alert widget, you don't have to make any onWidgetLoad or the other type events in the JS, as its already handled by the back end.
For a full custom widget, you will have to construct the JS for it.
late patio
thanks for the heads up... reading
I don't think I necessarily need to write everything from scratch, just the way the alerts are displayed... bur right now I'm having an issue with my custom HTML where the alert prints cheer100 cheer100 cheer100 in plain text which I can't style as it's not wrapped in anything
as for connecting to the API, what's do others usually do? run a local webserver on the machine running OBS? or am I overthinking this?
indigo flume
Yeah its a known issue for the custom html/css not showing the cheeremotes.
I think you are overthinking with the API connection.
but not sure my self as I haven't done it my self.
viral patrol
@late patio If you run local webserver you will have to disable websecurity in OBS (as you won't be able to provide valid SSL certificate), but this way is smart, if you want to use API, you definitely want to store your JWT Token within overlay variables, you use MITM script to do the job.
This is what I did for sub alert that added random amount of points to subscribing user.
twin kiln
Heyyyy, i've made a custom api (with php) that returns a string with an amount of scrap, and i've made the command soo anyone can call it, but does anyone know how to make the bot automatically add the scrap that was specified by the api to that user? So the mods do not have to add the points themselves?
cunning forge
hey Ix, would you be able to help me figure out the issue I am having with the HP bar coding? I've got it all coded, but it seems I can't get it to trigger to start through the listener that you provided. I can send the js file if you want to take a look at it to see what I did wrong lol
vivid copper
Hi all! I want to connect my app with THE HYPE Boss. Can i change boss hitpoints from API requests?
pulsar willow
2 questions about credit roll. 1) is there a way to not show the cheer amount but just the people who cheered? 2) can you combine the cheer total so a person who has cheered multiple times doesnt show up multiple times?
dense shore
Hello, guys! I have some questions about oauth2 authorization, jwt key and stuff. I have my own bot on channel and I want him to add or remove points without writing bonus command in chat. I tried to check documentation but this ( https://developers.streamelements.com/ ) is really empty and didnt help me at all. I make everything right (using JWT in right place with "put" requests), but I've got error 403 ("No channel authorization found")
Can someone help me with this?
spring cypress
in commands, any way to mix params, concatenate them?
/me Died for ${count "death"+${game}}
rugged rapids
I think thats not possible, but you could set up one counter for each game.
spring cypress
I see.. not the way I want.. okay..
viral patrol
@dense shore check new documentation - link in channel topic
dense shore
@viral patrol okay, I'll check it out, thanks
viral patrol
@vivid copper Unfortunately there is no API endpoint to manipulate points so far.
@cunning forge Check this endpoint: https://docs.streamelements.com/v2.0/reference#pointsamountbychannelanduserput
@pulsar willow You can aggregate this stuff, but you need to do that manually, as there is no "easy go" in that case. It needs some coding skills, but all data is provided and code is editable
Sorry for that delay with replying, but it was one busy weekend 😉
And as you can see, it is better to type your question instead of asking "anybody here?" as help can come by surprise 😉
toxic rock
Hey lx, you seem to know about everything like this, can you tell me if I'm stupid but I keep getting this error
{"statusCode":403,"error":"Forbidden","message":"No channel authorization found"}
Do you use header: Authorization: Bearer JWT Token?
As it seems that this might be caused by that
Or JWT mismatch (you have valid token, but not for specific channel)
toxic rock
its 100% being caused by that, I think I may just be formatting the header incorrectly
viral patrol
I am using that stuff for testing purposes: https://install.advancedrestclient.com/install
toxic rock
I'll give this a go, thank you
viral patrol
toxic rock
forgive me I am stupid, appreciate the help though https://sparkmc.net/s/roddy-20190120-180400.png
viral patrol
Vanilla js or jquery?
toxic rock
I'm using request in node
viral patrol
I am not sure if this is going to work, but maybe it is worth giving it a shot
let jwtToken="YourToken";
let message="Test message";
let channelId="124124124";
let options={
headers: {
'Authorization': 'Bearer '+jwtToken
},
uri: 'https://api.streamelements.com/kappa/v2/bot/'+channelId+'/say',
json: {"message":message},
method: 'POST'
};
request(options, function (err, res, body) {
console.log(body);
});
I hope there are no typos, but i wrote it in notepad
Ohhh.
OK. I see what is wrong now - take a look at my uri and your
Then, don't kill yourself by facepalm (this is actually how I react in those cases)
And I do have flat forehead now
toxic rock
sometimes I even surprise myself with my stupidity
ok so I'm using your code which works (returns status 200) but there isn't any message sent, is this because I'm offline?
toxic rock
hmm ok, just to check the channeId should be my "account ID" found in https://streamelements.com/dashboard/account/channels
viral patrol
OK. I clicked your profile to check your channel, and I saw Webstorm (I use phpstorm myself)
And to get channelId
make a GET request to url:
http://api.streamelements.com/kappa/v2/channels/ChannelName/
In response you will have "_id":"5b07e877a8b36a851e683878"
toxic rock
ok, thank you, I only use WebStorm over PhpStorm because it allows me to start and stop remote node processes, I've been using that particular id 5b07e877a8b36a851e683878 since the facepalm moment
if it helps this is the response
{"status":200,"channel":"5b07e877a8b36a851e683878"}
Oh, so there's no message
So it seems that your body was somehow not valid
OK. StackOverflow for rescue
It is not body but json
In that case I wonder if it should be stringified or if request lib takes care of that as well
toxic rock
sorry for the delay, someone arrived that I wasn't expecting, it seems that as you predicted just having json: {"message":message},works
dense shore
@viral patrol Okay, new link is helpful,but not really. There is not a word about expected authorization, at least not in the generic JWT way, it seems.
I tried to make basic request and failed all times with 403 error. I tried following ways of adding auth to request (in Postman):
1 Selecting auth via "bearer token" and putting my JWT here
2 Using it in the direct way via header "Authorization: Bearer XXX"
3 Same as 2, but with Header "Authorization: JWT XXX"
Any info about auth?
toxic rock
many thanks for all your help lx 😃
viral patrol
@dense shore take a look few lines above, there is full example of node.js request module with SE API.
And about postman. I think it is:
Select authorization header, type "Bearer XXX" as value
And it should work
Or few lines above that there is an example of JWT in Advanced Rest Client
cunning forge
@viral patrol thanks for the response. Just to make sure though, where you put
window.addEventListener('onEventReceived', function (obj) {
if (obj.detail.event.listener !== "redemption-latest”)
const item = obj.detail.event.redemption;
const user=obj.detail.event.name;
if (item==="heal") heal();
else if (item ==="dmg")
What does “obj.detail.event.redemption” listen for? Is it listening for the item name to be signaled or what exactly is it storing in the item variable when it is run?
viral patrol
It is item name. Variable value is not passed to overlay
cunning forge
Okay good to know, I’ll let you know how it goes then
cunning forge
Hmm... still no results unfortunately Ix. Again it is totally possible I am missing something crucial, and I don’t realize it. I did add the code from the website you gave me and put in both the itemID and channelID, but still it seems nothing gets it to start running.
viral patrol
Let me get some more details - are you trying to use overlay widget or websocket hook?
If it is websocket - I would suggest add event listener which will just print everything about object forwarded then redeem an item
cunning forge
The websocket, and I’ve tried adding the event listener already but it seems that it isn’t catching a name for the rest of the code to proceed when it says “item === heal/hurt”, it just comes out as null
viral patrol
I think that investigating console.log(event) will be more helpful than I am, as I was not usiing wss
cunning forge
It also keeps coming up with “Syntax error: Unexpected Token” at the
const item = obj.detail.event.redemption
(I’ve been using console.log for these)
viral patrol
Hmmm.
Unexpected token? Hmmm what about const item = event.redemption ?
Taking example from here:
function onEvent(event) {
if (event.listener !=="redemtption-latest") return;
console.log(event.redemption);
}
Lemme try that quick
viral patrol
Sorry for typos. I am on train rn and it is bit shaky 😉
cunning forge
oh no problem haha JS will usually let me know when that happens
hm so I didn't get an error, but I didn't get anything in console either
viral patrol
So let investigate it one level higher
This should show you full event scope
I keep my fingers crossed for you 😉
cunning forge
thanks haha, I'm really hopin this all works in the end, it would make the streamer I am making this for lifes easier
damn. Just another syntax error now when I put it back into the code
it's the same line, saying that "const item = event.redemption" is an unexpected token
viral patrol
And the snippet above - does it display anything?
This one without any conditions checks?
cunning forge
it just doesn't output, no errors but still nothing being spit out into console
viral patrol
Can I take a look at full code (without JWT Token of course)?
cunning forge
yep, do you want the JS file or just copy/paste it in here?
viral patrol
You can use jsfiddle/pastebin if it is big
If not, you can paste it here, but wrap it in code block
viral patrol
window.addEventListener is for overlay, and if you are using it standalone as node, you don't use that 😉
cunning forge
oh, sorry I should have been more specific. I am making this AS part of the overlay, but I am not making the redemptions through the overlay
so all of this is being made as it's own custom overlay widget
viral patrol
In that case, that was a proper way:
window.addEventListener('onEventReceived', function (obj) {
if (obj.detail.event.listener === "redemption-latest") {
console.log(obj.detail);
const item = obj.detail.event.redemption;
const user=obj.detail.event.name;
if (item==="heal") heal();
else if (item ==="hurt") hurt();
}
});
But you had negation in comparision.
cunning forge
oh I see, woops. Let me try THAT then
cunning forge
ehhhh I may have screwed somethin up. I'm too tired to be continuing for the night though haha, I'll try fixing it up tomorrow when I'm a little more conscious and I'll let you know how it goes. Also, I probably should have asked too, the JWT Token in JS, do you declare it as a variable with the token as the input, or is there a different way you are suppose to put the JWT Token in?
viral patrol
No. If it is in overlay, you don't need JWT token there
But if you want to manipulate data on SE API, you should use man in the middle script
As providing JWT within overlay editor is not wise
cunning forge
ah okay thatttt also could be part of the problem as well. but I'll just be doing it in the overlay for now, I'll look into making it's own external extension later as that would take a bit of time with the way I've got everything setup
cunning forge
yeah I mean it is a really cool concept, I personally am not an expert at JS by no means, I've only coded maybe like a website and a few mobile apps in it but nothing where it integrates into API's. I'm just curious, do you know Scott Falco on Twitch? He has his unique minigame called RunHP which is what I am trying to automate it for him, currently he has to manually listen for audio cues and press heart up/down when he hears it with a streamdeck
basically why he needs the hearts and everything is because viewers use their redemption points to either "hurt" or "heal" him during a stream, and when he hits 0 hearts, he has to kill himself in the game he is playing (it is usually during a speedrun too lol). We've spoke about making it automated maybe like a few weeks ago? We currently use streamlabs though, but damn they've got some bad API documentation, and they also don't have support for developers either, hence why I am trying it here now lol
Alright, well I'll let you know how it goes tomorrow I cleaned it up a little bit at least and got rid of the JWT Token, so it is closer to where it was but with the added console.log checker and the new code you provided.
viral patrol
Of course. If you need anything, ping me here or dm me.
I am tired as well (couldn't fall asleep and had to wake up at 3 am)
cunning forge
thanks and yeah those are never fun days lol, have a good night and thanks for all the help so far, can't wait to see the end product!
viral patrol
You too. It was nice conversation. I also eager to look at that feature.
pulsar willow
Hello everyone!
I use the last events rotator of @viral patrol that you can find in the #widget-share text room and I have a problem that is as follows.
As soon as I have a new sub or resub, it doesn't update and it displays this (see the screenshot below). I'm therefore obliged to reload the source on OBS so that the name of the last sub is updated.
Where can the problem come from?
Here is the JS code a little modified by myself in order to have only the last sub/resub, last tip and last cheer.
https://pastebin.com/jhpjZ6cs
rugged rapids
There is a "+" in the following line:
if (listener === 'subscriber-latest') {
arr[0]=+data["name"] + ' x'+data["amount"];
}
It worked for me to remove the "+".
So it looks like this:
if (listener === 'subscriber-latest') {
arr[0]=data["name"] + ' x'+data["amount"];
}
what is the usual workflow to edit the files in the /widgets repo? do you create a "custom widget" in the Overlay Editor and then copy and paste your changes to the HTML/CSS/JS/JSON editor tabs?
floral fable
If you are going to edit it, it would be recommended to use an actual code editor first, like VS Code, then paste the code into the respective tabs of a custom widget
late patio
yeah, I already use Atom. but what i was wondering if there was a way to test my changes locally in a real browser, before copying and pasting the changes into the tabs of a custom widget
I would need to call SE's .js where the onWidgetLoad function is defined, right?
floral fable
I am not aware of a way to test it outside of putting it in a widget, so you will want to wait to see if any of the code gurus say otherwise when they come online
late patio
for anyone who wants to remove the cheer100 cheer5000 strings from your custom notifications, just load Jquery to the main HTML and use this code at the end of your JS file: var strNewString = $('.container-div').html().replace(/cheer\d+/g, ' '); $('.container-div').html(strNewString); - you could theoretically use that same syntax to wrap the cheer#### and style it some other way
i'm sure there is an easier/more efficient way of doing this but I needed a quick solution
wise basalt
@viral patrol any idea why i would be getting an empty array on getting top cheers from the api?
i get 200 ok but []
wise basalt
disrecard, i had the wrong channel id
dense herald
Here's a dumb question
Can I include an external script (like animejs) in the html in the custom editor?
indigo flume
@dense herald Yes. You will have to add it in the html as an import line.
dense herald
So I can't do this: <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
I have to do @import
indigo flume
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js></script>
dense herald
Yep. That's what I thought
indigo flume
<script src="math.js"></script> other example
dense herald
Ok. I thought I was doing something weird when the script wasn't attaching to the command I was building, but probably something I'm done
doing
indigo flume
@late patio You can use codepen or js fiddle or just test the code directly in a custom widget. If you want it added to our github page, just make sure the widget does not exist in #widget-share or github it self first and try and push it to the repo.
pulsar willow
@rugged rapids I didn't notice that it was like that for other types of events.
Thank you very much for your help!
dense herald
Ok. even after pasting working code from another site into Stream Elements, it doesn't work within streamelements.
viral patrol
You can use pure JavaScript or include external libraries/frameworks to ease your work, however everything will be running in protected sandbox, so you won’t be able to access cookies, console.* methods or IndexedDB storage.
Iframes as well
dense herald
ok ok. That is good information
late patio
@indigo flume when you say I can test the code in Codepen does that mean I can trigger test alerts and see them working inside the Codepen's preview? if so, can you link me to an example one?
Ideally I'd just like to test my alerts in a regular browser window as I make changes in my text editor and only at the very end copy/paste the final code into SE's overlay editor...
indigo flume
You can test the html/css part of the code in codepen or jsfiddle, but not the alerts them selves.
if you are building acustom css for the alerts widget, you don't need to build the JS logic as that is handled for you, but for a custom widget, where you want to track events and so on, you will have to build that JS
I've copied and pasted so much code from jsfiddle and VS Code that its almost second nature for me to build the foundations of the code and then just minor adjust it in the overlay editor
late patio
@indigo flume yeah, that's what I though... I'm currently using a very heavily customized version of the Alert box widget but it's kinda of a major pain updating it, I might have to switch to a full Custom Widget sooner rather than later
thanks for the feedback
viral patrol
If you are working with alerts - just click "Run" on jsfiddle, I don't know if there's "run" button on codepen but AFAIR it runs on every change in code
Basically alertbox is a webpage that is loaded once event occurs. So it loads and runs.
if you have
let user='{{user}}';
let message='{{message}}';
let amount = '{{amount}}';
you can just leave it as that or replace those templating variables with dummy stuff
@late patio ⤴
late patio
@viral patrol good call. I’ll give that a shot. Thanks!
lapis tartan
A random chat command question -- since I can only have 500 characters, I want to use a chat command to randomly pick a response from a larger pastebin raw file or from a saved txt file... Is this possible? I had a custom command in StreamLabs for this but just switched everything over to StreamElements and this is the only one I can't figure out.
viral patrol
I am not sure if $(random) accepts params, but you can do an api call to anything that can provide you a random response of stored values
lapis tartan
@viral patrol what would that look like, as an example?
viral patrol
Hmmm. let me google that as I am not sure
I know that we have "!quote" that will display a random quote
Huh. Unfortunately I don't know what could be used except something self hosted.
lapis tartan
Shucks. I got it working in both NightBot and StreamLabs, but I can always just turn the feature off for now. It was a nice to have not a need to have 😃
mild cipher
@lapis tartan I made a script for you. Put the paste key (the ID bit on the end of the pastebin link) and call it like ${customapi.https://api.thefyrewire.com/twitch/pastebin?key=PASTE_KEY} and it'll return a random line from your paste 
trim gate
what exactly is going on with the grot ending credits stuff.... i have been having for quite a few streams now that the data seems to be hung up and just adding on to it when i get cheers
late patio
I'm not super fluent in JS but I have this code (which is working):
const listener = obj.detail.listener.split("-")[0];
const data = obj["detail"]["event"];
if (listener === 'follower') {
$("#follower-name").html(data["name"]);
$(".str-follower").fadeIn().delay(2000).fadeOut();
}
else if (listener === 'raid') {
$("#raid-name").html(data["name"]);
$("#raid-amount").html(data["amount"]);
$(".str-raid").fadeIn().delay(5000).fadeOut();
}
});```
but the issue is that if I fire multiple events the function loop runs immediately instead of waiting for the animations. What would be a good way of queuing them up? For further details, I'm trying to replicate the behavior of the `Alert Box` widget where only one alert is shown at a time@trim gate On 12. January I have got the following info from lx: "We know that cheer data is not reset, and it is in progress now. However there's no ETA on that" I think the guys at SE are aware of the problem.
indigo flume
@late patio You might have to make a queue of your own to hold next events, as that is the behavior of the alert widget. I'm interested why you want to do that.
late patio
I'm trying to create my own because the alert widget is too difficult to maintain via the overlay editor UI. All of my alerts share 90% of my markup/styles and having to copy/paste the same HTML/CSS/JS on all the variations is quite the hassle
indigo flume
If you have a basic html/css setup in the main alert, when you add a new variation, that new variation gets the same code copied on it and you can then just adjust it a bit or some of it to fit the variation.
Also the alert widget doesn't need JS code in it, to process the alerts themselves, that is handles by the alert widget it self to distinguish what type of alert it is and variation to use.
late patio
yeah, I saw that... but that only works the first time you setup the alerts, I'm constantly tweaking it
indigo flume
Well, as you wish 
late patio
hahaha I mean, I get what you are saying.. but I'm not 100% satisfied with my design so I keep iterating, at some point I'll find something that fits
having all the code in the custom widget is super helpful
aside from that issue i was having
one of the reasons why I chose SE over the other "stream overlay" sites is because it was the least difficult to tinker with when you don't want to just simply pick a theme from a list
lapis tartan
@mild cipher SWEET!! I’ll give that a go today!! Thank you!!
trim gate
@rugged rapids ok.... I get behind with things in here sometimes so I wasn't sure
jolly ore
Hello. i was directed here from #helpdesk-twitch . i wonder if there is a way to use custom code (python, javascript, whatever) for the SE chatbot? to achieve advanced stuff that can't be done with regular commands
basically, make my own modules?
lapis tartan
@mild cipher just as a follow up this works beautifully. THANK YOU!!
mild cipher
@lapis tartan yay! 
viral patrol
@gaunt moat you can use javascript while live to interact with bot, you can read data via listening to onEventReceived event with type=message
This is a feature of custom event list, but if you want to send message to channel as bot, you will need to provide JWT Token which is not smart to keep within overlay
Endpoint for that: https://docs.streamelements.com/v2.0/reference#botsaybychannelpost
mild cipher
Gave the pastebin thing a smol update. Optionally, pass in things like ${user}, ${channel}, ${random.chatter} and ${random.#} to change those in your paste. Doesn't affect lines that have nothing to parse. Might be helpful if you wanna switch up the order of variables in your command responses and stuff.
${customapi.https://api.thefyrewire.com/twitch/pastebin?key=PASTE_KEY&user=${user}&channel=${channel}&randuser=${random.chatter}&randnum=${random.#}}
finite heath
@indigo flume ^ ;-)
viral patrol
Everybody is pinging somebody else 😉
stiff pecan
Hey guys, I am building an website for my stream and would like to use the loyalty points in my site. Can u give me some sort of direction or is anyone willing to help me for a price?
thanks!
cinder lintel
@stiff pecan if you check out the link in the header of this channel, you will find a link to our API documentation. This should outline how to use it to access the loyalty points for all the users
I believe it also gives you examples
stiff pecan
thanks
mortal wagon
Any idea why this wont update with a new event that comes through ?
let topTipper,
weeklyTippperAmount,
latestSub,
latestSubAmount;
window.addEventListener('onEventReceived', function(obj) {
const listener = obj.detail.listener;
const data = obj.detail.event;
if (listener === 'subscriber-latest') {
latestSub = data["name"];
latestSubAmount = data["amount"];
} else if (listener === 'tip-latest') {
if(data["amount"] > weeklyTippperAmount) {
topTipper = data["tip-weekly-top-donator"];
weeklyTippperAmount = data["amount"];
}
}
updateWidgetText();
});
window.addEventListener('onWidgetLoad', function(obj) {
let data=obj["detail"]["session"]["data"];
latestSub = data["subscriber-latest"]["name"];
latestSubAmount = data["subscriber-latest"]["amount"];
topTipper= data["tip-weekly-top-donator"]["name"];
currency = obj.detail.currency;
weeklyTippperCurrency = currency["symbol"];
weeklyTippperAmount = data["tip-weekly-top-donator"]["amount"];
updateWidgetText();
});
function updateWidgetText(){
if(topTipper){
document.getElementById("tipper-name").innerText = topTipper.toString().toUpperCase() + " ";
document.getElementById("tipper-amount").innerText = weeklyTippperCurrency + weeklyTippperAmount.toFixed(2);
document.getElementById("Weekly-tipper").style.display = "inline";
}else{
document.getElementById("Weekly-tipper").style.display = "none";
}
document.getElementById("subscriber-name").innerText = latestSub.toString().toUpperCase() + " ";
document.getElementById("subscriber-amount").innerText = " " + latestSubAmount + "X";
}
works fine with onwidget load..
and i suck with code 
hollow wind
Good morning, y'all! I am interested to know if there is and in chat command that allows for the changing of a users level? As an example, if I (as the broadcaster) wanted to change a viewers level from Everybody to Regular? Could this be done by a chat command?
rugged rapids
There is a pinned post in #helpdesk-twitch with an overview of the levels. You can use this command to set the userlevel via chat.
hollow wind
Thanks @rugged rapids. :) and I just found what I was looking for prebuilt into SE's default commands. I've only glazed over it a bazillion times as I've fiddled with SE..... :/
sturdy socket
is there any native way to or a work around way to make specific store items set off different alerts
so i can make redemptions in the store that will play an alert on screen thats different for different onces
twin ore
What do you mean? A stream perk item plain uses the graphic and sound you put onto the item.
sturdy socket
can you use webms tho
twin ore
Not for items.
sturdy socket
ye
lavish dagger
Hopefully a quick question - does the SE API allow you to use websocket to connect without using socket.io? The API documentation that I found only shows socket.io connection parameters. I'm currently writing in C# which doesn't have a socket.io library that I'm comfortable with, so I'd rather not use it if I can avoid it, and I'd rather not have to completely simulate the library using WebSocket-Sharp. EDIT: Just noticed the link to a much different API reference than what I was looking at in the title of this channel. curl will be much easier. nvm.
lavish dagger
I said that... but I seem to be stuck. I keep getting a 500 error. (qwerty is replaced by my JWT token)
string addr = https://api.streamelements.com/kappa/v2/songrequest/deciblebreaker/next
HttpWebRequest request = (HttpWebRequest)WebRequest.Create(addr);
request.Headers.Add("authorization", "Authorization Bearer qwerty");
request.Accept="application/json";
using (HttpWebResponse response = (HttpWebResponse)request.GetResponse())
using (Stream stream = response.GetResponseStream())
using (StreamReader reader = new StreamReader(stream))
{
js = reader.ReadToEnd();
}
Console.WriteLine(js);
I feel like I'm just plain not understanding something, or am missing something really simple. I've tried adjusting the auth header a few different ways (and cases) like:
"Authorization", "Bearer qwerty"
viral patrol
Hi.