end goal, I'd like to find a way to pull data from the SE_API.Store and provide a simple interface for widget users to modify that data
#dev-chat
glad urchin
elfin arch
could you make a simple custom widget with the html being basically a form with submit button and js to update the Store? this widget would be set to invisible so wouldn't show with the main widget you have.
glad urchin
If possible I'd prefer to keep everything limited to the single widget, not adding additional elements in the overlay. One thing I just thought about was using an on the fly jquery dialog box. Not working though ๐ฆ
really appreciate the idea tho @elfin arch ๐
elfin arch
could you build the form in a different container with a hide/show class?
then a field to toggle 'edit options menu' to switch between the .hide .show
elfin arch
no in the html tab
elfin arch
so ```html
<div id='main'> MAIN CONTENT </div>
<div id='options' class='show'> OPTIONS MENU </div>
mild cipher
Dynamically updating fields/adding new 'variations' has been something requested for a while now I think, but I don't think there's a 'good' way to do it at the moment. I've personally ended up making a separate, external frontend, which just feeds the data to the widget
mild cipher
Ha thanks! Hopefully some support is added, it would making more advanced widgets way easier and friendlier for users without having to leave the page
elfin arch
..same comment i had above fyrewire ... could you build that frontend into the HTML tab and toggle it show/hide with a built-in field?
mild cipher
I just tried it with a simple text input and was unable to focus the textbox in the overlay editor nor the preview 
elfin arch
gotcha. just a thought. I haven't actually tried it
mild cipher
Hadn't occurred to me before, would have been sick if that worked lol
elfin arch
i'll try to play with it later and see if i what is in my head would actually work
mild cipher
in the onWidgetLoad event you can get to the field data through detail.fieldData
mild cipher
I'm fairly sure that's the only way, I don't think you can write back to update the field conent
content*
glad urchin
Wish there was a way to access the view model from JS
@mild cipher what does your widget do?
mild cipher
it lets people make chat/channel point triggers for images/video/sounds/OBS and stuff, with stuff like cooldowns, permissions, alias commands/keywords, whitelists, etc ๐
glad urchin
Well that sounds kinda like what i was doing. Just triggering scenes and sources with mine. So yours will detect a command or word and then execute?
If thatโs the case there is no reason for me to continue my project lol
mild cipher
nah, having more options is great for people, depending on their needs. they might not want to go through the hullaballoo of mine if all they want is OBS stuff, so I'd encourage you to keep going. plus, the more coders we have here, the more SE will listen to us regarding new code editor/widget features and all that lol
and yes! pretty much what you said
glad urchin
What is this hullaballoo you speak of? Lol
mild cipher
oh, like going to the website, logging in with twitch, etc haha. general set up stuff
elfin arch
tried to add the fields in HTML and you are right. the widget covered with a div that prevents access to the them.
lyric nymph
@indigo flume
Recently moved from my custom camera switching bot to LX's widget build of effectively the same thing. My only barricade now is finding a way to do a timeOut or similar code as a cooldown so people can't use it too fast
I'm a tinkerer but by no stretch know exactly how to go about that concept without breaking things lol
indigo flume
if its something build by LX, its best to poke him
lyric nymph
I feel like I bothered him enough with another query a few days ago 
It's not a pressing concern so I'll keep on my "beat it with a stick" method until I inevitably break my pride down enough to ask 
elfin arch
you seem to be on the right track... setTimeout() is a good way for a cooldown
lyric nymph
I understand the theory of code better than having the ability to apply it 
One of those "I can read better than write" people
elfin arch
so here is a way i've used ```js
async (TWITCHBOT, room, user, message) => {
if (onCooldown) return;
onCooldown = true
setTimeout(() => {
onCooldown = false;
}, cooldownLength * 1000) //cooldown seconds
``` where cooldownLength is a setting in seconds
lyric nymph
I hate that I can read this and know what each piece is doing but haven't a clue how you came about piecing it together lol
lyric nymph
But with that understanding I think I can see how I might add it into my problem 
elfin arch
i just write it down on paper and try make the logic work .... hard to explain
if it's on cooldown i want it to 'return' ... if it's not on cool down, then i want to start a new cooldown. I want that cooldown to expire after X seconds....
lyric nymph
Writing it out using actual words is somehow more confusing to me 
Always been one to learn under fire. Never a textbook kinda guy either
snow summit
Can you load frameworks in the overlay editor? Like JQuery and the like?
elfin arch
yup. i believe JQuery is built in
subtle radish
Hi, how can i make a field in my custom widget to manipulate the space between letters in a text ?
elfin arch
set a custom field to a slider; then use letter-spacing: {{fieldVar}} in the CSS ?
subtle radish
something like this in the css ? @elfin arch
h1 {
width: 100%;
position: absolute;
font-size: 8vw;
font-weight: bold;
text-align: center;
font-family: 'oswald', sans-serif;
etter-spacing: 5px;
}
elfin arch
yes; with l in the last line
subtle radish
I create the field but is empty in the right editor
"textspacing": {
"spece": "number"
}
elfin arch
if you can use the backticks ` (~) key and do 3 of them in a row you can make a codeblock, makes it easier to read ๐
elfin arch
you'll want to add more info into the field. here is an example: ```json
"varName": {
"type": "slider",
"label": "Info:",
"value": 5,
"min": 1,
"max": 10,
"step": 1
},
no worries... the 3 `s in a row will allow you post a code block that is easier to read.
so in your fields; you'll want a type, label & value
subtle radish
"type": "slider",
"spece": "number",
"value": 5
} ```I dont know if im doing right but there you got
elfin arch
the "slider" type needs the min,max of the slider and the step size.
subtle radish
Oh ok now think i get it
elfin arch
...not sure what "spece" is ... but that should be "label" ? could be a language thing I'm not aware of.
and good codeblock ๐ much better to read
subtle radish
Ok now its work but still dont change the text
width: 100%;
position: absolute;
font-size: 8vw;
font-weight: bold;
text-align: center;
font-family: 'oswald', sans-serif;
letter-spacing: 1px;
}```I just want make change in one of two text i have
elfin arch
change that "1px" to {{textspacing}} to reference back to your custom field you made
if you just want to change 1 of a few h1's you have, make a new class for it and give that class the letter-spacing
....I should also note that position: absolute also requires some positioning like top+left
subtle radish
U think ?
elfin arch
Ya. if you want to position it it needs the reference from the sides of the container.
But if it looks good where it is, then you don't need the position line in there.
subtle radish
Hey fun fact btw if i make a text-spacing here * { font-family: "{{fontName}}", oswald; color: {{textColor}}; font-size: {{textSize}}px; line-height: 1.2em; /*text-shadow: 1px 1px {{shadowColor}};*/ text-align: center;
Change all the text
But when i want change just one part no
I think i nedd more parctice with this
lyric nymph
I can't fuckin find a way to timeout an event listener and I'm mad about it
I feel like anything I've done is probably missing key ingredients that I'm just forgetting
elfin arch
the * { } selector is a global CSS thing.... so it trickles down to everything
subtle radish
Yeap i see
lyric nymph
trying to basically have it stop paying attention to chat inputs,
simple wraith
*, . AND # is all you need for css
but it even does selectors
even, odd, n-th child
etc.
lyric nymph
and your simplest example, while I get the concepts, means nothing to me once I need to implement or edit it 
simple wraith
you unsure what handle you need to pick but have a working code or example? Load up dev console
peek at elements, copy element tag
sometimes saves a lot of manual headache ๐
lyric nymph
You speak to me like the extent of my code knowledge isn't casually editing CSS on Reddit
simple wraith
.explain:nth-child( @lyric nymph )
lyric nymph
WHY DO I UNDERSTAND THAT AND NOT LIKE IT
subtle radish
Well i think i will leave it like that and fix the problem later
lyric nymph
I kinda explained that earlier, but I see code and go "oh" but the moment I'm actually confronted with doing anything slightly weighted I get lost haha
subtle radish
Its work but the text its just like meh
lyric nymph
const startListener = () => {
window.addEventListener('onEventReceived', function (obj) {
if (obj.detail.listener !== "message") return;
let data = obj.detail.event.data;
if (!checkPrivileges(data)) {
return;
}
if (typeof scenes[data["text"]] !== "undefined") {
obs.send('SetCurrentScene', {'scene-name': scenes[data["text"]]});
}
})
};
I believe this is the block I'm looking to timeout, but I could also be entirely wrong
hardy walrus
I should time you out for that monstrosity of single tick codeblock 
subtle radish
Thanks for the help @pulsar willow
lyric nymph
it's LX's code don't look at me 
lyric nymph
oh you meant the format thing
I can repeat I don't know what I'm doing, I don't ever post code in chats
elfin arch
no problem @subtle radish ... just keep practicing with CSS... it's rough and easy at the same time... ๐ good luck.
lyric nymph
There @hardy walrus get off my weenor
indigo flume
now add JS after the first 3 ticks 
elfin arch
^
lyric nymph
lol
indigo flume
it wouldn't kill you, but it makes it easier to color read name variables
lyric nymph
There, be happy lol
I didn't think code blocking had all these variants
I'm also not surprised
elfin arch
i don't think you need the startListener function to start ...
hardy walrus
Not just programming but css and other related ones as well.
elfin arch
just c ?
indigo flume
lyric nymph
@elfin arch I couldn't tell you, I'm just leaving what was in there in there
elfin arch
ok. then we won't touch that because it's probably called to run at somepoint
lyric nymph
it's set to listen to OBS Remote Parameter so it probably has something to do with that connection? 
Web Socket rather, my bad
mixing up my steeze. It's 3am lol
elfin arch
if i mix your code with what i posted: ```js
let onCooldown = false,
cooldownLength = 10;
const startListener = () => {
window.addEventListener('onEventReceived', function (obj) {
if (obj.detail.listener !== "message") return;
let data = obj.detail.event.data;
if (!checkPrivileges(data)) {
return;
}
if (typeof scenes[data["text"]] !== "undefined") {
//
if (onCooldown) return;
onCooldown = true
setTimeout(() => {
onCooldown = false;
}, cooldownLength * 1000)
//
obs.send('SetCurrentScene', {'scene-name': scenes[data["text"]]});
}
})
};
i would explain that more; but you seem to read code better than words ๐
lyric nymph
words mean nothing to me 
ok so i see what I did wrong here, and it was all placement
elfin arch
... looking at that more; what i added should be moved into that last if block
otherwise randoms in chat are going to trigger the cooldown every 10 seconds ๐ฌ (*edited block above)
lyric nymph
I was basically wrapping the whole thing in the let and if options because I have as much sensibility as a broken toaster oven
TRIPLE TICKS 
I really need to sit down with my roommate who has a degree in this shit and just be like "teach me, code daddy"
but I also don't know if he'd respond well to that
@elfin arch
https://i.imgur.com/jqJv7Zk.png
I'll never forget your contribution or how I felt
elfin arch
haha, thanks! .... but you called when you said all you needed was Timeout
lyric nymph
I wish you had a twitch linked so I could spot you a ten or something :V
simple as it may have been, I hate people doing things for me without compensation
velvet cave
@lyric nymph we're all volunteers here 
lyric nymph
I feel I need to compensate the world for dealing with me as a rule
velvet cave
nah, you should forget about that
elfin arch
pay it forward and help some CSS ๐ ... i hate CSS
hardy walrus
Bet you'll love scss. 
lyric nymph
that much I can do... it's the only code I can even remotely pick apart with any confidence
elfin arch
i avoid scss. nope. no thanks. ... can we talk more about JS ... i think we got off topic
keen ivy
hello, would there be any possibility, that in the contest, there would be a way to refund contest with picked winning option in case of wrong pick? or if not, would there be way to get list of betters, so that it could be done by 3rd party?
I had few situations, where bets were picked incorrectly and there was no way to revert this
elfin arch
maybe the https://docs.streamelements.com/reference/single-contest#contestsbetbychannelandcontestidget ? endpoint ??
you mean like if there was a miss-click when the contest ended and the wrong 'winner' was chosen ?
keen ivy
yes, just like that
viral patrol
Unfortunately there's no coming back from that AFAIK.
keen ivy
it would just be enough, if there was public endpoint for betters, but unfortunately, there isn't
fossil hound
Hi everyone..
I need someones help.. cause I never learned CSS or JS..
what I like to have a rotating widget that shows a few numbers of info... The Alpha Gaming rotating widget is almost what I'm looking for, but there is one big change I want in it, and I do not have the knowledge to do it...
instead of an icon on the left or right of the text (number).. I would like to be able to have an image behind it.. For each item (subs, bits, follows etc.etc.) have a different background...
I frankensteined something together, but in about 10 minutes (or less) the timing of the background image and numbers are out of sync..
Added is an image of how it sorta would look like....
so... Anyone that can help me in this ??
steady iron
Hey @fossil hound you are expected to have some development background as this kind of stuff requires understanding what you're doing, someone may offer help getting this behavior, but bear in mind this is the kind of custom work people pay for. There is a channel for #art-marketplace, in case you don't get lucky. Also, check in the Alpha Gaming discord, they have a channel for widget sharing where other people might have done something like what you need with that rotating feed widget
glad urchin
Does the SE_API.store only keep one key per widget? How long will it keep the data stored?
glad urchin
Have you used multiple store keys in a single widget?
steady iron
The values are not stored by widget, they are stored by variable name
SE_API.store.set('keyName', obj); // stores an object into our database under this keyName (multiple widgets using the same keyName will share the same data).
SE_API.store.get('keyName').then(obj => {
// obj is the object stored in the db, must be a simple object
});
SE_API.counters.get('counterName').then(counter => {
// counter is of the format { counter, value }
});
The keyname is a name you can choose, so you can have infinite keys
Once you use SE_API.store.set, the object is created and the value is set
naive forum
I am looking at adding a "!clip" command to my streamelements chat. I have the code I need for it to work, but I have no idea where to copy and paste the code. Do I just post it in the chat window?
crystal loom
Bit of a long shot but does anyone know how to expand a alert box depending on the persons username, i seen this done with the nerd or die alert i have but since im currently making my own i can't seem to figure out how to do it.
naive forum
Ok, it doesn't work in the window, nor when I add a new command and use the code for a response. The other options like to use it for twitch chat is to just enter the code in the twitch chat.
naive forum
Ok, I got it figured out.
glad urchin
@steady iron thanks for the info, am i correct to assume the store is distinct to the user account?
broken coyote
No. Itโs to what ever the key is
narrow spade
Is there documentation for the how to do things with a custom widget?
Found it.... nvm ๐
narrow spade
So I'm looking to add a follower count in a custom widget. I don't see the docs to find that variable so I can put it where I want in the HTML.
woven zinc
name: "follower-total", key: "count"
narrow spade
ty
How do I write that in the HTML or do I have to grab it via JS and stick it somewhere first?
woven zinc
you load the current count onWidgetLoad and then listen for changes in onSessionUpdate
empty narwhal
hi. I was wondering how long is the admission process for a widget and if there are any guidelines regarding them. If this is the wrong channel to ask this please let me know.
hardy walrus
@empty narwhal #widget-share Channel topic.
empty narwhal
thanks
charred vigil
do we know who made the end credits widget for mixer?
sinful karma
Hello, can you assist me getting the points of a person in my channel. I am doing request: https://api.streamelements.com/kappa/v2/points/justmemo/justmemo and i get {"statusCode":404,"error":"Not Found","message":"justmemo was not found"} in return. Can someone point an eventual mistake?
rugged rapids
It is not your channel name, it is the channelId.
normal flame
Hey I'm new to streamelements, trying to help out a streamer with an API call that requires two inputs, I tried doing like apiurl.blah/?query1=$(1:)&query2=$(2:) and it concatenates the two inputs into $(1:), but $(2:) is just the 2nd variable to be passed
so how can we get !command input1 input2 to go apiurl.blah/?query1=input1&query2=input2
sinful karma
@rugged rapids i get the same error when I put channel ID instead of textchannel, could it be because of wrong Bearer key? or it is completely different error
rugged rapids
not sure, what the error is when you have a wrong bearer token, but the url you have there is deffinately wrong.
sinful karma
now I try it with https://api.streamelements.com/kappa/v2/points/3******/justmemo
okay I will trial and error, thanks anyways
rugged rapids
It is the _id from here: https://api.streamelements.com/kappa/v2/channels/channel with channel being your twitch channel name.
normal flame
ahhhhh I figured it out, just needs to be ${1} no :
ripe horizon
so I'm trying to use the credit roll widget made by Grot. For Some reason it's not adding the followers, subs, tips or Sparks and Embers (aware of the api issue). Is there something I need to apply to the widget that I need to add for it to read widget data?
viral patrol
ocean wadi
hey mates, do you know approximately how much times is required for a submitted widget to be published?
viral patrol
@ocean wadi It takes some time as widgets are queued, so each of them gets enough hype on #widget-share channel as latest one submitted.
ocean wadi
ok thx for the intel
tribal zenith
are alert-queues for custom widgets broken?
I had working custom widgets and since a few days the queue is not working anymore
events just get fired immediately
warm echo
is there a way I can show the subscriber message after the alert so it doesn't go outside of the alert itself
is there a way i can have them seperate
lyric nymph
^ sent him here unsure if there's a way to make CSS handle that. I know it's largely cosmetic, but I know there are possibilities for similar applications. I have yet to do much poking around in how SE handles certain CSS abilities
obtuse sand
Hey there, I made a mod to someone's custom widget, but I'm not sure how to create a streamelements.com/dashboard/overlays/share/... link so I can share it
lyric nymph
You need to be an editor to the person's SE account to share it with a friend. Aside from that, only ones accepted through the vetting process in the #widget-share channel description can be made public
@obtuse sand
obtuse sand
Ah I see, thanks!
lyric nymph
ripe horizon
@viral patrol so I tried that credit roll and I'm having teh same prblm where the followers aren't showing up although it is pulling donators now
swift birch
I have to reset session in streamelements for my widgets to display the correct sub count. Anyone have any ideas? I am using a custom widget to count total subs but it does not update lost subs after a stream. I have to manually reset the session data.
rugged rapids
You would need to listen to onSessionUpdate and fetch the data again.
https://github.com/StreamElements/widgets/blob/master/CustomCode.md#on-session-update
swift birch
@rugged rapids Thanks for the response!! So would I have to change the rest of the code or will editing onEventReceived to onSessionUpdate do the trick?
Ohhh wait
I totally misunderstood that
rugged rapids
should do the trick when you listen to on SessionUpdate and update the data (in the overlay).
Ofc, to have the start data you would need to listen to onWidgetLoad.
swift birch
So I wouldn't be replacing the onEventReceived, I need to add a new block
And it would look at new session and reset the data?
rugged rapids
correct.
swift birch
Perfect, thanks so much Benno!
rugged rapids
window.addEventListener('onSessionUpdate', function (obj) {
let totalSubCount = 0;
const data = obj["detail"]["session"];
if (data["subscriber-total"] != undefined) {
totalSubCount = data["subscriber-total"]["count"];
}
$("#sub-amount-container").html(totalSubCount);
});
trail sequoia
Hi all quick question...I need to access fields from javascript...in html and css I do it with {theField} having no luck in js
is if fieldData
?
lemme try
nope help me im dumb
rugged rapids
const fieldData = obj.detail.fieldData;
trail sequoia
dang there was some documentation on here once that told me how to save data on streamelements server as kvp does that still exist as there was a lotta info there...thanks benno hmmm just tried that lemme try again
rugged rapids
the fieldData then can be accessed with fieldData.XYZ
Like this: https://github.com/StreamElements/widgets/blob/master/CustomCode.md#js-1
trail sequoia
ahhh thats the link I was looking for as well thanks...im tryna access as an object with no joy...ill get it...thanks benno
rugged rapids
If there is anything more, let us know and we'll try to assist you.
trail sequoia
im an idiot lol
cause I was coding from scratch I had no onload lol thanks dude
thanks again
narrow spade
Is the emulate broken for anyone else? When I click Follower Event, I get an obj in the onSessionUpdate that has subscriber-total set to 1 even though I'm testing follower event....
Is this supposed to work this way? If so how am I supposed to update my custom follower and subscriber counters with proper information.
rugged rapids
Same for me and I think, this only works with real live events, not even with emulated activity feed ones.
narrow spade
Yeah, I just ignored it and am just using the follower-total.count and crossing fingers.
rugged rapids
@civic tangle Better ask this in #helpdesk-twitch
hardy walrus
@glass zephyr Though this might be a slightly better place and I'm sure @broken coyote would be willing to answer any confusion you might have.
random pebble
I have a Donation Goal widget I picked up over in #widget-share, how would I animate it sliding up and down off the top of the screen on a timer?
Thanks in advance for any help and please @ me
rugged rapids
@random pebble One possibilty would be like this in onWidgetLoad:
let visible = true;
setInterval(function() {
if (visible == true) {
$(".container").animate({'height':'0%', opacity: '0'}, 600);
visible = false;
} else {
$(".container").animate({'height':'100%', opacity: '1'}, 600);
visible = true;
}
}, 2000);
zenith fossil
Is there a way to get a list of all the quotes of my channel?
viral patrol
There is no API endpoint nor webpage to manage them. They are only in chat.
zenith fossil
Damn... So there is no possibility to even iterate through all ID's and put them in a "database" on my own homepage, huh? :(
hardy walrus
Best bet is to obtain all the quotes and then use the custom one pinned in here.
It lists them from what I've read.
zenith fossil
But how would I obtain the quotes? I have 500 quotes right now and manually copying them down would be painful :D
hardy walrus
Got a streamdeck?
zenith fossil
yep!
hardy walrus
Create folders with chat commands to pull exact quotes and then copy as is. No real way around it.
zenith fossil
Ah, I see. Thanks for pointing me in the direction! Have a great day. :)
elfin arch
@zenith fossil if you have a node Twitch bot you can schedule a timer and just have it post !quote 1 then push that response to an array in json format
random pebble
@rugged rapids That code worked perfectly.
Only question I have is, how do I set how long it's on screen for and how long it's hidden?
I've tried to figure it out and I know the "2000" number is how many milliseconds it's on screen and then hidden for, but how do I separate those numbers?
pine thunder
Hey folks. I'm setting up the "Expanding Event Heart" widget and I'm wondering if/where the threshold can be set at which it explodes? I don't see that value anywhere and I want to use it to trigger a merch giveaway at a certain threshold. I might be overlooking it, or it might be set to some static value with no option to change it. The points values work out to 1 bit = 1 point, sub = 300 ($3), and tips = 100 x amount. Right now two subs make the heart explode with no option to set it higher.
elfin arch
try something like this @random pebble ```js
let visible = true;
let timer = () => {
setTimeout(function() {
if (visible == true) {
$(".container").animate({'height':'0%', opacity: '0'}, 600);
visible = false;
} else {
$(".container").animate({'height':'100%', opacity: '1'}, 600);
visible = true;
}
timer(); //startover
}, visible ? 2000 : 50000);
};
timer(); //start on load
That's absolutely perfect @elfin arch, thank you very much!
elfin arch
@pine thunder it looks like the explode animation happens then the "Percentage of containing box" is reached
function updateHeart(amount) {
let currentSize = (parseInt($("#image").css('width')) + amount) / parseInt($("#main-container").css('width')) * 100; //starts at 20px image
if (currentSize > fieldData.limit) currentSize = fieldData.limit;
$("#image").css('width', currentSize + '%');
if (currentSize >= fieldData.limit) {
explode();
} else {
// You can add something you want to happen if there is no explosion after current action
saveState(currentSize);
}
}```
this is the code i was looking at. the image starts at 20px and grows by a factor of the points and container size it seemsHmm... OK, so the default limit is 80, but my sub points are set to 300. I would think that 1 sub would blow it up immediately, but it takes two of them to do so, unless I'm misunderstanding how things work.
elfin arch
what is the container size you are using?
pine thunder
I left it at 80 since I wasn't sure what it was exactly.
elfin arch
no; i mean the size of the blue outline.
elfin arch
default is 558px it looks like. so 1st claim is (20+300)/558 = 57%
...
then i'm not sure if it's grabbing the % width or pixel width...
viral patrol
From what i see in the code it is %
(For me it is "hello darkness my old friend" - haven't seen that code in a while)
pine thunder
Gotcha. I can tweak the size of the widget in the Overlay Editor and test.
elfin arch
that is what i was seeing lx, but something seems off... because it would never get over 400 / width .... max percentage is 100 + 300 each claim
pine thunder
So just for kicks I set it to 1280x720, which is my canvas size in OBS. It took 4 subs @ 300 pts each to explode the heart.
elfin arch
it's gotta be grabbing by pixels then... i don't use jQuery; but my guess is this is grabing pixel width. parseInt($("#image").css('width'))
so you have (20+300+300+300)/1280 = 72%
pine thunder
Yup. So it doesn't look like there's any way at present to set it to a certain value. For example, I'd like to do a merch giveaway at $40 worth of bits, subs, and tips combined. 100 bits = $1, so the value would need to be 4000.
Then you set your other values for how many points each thing is. For me, it's 1 sub = 300pts ($3, which is the revenue an affiliate would make), and then 100 x the amount for tips since $1 is the minimum amount.
I hope that makes sense...
viral patrol
For something like that I think you could use something else: https://github.com/StreamElements/widgets/tree/master/CumulativeGoal
Also - for viewers increase a goal, but use values they are spending, not the ones you are receiving
Like you are not subtracting paypal fees
The exception would be bits I think
pine thunder
Right. I wouldn't hold 3rd party platform fees against a viewer.
viral patrol
And from what I see - you are using "points" this is good, as you should present cheers as monetary value on Twitch (IIRC)
With the widget above, you can add a value for followers too
Like 5 points per follower
As for a streamer there's a value in followers too
pine thunder
Yup.
OK, let me pound away at what you linked. I was hoping to be able to use the exploding heart just because it happened to fit the style of my existing overlay, but if it's not possible to set a threshold, that's kind of a hard stop.
elfin arch
you can; but you have to use math to determine the values for each size gain
viral patrol
It is possible to change it to explode on set value instead of percentage width of alertbox.
pine thunder
Math. * shudder * ๐ OK, I'll see what I can work out. Thanks to both of you for the help. I really appreciate it.
elfin arch
hahah... i'd suggest setting the explode size to 100%, then work backwards. say your container had a width of 600px. the image starts at 20px. so there are 580 'steps' to make before it should trigger. So if you wanted 10 subs to trigger it, each step would need to be 58px
pine thunder
That's pretty much what I started working out. Cool.
elfin arch
then hope for no rounding errors ๐ good luck!
pine thunder
Errors?! ๐
swift birch
Hey all... Someone gifted 10 subs and when im looking at the activity feed the subs donated just keeps increasing and never stops
Any ideas??
rugged rapids
Where in the activity feed?
Can you ealborate in they keep increasing and never stop please?
timber haven
Idk if im asking this is the right place, so please help if im not. im new in here.
Question: is there a CustomBot that determines when a correct word is typed in chat for a guessing game? I host things like this on my stream from time to time and its hard to make sure i dont miss chat if someone types the correct guess?
also do SSE staff etc have fiverrs?
swift birch
@rugged rapids on my dashboard the number keeps rising and never stops.
@rugged rapids Says xyz gifted x amount of subs. That x number keeps rising and never stops
rugged rapids
Do you have a screenshot of that?, also best to ask in #helpdesk-twitch
swift birch
4:11:42 EST
4:11:58 EST
I had to crop it, sorry. The gifted amount seems to be stuck in a +=1 loop and never registers the actual number. When i refresh the dashboard it starts at 1 and keeps increasing.
rugged rapids
Let's hop in #helpdesk-twitch
swift birch
Ok, thanks @rugged rapids !
viral patrol
@timber haven https://www.fiverr.com/stores/streamelements-layouts and about typing correct word - you can create a custom widget that plays you a sound when specified word is sent via chat.
real dune
do we have anything that would store a name and recall it one time, then reset?
eg
user1: !join
user1 is looking for a group!
user2: !join
user2 and user1 can group up
then the !command will be blank ready for the next user to type !join
cedar venture
Hello to someone who knows what they are doing! I'm guessing that I can edit this JS where it says "session" to an all-time variable. Anyone know if this is true and what the variable name may be?
timber haven
@viral patrol and how would i do that?
elfin arch
@timber haven I set something up like that recently but it was a local node running bot so it could add points and respond in chat.
timber haven
hmmm, i wish i was big brain
elfin arch
i can share the code with ya if you are running a local bot
or give you the basic logic part if you want to try and make a widget on SE
timber haven
i dont know what a local bot is, or hot to set up a local one xD
tbh i have no idea what to do when it comes to any sort of code, JS. C++ HTML etc
elfin arch
i got some stuff i need to work on but if i get time a little later i'll try to get you a basic set up.
timber haven
@elfin arch omg that would be amazing. take your time man, im in no rush. my next trivia is Monday! - and please let me know what i can do to repay you for your help and kindess
elfin arch
no worries. it's good to practice with things ๐
hearty lake
Hi @crude crest. I'm sorry in advance for pinging you, but I can't change the font on your Sub Offset widget.
https://streamable.com/xu2458
elfin arch
@hearty lake add this line to the top of the CSS tab in the editor: @import url('https://fonts.googleapis.com/css2?family={{font}}&display=swap');
elfin arch
i made a quick quote extractor bot to run in chat that goes through all the quotes and exports to JSON. It requires a self host node bot but if you are interested I can send you a link @zenith fossil . Tested what I could so it could be buggy. It's about 15 minutes of chat spam per 100 quotes.
mighty bough
could someone point me in the direction of making an Event Rotator for my new overlay, Maybe some easy coding or precoded concepts, dont need anything special just want to rotate between the basic events in a similar fashion to how i've animated my socials on my overlay.
upper bough
mighty bough
Unfortunately the animations in the Editor arnt quite the style im looking to achieve. Thats a pretty solid rotator and i think i'll use it until i can make a custom one, thanks for the tip!
elfin arch
I think that would be a great base to start with ๐ .... you can add a new animation styles to that in the code ๐
mighty bough
@elfin arch oh really??
i guess that makes sense, to just edit the code to have an animation, didnt think of that for some reason lol
elfin arch
depends on the animation you want; but ya you can add in what you want
mighty bough
Like this ๐ basically flip in from behind my cam (well turn the opacity on once its visable under the cam and then flip out but same idea lol)
cunning nest
im trying to add my chat's messages into an html widget, how would i do that
elfin arch
that's beautiful @mighty bough ... would need to make that a CSS class .... don't think that is a built in 'animation'
lyric nymph
That looks very much higher grade motion graphics than most code would natively support
mighty bough
@elfin arch โค๏ธ thankyou! Graphic designer learning animation, but thats an animation with fx and shiz, was hoping to make a simple flat text rotator that simply does that flip out motion, mostly flip and shrink on the x axis to get the same effect.
elfin arch
check in the #widget-share for some examples to use or build on. something like https://discordapp.com/channels/141203863863558144/457957557470887947/656092139817664523 ?
lyric nymph
It wouldn't be quite as pretty, but honestly yeah you could get something close using scale, blur and wiggle in CSS
Assuming you need to take that route
mighty bough
yeah figured it wouldnt be nearly as clean but its small on screen so getting it to look relatively like the motion i intended would be good enough for me lol
lyric nymph
I'd definitely poke around widget share first, but if all else, you could get close enough
mighty bough
now to figure out how those animations work in code xD
elfin arch
no i ment @cunning nest for that tag about #widget-share
lyric nymph
There is a hinge-like animation property in CSS if memory serves. The more I think it over the more I could see it being closer than I initially thought lol
mighty bough
that could be very close!
lyric nymph
Ah, I thought there may be someone who already did the heavy lifting in a widget
cunning nest
@elfin arch im trying to add a scrolling effect to the chat messages, but it breaks the whole thing
wait
i got it
lol i forgot to hit enter
lyric nymph
@elfin arch does SE CSS support webkit animations? I think that started as a CSS3 thing
elfin arch
that animation is too pretty for CSS*... going to be a lot of code/work but i would suggest https://greensock.com/ .... seen many pretty with that.... but making that into a class and integrating into the widget might take some time. *edit
i'm not sure if the webkit animations are supported
lyric nymph
Webkit is the only real CSS animation family I know 
elfin arch
i would assume so... everything is chromium based to my knowledge. so if it works in Chrome it'll work as an overlay
lyric nymph
I'd assume if old reddit supports it SE would
elfin arch
but; i'm not really sure how OBS loads the site that's more of an OBS question. ... like i can load a WebGL game in OBS but i can't load it in Chrome
in the end it's really if it works in OBS ๐
mighty bough
so much jargon i dont know xD
lyric nymph
Now you know how I feel only really understanding CSS in the chat like this lmao
mighty bough
I went in expecting things to be able to be edited with more or less minimal knowledge as its just simple animations and things, i have a lot to learn xD
elfin arch
Idk if im asking this is the right place, so please help if im not. im new in here.
Question: is there a CustomBot that determines when a correct word is typed in chat for a guessing game? I host things like this on my stream from time to time and its hard to make sure i dont miss chat if someone types the correct guess?
@timber haven custom widget:
HTML: ```html
<div id='main'><h2>...waiting for a winner</h2><div>
CSS: empty
JS: ```js
let answser = 'nowordwasset',
gameRunning = false,
regexCheck,
regexBuild = (secretword) => regexCheck = new RegExp(`((?<=\\s|^))(${secretword})(?!\\w)`, "i");
//EVENTS
window.addEventListener('onEventReceived', (obj) => {
const event = obj.detail.listener;
if (event !== 'message') {
return;
}
onMessage(obj.detail.event.data);
return;
});
window.addEventListener('onWidgetLoad', async (obj) => {
const fieldData = obj.detail.fieldData;
gameRunning = fieldData.enabledFD === 'yes';
answser = fieldData.answerFD;
regexBuild(answser);
});
let onMessage = (msg) => {
if(!gameRunning || regexCheck.test(msg.text) === false) return; //if game is not running or words don't match
winner(msg.displayName);
};
const winner = (username) => {
gameRunning = false;
document.getElementById("main").innerHTML = `<h1>${username} wins!</h1><audio id="audio" playsinline autoplay ><source src="{{audioFD}}" type="audio/ogg"></audio>`;
};
Fields: ```json
{
"enabledFD": {
"type": "dropdown",
"label": "Enabled:",
"value": "YES",
"options": {
"yes": "YES",
"no": "NO"
}
},
"answerFD": {
"type": "text",
"label": "Answer:",
"value": "First Chatter To Type This Wins"
},
"audioFD" : {
"type": "sound-input",
"label": "Sound:"
}
}
Test this out. Need to update the word on the overlay website between each round.I cheated on the HTML/sound ... but anything you want to happen on the winner should be in the winner function.
mighty bough
How hard would it be to add more events to a widget? Theres a widget I want to use but it only has a single event that rotates.
elfin arch
is it one of the custom widgets?
mighty bough
its a custom widget yes, not from the SE site or #widget-share but from a different discord
elfin arch
is it built into the SE editor?
mighty bough
yes
[redacted]
elfin arch
shouldn't share overlay links!
mighty bough
oops! didnt check the rules first! ๐ฆ
elfin arch
... those are not public.
mighty bough
dis all new to muah
elfin arch
i can't see the code; but depends on the "data" you want. if you go to https://github.com/StreamElements/widgets/blob/master/CustomCode.md and go about half way down you can see all the "data" options
cunning nest
@elfin arch ive been testing out the thing you linked me. im trying to make each message scroll to the left individually, but not the whole chat as a whole this is what i have now: <marquee behavior="scroll" direction="left" scrollamount="10"><script src="//cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.12.0/js/md5.min.js"></script> <div class="main-container"></div></marquee>
mighty bough
just realized i linked the wrong widget anyways lol
elfin arch
i believe that <script> tag should be pulled out and above the <marquee> ?? i'm not sure, i don't know what the <marquee> is
cunning nest
marquee is for the scroll
i changed it <marquee behavior="scroll" direction="left" scrollamount="10"> <script src="//cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.12.0/js/md5.min.js"> </script> <div class="main-container"></div></marquee>
wait
i read your thing wrong
elfin arch
i don't think <marquee> is a thing in HTML ... maybe you want that in CSS?
cunning nest
i copied my thing from: https://www.html.am/html-codes/marquees/html-scrolling-text.cfm
elfin arch
... i see it is a thing (Obsolete) but might still work as legacy
ahhhh... ok. thanks for the reference..
ya, basically you are moving the whole chat <div class="main-container"></div> on a marquee
cunning nest
so how would i make it take each individual message
elfin arch
do none of the "animation in" options get what you want?
go to the JS tab; line 179:
const element = $.parseHTML(`
<div data-sender="${uid}" data-msgid="${msgId}" class="message-row {animationIn} animated" id="msg-${totalMessages}">
<div class="user-box ${actionClass}">${badges}${username}</div>
<marquee behavior="scroll" direction="left" scrollamount="10">
<div class="user-message ${actionClass}">${message}</div>
</marquee>
</div>`);
replace the element variable with that. you can see where i added your <marquee> tags in
and also remove what you added to the html. in general the HTML will be basically 1 or 2 lines. and the JS will build the HTML on each event
zenith fossil
i made a quick quote extractor bot to run in chat that goes through all the quotes and exports to JSON. It requires a self host node bot but if you are interested I can send you a link @zenith fossil . Tested what I could so it could be buggy. It's about 15 minutes of chat spam per 100 quotes.
@elfin arch would love to try it, if possible!!
elfin arch
https://github.com/pjonp/twitchQuoteGetter ๐ try this
zenith fossil
Thanks a ton!!
elfin arch
ya. give it a test run for about 10 quotes and let me know
zenith fossil
okay, i have never used something like this program and somehow "npm i" won't work in cmd or powershell. it says it can't find the argument :(
sorry if this is a absolute noob question
Do I need to manually download node.js first for windows?
elfin arch
ya. you'll need Node
high swallowBOT
@zenith fossil You can find your JWT token on your account channels page ("Show Secrets" to reveal the token): https://streamelements.com/dashboard/account/channels
READ ME:
This is a private security token. Do NOT share this token here or other public places, only with a StreamElements staff member in private.
elfin arch
no not the JWT
https://twitchtokengenerator.com/ need chat:read & chat:edit more towards bottom under Helix scopes
zenith fossil
perfect, thanks for bearing with me :D
elfin arch
feel free to DM you twitch channel and we can move the convo there for the setup testing. i got about an hour left in me.
hearty lake
@hearty lake add this line to the top of the CSS tab in the editor:
@import url('https://fonts.googleapis.com/css2?family={{font}}&display=swap');
@elfin arch I thought that the Google Fonts was completely included in the SE Overlay Editor and we didn't have to add the line.
Thanks!
real dune
do we have anything that would store a name and recall it one time, then reset?
eg
user1: !join
user1 is looking for a group!
user2: !join
user2 and user1 can group up
then the !command will be blank ready for the next user to type !join
primal nexus
Hey, I'm trying to sort out some alerts using the custom CSS toggle. I've setup custom HTML and CSS to work fine, however when trying to put it together with the pre-defined JS it comes out like this.
this is what it should look like
granted this <span class="name" id="username-container"></span> is all i'm really adding and not changing the javascript - i'm not sure on javascript either way.
oh
I'm actually stupid
never mind 
velvet cave
primal nexus
Mfw when I realise I can just use {{name}} and not need the javascript 
mighty bough
Im back with another question, but I may need someone to look at the code of the widget to give me my answer.
I just want this custom SE widget to have a longer delay between the 2 positions it moves to (so it has 2 animations, x position up, then x position down). I just want it to move up, hold for like 20 seconds, then go back down, its currently at like 1s, and it doesn't have its own delay setting.
But with no coding knowledge im not sure how to change this. (Ive looked thru and can find animation lengths but not a number to change the time between 2 animations. What can I share to have someone look at it.
cold smelt
So I have an event list that I used back when I was on streamlabs and I was wondering if there's a way to convert it to work on streamelements?
hardy walrus
@cold smelt If it's entirely CSS/HTML/JS then just a matter of copy/pasting in the fields for a custom widget with tweaking.
cold smelt
Cool, thanks. Wasn't sure if it'd be that easy. Well not easy easy, but like I thought there might be hoops to jump through
hardy walrus
If you post the code in codeblocks here I'm fairly sure there's someone that would be able to help convert it or check to see what needs tweaking.
cold smelt
I'll attempt it myself, see what I can do and if I hit a wall I'll see ๐ Thank you though
slow gale
Hey guy's, I'm used to devving for streamlabs as opposed to Stream Elements, could anybody point me towards the documentation for sharing overlays/individual widgets to other user accounts? My googling keeps sending me to blog posts from 2017 that don't seem to be applicable any more
hardy walrus
@slow gale Only way out of box is being made an editor for users and duplicating the widget to another users account. Beyond that you can't.
@slow gale Have the layer highlighted and then choose this then the overlay https://streamlabs-is-a.totallysuspicious.website/7AwSLRw.jpg
slow gale
Yeah sorry abt that. I typed that and noticed the button about 3 seconds later
hardy walrus
warm echo
is there a way i can make the total follower count and total subscriber cycle through each other like a slideshow
slow gale
Yes
hardy walrus
slow gale
Well actually I say that. One other question actually. Is there a full API ref anywhere?
Or is it just that github of example widgets
hardy walrus
Channel topic.
slow gale
Excellent, I'll stop asking dumb questions now
hardy walrus
Dumb questions are the ones you don't ask 
timber haven
is anyone available to help me understand how to import code given to me into SE?
hardy walrus
@timber haven It's HTML/CSS/JS I take it?
rugged rapids
@warm echo Something like this maybe:
HTML:
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<div class="main-container">
<div id="follow-container">
</div>
<div id="sub-container">
</div>
</div>
CSS:
* {
font-family: 'Montserrat', sans-serif;
color: white;
font-size: 50px;
overflow: hidden;
}
#sub-container, #follow-container {
position: absolute;
}
JS:
window.addEventListener('onSessionUpdate', function (obj) {
let totalSubCount = 0;
const data = obj["detail"]["session"];
console.log("DATA onSessionUpdate");
console.log(data);
if (data["subscriber-total"] != undefined) {
totalSubCount = data["subscriber-total"]["count"];
if (totalSubCount-2 < 0) totalSubCount = 0;
else totalSubCount = totalSubCount-2;
}
$("#sub-container").html(totalSubCount);
let followCount = 0;
if (data["follower-total"] != undefined) {
followCount = data["follower-total"]["count"];
}
$("#follow-container").html(followCount);
});
window.addEventListener('onWidgetLoad', function (obj) {
const data = obj.detail.session.data;
if (!data || data.length === 0) return;
console.log("DATA");
console.log(data);
let followCount = 0;
let subCount = 0;
if (data["follower-total"] != undefined) {
followCount = data["follower-total"]["count"];
}
if (data["subscriber-total"] != undefined) {
subCount = data["subscriber-total"]["count"];
}
if (subCount-2 < 0) subCount = 0;
else subCount = subCount-2;
$("#follow-container").css('opacity', '0');
$("#follow-container").html(followCount);
$("#sub-container").html(subCount);
let visible = "follow-container";
setInterval(function() {
if (visible == "sub-container") {
gsap.to("#follow-container", {duration: 0.2, opacity: 0});
gsap.to("#sub-container", {duration: 0.2, opacity: 1});
visible = "follow-container";
} else {
gsap.to("#sub-container", {duration: 0.2, opacity: 0});
gsap.to("#follow-container", {duration: 0.2, opacity: 1});
visible = "sub-container";
}
}, 1000);
});
im too small brain for this feelsbadman
hardy walrus
In the editor choose static > custom widget> open fields at top > Paste in specific tabs.
timber haven
starting with, create blank overlay right?
timber haven
@hardy walrus so i delete the existing HTML stuff?
like do i clear all the fields?
omg i feel like i have a medium brain now, this is legit
hardy walrus
timber haven
but idk yet if i delete everything in the fields yet?
or do i need to keep some stuff?
hardy walrus
I'd say you can delete it all.
timber haven
holy shit im big brain now
warm echo
this is what i want, but i don't have a idea how to slow it down
rugged rapids
The last number in the code is ms. Up it.
timber haven
<div id='main'><h2>...Waiting for a WINNER!</h2><div>
how do i change color of this text as well as font?
loud sapphire
Hello, is there a way to replay a tip / donation from the API based on a channel & tipId ?
This is to simply replay a tip / donation from our 3rd party dashboard and avoid creating a new donation on their StreamElements dashboard which will result in multiple stale data
Kinda like the activity replay; thanks
viral patrol
@loud sapphire POST to: https://api.streamelements.com/kappa/v2/activities/:channelId/:activityId/replay (empty body)
nova lance
hey guys, there is any way to give loyalty points trough command? I want to reward people that share my stream
rugged rapids
!addpoints
nova lance
thank you
sly patrol
For those of you building custom overlays with html,css,js, etc. Are you actually writing your code directly into stream elements or do you have a dev environment set up? If you are using a dev environment what tools are you using?
lyric nymph
If I poke around I personally just use the editor on SE itself. It's a little clunky since you can't move the window and have to close it every time you want to test stuff
tropic finch
If I poke around I personally just use the editor on SE itself. It's a little clunky since you can't move the window and have to close it every time you want to test stuff
@lyric nymph god hear you, that should be fixed azap
we need to move that godamn window!!!
hardy walrus
@lyric nymph I have a letter and a number. Wanna guess them?
lyric nymph
I'd rather just give myself the F and call it good 
Being able to freely move/resize the code editor window natively still feels like a no-brainer that, imo, should've been there from the beginning
twin condor
So, question. The !time command doesn't seem to observe DST, so it currently displays my local time one hour behind. Is there a different variable to use or something to fix that?
twin condor
Thank you
slow gale
Whether or not I switch to a proper Dev environment depends on the complexity of what I'm working on I guess. If I'm just writing some CSS animations and some JS to curate it then I'll probably just write it in browser.
elfin arch
i start in a sandbox like codepen for the basic CSS/JS. then move it into the overlay editors and use the SE events to trigger the JS functions
white tartan
hello, i have a question how can i call my video on js and pause at the end of the video until the next event comes in ?
rugged rapids
Check out how I achieved it: https://discordapp.com/channels/141203863863558144/457957557470887947/619140761971195915
white tartan
Thanks for the fast reply @rugged rapids its really helpfull im new to the js and do you know any way to loop the video at the and or pause it untill the next follower (or event ) happens ?
rugged rapids
In the widget, the event is not a next follower, but a message. So some kind of similar.
white tartan
yes okey do you know anywhere i can find how to call follower event in streamelements ?
rugged rapids
window.addEventListener('onEventReceived', function (obj) {
const data = obj["detail"]["event"];
if (data["type"] == "follower") {
do()
}
}
For full API, check channel header
white tartan
WOW! Thanks For your Help ๐ @rugged rapids
rugged rapids
The default CSS option in the alertbox has this, to animate the username container:
//get data from the ๐ค StreamElements ๐ค data injection
const name = '{{name}}';
const animation = 'wobble';
// vanilla es6 query selection (can use libraries and frameworks too)
const userNameContainer = document.querySelector('#username-container');
// change the inner html to animate it ๐คช
userNameContainer.innerHTML = stringToAnimatedHTML(name, animation);
/**
* return an html, with animation
* @param s: the text
* @param anim: the animation to use on the text
* @returns {string}
*/
function stringToAnimatedHTML(s, anim) {
let stringAsArray = s.split('');
stringAsArray = stringAsArray.map((letter) => {
return `<span class="animated-letter ${anim}">${letter}</span>`
});
return stringAsArray.join('');
}
and also take a look at the CSS of the default alertbox CSS settings.
rugged rapids
Afaik {amount} is another variable for the amount of months/or bits for example.
Then you can apply this like the variable {{name}} was applied in the JS, to another HTML element.
rugged rapids
You can delete the second stringToAnimatedHTML function, as they are using the same and you can enter the parameters.
And your animation is 'none'.
rugged rapids
setTimeout(function() {
$("#amount-container").fadeOut("slow")
}, 4200);
Are you using an alertbox widget, or the custom widget?
Is there any text animation option selected?
At the very bottom when you are in the edit screen of an event inside the alertbox.
//get data from the ๐ค StreamElements ๐ค data injection
const name = '{{name}}';
const animation = 'wobble';
// vanilla es6 query selection (can use libraries and frameworks too)
const userNameContainer = document.querySelector('#username-container');
// change the inner html to animate it ๐คช
userNameContainer.innerHTML = stringToAnimatedHTML(name, animation);
setTimeout(function() {
$("#username-container").fadeOut("slow")
}, 4200);
/**
* return an html, with animation
* @param s: the text
* @param anim: the animation to use on the text
* @returns {string}
*/
function stringToAnimatedHTML(s, anim) {
let stringAsArray = s.split('');
stringAsArray = stringAsArray.map((letter) => {
return `<span class="animated-letter ${anim}">${letter}</span>`
});
return stringAsArray.join('');
}
You can grant me a manager access to your StreamElements account.
high swallowBOT
Follow these steps to grant managers/moderators access to your dashboard:
- Click on your Channel Name at the top of the dashboard and select Settings
- Create a new invite at one of three access levels (Bot Supervisor, Editor, Full Control)
- Send this invite to a mod/manager to give them access to your dashboard. The link is one-time-use and expires after 72 hours if not accepted
Video tutorial: https://youtu.be/zl_h-ttZDF0
rugged rapids
Just DM me the link.
Saved the overlay. Please leave it without saving, if you have it open. You can access it again now.
You had two times the variable name declared in your JS.
swift birch
Is there a way to automate a session reset every so often?
snow summit
Is there a way to request access to the API so I can get access to information relevant to me? I wasn't planning on using this for a website or anything really? Just confused by the application
viral patrol
@snow summit http://api.streamelements.com/kappa/v2/channels/me with authorization header or without authorization: http://api.streamelements.com/kappa/v2/channels/:channelId http://api.streamelements.com/kappa/v2/channels/channelName
@snow summit send PUT request to https://api.streamelements.com/kappa/v2/sessions/:channelId/reset with body of empty JSON object {}.
tardy edge
Hey, I have a problem with overlay editor.
cant find the way to reorder the layers inside a overlay
viral patrol
You can drag and drop them on list in "Layers" tab in left panel
tardy edge
Yeah taht what i tought of doing but it dosent do anything
okeyy
now it's working
hit F5 on that page
viral patrol
F5 for the rescue ๐
tardy edge
probbley had a bug for a sec
tropic finch
is there somehow a way to do this with streamElements instead of streamLabs ? https://www.reddit.com/r/Twitch/comments/7o425f/fun_command_to_interact_with_viewers/
tropic finch
@hardy walrus
hardy walrus
Not that I'm aware of as our bot can't read local files.
viral patrol
@rich bronze Hi! I would like you to know that Twitch channel rewards alert is now using Google TTS.
muted dagger
Guys I tried to reset the session on my friend's stream, but after that the activity feed on site and in OBS isn't showing anymore, the alert shows up, but nothing on activity feed, what that could be?
viral patrol
@muted dagger I think that his filters may be set to not display anything or display specific events with very strict conditions.
muted dagger
But he can't see too
On his OBS isn't showing too, he created new alerts, all working fine, but on Activity Feed, nothing D:
rich bronze
@viral patrol thanks you so much ๐
muted dagger
Oh another thing, he can see the Store redemptions, but Follow, Sub and Tips dont
viral patrol
@tropic finch I think that this could be doable with several resources:
- custom widget that listens to bot response instead of user command input (so you could set a cooldown in bot and privileges - widget listens
if (user === "StreamElements" && text === "F has been pressed") { pressF() } - This custom widget should send a value to https://keyvalue.xyz service
- Autohotkey should get text from that service then press key and reset value at keyvalue (like: https://www.autohotkey.com/docs/commands/URLDownloadToFile.htm#WHR )
muted dagger
Oh i think I'm in the wrong place, sorry lol
viral patrol
And I thought you sent a reset call to our API that cleared his activities (but I never seen such endpoint, so I was looking for that)
muted dagger
You want his ID to take a look?
tropic finch
thanks @viral patrol thats a good north
viral patrol
You're welcome. If you manage to create something like that I would love you to share your works with rest of streamers via our widget-share. That widget could be really nice.
@muted dagger I have no access to accounts, so I am not able to investigate that without user specified privileges. But if he gives me editor invitation link on my DM I will definitely take a look ๐
muted dagger
Oh okay
pulsar willow
any coders who can handle facebook gaming can you DM me? I have a project i need help on
nimble hare
Does anyone know if there's a way to get peoples twitch avatars onto an event list? I've seen it on some streams and would like it on my own.
slow gale
So the Docs for Kappa API appear to be for 3rd party servers/middleware. Do you still have to go through the API for executing certain requests from within Stream Elements?
slow gale
I just stuck a console.log in a widget for funsies.
Why on Earth are my widgets getting a bunch of superfluous onEventRecieved hits in addition to the actual event I want.
Is this just a quirk of the emulation?
Am I going to have to add something like
obj.detail.listner === "event:test" ? return : alert(obj.detail.event);
to everything?
viral patrol
@nimble hare You can call decapi to get user avatar: https://docs.decapi.me/twitch?endpoint=avatar%2F%3Auser
@slow gale For custom widgets I would recommend this: https://github.com/StreamElements/widgets/blob/master/CustomCode.md and other events are emulated, because every event has several things that happen along it (it updates recent events data, goal data, aggregates)
slow gale
@viral patrol gold mine, thanks
mystic pulsar
Hi there. Looking into using StreamElements for a custom widget. I'm having trouble finding out how to pull the latest follower/subscriber from outside the current session... For example, at the beginning of a stream, I'd like to display the latest follower/subscriber from the previous stream. This way there are no empty fields at the beginning of a stream ๐
viral patrol
@mystic pulsar Check link I pasted above. Also this one may be helpful for you: https://github.com/StreamElements/widgets/tree/master/CustomLabels
slow gale
Does Stream Elements for some bizarre reason not support IIFE var assignments?
let icon = () => {
switch (obj.detail.event.type) {
case "raid":
return iconRaid;
break;
case "host":
return iconHost;
break;
case "follower":
return iconFollow;
break;
case "tip":
return iconTip;
break;
case "cheer":
return iconCheer;
break;
default:
console.log("honk");
}
};
You are not forwarding variable obj to that function, is it in the same scope as onEventReceived?
slow gale
yes
I breaking it off into a separate function worked for some reason.
It seemed to refuse to evaluate as an IIFE
it's not the end of the world
white tartan
hello everyone is there a way to make alertbox loop at the end of it or pause at the end of it till the next event comes in so the alertbox will always be visible ?
real dune
any way to create a holding list of user that use a !command
they can remove their names with a different !command
and show the people in that list
eg
!lurk [pust user into list]
!unlurk [removes user from list]
!lurkers [shows users in the list]```I'm not sure if you could do them as custom commands with variables; but you could do it as an overlay.
white tartan
one more thing i have found CamBorder Alert by LX which rotates hue of image in the follow,sub kind of event.
The code goes like this
let fieldData;
variations = [
{
"type": "follower",
"amount": 0,
"colors": {
"hue-rotate": "90deg",
"saturate":2,
}
},
Can i add variations for example follows can i add 3-4 different hue rotation animation by any way ?
i mean is there a way to add for example "chance" : %50 ?
karmic zenith
Hey - is there a Endpoint in the API that returns a users information, such as the profile image, their followers and follows with follow date etcetera? I can't seem to find it in the referenced. Maybe i'll have to get the data from the Twitch API, but it would certainly be easier if there already was such an endpoint
viral patrol
@white tartan Unfortunately this widget doesn't take a random variation from those specified.
@karmic zenith https://api.streamelements.com/kappa/v2/channels/:X where :X is either channel name or channel ID
white tartan
i saw that subs can be seperated if its their first or 3rd or 6th month so i thought maybe i could add something to follows ๐
@viral patrol Thanks for your help also if i change that image field to video input will that work or do i need to change somewhere else too
viral patrol
I think the best way is to test it, but you will need to change HTML code for that too
So it is not an <img> tag, but video
slow gale
@white tartan You could make an alert stay. Just don't build something that removes the markup at the end of the function and add it at the beginning
white tartan
@viral patrol html is just 2 lines of code which is
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
2
<div id="main-container"></div>
you mean css ?
slow gale
the HTML is probably being inserted via javascript
white tartan
ohhh
viral patrol
Ohh. That is right. I haven't seen that widget for a long time.
white tartan
sorry for asking too much just trying to learn js ๐
viral patrol
Nah. It is all OK.
slow gale
Everybody starts somewhere
viral patrol
I would smack a widget author in the face for making stuff so hard
And not logic at all ๐
You mentioned it was lx, so I might have a chance to do so
viral patrol
OK.
Remove:
background-image:url({border});
From CSS
CHANGE HTML FROM
<div id="main-container"></div>
TO:
<div id="main-container"><video id="video" playsinline autoplay loop muted style="width:100%; height:100%"><source id="webm" src="{{border}}" type="video/webm"></video></div>
(Edit because I forgot about loop attribute there)
white tartan
OMG you are the best
To re start the video should i edit html or is it done in js ?
if i loop in html its just looping itself
i think it might be in js to listen to an event ?
viral patrol
Oh. You want to play a video once there's an event?
viral patrol
In first line you can do:
const var vid = document.getElementById("video");
And when event is received and colors are changing you just call vid.play()
white tartan
ฤฑ guess add the vid.play() under window.addEventListener('onEventReceived', function (obj) {
white tartan
ohh
viral patrol
(Sorry for not giving straight answer, but you wanted to learn JS, so I am pointing directions)
white tartan
yes yes thats better for me ๐
viral patrol
Try to use something that has all conditions checked.
white tartan
i understand your point
if (obj.detail.listener.indexOf("-latest") !== -1) {
parseEvent(event)
under this ?
white tartan
omg js is kind of hard ๐
viral patrol
You see a function that is being called parseEvent
Find a function that changes filters and add video play somewhere around it
There is one place that applies filters to DOM element ๐
white tartan
just reading the code from the beginning ๐ trying to understand every line
so i can find the place
viral patrol
Don't read it line by line. Try to go as computer goes
Imagine you are an event on a quest to a color change ๐
white tartan
document.getElementById("main-container").style.webkitFilter =filters;
this seems to be applying the filters
viral patrol
So just above that - start a video.
white tartan
should i do it like function playVid() {
vid.play();
}
white tartan
hmm not working as vid.play(); only
viral patrol
Did you declare const var vid = document.getElementById("video"); on top of JS?
white tartan
im not sure what to check for in the console since im a newbie in js
viral patrol
If there are any errors
white tartan
seems like no errors
viral patrol
Huh. I have to drop at this point. I am sorry. It is already 10:30 PM. I will be around in the morning EU time, so we can make that working 
OMG
I AM STUPID
const vid = document.getElementById("video");
const var - kill me with fire
white tartan
๐ tired a little bit i guess ๐
thank you soo much for the lesson
you helped me more than you can imagine thanks again
YOU ARE THE BEST @viral patrol ๐ฅณ
viral patrol
I am on my phone RN - did it work?
white tartan
Yes it worked ๐
slow gale
I don't stream so I can't check this data myself, and while I wait for my client to give me editor access I thought I might as well ask here.
The session data for alltime-top values
aka
data["cheer-alltime-top-donator"]
does it only return the one highest donator or does it return multiple values (aka the second highest, the 3rd highest etc)
or do I have to go through Kappa API
elfin arch
not sure; can you log the amount and throw it some test redemptions
serene turtle
Websocket question - Is there no event for tiltify donations?
I've made a fundraiser campaign, linked tiltify to SE, and created an alert widget (even though I planned to not use the alert). And when I donate I get the widget alert just fine, but nothing is passed to the websocket event message...
silk pebble
Hi, Just want to know what I'm missing about the quirks of StreamElements' Regex matching. It claims to use Google's RE2 syntax, however when I type "!mal'ganis" in chat while using the 1st line in the picture below (using "\S"), no match is found; when I replace them for "." as shown in the 2nd line of the picture, the command finds a match. Both these entries should work, so what am I missing here?
rugged rapids
@slow gale
data["cheer-alltime-top-donator"]["name"] - Username
data["cheer-alltime-top-donator"]["amount"] - Sum of the cheer amounts
donator stands for cumulative amount of all events by this user.
So you only get the one highest donator
viral patrol
@slow gale for multiple rows, you will need to have something like: https://github.com/StreamElements/widgets/tree/master/CustomTopList
teal token
Y updated windows yesterday and once i try to started OBS, the computer(windows) show a blue display telling me that therse a proble with this program, charge a 100% count, and force me to restart the computer manually...anyone know something about this?anyone have this kind of problem, do i have to change windows to the last one?
I don't know if this is the right place for ask about this
slow gale
@teal token #helpdesk-selive
teal token
Thankยดs!! ๐
pulsar willow
Is there a way I can flip this video vertically so the text is the correct way, separate from rotating it 180 degrees which causes the text to go upside down? Or is there a way to flip the alertbox text after rotating the alert 180 degrees? (If I enable css, I get a dancing shark... ๐คท).
viral patrol
You can change default image in CSS using {image} instead of hardcoded shark URL
But there's easier way - RMB click on that, save image as,
ROtate it in gimp
Reupload
slow gale
It's a video
viral patrol
Ohhh.
slow gale
That's the one downside of the Streamlabs one source approach, you can't just slip little CSS fixes into OBS
viral patrol
So save on local computer, and rotate it in FFMPEG like ffmpeg -i original.webm -vf "transpose=2,transpose=2" -c:v libvpx-vp9 -pix_fmt yuva420p output.webm
slow gale
Yeah @viral patrol is right here, the easiest way to do this would be to rerender the video instead of trying to change it through markup
pulsar willow
Okay, sounds like a plan! No idea what that code means but I trust you!
viral patrol
Or this will be faster: ffmpeg -i original.webm -map_metadata 0 -metadata:s:v rotate="180" -codec copy output.webm
pulsar willow
Thank you ๐ I'm downloading FFMPEG now and will see what happens ๐
slow gale
ok so ffmpeg is software for messing with videos. But it doesn't have a frontend UI with buttons and such. It's just a command line that you enter text.
ffmpeg is the name of the program
-i original.webm is the filepath to the video you want to mess with
-map_metadata 0 -metadata:s:v rotate="180" is the bit telling it to turn it upside down
-codec copy output.webm Is where you want to save the new video
pulsar willow
It sounds wonderfully complicated and I'm on board with that XD
viral patrol
The part -codec copy is to get a codec from input file and use it in output ๐
slow gale
(I didn't want to have to explain what a codec was 
)
pulsar willow
Okay, I downloaded FFMPEG... Yeah, there's a lot of files. Would I be able to get some assistance with where to go with it? XD
Downloaded the BZip2 compressed file, unzipped it to a TAR archive, unzipped again to a File Folder. Inside the folder is a minefield!
pulsar willow
Sounds good ๐
silk pebble
Is there a particular staff member that would be a good person to @ that might know about my query?
slow gale
I'm trying to make basic calls to the Kappa API
and getting errors, so I'm poking at the api with postmaster
lyric nymph
Poke it with a stick. It's more effective
slow gale
Seems like a solid GET call
I've got a valid auth key in the header
And it's returning a 200 response
but it's also returning null
slow gale
Are the docs out of date?
It's sending out mixed messages
- To use any API endpoint you need to auth with your JWT token
- YOUR JWT TOKEN IS SUPER INSECURE PLEASE DON'T USE IT
what
viral patrol
This is like: You can auth with your JWT token (for every endpoint). For some you can use apikey
But if your JWT leaks, you may be in big problems
lean jay
Is there a way to listen to store redemption events?
slow gale
@viral patrol It doesn't actually say what only needs the apikey does it. And also can you think of a situation where I get 200 returns but 0 data
viral patrol
@lean jay I think that custom eventlist has a base for everything you need.
@slow gale I am not sure if period is still in use or is it interval as there was a change recently to that endpoint
lean jay
@viral patrol can you share with me a link please?
slow gale
lean jay
@viral patrol I need my server to listen to store redemption events. Not sure if this widget is the thing I am looking for
slow gale
When you say "your server" do you mean a discord server? your stream?
lean jay
I have my own Twitch bot which is already able to make API calls to Stream Elements. Now I need my bot to react to redemption events.
viral patrol
You can listen to them via websockets I think. There is a pinned message describing it
From the other hand, you can send XHR calls from custom widget to your webhook, but it will not work if overlay is not running.
lean jay
the websocket route (if it exists) will probably make more sense. Thanks for the help. I'll see if I can find something in the docs
viral patrol
slow gale
Ok this is killing me now
The most benign API call I can make, the api key is in the header, the params are correct, I'm getting a 200 response
and I'm, just getting null as a response.
Even for funsies I flat pasted the code from https://github.com/StreamElements/widgets/tree/master/CustomTopList into a custom widget and nada
I've even thrown some logpoints into the main JSON parsing func too see if it's my problem
function displayPeople() {
let newDataRequest = {
method: 'GET',
url: `https://api.streamelements.com/kappa/v2/sessions/${channelId}/top?limit=${limitQ}&offset=${offsetQ}&period=${periodQ}&type=${typeQ}`,
headers: {
'Authorization': 'apikey ' + apiKey
}
};
console.log("PINGING API")
makeRequest(newDataRequest).then(obj => {
obj = JSON.parse(obj);
console.log("LOGGING OBJ")
console.log(obj)
$(".main-container").html('');
obj.forEach(function (element) {
if (typeQ === "tip") {
element.total = element.total.toLocaleString(userLocale, {
style: 'currency',
currency: userCurrency
});
}
$(".main-container").append(`
<div class="user-row">
<span class="username">${element.username}</span> - <span class="amount">${element.total}</span>
</div>`);
}
);
});
}
returning
PINGING API
LOGGING OBJ
Array(0)
Is there no websocket event for tiltify donations?
viral patrol
@slow gale Have you tried this one? https://discordapp.com/channels/141203863863558144/259680142459142144/717441539915120650
gentle wedge
I am trying to add .!time to my streamelements bot commands and I want it to show this format: $(time Europe/Madrid "MMMM Do YYYY, h:mm:ss a z [GMT-1]Z") but when I add it it only shows the time NOT the whole thing in the format I mentioend
hardy walrus
@gentle wedge You'd need to use a 3rd party API as the customization of ours is not quite there unfortunately.
What's the exact output that you want to have as the response?
gentle wedge
something like this: June 3rd 2020, 6:19:48 pm JST (GMT+09:00)
hardy walrus
๐ค Hold my beer and give me a bit.
Which timezon? GMT+1 or JST?
Or is it another one?
elfin arch
that's almost a straight new Date() call
hardy walrus
This is the closest I can get it to and because I'm not quite sure how to escape the format characters to stop it from messing up the TZ and GMT at the end June 3rd 2020, 4:59:10 am CDT (CDT-05:00)
Well I can actually get it to this but can't figure out how to do GMT at the end without it returning the response for those strings.
tepid grove
@hushed hazel of you the gredits does not work for me i have the widget in the overlay drin and follower,subs and so activated but nothing is shown after the stream although i got followers and bits please who can help me?
elfin arch
^^ Sudo you have CDT-XX:00 instead of GMT-... ๐
hardy walrus
I know.
That's the part I'm having the issue on as putting GMT there simply returns the values for those.
June 3rd 2020, 5:01:46 am CDT (CDT-05:00)
That's what I get with this
With GMT in the place it returns this```F%20jS%20Y%2C%20g%3Ai%3As%20a%20T%20%28GMTP%29
June 3rd 2020, 5:08:08 am CDT (5JunCDT-05:00)
wait
fak
elfin arch
ya. i'm not familiar with that endpoint. maybe thatT ?
elfin arch
%28TP%29 -> %28P%29
hardy walrus
That only returns the difference while they want GMT in the response.
elfin arch
...oh it's PHP.... hahah. i know nothing of that... my bad
F%20jS%20Y%2C%20g%3Ai%3As%20a%20T%20%28\G\M\TP%29 ?
elfin arch
i just read the link* you sent.... the \ out made sense... the rest is jibberish
hardy walrus
@gentle wedge ${customapi.https://decapi.me/misc/time?timezone=America/Mexico_City&format=F%20jS%20Y%2C%20g%3Ai%3As%20a%20T%20%28\G\M\TP%29}
gentle wedge
this is the reponse I must paste for the command?
hardy walrus
Wherever in the response you want it yes.
gentle wedge
OMG! It works! You da man
hardy walrus
@elfin arch I had to type out the time values first with spaces separating them and then add the percent encoded values removing the spaces as I went.
As you could tell it was not fun at all.
elfin arch
ya. that is not pretty at all. but good work man!
hardy walrus
Only reason I could get it done well enough was I had to use it yesterday for the same idea but not as complicated 
gentle wedge
perhaps this needs to be pinned? or how can others that may have the same issue see this?
elfin arch
that should be the pin for "how do i customize the timezone response command thing?" ๐คฃ
viral patrol
@hardy walrus @gentle wedge for next problems like that you may use ${pathescape}, as for example above you can have it like ${customapi.https://decapi.me/misc/time?timezone=America/Mexico_City&format=${pathescape "F jS Y, g:i:s a T (GMTP)"}}
hardy walrus
That does look a little prettier
gentle wedge
May I post pictures here?
elfin arch
don't forgot about the \G\M\T part ... cause i helped a tiny bit there ๐
gentle wedge
This is how it looks with the new code:
elfin arch
maybe the \'s don't work ๐ค
hardy walrus
Which one did you use?
gentle wedge
@hardy walrus @gentle wedge for next problems like that you may use
${pathescape}, as for example above you can have it like${customapi.https://decapi.me/misc/time?timezone=America/Mexico_City&format=${pathescape "F jS Y, g:i:s a T (GMTP)"}}
@viral patrol @hardy walrus that one
viral patrol
Ohh. There was no \G\M\T\P there
But if this is a static text - it could be not sent to decapi
elfin arch
i think the P is needed... just the GMT part was commented out... i don't know this PHP wizardry
hardy walrus
P is to return the hour difference from GMT.
It was just a matter of escaping the GMT to show it properly.
elfin arch
which makes total sense. ๐คฃ .... @gentle wedge ... the part we all see is that (5junCDT...) at the end
gentle wedge
ok im lost
hardy walrus
Just use the one I gave above and you'll be fine.
viral patrol
${customapi.https://decapi.me/misc/time?timezone=America/Mexico_City&format=${pathescape "F jS Y, g:i:s a T (\\G\\M\\TP)"}}
Like that?
elfin arch
i do like the pretty-ness of the pathscape; hate the PHP variables here. Good work Sudo putting those all together with the %20 spaces.
gentle wedge
thanks
pulsar willow
Hi, can I get multiple responses for one chat command on twitch? I dont know how to create them - for example - command will be : !weight and responses will be: 84kg, 100kg, 500kg, 1589kg ...
viral patrol
You can do that like: ${random.10-2000}kg or ${random.pick "84" "100" "500" "1589"}kg
pulsar willow
oo thanks i will try ๐
silk pebble
Hi, Is there any way of updating commands that is not through the chat or through the SE website? Specifically I was looking to try and use Google Sheets Scripts to update an SE command. Thanks.
steady crest
@hardy walrus my social rotator overlay is broken i have set it to roll in/ roll out but it does not roll in / roll out
@hardy walrus hello ๐
rugged rapids
slow gale
Ok my quest to find long term channel stats continues.
Considering StreamElements logs long term channel stats there has be an exposed endpoint in the API to let me do the same, hell even if there is one that just exposes every donation/cheer ever and I can aggregate them myself but the docs for the API are like looking for a needle in a haystack.
slow gale
How good is the StreamElements support site at answering API questions
Because I think I'm just going to have to flat out ask if this is doable within the Kappa AI
pulsar willow
Hi, I would like to make a Top 10 command for my channel. Is there a way to create that command? Currently there is only a !top points (Top 5) command 
Also, if possible, it would be so helpful if we could set the betting timer to 1.5 minutes. Currently it is only minutes, no seconds.
slow gale
This sounds like the sort of thing you would get a better response from in the #art-marketplace channel @pulsar willow
cloud moon
I was sent here via Twitter. Do you guys have a Sockets API that I can capture events like bits, followers, subs, etc?
oh wait I found it. https://docs.streamelements.com/docs/connecting-via-websocket
potent flicker
Just wondering, where do you guys run your node app?
carmine atlas
has there been a change to the SE API since January?
i had a "fork" of @viral patrol 's spinning wheel that i customized with some extra outputs (auto adding points and logging to google sheets)
i'm just coming back to streaming after a break and the widget isn't working.
here is the code, can somebody see if there are any glaring errors
https://github.com/Tabris83/KSP-Shipyard/blob/master/streamelements/SE wheel spinner
elfin arch
do you get any errors when you open the inspector on the overlay editor when trying to use it @carmine atlas ?
pulsar willow
When would i get access to the api, i've been waiting for a month now, and no mail and or discord message, is there a way to test the api before getting complete access?
carmine atlas
@elfin arch no errors in the inspector, it doesn't even show in the SE overlay editor
elfin arch
can you post the HTML/CSS & field data info?
what access do you need @pulsar willow ? you can hit the endpoints in the title of the channel with your account tokens
pulsar willow
I need access so that i can display overlays over streams
carmine atlas
@elfin arch https://github.com/Tabris83/KSP-Shipyard/blob/master/streamelements/SE wheel spinner HTML %26 CSS
pulsar willow
and i did not know about the channel tokens, i will look into that. Thank you
elfin arch
is that all the CSS? ... also need the fields.... trying to recreate the custom widget on a new overlay
you can just create the overlays and add them in as a browser source to OBS, no API needed unless i'm missing something you are trying to do ๐ค
carmine atlas
@elfin arch just updated the last link with the fields
elfin arch
got it. ... i'll take a quick look
this is what i see @carmine atlas .. and it spins on !spin command in chat
...seems to work with !command & cheer. but Sub & Tip break it for me
lean jay
I can't access my stream elements store dashboard. I am getting the following error "An error occurred.
Could not fetch store items."
Most likely because I tried to create a store item through the StreamElements store API and the request is incomplete. The API returned a 200 though. Need help please
elfin arch
like you are trying to open it on a browser? .... are you using chrome and done the log-out/log-in trick?
this is what I see when set to Sub mode (no spin on emulation):
carmine atlas
it works on a gifted sub but not a normal sub
carmine atlas
@elfin arch seems to be working now, it needs some more tweaks to be ready. Ty for the help
elfin arch
yup yup. no problem. good luck!
slow gale
@potent flicker If you don't mind putting your credit card into something. Heroku? It has a free plan (it want's your card so you can't register multiple accounts). It doesn't spin down until an hour of inactivity and spins back up good and quick.
potent flicker
@slow gale I saw that but I might opt for AWS Lambda and API
It was more generous than I expected
slow gale
@potent flicker Yeah if you want to put money down an AWS Lambda will probably be better, I just always assume people asking on Twitch stuff are looking for a free option
potent flicker
The free tier for AWS gives 1million queries per month or 3.2 million seconds compute time free for Lambda
hardy walrus
Or if you have decent internet and enough money to do a 1 time splurge I'd try a raspberry pi 4.
Besides they just came out with the 8GB model.
potent flicker
The only thing that puts me off Heroku is the 30minute shutdown :((
slow gale
What sort of thing are you planning on using it for?
If you're planning to use it for some sort of streaming middleware it would do the job
But if you're trying to use it for some sort of API layer, maybe not so much
frosty cradle
@hardy walrus Hello! Could you tell me what the "syntax" of the command is, "! Rename", it is like a predefined command, it does not show what forms the command, but I would like to know what it is.
rugged rapids
!rename <oldusername>, to transfer points and watchtime from old to new name.
frosty cradle
@rugged rapids So ... I know what it's for and how it works. I would like to know how the command is structured. For example, the command! Points, "$ {user} has $ {user.points} and its position in the rankings is $ {user.points_rank}. This is what I wanted to know about the command! What is the structuring of it. Because as it is a predefined command, it does not appear when you put it to edit.
rugged rapids
@frosty cradle There are background checks with the twitchID of the given name and the user who enters the command, to make sure it is the correct person requesting the transfer and then there is logic, to transfer the data.
frosty cradle
@rugged rapids I'll give you a little more work ... Haha
@rugged rapids Currently on the "Gaules" channel, I don't know if you know. I'm supporting his discord and everything. Well, the command! Rename he's in trouble. There are people who changed Nick and can't recover the points. The command says that the user ID does not match, however, people's user IDs are right because I already did the verification and the ID was really right, but still the c the command didn't work. So I would like to know how the command is structured.
rugged rapids
I do not know how the command is structured, only know the functionality and can think of how it might be achieved.
The people renamed and did not create a new name? Do you have an example user with old and new name please.
frosty cradle
@rugged rapids I have an example that I am myself. Haha ha
rugged rapids
What is your old and new name?
Have you written in their chat with the old account before renaming?
Does your old account still have points on the leaderboard?
frosty cradle
I changed my nickname a while ago and when I tried to use the command, it says, "the user ID does not match yours". However, it is the nick I had before.
@rugged rapids My old nick is, "robbrod193", my new nick is, "robson_correia". Yes, I had already talked and yes they still have points on my old Nick, but always give this user ID error.I used Twitchtools to check if the user ID was really the person's, but my new nick is linked to the old user ID, but it still doesn't work.
Can you send a picture here?
rugged rapids
yes.
frosty cradle
I have a print of the streamelements dashboard that shows that my profile is my old nickname and that I only updated my channel URL to "twitch.tv/robson_correia."
This okay
Just a moment
As you can see, my profile is the old nick and my URL is my new nickname, after I updated. When I use the command! Rename robbrod193, the bot says that the user ID of "robbrod193" does not match my current one, being the same ID.
I tried to use the command there in his stream now, but he is live and there are a lot of people in the chat, the bot was unable to answer so I could show it.
rugged rapids
That is your own profile. Not your data on their channel.
The bot was unable to answer?
frosty cradle
That is your own profile. Not your data on their channel.
@rugged rapids I know. This image was to show that my old nickname is my own and not someone else's.
high swallowBOT
@frosty cradle Please provide your account ID found at the top of this page: https://streamelements.com/dashboard/account/channels This ID is public info and safe to share here.
frosty cradle
The bot was unable to answer?
@rugged rapids Yes! Haha, there are a lot of people using the bot commands, it takes time to respond sometimes.
ID from my account: 5d697f3aed4ecb1ed753d45f
rugged rapids
Forwarded the data to staff, to take a look.
frosty cradle
@rugged rapids This okay! My biggest question is not even related to me, because I don't care about any points. But I'm giving support there and many people even complain that they changed Nick and can't recover the points the points by the command, because giving the same error to them.
I got it here, I'll send it.
The bot tells me that it doesn't match my user ID, as you can see.
rugged rapids
Thank you. Added this to the report for staff.
frosty cradle
This okay, i'm thank you. I have one more thing to "complain", can I say now or am I pissing you off? Haha @rugged rapids
rugged rapids
Let's jump into #helpdesk-twitch for this.
frosty cradle
Okay
slow gale
Where do we report API bugs
tropic finch
@slow gale here
slow gale
Ok
Bug: Activities endpoint is duplicating users through case sensitivity.
GET call to https://api.streamelements.com/kappa/v2/activities/channel/top?period=alltime&type=tip&limit=40
1st and 3rd returned value are the same user but one is capitalised and one is lower case
{
"total": 1100,
"username": "DaminQ"
},
{
"total": 550,
"username": "Aluciun"
},
{
"total": 500,
"username": "daminq"
}
low nebula
Not sure if this is the right place for this but I'm looking for a way to use a Stream Deck to control custom javascript widgets in a SE overlay. Is this possible? Any ideas?
pulsar willow
Does anybody know how to modify the Javascript code to allow all users invoke the Video on Command? #widget-share message
Currently it's only for streamer, mods and VIPs
slow gale
@low nebula Yes it is.
Under the system category in the StreamDeck you can make URL calls with a checkbox for (Access in Background) so it doesn't open a browser. So it would take some middleware, but you could use it to make GET calls to a script that takes parameters and then sockets to your widgets through Kappa API
elfin arch
@pulsar willow use this for line 41: ```js
if ((userState.mod && userOptions['managePermissions'] === 'mods') || ((userState.vip || userState.mod) && (userOptions['managePermissions'] == 'vips')) || userState.broadcaster || (userOptions['otherUsers'].indexOf(user) === -1)) {
The !== -1 at the end was changed to ===
This will change the "Additional users (comma separated)" options in the to "banned users" so anyone on that list can't use the command (set to !streamer only mode)
somber silo
Hi, Im trying to output the list top user points in my website using javascript, how can I do that? Haven't seen a tutorial, and Im new on this ๐
pulsar willow
Is it possible to link the command from the video on command widget to the bot? #widget-share message
I'd like for users to be able to invoke a command after they earn a few points
hardy walrus
@rugged rapids ^^^^
elfin arch
You could try this API endpoint @somber silo : https://docs.streamelements.com/reference/points#pointstopbychannelget ; you will want that to be on the server side so you dont expose your token when making the request!
elfin arch
@pulsar willow are you trying to have a bot command that will control the permissions for the widget command? ... you could do a work around if the bot command responded to the message with a 'unique phrase' like "<user> wants a video" ... then on the overlay side; check for a message from the bot that has "wants a video" to trigger it
woven zinc
Hi, the new widget in #widget-share "Animated gradient webcam frame" has the same CORS issue as others when you try to use an asset uploaded to SE:
Access to image at 'https://cdn.streamelements.com/uploads/...' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
In case it hasn't been reported.
hardy walrus
@granite pelican ^^^^^^^
woven zinc
mmh, I see this as more of an issue of the cdn subdomain. It should allow requests from the same domain
woven zinc
ok, the cors issue seems to be that cloudfare is not sending the proper headers, workaround solution by invalidating the cache:
@granite pelican
granite pelican
I noticed a problem with fonts and CORS for the mask. I've used custom font in there and it wasn't displayed properly until set -> save -> exit -> set -> save. Probably it's the same CORS.
pulsar willow
@elfin arch let me make sure I understand:
- I create a bot command and set the desired loyalty points, i.e. !disco
- that bot command prints out
<user> wants to boogie - in the overlay I set the "wants to boogie" as the
Command to start video1or are you suggesting I change some JS code?
Doesn't that mean that if someone starts typing "wants to boogie" in the chat, the video gets triggered as well?
It'd be the best if there was a way to link the overlay command to some bot command
CC @rugged rapids
elfin arch
change the JS code; so it will only respond to the bot saying "wants to boogie"
pulsar willow
In that case, could we programme the widget to look for the key phrase "wants to boogie" but also check for the user name to make sure it's StreamElements? This way the video would only be triggered by the bot
elfin arch
yup. exactly.
as long as you don't have any other chat commands that will respond with "wants to boogie" ๐
pulsar willow
Imagine that channel with such commands xD
Ok, so I would have to modify
if (message == userOptions['command1']) {
to something like
if (message == "wants to boogie" && user == "StreamElements") { (it's a pseudo code, need to figure out the correct syntax)
viral patrol
if (message.indexOf("wants to boogie")!==-1 && user == "StreamElements") playBoogie()
thanks lx
elfin arch
that will set the first command to bot only; but you can do that with the others. and even replace the "wants to boogie" with the userOptions['command1'] to edit it in the field settings. also looking at the overlay "streamelements" might need to be all lowercase for the user
slow gale
@pulsar willow You might want to implement some sort of input debouncer with something like that
to avoid your stream getting spammed
pulsar willow
@slow gale I am planning to use loyalty points, so that people can only invoke it every so often. That'd serve the same purpose, right?
slow gale
People tend to act in groups. One person redeeming often, reminds other people they've got spare points and they redeem too
pulsar willow
@elfin arch I don't fully follow. How could I use the command direct and avoid having the overlay to parse the phrase instead? Can you share a code example?
@slow gale now I follow. What does an input debouncer look like? Any example I can look at? :/
elfin arch
^ with the bot triggering it; you can use a cooldown if needed (much better than where we where with it open access ๐ )
elfin arch
if (message.indexOf(userOptions['command1'])!==-1 && user == "streamelements") playBoogie()```let cooldown = false
function playBoogie() {
if (!cooldown) {
<boogie code>
cooldown = true
setTimeout(()=>cooldown = false,30000);
} else {
return;
}
}
Excuse me, debouncer is the wrong phrase, blame my coffee not kicking in yet.
The difference between a debouncer and a cooldown is a debouncer resets the cooldown timer every time the input is fired before the cooldown is done.
elfin arch
ya; that is build into the overlay (no timeout) but that can be set with the Bot command cooldown
slow gale
Ah ok. I thought maybe because it was custom the behaviour would default to queuing, because streamelements likes queuing things
My concern was that even if it didn't spam the channel the bot would line up like 15 minutes of endless boogie for him and by the end he would be exhausted.
elfin arch
it's in there but looks like it just toggles on/off while video is playing.
they won't stack; the command won't work if the video is already playing from looking at the code.
pulsar willow
Thanks for the support, guys. All this is so new to me, I hadn't even considered all these cases
elfin arch
this is the reference overlay @slow gale if you wanted to take a look. Hacked it to allow messages from everyone instead of the settings, https://discordapp.com/channels/141203863863558144/457957557470887947/619140761971195915
pulsar willow
@elfin arch I think this logic might have some issue, unless I'm missing something
if (message.indexOf(userOptions['command1'])!==-1 && user == "streamelements") playBoogie()
The command is typed by the users, but the bot doesn't output a phrase anymore. So that wouldn't trigger. Unless 1)user types command, 2) bot echos it, 3) video plays
elfin arch
the command1 in the settings should be changed to "wants to boogie"
slow gale
Script is only listening for that phrase specifically from the bot
elfin arch
that change just let's you edit the bot "trigger" in the main editor without having to go into the code
slow gale
@elfin arch I went to look but was instantly distracted by Keizar's amazing pfp
pulsar willow
nice1 @elfin arch I'm with you now. Basically not hardcoding stuff in the code editor ๐
pulsar willow
Yup! Respect
elfin arch
so that line of code
if (message.indexOf(userOptions['command1'])!==-1 && user == "streamelements")
is looking at the first line; but you also have commands2/3/4 there
pulsar willow
Can't wait to finish with work to try it xD
cold smelt
Can someone help me convert a streamlabs event list I purchased a long time ago to streamelements?
viral patrol
If it is Nerd or Die eventlist I am pretty sure you can redownload your package and it should be already compatible with StreamElements.
hardy walrus
Unless it's an old one that's strictly code.
There's plenty that are unfortunately SL only.
cold smelt
It's the old event pop that's only html css js. It hasn't been updated to include SE yet, I've tried downloading it again.
viral patrol
DM me CSS file please
broken coyote
Thanks @viral patrol lol. Less work for me
hexed ridge
MrBoost you thought about making the circular Follower goal so that each goal can be different? like having total followers, subs per month, donations per month, bits per session for example?
Or was there some reason against this?
broken coyote
I havenโt thought of doing it that way. I have so many different projects going on that itโs difficult for me to go back and add things
vapid iron
pulsar willow
How can I get the user name in the video on command widget JS code?
i.e. any user's name that invoke a !something command, i.e. the SE bot should be streamelements
https://discordapp.com/channels/141203863863558144/457957557470887947/619140761971195915
Solution: think it's user from let user = data['nick'].toLowerCase();
pulsar willow
(sorry for the stream of Qs ๐คฆ ) Again for video on command
Command to start video1 (in overlay): "boogie"
However, bot types in chat "Someone wants to boogie".
Shouldn't
message.includes(userOptions['command1']) evaluate true? Cause mine doesn't.
Whole code
if (message.includes(userOptions['command1']) && user == "streamelements") {
remote marsh
Hi I wanna setup channel point redemptions awards but this seems to be another widget shared assuming that everyone here knows how to code 
How do I setup alert html?
I tried taking a jab or two on github and I just have no idea what to do
serene turtle
Is there a websocket event for tiltify donations?
remote marsh
Not that I know of, where would I verify that?
It was from this post
I'm not kidding when I tell you that I have no idea what I'm doing with all the coding stuff. ๐
slow gale
tfw you you don't just click the custom CSS because you need js too in the alert widget and scratch build alerts in a custom widget
remote marsh
TFW a sex robot says something you couldn't possibly understand 
remote marsh
Are you saying that's what I need to do? @slow gale
tropic finch
this option in slideshow/assetRotator is missing
@tropic finch help
elfin arch
@pulsar willow There is a little more code that needs to be changed after looking more into the "message" handler.
if (!message.includes(userOptions['command1']) && message !== userOptions['command2'] && message !== userOptions['command3'] && message !== userOptions['command4']) return;
console.log("Got it! " + message);
let user = data['nick'].toLowerCase(),
commandUser = message.replace(userOptions['command1'],'').replace('@','');
console.log(commandUser);
line 29 does the message content check (make sure the command "wants to boogie") is lowercase in the setting field when typing it in.
then line 32 was added for the command user; that will take a bot response "@user wants to boogie" and remove the "wants to boogie" then removes the "@"
elfin arch
to pass that username along to the visual; would be something like
with adding a line in the html: <p id='user'></p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"/>
<div class="main-container hidden">
<video id="video" playsinline style="width:100%; height:100%">
<source id="source" type="video/webm">
</video>
<p id='user'></p>
</div>
Then remove the 100% height in CSS and style how you want (might need to make the box a little taller because text is pushed below video)```css
.main-container {
width:100%;
}
#user{
color: red
};
dull sierra
Anyone knows how to get tips from the REST API? I checked the docs but the entries for timestamp are confusing for me https://docs.streamelements.com/reference/tips#tipsbychannelget
I am using python, what timestamp format is the server expecting from me?
If anyone can provide an example querystring that would greatly help!
elfin arch
not sure as i haven't used that endpoint and don't know python but something like ```py
(datetime(2010,1,1) - datetime(1970,1,1)).total_seconds()
1262304000.0
maybe something like querystring = {"offset":0,"limit":10,"sort":"createdat","after":"0","before":"1591417761731"}
my assumption is that would get 10 from all time, starting a 1970 until now. Also requires the JWT token in the header.