dev-chat

[little kelp]

Hey everyone, I'm looking into something for a friend who streams. So far I've found two options, but neither does /exactly/ what she's looking for.

I'm looking for a command that moderators/the owner can enter in chat that will start a countdown from a time the person enters. For example, setting a 5 minute countdown.

I've found a nightbot command that will do the countdown, but needs to be checked for remaining time and does not announce when time has expired.

I was also shown the streamelements widget that will countdown and shows when it's complete, but from what I've gathered, it has to be set manually through streamelements.

Is there a way to either use a command to set/start the streamelements timer widget through chat?

[tame cliff]

hello everyone, is the streamelements API still operative? I want to connect my external application to listen to !redeem commands, but the links to register an application are down, and calling the authorization api endpoint yields a Bad Request with the body: "error": "server_error", "error_description": "The authorization server encountered an unexpected condition that prevented it from fulfilling the request.",

[radiant halo]

You're super welcome! I'll pass the thanks along to my JS wizard buddy - he got me set up well!

[crisp cairn]

trying to use replay widget and it is not working, help please.....I entered key in section, still not working.....where am i going wrong?

@hot scrollyone have answer? please love your product

[muted moat]

hi how could I add a pause button to the public widget called stream marathon timer?

I need it for a special "infinity" and I wanted it so that when I went to sleep to stop it but that I could continue adding time

[elfin arch]

This should get you in the right direction @little kelp #widget-share message Looks like it's a sound announcement at the end but you can add anything there you want; a visual effect or chat response.

[elfin arch]

yes, the API is still operational @tame cliff. New Oauth tokens are released in batches and I am not sure when the next ones will go out. You can still make API calls with your JWT token though. As for listening for redemptions, I think you will want to set up a websocket to get the data when they occur (https://docs.streamelements.com/docs/connecting-via-websocket). I believe the 'event' data JSON is the same schema as the overlay editor (link is in the channel header here) but I have not played with the SE websockets so i'm not 100%.

[river maple]

I am looking at building an "enhanced duel module" for my chat, instead of the duel just straight up saying who won, I want it to show the battle. For example, millionandbell slashed darkrai for 50 points, darkrai retaliates and hits a critical for 100 points defeated millionandbell darkrai wins. Something like that. From my research I believe I need to use the API. When i do a request from python to get the URL it says status bad request. It also says that when i go to that URL. I decided to use python just because i have used it in the past. Is there a better method to creating this?

[elfin arch]

I would recommend creating your own duel module. You could do that in the overlay editor using JS or you could create your own (free) API service and run the code there.

[river maple]

awesome! thank you ill get to researching!

[elfin arch]

if you go the overlay route; here is some old code to get you started that has the basic command trigger and response to chat #dev-chat message (it is locked to broadcaster) but a good idea on how to read chat & respond inside an overlay widget

[river maple]

This helps a ton! i'll get to work, ill post it when i am done if anyone is curious?

[elfin arch]

That be great if you shared! I've seen it requested a few times for an an enhanced duel game but i don't recall anyone ever creating it.

[river maple]

pressures on, its gonna take some time. I have zero experience with this lol

[elfin arch]

😄 no pressure. Just make it how you want and if you have questions; someone here will help point you in the right direction.

[muted moat]

A question in this code that you would have to delete so that the gifts also counted?

JS

    if (listener === 'follower-latest') {
        if (fieldData.followSeconds !== 0) countdown(fieldData.followSeconds);
    } else if (listener === 'subscriber-latest') {
        if (data.bulkGifted) { // Ignore gifting event and count only real subs
            return;
        }
        if (parseInt(data.tier) === 2000) {
            if (fieldData.sub2Seconds !== 0) countdown(fieldData.sub2Seconds);
        } else if (parseInt(data.tier) === 3000) {
            if (fieldData.sub3Seconds !== 0) countdown(fieldData.sub3Seconds);
        } else {
            if (fieldData.sub1Seconds !== 0) countdown(fieldData.sub1Seconds);
        }```

[viral patrol]

I think this just ignores first event of community gifts.

But it could be changed to:

 if (data.bulkGifted && !data.isCommunityGift)
{
  return;
}

As there may be community gifts of 1 and they emit just one event AFAIK

[muted moat]

then with that code would they not?

[elfin arch]

from what i've played with; the Sub is very tricky; here is the "boiler plate" i was working on

switch (obj.detail.listener) {
    case 'follower-latest':
      followerHandler(event);
      break;
    case 'redemption-latest':
      redemptionHandler(event);
      break;
    case 'subscriber-latest':
      if (event.amount === 'gift') subscriberHandler('subGiftHandler', event); //single gift
      else if (event.bulkGifted) subscriberHandler('subBulkGiftSenderHandler', event); //bulk gift sender
      else if (event.isCommunityGift) subscriberHandler('subBulkGiftRecieverHandler', event); //user recieved a bulk gift
      else subscriberHandler('subDefaultHandler', event); //normal sub
      break;

[tribal zenith]

or the other way round: Look how many subs and what tier were gifted in bulk, multiply them with the corresponding seconds and then ignore the singular gift events of it

[elfin arch]

the sub handler is very tricky

🤣 that's all i can say; there are several options ... but it depends on the end result. a lot happens really quick on a sub gift and triggers 13 things for a 10 gift sub. it's just about handling them how you want.

[lapis flame]

is there a way to track every message that is sent by users? I would like to have a unique alert in my overlay if someone types specific words or commands in chat ?

[tribal zenith]

you can listen for chat messages, yes

and then just check if a message contains any specific text you want

[whole mural]

just trying to work out why my custom css isn't allowing the alert text to show?

this is the font on my pc it's referencing

[tribal zenith]

url(...) is relative to the server

[whole mural]

what do i need to do, to use the font I want? or is it not possible?

[tribal zenith]

It is a planned feature for chrome to load local fonts, but for now it is not possible

[elfin arch]

font-family: 'bangers';

[tribal zenith]

you can use google fonts or host them yourself

[elfin arch]

OBS will load the local font

[whole mural]

lobster is in google fonts

[elfin arch]

@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');
.text-container {
    font-family: 'bangers';
}

copy pasta of working code

i used "Bangers"

[whole mural]

so, i remove the @font-face altogther and replace it with @import?

[tribal zenith]

yep, you just need to import the url and then have it available as name

[elfin arch]

@import has to be at the top of the code.

[whole mural]

before even the call for .video?

[elfin arch]

yup yup. first line.

[whole mural]

also, what's the way to add notes in CSS, so when I am looking at it in the future, i can remember why iv done what?

[tribal zenith]

comments are just /* your comment */

[whole mural]

thanks

[elfin arch]

errr.... not sure is CSS about comments

[whole mural]

on a seperate line to the rest of it? or can it be in line? ie.

.username { /comment/

sorry, this is the closest iv gotten to coding in well over a decade

[tribal zenith]

everything between /* and */ is commented out

[elfin arch]

oh.... it is the same as JS.. nice

[tribal zenith]

only single-line (//) doesn't work 😄

[whole mural]

is font-family: Lobster Regular; necessary at the end of the call for .username?

[tribal zenith]

if that element should have the font then yes

it also gets inherited. So if a parent element has the font, the child will have it too

[whole mural]

this is what i have now, i'm gonna guess the call for the font under .username is incorrect, but it still doesn't show the text

[tribal zenith]

the import url should be @import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

and the font-family is just Lobster without Regular

[whole mural]

missing the "display=swap"

[tribal zenith]

on your screenshot it's a different url

[whole mural]

gottcha

[elfin arch]

check your link; get it from the google font site. ^ you are way off

"Lobster" is the default font, if that fails to load it will go to "Regualar" ... if that fails to load it goes to the next

[whole mural]

this is where i got it from?

[tribal zenith]

yep and then you just have to click on the "Select this style" button on the right side

[whole mural]

and i assume this is what im wanting

[elfin arch]

yup yup

[lapis flame]

window.addEventListener('onEventReceived', function(obj)
{
  if(!obj.detail.event) return;

  const listener = obj.detail.listener;
  
  if(listener === "message")
  {
    // route chatmessage to console {{message}}
    var varOutput = '{{message}}';
    console.log(varOutput);
  } 
});
``` What am I missing? {{message}} has no input. The event got hit but I thought {{message}} will include the message it self 😦

[elfin arch]

obj.detail.event.data.text == "??"

[tribal zenith]

{{message}} would be a template placeholder for fields in html and css. In your case you need the obj.detail.event.data.text field as pjonp mentioned

[whole mural]

@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

.video {

position: relative;
}

.username {
  position: absolute;
  top: 570px;
  left: 980px;
  color: #00843D;
  font-size: 40px;
  font-family: Lobster;
}

This is what I have now, and it's still showing no text just incase there's an issue in the HTML side of it, this is what I have,

<div class="text-container">
    <div class="image-container">
        <video class="video" autoplay src="https://cdn.streamelements.com/uploads/NUMBERS.webm"
               type-"video/webm">
    </div>
    <div>
        <div class="awsome-text-container">
            <span class-"username" id="username-container"></span>
            is now following!
            <br>
        </div>
    </div>
</div>

[tribal zenith]

class-"username" should be a =

just a typo

[whole mural]

ffs now its good, i thought that while watching the video im referring to, but he had it as - and it worked fine so i didnt quesition it

thanks for your help

[tribal zenith]

np

[whole mural]

i did notice something in code that was pasted earlier, about i think a downward movement, does that have the text scroll down?

[tribal zenith]

depends on the code, but you can animate elements, sure

[elfin arch]

🤣 ya. i yeeted a bunch of the CSS from that CSS example i posted.

https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation5

[lapis flame]

well ... sometimes the solution is to easy 🙂 thx @elfin arch & @tribal zenith

[elfin arch]

yup yup. there is a bunch of info in that obj.detail.event 😉 ....

[lapis flame]

next time i sent the .event to console to have a closer look what its packed of

[lapis flame]

most default animations like sliders etc can easly done via css. No need for a 10mb mp4 file to do simple animation. Packed with js libs some more freaky things are possible

[elfin arch]

hey now .... CSS is bad!!! boooooooo ... greenSocks = yaaaaa!!

[whole mural]

i have only started trying at css in the last hour

[elfin arch]

< - (hates CSS)

[whole mural]

I have only ever worked in HTML, from the days of like myspace and such sites

[lapis flame]

dont worry its not that hard to learn 🙂

[lapis flame]

let me see. Never heard of that one 😄

[elfin arch]

(╯°□°）╯︵ ┻━┻

[lapis flame]

ahh ok. I can tell what you are talking about 😄

[tribal zenith]

I must admit for prototyping I prefer anime.js over GSAP

[elfin arch]

to each their own. ... i can't use either well but either make pretty things

[lapis flame]

clash of the js libs now 🙂

bring them in ... 3.. 2.. ..1 fight 😄

like the good old mtv celebrity deathmatch shows

[elfin arch]

the claymatchs ?

GSAP wins 🤣 .... but i have minimal experience with that and 0 with anime.js ... but GSAP .... very powerful with my little experience with it

[lapis flame]

i just see all the svg paths and i quit 😄

[elfin arch]

ya ya; but that it what makes it fun (i hated SVG... still do)

[tribal zenith]

the real shit starts when you try to 3D transform SVGs. Since there is no definition for it, GSAP just doesn't do anything while anime.js handles it as "normal" css

[elfin arch]

yup. i'm struggle bus with 2d SVG no way i get into 3d

[tribal zenith]

I had to use it for my Cyberpunk and Ghost of Tsushima overlays and it took me some time to figure out why it wasn't working

the W3 standard has simply not defined how to handle 3D on SVGs. So you could argue if GSAP does the right thing or not

[lapis flame]

i am just happy if a div moves from right to left 😄

[elfin arch]

^ yup yup. was about to say @tribal zenith needs to talk with mrboost about the animation stuff cause i have no idea

[lapis flame]

ok ok i have ambition. It should also change its color 😉

[elfin arch]

i mean; i got a couple codepens ... but i dont do pretty well

[whole mural]

What's wrong with the line before/after the username call HTML

    <div class="image-container">
        <video class="video" autoplay src="https://cdn.streamelements.com/uploads/xxxx.webm"
               type-"video/webm">
    </div>
    <div>
        <div class="awsome-text-container">
          <div class="f1" Welcome to the apocalypse</div>
            <span class="username" id="username-container"></span>
          <div class="f2" you are the newest Horseman!</div>
            <br>
        </div>
    </div>
</div>```

because now it isnt showing any text again

the 2 lines are just the text that suppose to surround the name

[lapis flame]

missing ">" after class

[elfin arch]

^ x2

[tribal zenith]

and the class is probably called awesome-text-container

missing an e

[elfin arch]

this. in 2 places

[whole mural]

should this be where I have added </div>

[lapis flame]

<div class="f1"> and <div class="f2">

[whole mural]

it's improved, but the welcome to the apocalypse, needs to be above the name

[lapis flame]

then switch the span and the div

[whole mural]

so, span for the sentence, and div for the name?

[lapis flame]

ohh lol no

maybe it has something to do with your css

my bad

[elfin arch]

^CSS

[tribal zenith]

span uses display: inline and div uses display: block. So if you position it absolute you should use divs for all three

[lapis flame]

the span is floating. I guess if you replace the span with div you should be fine. Without seeing your css

or add block to your span

so go with @tribal zenith solution

[whole mural]

.video {
position: relative;
}

.f1 {
  position: absolute;
  top: 670px;
  left: 980px;
  color: #00843D;
  font-size: 40px;
  font-family: Lobster;
}

.username {
  position: absolute;
  top: 570px;
  left: 980px;
  color: #00843D;
  font-size: 40px;
  font-family: Lobster;
}

.f2 {
  position: absolute;
  top: 770px;
  left: 980px;
  color: #00843D;
  font-size: 40px;
  font-family: Lobster;
}

[lapis flame]

so @tribal zenith was 100% correct. your span has no definition therefore it is floating because of its inline. Define your span als block in css or replace the span with div in your html

[tribal zenith]

and your top value is wrong for username

need to swap it with f1

[whole mural]

fixed

I can almost guarentee once this alert is done, I won't want to touch it ever again

[elfin arch]

ugg; "absolute"

[lapis flame]

^^

[whole mural]

imagine iv just started learning CSS 2 hours ago.... and tell me the issue

[lapis flame]

@whole mural my advice for you: do some simple html css tutorials. To understand the basics. After that everything will be fine

[elfin arch]

like Reboot said swap the .username and .f1

[whole mural]

yeah, i have swapped the values there now

that's fixed it, just dont understand what a floating span means in html

[tribal zenith]

also as a tip, if you use classes you can reuse the name. So if you give every text the class "text" for example, you only have to style that once

[elfin arch]

it doesn't matter when using Absolute in the CSS .... but... DIVS are stacked top/bottom and SPAN is left/right .... in the basic terms

DIV
DIV
SPAN SPAN SPAN
DIV

[tribal zenith]

and then there is this weird love-child of inline-block

which basically means I have no idea what I need

[elfin arch]

ya. i skipped all that and the "float" .... went straight to flexBox

flexBox = best CSS

(don't care about grid)

[whole mural]

i am going to assume that any attempts at delaying when text appears and disappears, would need to be done in css

[lapis flame]

you want to control when each div is displayed ?

[whole mural]

I want to alter the display time for all three universally

[lapis flame]

can be done in css, yes

[whole mural]

delay it coming in by 2 seconds, then it goes after being displayed for 10 seconds

[lapis flame]

https://www.w3schools.com/cssref/css3_pr_animation-delay.asp

[elfin arch]

.show {
    animation: fadein 1s forwards;
}
.hide {
    animation: fadeout 1s forwards;
}
@keyframes fadein {
    from {opacity: 0;left: 2000px}
    to {opacity: 1;left: 50px}
}
@keyframes fadeout {
    from {opacity: 1;left: 50px}
    to {opacity: 0;left: 2000px}
}

[tribal zenith]

you can do it in CSS, but that's easier to do with timelines

[whole mural]

only because I think that the squishing effect and sliding right is going to be more than my poor mind can handle

[whole mural]

timelines being in css?

[tribal zenith]

no in JS

[elfin arch]

what i posted is CSS with a class toggle. add class / remove class. .... but if start getting into more complex movements then timeline (GSAP !) is the way to go

or anime.js 🤣 i think thats what Reboot said

[tribal zenith]

or gsap. whatever you prefer

[whole mural]

Okay, so this one I am happy to do research on and to be honest don't expect it to be possible just a fantasy, just I have no clue on the buzz words, this is something I've created, is there some way of replicating the fx used to create it within anything in SE for the wording?

[tribal zenith]

SVG text might be capable of multiple strokes and shadows

[whole mural]

being that SVG files are xml, is there no way to create a template file that it can reference for letters?

[tribal zenith]

you can create the svg markup normally and change the text content with JavaScript, if that was your question

or use css classes

[whole mural]

even with googling and trying to find videos on youtube to explain what you just said, im still not sure. but what i mean to say, is using a SVG file that just has the alphabet written out, as a reference for other text to copy from, kind of using the SVG as a font basis, im not sure if that's any clearer or not but

[tribal zenith]

well, the letter definitions are in your font and you can give each letter a css class to have a consistent styling

you could also create your own font, but that is probably a bit overkill

[whole mural]

that sounds like what i was trying to explain

[tropic wagon]

I tried to add a "if" variable to Nari's code for my stream label but it doesn't work, i tried " if $("#new-subscriber").text(data["subscriber-latest"]["name"]+" - "+data["subscriber-latest"]["gifted"]); " what's missing ?

[elfin arch]

what are you trying to check for "if" ? ... there is a few things wrong with that 🙂

[tropic wagon]

I added " x ... months" in the original code, but when it's a gift it's written " x Gifted months"

it's weird xD

[elfin arch]

let subLastestName = data["subscriber-latest"]["name"];
let subLatestGifted = data["subscriber-latest"]["gifted"];
$("#new-subscriber").text(subLastestName + " - " + subLatestGifted)

this is basically rewriting what you have; minus the 'if'

[whole mural]

    <div class="image-container">
        <img src="   ">
    </div>
    <div>
        <div class="awsome-text-container">
          <div class="f1"    > Welcome to the apocalypse</div>
            <span class="username" id="username-container"></span>
          <div class="f2"    > you are the newest Horseman!</div>
            <br>
        </div>
    </div>
</div>```
I am looking to transition from a video to an image to simplify part of my alert, for now, how am I meant to reference the image in the HTML, I have tried to inspect the element to get a link or just using the "change image" and neither have worked

[tropic wagon]

With this the amount doesnt show for regular sub

[elfin arch]

<img id='target' src=" "> .... then $('#target').attr('src', '...image location.png')

the subs are really tricky to handle @tropic wagon .... with the prime/normal/resub/gift sub/bulk sub so it splits in different directions

[tropic wagon]

yes 😦

[elfin arch]

this is what i've been testing ^

[whole mural]

within the <img id='target' src=" "> I left the src= empty because I didn't know what was meant to go in there, so I'm not sure if that affects what you wrote

[elfin arch]

ooohhh... you are using the widget overlay right?

[whole mural]

I am using this image

which is one I've uploaded to SE

[elfin arch]

put this into the fields tab ```json
"foregroundImage": {
"type": "image-input",
"label": "Foreground Image",
"value": "https://raw.githubusercontent.com/pjonp/pjTestBot/master/modules/.SE_Overlays/chatterWheel/assets/streamElementsLogo.gif"
},

make sure it fits into the JSON though.

[whole mural]

do I delete the existing code in the fields tab?

[elfin arch]

then you can use src={foregroundImage}

you can add it between a couple of the existing there.

1 sec. i'll post it for you to copy

let me know when you copy pasta that over; then we both need to remove these massive code blocks

[whole mural]

done

[elfin arch]

so now; can you use src={foregroundImage} in the HTML?

[whole mural]

that's what i had

[elfin arch]

ya. does that work?

[whole mural]

it's got the streamelements gif

and changing that works

[elfin arch]

perfect. i gave that to you for default 🤣

ya; on the left menu you should have the upload image option to swap it out

[whole mural]

yeah i got that

now I just need to go edit the image, because it's half the screen and obnoxious

thanks

[elfin arch]

you can CSS that 😉

[whole mural]

https://tenor.com/view/walk-away-not-today-baby-no-nope-gif-4650239

this is me and css

[elfin arch]

🤣 me too ... can you remove that big code block above? and i'll give you a small one

[whole mural]

i do need to css move the image though, cos it's defaulted to the left, so i assume i just use the same absolute position css to move the image as i did with the wording

[tropic wagon]

this is me and JS xD

[elfin arch]

.target {
width: 300px
};

[whole mural]

nah i resized it outside of streamelements, just moving it around now

[elfin arch]

i forgot what we called the image before you deleted it 🤣

[whole mural]

called it image

[elfin arch]

hahah. well played.

[whole mural]

after the last 3 hours, i am finally at a stage where I can move the text to where it's meant to be

[elfin arch]

are you one of the CSS wizards @tropic wagon ? ... sorry i can't help more with the Sub thing; it just splits in 5 different directions and i need to go soon

[tropic wagon]

I'm self learning, html/css it's ok ... but when it comes to JS ... I'm pretty sure it's easier to learn chinese xD

[elfin arch]

freecodecamp.org 🙂

html/css/js => magic

[tropic wagon]

wow this website looks cool ! Thanks 🙂

[tribal zenith]

I can't decide if I want to add a neon text glow to a new widget or if the configuration for that will overwhelm people

[elfin arch]

it's how i learned HTML/CSS (and i was 0%) ... don't even want to share my first "website" i made about 1 year ago.

[elfin arch]

add all the options! then strip them out and hide it in the fields/documentation

[whole mural]

why is w3schools saying to add shadow effects using

  text-shadow: 2px 2px 5px red;
}```
when it only worked as
`text-shadow: 2px 2px 5px red;`

[tribal zenith]

I don't see the difference?

the h1 {...} just says, the definitions in the brackets should apply to all h1 elements

the definition itself is just the text-shadow

[whole mural]

oh

okay

do all variations need to have their own custom css set?

[broken coyote]

Css

[tribal zenith]

you can either use classes for shared definitions across elements with the same class or ids for specific singular definitions

[tropic wagon]

Why everyone is hating on css ? so much easy then JS ! #teamCSS

😂

[lapis flame]

any chance to get the avatar url of an user ?

i cant find it in the event data

[elfin arch]

CSS bad!

i don't think that comes through the data @lapis flame .. are you building for Twitch? you'd need to get the ID (not sure if that comes through either?) then do a Twitch API call for the Avatar image

[lapis flame]

yes doing it for Twitch. I have seen the Twitch API call but i thought maybe there is a way arround that obstacle, just for an image

[tribal zenith]

https://docs.decapi.me/twitch?endpoint=avatar%2F%3Auser

[lapis flame]

there we go 😄

can we please rename @tribal zenith to Wikipedia or google at least ? 😄

[heavy thistle]

hi guys, not sure if this question belong to this group specifically, but couldn't figure a better channel. I've a question about the user commands in combination of a custom widget. I'm curious if you could connect a user command to trigger a custom widget/video animation. F.e.; someone in chat uses "!show", an animation pops up showing what show is on. Hope this isn't too cryptic and hope you can help me out on this one 🙏

[lapis flame]

@heavy thistle i am working on that right now. And yes it works

[tribal zenith]

there already are a few widgets in #widget-share which do that

the awesome shoutout for example

[elfin arch]

you got it working? .... here is the basic example #dev-chat message

[lapis flame]

window.addEventListener('onEventReceived', function(obj)
{
  if(!obj.detail.event) return;

  const listener = obj.detail.listener;
  
  if(listener === "message")
  {
    console.log(obj);    
    var varOutput = obj.detail.event.data.text;
    if (varOutput =='!show'){
        console.log(varOutput);
          $("#subscriber-text").html(varOutput);
         $("#main-labels").css("visibility", "visible");

    }   
  } 
});
``` Very simple code snippet

[tribal zenith]

that's the easy part

now you have to add a queue, a timeout between triggers, rights management and fields for media uploads

[elfin arch]

🤣 .... but it'll work for any !show command. good work

[lapis flame]

as I said very simple snippet 🙂

dont judge me too hard 🙂

[tribal zenith]

nah, I wasn't judging 😄

for your own layouts you can also hardcode it

[sturdy oak]

Hey @lapis flame use gsap

[elfin arch]

🤣

[sturdy oak]

Not necessary here but you need to get used to it

Now gsap needs to pay me for promotion

[lapis flame]

haha i was waiting for someone who hates css. I was going for @elfin arch but hey #1 goes to @sturdy oak ^^

[sturdy oak]

Well there's things that CSS cant do, that GSAP does

But yeah most of us have a love hate relationship with CSS

[lapis flame]

my goal for this year: post every day a css code into this channel to let the rant start 🙂

sometimes I will post pure css code other times I will sneak it into js. So be aware 😄

[sturdy oak]

@elfin arch Switch to GSAP got damn it

[elfin arch]

i dabbled in it a little; but it's a slippery slope.

[tribal zenith]

@sturdy oak would it trigger you if I wrote "anime.js > GSAP" ?

[sturdy oak]

REEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE

[elfin arch]

🍿 ... yup i agree.

[sturdy oak]

https://tenor.com/view/shut-up-shush-shh-ok-bird-gif-17679708

lmao jk

But isnt anime.js old? @tribal zenith

[tribal zenith]

no it still gets regular updates

[sturdy oak]

I wish GSAP premium was not a thing and all plugins were free to use

[tribal zenith]

but money

[sturdy oak]

pepeLaugh

whoa just checked anime.js website its cool

Is there a premium version to use all plugins? @tribal zenith

[tribal zenith]

everything is free there

[sturdy oak]

GSAP pepeScam

[tribal zenith]

GSAP does a little bit more of correction on user input and has some bonus fancy stuff, but I never really needed that

[sturdy oak]

Im anime.js gang now thanks to @tribal zenith

[tribal zenith]

#sponsored

[sturdy oak]

The syntax is basically the same as GSAP

[sturdy oak]

😉

[tribal zenith]

and you can even animate multiple properties with different easings & timings in one "Tween"

[heavy thistle]

thanks, i'm gonna look into it!!

[sturdy oak]

you mean timeline?

[tribal zenith]

in one .to(...) method

[sturdy oak]

Does it have something that splits text into <span> elements for animation

[tribal zenith]

not as own function but I had animations were I had to use that

[sturdy oak]

what'd you use then?

[tribal zenith]

$('#myElement').html( $('#myElement').text().replace(/\S/g, "<span class='letter'>$&</span>") );
let lettersArray = $('.letter').toArray();

[sturdy oak]

hmm

That's some big brain code

[tribal zenith]

then lettersArray has all letters as jQuery object

if you want to iterate over it

so you could stagger them like

timeline.add({
  targets: lettersArray,
  opacity:
  {
    value:    [0, 1],
    easing:   "easeOutQuad",
    duration: 1000,
    delay:    (el, i) => 200 * i
  },
  color:
  {
    value:    ['blue', 'green'],
    easing:   "easeInQuad",
    duration: 1500,
    delay:    (el, i) => 250 * i
  }
  });

[violet swallow]

I want to create a command since I don't see you have it, that allows someone to write !Boss, everyone who !join's it randomly says how many people made it out alive or if the boss was beaten or it says everyone got wiped. If the boss was beaten, it gives points. If the boss wipes everyone I've seen a lot of these things in different chats, but they were using a diff bot I guess... Any ideas? (and sorry I didn't realize that it didn't send)

[viral patrol]

@violet swallow There's a widget that does something like that, but instead of boss there's a bank to rob. You can search for "heist" widget in widget-share

AFAIR you can change all the texts there, so instead of banks, you can have bosses 😉

[little kelp]

Thank you sir! I'll check it out tonight!

[charred vortex]

Hello everyone. I was wondering, is there a way to have a bot command that displays the title of the stream? Thanks in advance

[worldly adder]

So I have been using SE for Facebook streaming and literally like 15 minutes ago i decided to log out and log in through Twitch and YouTube and then I went back to my Facebook login and saw the option to "Add Channel" but I can't add my YouTube or Twitch becaus they've already been claimed (by me 15 minutes ago) smh is there anyway to fix this?

[tribal zenith]

you can use the ${title} variable to do this. Just set it as response and it should display the title.
you can find more predefined variables here: https://streamelements.com/dashboard/bot-commands/variables

[charred vortex]

@tribal zenith 🤦🏻‍♂️ duh. i was looking for the page with all the bot variables, like the github for the custom widget and forgot to check the actual bot commands thanks

[pulsar willow]

Hey, someone know if i can do a bot to redeem itens?

[late shadow]

When creating a label in SE for the "all time top tipper" the user name doesn't have a capital letter at the start of the user name, but the "recent tipper" flag does.
Is there anyway that I can fix that on my end?
Picture example

[lapis flame]

have you tried to capitalize (text-transform: capitalize;) the class or id in css?

[sturdy oak]

I dont think you can access the CSS for those labels

[lapis flame]

ahhh you are in the default label widget. I thought its a custom widget. My fault

[late shadow]

yeah it's the default label on top of a video :/

Can't change the CSS from what I've found, and I don't know if there's any syntax that I could maybe add

[lapis flame]

the default labels are different then the alerts. In Alerts you can enable custom css/html/js. The labels widget doesnt offer that option 😦

[late shadow]

yeah no way that I've found, bit weird that one supports it and the other doesn't. Ah well, not a major deal

[sturdy oak]

@late shadow Make it a custom widget

[late shadow]

How would I do that 😅

[sturdy oak]

Hey @viral patrol can your ultimate text widget show top tip?

[viral patrol]

It can display all data from session, just change data['x']['y'] to {x.y}, so it should be for example {tip-weekly-top-donation.name} {tip-weekly-top-donation.amount}

[sturdy oak]

great, you heard the man @late shadow

[late shadow]

Thanks guys I’ll give it a shot later 🙏

[late shadow]

Thanks man, played around with the the text widget and it's fantastic, turns out the dude just has a weird ass username lmao

[cold atlas]

Any good wrappers to the api For java on intellij IDEA? Planning on getting a program to display followers and donations on a tv screen.

[viral patrol]

You can use websocket connection to get data from SE and display it anywhere.

[tropic wagon]

@broken coyote hi ! I have a question about your new widget, is it possible to use custom .png instead of fafa icons ? I hate fafa icons 😂

[broken coyote]

is it possible, yes

[whole mural]

Quick question, I have created my alerts for the most part, with the raid alert being on a separate overlay to the rest, however can anyone tell me why the raid (second one) is off from the rest, the css for the box is the same

  position: absolute;
  top: 170px;
  left: 1450px;
  width: 450px;
}```

it's the same image with the same code

the only change in the code is
top: xyz;

nevermind, browser source didnt update resetting the cache ffixed it

[whole mural]

thank you to those who did give me some help, finally got to a point where im feeling alright about what i've got, not what i set out to achieve, but i was biting more than i can chew to do what i wanted to do

next to do will be a rotating alert for newest sub/follower/bit cheerer/dono

[zinc oriole]

loving the chatter wheel by @elfin arch but was wondering if there is anything similar but will build the wheel based on people who cheer with bits and not just chatting?

[viral patrol]

@whole mural Looks rusty and I like it ❤️

[whole mural]

thanks, everything about what i have is based on darksiders/the apocalypse, so rustic/rusty is what im going for

i just wish i could have the text look more like this, but thats more advanced than i can do

[viral patrol]

And if you want to have something that cycles between labels I can recommend you Ultimate Text Widget i did for #widget-share, so with that you will be able to have templating variables that will do a big chunk of work for you.

Or this: https://streamelements.com/dashboard/overlays/share/5fbbb64f606b8e48489a88a2

Those two are barebones that could be expanded to a nice widget.

[whole mural]

thanks, is this the one that is a black swiping roation?

[sturdy oak]

The amount of times lx plugged his widget today

[viral patrol]

It is not, it is blank canvas

@sturdy oak also I updated ultimate text widget! Stealing good ideas is not stealing, amirite?

[whole mural]

these are the ones i found

[sturdy oak]

That font looks good, what is it?

[viral patrol]

Yup. The one above uses "Ultimate text widget" but it is a rotator. The one on the bottom is the newest widget by MrBoost.

As I create basic stuff, MrBoost makes them look fancy.

I wish I had some design skills 😉

[whole mural]

which one? the alert i made, or the sample be right back text i sent? they are both lobster, but the second one iv obviously played around with in Affinity Designer

[sturdy oak]

I replied to an image, click that

[whole mural]

oh its not even my stuff

roboto is the font, in bold

[sturdy oak]

Yeah MrBoost has some pretty good design skills

[surreal trellis]

heey

[whole mural]

As much as it was a pain in my ass getting the alerts to be what they are because I've never used CSS before, I'm glad it's done now. Just need audio to go with it. Just need to research how to change the text to be styled/look like the text I've created as a SVG or other vector file

[livid onyx]

Hello guys, i'm following a guide to make a suboal bar with the code editor, but it doesn't show up my actual number of subs, is there any documentation for it or maybe someone know the code part ? Atm i have "subscriber-total" but it show me 1, and i have 6 subs

[sturdy oak]

There's a guide? Nice

There is actually documentation

https://github.com/StreamElements/widgets/blob/master/CustomCode.md

[hardy walrus]

@floral sandal Don't link overlays like that. That's basically giving a back door to devious things on your account.

[floral sandal]

Ahhh, yeah you're right.

Ahhh, yeah you're right.

Okay, well, this is what my overlay looks like https://i.imgur.com/f4aw1QG.png and this is what SLOBS shows. https://i.imgur.com/6AScECK.png

And streamelements overlay doesn't reflect my iframe updating via ajax. I know Iframes work to do that normally, so it's something on Streamelements end.

It would've been nice just using Streamelements for the widget, but I guess I should just be using browser source in SLOBS. :S

[wanton ermine]

Hi, got a small issue I was told to post here

Have a custom made raid alert, makes an image run across the screen for each member of the raid up to 200 I think, anyways it runs perfectly in tests but when live and it actually happens it plays the sounds effect and posts the text on screen but the gif images never run across the screen. They do in tests but not live

Any ideas or fixes? much appreciated for the help

Edit was told to post here as it most likely is an api issue of not receiving the proper numbers from twitch

[radiant halo]

Where are the gif images hosted?

[wanton ermine]

imgbb, it was the best free place with secure url I could find

[radiant halo]

I've got another question with PNGs and loading on alerts. Twitch if it matters. My alerts are HTML/CSS/JS, animated in CSS, JS for displaying 1 month vs more.

The PNGs I used for my T2/T3/Prime all are blurry on OBS like in the example. Is there a fix to this at all? They're hosted on StreamElements.

[radiant halo]

Ahhh there's your problem. They have to be hosted on StreamElements.

[wanton ermine]

ah ok then, thanks

[radiant halo]

np! I ran into the exact same issue lol

[wanton ermine]

just weird it works in test if this is the issue but whatever

[elfin arch]

It is not built into the code but it is possible to edit it the overlay to get it to work. The bits on Twitch are more focused on being 'community' goals so I'm inclined to say that adding users for bit donations to the wheel would be a violation of the TOS usage. For example; if you have a game party and say that you'll pick 2 people from the wheel to have them join in; you are not suppose to use bits to get on the wheel (or even increase the odds).

[sturdy oak]

Yes can confirm @zinc oriole

[zinc oriole]

ah ok, was thinking of giving away Steam keys to people who cheer during the stream. Will have a read up on the TOS for what can and can't be done. Thanks

[elfin arch]

you defiantly can not do that. Bits can't be given or awarded a 'value' ...

so like widgets can't even combine $ donations with bits for a common goal.

for example; i'm in the US and 100 bits costs $1 or 1 cent each. But it's against TOS to say that a 500 bit redeemtion = $5 donation; or in anyway compare the bit amount to a currency amount.

[pine breach]

Hi! I'm new here and i'm determined to make a cool widget with an idea i had, but i don't know even where to start!! any tutorials or websites that can help me, i know how to program but i never made an api. Help!!!! :ooo

[rugged rapids]

Take a look at the channel header for overlay editor documentation and a look in #widget-share for previous made widgets.

[pine breach]

thank you @rugged rapids !! 😄

[tribal zenith]

you also don't need to make an API. You just need HTML, CSS & JS 😄

[pine breach]

another question, can i monetize the widgets i make?

[tribal zenith]

no, not directly via StreamElements at least. You can set up your own shop or use the fiverr page though

but the thought behind community widgets is of course to make them available for everybody

[pine breach]

oh i see, cool :333

[zinc oriole]

Ah cool, I currently use SoundAlerts with bits so assumed it was ok to do on stream stuff for bits...I will look into it properly and maybe try to set something up where bits can be used to trigger sound alerts or webm videos like triggerfyre does for loyalty points

[sturdy oak]

Thats why I had handle my bar very carefully because it counts bits too, so lx suggested to call it points instead. Big Brain

[exotic otter]

Hello everyone, I'm having trouble with understanding the difference between onEventReceived and onWidgetLoad .
And what I'm trying to ultimately achieve is edit the custom widget .js to add latest twitch subscriber's tier or prime, for example

[tribal zenith]

onEventReceived fires everytime an event happened, while onWidgetLoad is only triggered once the widget has finished loading

[exotic otter]

so let's say someone subscribes. That's an event right? which would only be picked up by this window.addEventListener('onEventReceived', function (obj) {

[tribal zenith]

if you need the real-time event, then yes

[exotic otter]

I see thank you. However I still have one question. I'm reading the customcode github and based on it, the -latest does not have a key for tier or if it was prime. Is that list exhaustive? If not, is there a link with the entire list? I'd much appreciate if this fails, a nudge in the right direction

Because through the event I'm stumped

[tribal zenith]

for subscriptions the tier is in obj.detail.event.tier for other events it is undefined

[tropic wagon]

  alert.to("#alertText", { duration: 1, opacity:1 })  // texte
  alert.to("#alertText", { duration: 1, delay: {alertDelay}, opacity:0 })  //texte
  alert.to("#topBgAbove", { duration: 1, height: "0%", ease: "power3.inOut" })   //fond```
Do you know what to change to make it go from left to right instead of top to bottom ? I changed height to width but it breaks the widget

[tribal zenith]

changing to width is correct, but you probably need to adjust the css as well

[tropic wagon]

it's set on "100%" in CSS

[tribal zenith]

you can then just swap the values for height and width

in the css

[tropic wagon]

Oh yeah

thanks

\o/

[exotic otter]

Ok thanks for your help 😉

[broken coyote]

that code looks familiar

[tropic wagon]

😂 I don't know what you're talking about 😛

[broken coyote]

https://tenor.com/view/oh-well-forgetting-sarah-marshall-shrug-what-idk-gif-5281408

[mortal knot]

@tall igloo Read and follow our server rules:

• We do not tolerate toxicity! Treat the community team, staff and all members with respect.
• No advertisement or channel promotion, anywhere on the server.
• No NSFW/NSFL
• No unsolicited DMs or friend requests to server members

Make sure to read the #welcome in any server you join.

[agile patio]

Hiya! I'm Rob and I work for www.rally.io doing Business Development, and we've had an increasing number of StreamElements partners start joining the platform to launch their own cryptocurrency.

I'm searching for a dev familiar with the StreamElements API to help us setup an alerts system to show users twitch username and dono amt for when creators receive donations in their Creator Coin.

Is there someone here I can talk to about work-for-hire to make this integration a reality?

(apologies if this is the wrong channel to ask! lemme know if I need to remove the company name if that counts as advertising)

Here's some basic available infos on the Rally API -

https://developer.rally.io/#/
https://api.rally.io/v1

Documentation is still a bit light, so feel free to add me on Discord directly for any q's ^_^

Thank you so much for your time and consideration in reading this!

[dusky ingot]

I know nothing about coding accept that I need html5, css, and js for widgets and alert interaction. I am s streamer, self taught graphic designer, and I love building computers. I built all of my stream graphics so far. Now I am wanting to customize them even more. I am using adobe after effects for my overlay and alert animations. I figured out how to generate an html5 and a js file from adobe after effects plugin called bodymovin. I want to know how I might use those files and integrate them with a custom (that I would like to build) streamelements widget so that all alerts interact dynamically with the text style and animations that I created in ae. I specifically want to be able to have the {username} react with animations, font, and effects from my animations. Can anyone give me some direction here? in advance, sorry for the book and thank you for your time.

[fading oxide]

Is there anyway to listen for a chat command in custom widgets?

[hardy walrus]

@fading oxide There's something in #widget-share that does that. Should be able to help ya. #widget-share message

[lapis flame]

@dusky ingot first I would check if it makes sense to split the overlay (just design elements) from the alert box. Check out the pinned links in this channel to get an overview of the js functions of se. If you are familiar with js you should get some quick results

You could also take a look in some custom widgets as @hardy walrus stated to get a deeper dive into some code examples

@fading oxide the listener message can be used to make custom commands with the full power of js

[dusky ingot]

I am not familiar at all with js. Do you have any recommendations to get more familiar?

[viral patrol]

@dusky ingot I can recommend you this: https://javascript.info/

[elfin arch]

I have a bias to https://www.freecodecamp.org/ 🙂

it's how i learned HTML/CSS/JS

[dusky ingot]

@viral patrol @elfin arch thank you both. I will check them out. trying to animate a really cool alert that I need to have word splatter on impact, but need those words to be the username in real time

[elfin arch]

i'm not familiar with After Effects or how that exports HTML/CSS; is it something that you have that works in the editor the ya you want and just need to replace "USERNAME" with the name of the user that follows/subs/cheers/etc. ?

[dusky ingot]

It will create an html5 and js file for the animation, but I have to tie it into the events in real time as I stream and find a way to designate the text as username, but keep the animated style. not quite sure how yet.

honestly I am not even sure if this complicated of a style and effects can be carried over for the alert to work

[elfin arch]

the easiest way do it; is if you enable the custom CSS for an alert then using {name} will automatically replace that with the users name for that event.

[dusky ingot]

not sure how to tie in the css. bodymovin does not create that. might have to learn to write it on my own.

[elfin arch]

that is probably the hardest part .... animations are tricky. can you DM you your HMTL/CSS/JS files. i'll take a quick look.

but like mentioned by @lapis flame ... it is way easier to have animations not tied to the active event had have them in a separate layer. when you get into the animation stuff with dynamic things (like different usernames) it gets complicated really fast. (and i have no idea if it's even possible with using AE exports to get it to dynamically update the animation or if that is hard coded in)

[dusky ingot]

I haven't finished the animation. i was just researching it before I got invested. but I can send a simple animation file tomorrow just to check before I waste a whole bunch of time and effort. I was going to do the words on a separate layer with the impact animation. will get the file for you tomorrow though

there isn't a css genereated at all for it

[elfin arch]

yup. if you can just do a basic text animation that would work. I'm just wondering if the Text can be changed after exporting from AE or if it's hardcoded for those specific letters.

[dusky ingot]

the text would melt, liquify, and then burst and splatter on impact

[elfin arch]

ya. that is scary for me 🤣 .... if you just do the melt part it would be enough to test if a {username} could be inserted into it.

... that gets into the pretty stuff with CSS & GSAP (which i am not good with and avoid like plague)

[dusky ingot]

it will take me while to build the melt animation. I build all mine from scratch. I don't like preset animation templates

[elfin arch]

ya. that's what i'm trying to get at. if you can just get a quick/easy thing with text animation and export that. then someone here can see if what you export can work.

like you said; it'd suck to put so much time into it just to realize you can't change the text after it's exported

even if you just had text (no animations) and exported that it could give a good idea of how it works 🤔

[exotic otter]

@tribal zenith sorry for pinging but since you've helped me yesterday, you might already know the answer to my question. I've found out I can see event emulations in chrome console log. Is it safe to assume all the args in the event will also happen in a "normal" real time event right?

[elfin arch]

that is correct @exotic otter

[exotic otter]

OK cool thanks for the quick help 😉

I was having trouble finding out all the possible events and their respective arguments in the github documentation. This console log feature is super helpful to complement the github wiki

[elfin arch]

👍 good luck with the subscriptions; it still confuses me with the normal/resub/single gift/multi gift

[exotic otter]

I have no coding background so this is pretty much new to me. I am trying to add a bit more descriptive sub descriptions to the custom widget that comes with Streamelements

[lapis flame]

@dusky ingot i think you should check the export of the ae plugin. To see if the username is text or some kind of video or img export. I have some doubts that every ae video can be an html, cs, ja plain export

[sturdy oak]

wait until you handle gifted subs

[elfin arch]

yup. when you get the gifter event then all the gifts events

[dusky ingot]

I sent you the js file

[tribal zenith]

oof melting effects go in the direction of WebGL and shaders and that is scaryland if you don't know what you are doing

even a simple lava shader on 3D text took me a few days

[elfin arch]

i read 'animation' and i'm out. nope to GSAP or even that (although i'm tempted) anime.js

[tribal zenith]

WebGL is a level above that
you may have heard of PixiJS or ThreeJS

and in shaders you basically talk directly to the graphics card

[elfin arch]

ya... so nope; i stay away from the pretty part. (i tried to do some unity but hated c#) set up the basic commands for a Twitch chat game and abandoned it asap

[pine breach]

Hi! how do i prevent a message to appear in my chatbox if it's not from the streamer itself?

i made a blacklist but how do i make a whitelist? xDD

[runic elbow]

hi i create a python script how can i make the bot "Streamelements" use the script every time some one in chat type for exemple "!savage" ?

[radiant halo]

Just wanted to offer myself as help! My last contract work had me design using HTML/CSS, CSS animations, and after effects creating stream graphics including alerts. My brain is having trouble trying to well, brain and picture exactly what you mean but if you have that sample animation I'd love to see!

[slate fable]

Hey, I'm new here.
I'm currently trying to update an item in the store with an api call via python script. I've looked at the api reference, but there is no information for the body params.
Can anyone help?

[tribal zenith]

that part is work in progress and not documented yet. So you either have to wait or test some fields from the "Get item details" response

[slate fable]

alright. thanks

[dusky ingot]

I don't have the animation built yet. I have to model, rig, and animate the graphic scene. Then render and place under the text animation, the build the melt and liquid splatter. Build thransitition from text to liquid (fast melt looks like impact explosion). Color and shade then need to export Jason zip file. I can give you more of an idea of it in a direct message if you like. I found a css generator that uses html file to generate.

[keen aurora]

Hay, is it possible to make a widget that uses twitch and youtube events at same time? As far as I see SE editor does not allow for that.
So is it possible to use a websoket with jwt tokens passing twitch and youtube tokens to get events. I have already tied to see if it's going to work I managed to connect twitch and youtube and test events do work. I'm just not sure if it's going to work with live events hay anyone tried that? And is there a better way of doing this that is not messy.

[lapis flame]

maybe it is a workaround to build two widgets. One for twitch and the other for youtube. Add both browser sources to obs. Or are your streaming on twitch and youtube at the same time?

[ember sigil]

Hi all, putting together a music playing widget that will give me more control over the music being played than the VLC plugin - I'm trying to put three secret buttons on the screen that will allow me to turn it off or lower/raise the volume on the fly, and I've set them to particular cursors so they'll appear there, but the cursors don't appear when I hover over where the buttons ought to be. Is this just something I can't do?

[tribal zenith]

you mean inside of an overlay?

[ember sigil]

yes

[tribal zenith]

there is a layer above the frame called iframe-blocker, so you would have to set .iframe-blocker { display: none; } in your BrowserSources custom CSS

[ember sigil]

thanks!

[exotic island]

So i used another streamingsoftware before, since 1 yeah ive been with Streamelements and i love it, but i miss ONE thing from the other one. Or maby im blind. I cant google any clues.

Is there a way in the overlay to show "latest donation" I have Name, and Amount. But i also want their message to be visible also. Is there ?

[tribal zenith]

I think by default there is no label for tip messages, but with a custom widget you could create that yourself

[sturdy oak]

or you can use lx's ultimate text widget and enter data["tip-latest"]["message"]

[exotic island]

Thank you. Ill look into that 🙂

[silent osprey]

hello! continuing a gift sub breaks my widget
is there a way to actually see how a continued gift sub is sent to the widget? so i can see how i handle the data incorrectly?

[exotic island]

@sturdy oak cant find any widget with that name. And if i press LX in the widget area i dont find anything like that. Is it unofficial and not on the page ?

[hardy walrus]

#widget-share

[sharp island]

FYI everybody (and @tribal zenith ): the iframe-blocker div on custom widgets is now hidden in launched overlays (aka not the editor)

So you'll no longer need to do that hack, @ember sigil

[keen aurora]

Yeah I'm multi-streaming. I don't want to put x2 of each overlay on top of stream 😄 At some point I'll stream just on twitch but I started with YT channel first so I have more people watching there.
I started learning front end dev for job so making a custom widget seams like interesting thing to do as practice. My background is in C/C++ and hardware but jobs in my town for that are non existent and ones that are opened pay is real low. So I started doing a bootcamp for front end dev. Sill not up to speed with how websokets work my understanding is that after handshake you establish direct tcp connetion. So you can't get more then one soket per server. That said SE sends twitch and youtube events if I pass jwt tokens. Just not 100% sure if it's going to work with real events have not tested yet.
Other option is to see if streamlabs api allows for what I want to do or use there ticker (streamlabels) and just read txt files. I don't like the direction that streamlabs is going been using them for while but site UI is stupid and slobs meh I want to use regular OBS. SE seams like better concept with editor that you use in browser and use regular OBS with optional plugin.
Anyways I'll hack something together. Trying to make custom widgets is nice learning experience I have learn a lot in pass week 🙂

[graceful acorn]

[tribal zenith]

@keen aurora can't you just use 2 different overlays (1 for your twitch SE profile, 1 for youtube) and use them in the same scene?

[keen aurora]

I can but they would take to much space on screen 😄 I know just nitpicking. If you put them at same location and get x2 events at same time they will overlap does not look nice. Anyways I'll figure something out along the way I'm learning to write code that is plus 🙂 P.S thx for replay m8

[rugged jay]

I'm wondering if it's possible to, upon follow/subscription, show a variable picture on stream pulling info from a user's avatar.
i.e. viewer subscribes, Some art + their avatar inside would pop up on screen.

[tribal zenith]

sure, you can use https://docs.decapi.me/twitch?endpoint=avatar%2F%3Auser to get the avatar and then do what you want with it

[rugged jay]

Thanks for the resource! Would I need to code a custom overlay for this? I don't see a way to add custom code like this within the subscriber alert. I am sadly not very fluent in coding so a bit out of my comfort zone. Totally understand if this might be something that would be a little too much to explain. Any resource/direction you can point me to would be appreciated. Looking to try and implement it, however crude I may end up doing it 😂

[foggy bone]

I'm starting to play. I made a simple git page that only returns a small text on the page, but when I put it in $ (customapi. Api. Github [...]), the bot returns me the page code "DOCTYPE HTML <html> [... ] ".
How do I return only the content visible on the page?

[alpine crown]

How would I make a widget that has rounded corners and is a soft black but would show how much I deposited and how much of a wager requirements left to fufill and how to update it with my wagers (even if I have to tell it how much I wagered periodically to fill a bar showing how much wager left is complete and show profit or loss above the bar

[elfin compass]

Hi all. Was wondering if anyone could help me figure out why "text over image" isn't working for my alert set up? I made a bunch of custom alert images and all I really need is to align using margin numbers the text in specific designated boxes over my images, but for some reason "text over image" option has no text appear. As compared to row and column, but I cannot adjust the margins on those to get the text where I want sadly.

[mortal knot]

@elfin compass Text not showing up over your alerts? Go to the Advanced Text Settings and set the top margin to 50, you can work your way to the right position from there.

[woven lily]

Hey, I have a problem with the microphone in OBS StreamElements because I speak normally, the indicator shows nothing and when you hear it, it is caught. Try to raise the microphone itself, as in the system and filter and still the same.

[mortal knot]

Obs.live is a plugin for OBS Studio for the best OBS support, please join their Official Discord @ discord.gg/obsproject

[silent osprey]

are continued gift subs passed to custom widgets?
they break my custom widget and i cannot find any docs to understand why this would be

[tribal zenith]

yes, that would need to be a custom overlay and you have to be very careful showing avatars on stream, since they could possibly be very inappropriate

[tribal zenith]

you have to return the data itself not the html document

[sturdy oak]

On a serious note does twitch TOS actually not allow that?

[tribal zenith]

you are responsible for everything you show on your stream, even if it's other peoples avatars

[viral patrol]

Twitch bans users with inappropriate avatars and bans streamers who show inappropriate content on stream.

I created a widget that shows user's avatar, but it was based on "subscriber-latest" and in separate overlay, so a streamer, running OBS in studio mode could check it before showing his "alert".

[tribal zenith]

I saw that gift continuations trigger resubs alerts, so I guess they have an amount field?
I never got to log one of those

technically you resub to a subscription someone else started (and payed) for you in the first month

[viral patrol]

Yes. They have amount that is above 1, as sub duration is over 1 month.

[tribal zenith]

is it type resub or gift?

[viral patrol]

I think it is sub, as it is invoked by user on their own, not by another user gifting.

If you monitor gift event, it contains "gift" as amount

[tribal zenith]

so it shouldn't break anything, if you handle resubs correctly @silent osprey

[whole mural]

I dont know if this is a question to be asked here or elsewhere, but is there any intent on having the streamelements bot to function within Discord? Or does this exist?

[marsh lion]

Hey everyone 👋 Does this endpoint not currently work with the API? https://docs.streamelements.com/reference/store#storeitemsbychannelpost

Says BODY PARAMS Work in progress
I've tried doing a call using name and description in the body to see if it was just undocumented but i receive a 500 status.

[flint patio]

hi, is here someone who is good in doing CSS and can speak german 🙂

[tribal zenith]

that depends on what your question is

[flint patio]

i need css for my stream overlay , and would like to have it for my alert fonts

[tribal zenith]

if you want to write in german you can use #🇩🇪︱deutsch or continue in english here

[lone cliff]

Is it possible to have a paginator in the currency ranking api?

[cinder bough]

How do I do this with HTML / CSS for the Chat Widget to have this fade

[elfin arch]

give me a min and ill post an example

so on the overlay you want; add a new Custom widget and remove all the code in every tab

[cinder bough]

okay will do

[elfin arch]

html: ```html
<div class="main-container"></div>

css: ```css
.main-container {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: rgb(138,143,13);
  background: linear-gradient(194deg, rgba(138,143,13,1) 0%, rgba(0,0,0,0) 61%);
}

get the last 2 lines from something like https://cssgradient.io/

then kinda play with it how you want

[tribal zenith]

or use :nth-child() on the chat messages and then change the opacity only for that line

[foggy bone]

Good morning for all! Sorry bother with simple problems.

"Github"

====
#index.html
<script src="scripts/main.js"></script>

===
#main.js
function x(){
  var text = "Hello World";
  document.write(text);
  console.log(text);
  return text;
};

x();

I have something like this. When I run this on the Github pages, it works well. [OK]. When I put in $ (customapi. MyGithubName.github.io [...] index.html) of StreamElements, it returns <script src = [...]> (the html content, not the final result). How do I make StreamElements return my "Hello World"?

[tribal zenith]

if you request a html file the server will always respond with the document

you need a server side language like PHP or NodeJS to directly return the JSON (or whatever) as response

[foggy bone]

Thanks!

[thick kernel]

Morning guys! Does someone know how to get a trigger by a command? I'm trying to display a text on live every time someone uses a certain command

[viral patrol]

Search for that phrase: in:#widget-share command . I hope something should meet your needs there

[thick kernel]

I did a research about it but I don't find anything that way. I'm thinking to build an app that update every second and when I receive an number bigger than the stored on my app it will display some text with the new number. What's api request limit per minute?

[sturdy oak]

You dont need the API, so there's no limit

[thick kernel]

the main point is get the counter an when it increase it will display a text in my live, so I'm thinking to use this endpoint to get the counter https://docs.streamelements.com/reference/bot#botcountersbychannelandcounterget

[sturdy oak]

So you're making an app? Not a widget?

[viral patrol]

You can use native bot counter widget

[thick kernel]

this widget is available on personal overlays?

[viral patrol]

It is

[thick kernel]

oh man, I didn't see there

thanks!!! 😅😅😅

sorry for the trouble

[viral patrol]

No worries!

[warm echo]

does anyone know how to make this 2 lines? ive tried shift + enter and just enter but nothing happens

fyi im using the alpha rotating feed if that helps anyone

[midnight raptor]

Hello all, was wondering how to use or if you can use IF STATEMENTS (or something similar) in chat commands? For example, wanted to have a different message show depending on the users score out of 100. E.g. 0 - 10 one message, 11 - 20 a different one and so on. Apologies if this is the wrong chat to ask.

[thick trail]

https://api.streamelements.com/kappa/v2/sessions/${channelId}/top?limit=${limitQ}&offset=${offsetQ}&interval=${periodQ}&type=${typeQ}
Here known types are tip and cheer. Is there a way to get all-time top gifters the same way?

I was previously using the same endpoint to make a blacklist that filters users from displaying in leaderboard for tips and cheers. Would love to do the same thing with all time top gifters

https://api.streamelements.com/kappa/v2/widgets/${channelId}/subscriber-gifts/leaderboard?limit=${limitQ}&offset=${offsetQ}&interval=${periodQ}
Can I use this?

[viral patrol]

This is not documented endpoint, but you should be OK with that. The best is to use apikey provided in onWidgetLoad to authorize against this endpoint

[tribal zenith]

No, you can't use if-else in commands. You can send the value to a server, evaluate it there and then respond based on that value

but of course you need access to a server-side language for that

[midnight raptor]

ty reboot 🙂 im not very code knowledgeable so i'll leave it be. Thanks for your time, have a good day

[thick trail]

@viral patrol thank you, yea im using the apikey exactly as you mentioned

[burnt yoke]

Hey everyone, question. In the onWidgetLoad event I have access to the obj.details.fieldData object, Is there a way to access that same object when inside the onEventReceived event?

[broken coyote]

You can set fieldData as a global and access it

[autumn spear]

Hey guys, is it possible to write widgets in React?

[elfin arch]

if you like to play with it; i made an example kinda server set up

you can try the custom command:
${customapi.https://seapitest.pjonp.repl.co/api/eval?string=$(queryencode 'var x = ${1}, y = 200; if (x > y) { "cats" } else { "dogs" }')}
a !command 1 would respond 'dogs' and !command 1000 would respond 'cats'

source code can be forked here: https://repl.it/@pjonp/seapitest

[placid lion]

Do I have to be live to get any data from https://docs.streamelements.com/reference/activities#activitiesbychannelandactivityidget

Right now it returns a empty array.

[elfin arch]

are you putting in your JWT as a header and including your channelID and the activityID when doing the request?

[placid lion]

I do use the JWT and channelID but not the activityID. I thought it returns all the realtime activity's

[elfin arch]

i've never played with them; but it says that GET https://api.streamelements.com/kappa/v2/activities/channel/activityId both the channelID and activityID are required

[placid lion]

Hmmm. Is there a list of activityId's i can use ?

[elfin arch]

i think each activity get's a unique ID; so you might have to do GET https://api.streamelements.com/kappa/v2/activities/channel/top?period=??? save the ID from the response then GET the details from the previous API call.

I'll play with calls for a minute and see if I have anything to check

[placid lion]

Ok thanks.

[elfin arch]

hmm... ya i get nothing from that endpoint

what are you looking to get from it?

[placid lion]

Activity feed ? Like what you see on the dashboard and i'm trying my bot to send that into a channel in my discord.
I guess i can save session data and compair it but that means a lot of fetching every X min.

[elfin arch]

oh you are doing it for a discord bot?

are you hosting the post yourself?

[placid lion]

Yes.

Yes i'm hosting the bot myself

[elfin arch]

use a websocket: https://docs.streamelements.com/docs/connecting-via-websocket

that will send the events to your bot in real time. (so you don't have to keep pinging the API)

[placid lion]

Ok let me start reading that.
Thanks for the information 🙂

[elder dragon]

What would be the best way to only enable gifted sub alerts?

As of now you can't disable the default sub alert so is there a work-around?

Or should I just clear it, set it to 2 seconds and hope it doesn't clog stuff up

[elfin arch]

Using the default alerts?

[pulsar willow]

Hi, API documentation is very poor, so i want to ask a question here.
How can i get my channel users point - i want to list all users and their point, is it even possible ? Enpoint like this returns empty array https://api.streamelements.com/kappa/v2/points/channer/alltime and endpoint https://api.streamelements.com/kappa/v2/points/channel/user return 404 error user not exists, but i know that user exists. I am using JWT token to all requests.

P.S. Is there some other auth method to get channel token or something. When i try to edit or get channel data i get error "No channel authorization found"

[flint coyote]

Hi there , just added the Awesome shoutout widget on streamelements and the IN / OUT animations don't seem to work - it just shows the main and subtext instantly with no animation. I have tried changing the animation style and speed but this doesnt make any difference. I have also tried removing and re adding the widget but this makes no difference either - any help from @steady iron or the rest of the community here would be great 🙂

[viral patrol]

@flint coyote go to This PC > right click > Properties > Advanced system settings > Performance > Settings > Make sure the very first checkbox is ticked, then OK out and refresh the browser source or overlay editor

[flint coyote]

@viral patrol - Thank you so much, that's fixed it for me !!

[steady iron]

yep, that's a Windows thing, for some reason

Sorry, I was streaming

[candid needle]

Howdy. I have a few questions pertaining to the StreamElements bot functionality. I see there is the option to use the arguments variable by using ${1:} (one or many). I would like to make an argument that is none or many (optional argument). But neither ${0:1} or ${:1} appear to work. Is there a way to specify an optional parameter? If it matters, argument is nested inside a UrlFetch call.

[gloomy fossil]

@candid needle try this ${count kills "+${1}"}

[candid needle]

So in an URLfetch fashion it would look something like this? :

${urlfetch https://halostatbot.herokuapp.com/matchhistory?gt=iimitz&offset="+${1}"}

[gloomy fossil]

the argument i just wrote can be used by many instead of using one ${1:}

+2 etc...

i dont know that api so may have to wait who is familiar with it

[candid needle]

I'm slightly confused. The desired usage of the bot command in Twitch would be something like:

!lastmatch
or
!lastmatch Slayer

Where Slayer is the argument/parameter. I wan't the command to be run with either no argument specified, or with only one argument specified. ${1} seems to mean 1 argument. ${1:} seems to mean one or more arguments. But I'm not quite following how to make it work with ZERO arguments and ONE argument at the same time.

The argument is an optional parameter passed to the urlfetch. But it seems to only work if an argument is provided. Not if one isn't.

[gloomy fossil]

oh no idea for the "0" arguments but the "+${1}"} but this argument is ++

[tribal zenith]

${touser} returns either the first parameter or the senders name, if no parameter is given

depending on what the default value should be

[candid needle]

Is this in response to me?

[tribal zenith]

yep

also there is a fallback syntax like ${1|fallbackVar}

[candid needle]

Can I have an empty fallback variable?

[tribal zenith]

the vars are predefined: https://streamelements.com/dashboard/bot-commands/variables

so ${1} would return empty if no parameter is given

[candid needle]

It does not perform that behavior. The command (a urlfetch) simply does not run

Command Name: !lastmatch
Response: ${urlfetch https://halostatbot.herokuapp.com/matchhistory?gt=iimitz&offset=${1}}

Using: !lastmatch 1
will call the API in question with the number '1' as the argument.

Using: !lastmatch
does not call the API in question.

[tribal zenith]

inside of the curly brackets {} you can use the round brackets for vars. Like ${test.$(1|user)}

there are some examples in #command-share

so in your example ${urlfetch https://halostatbot.herokuapp.com/matchhistory?gt=iimitz&offset=$(1)}

[candid needle]

Perfect. ${1|' '} will provide me with the desired results.

Thank you for your help

[tribal zenith]

no problem. technically you might want to return ${1|'0'} but that is just minor

[candid needle]

@tribal zenith Since you seem to be knowledgeable, I have one more question. Both Nightbot and Wizebot seem to supply a Variable that gives the Twitch stream start time as an ISO date time stamp. Do you know of a way to get the same result from StreamElements? As far as I see on the main page, there is only ${uptime} which supplies a counter of sorts with days/hours/minutes.

For example, it might look something like: 'Fri Jan 15 2021 11:44:46 GMT 0000 (Coordinated Universal Time)'.

[tribal zenith]

There is no way I would currently know of. There might be a custom API, that returns a timestamp instead of relative time, but you would have to google that or maybe somebody else here knows one 😄

[quartz herald]

I'm trying to get a counter on my stream that increases by variable amounts from chat commands. I'm trying to use the ${count} variable but it only seems to increase by 1 or a set amount if you do ${count <name> +<step>}. Is there a way I can make my <step> a variable based on an input from my chat command? Like !sale 50 increases my sale count by 50?

[tribal zenith]

we basically discussed that a few lines above
yes, you can chain the inputs ${count <name> +$(1|'1')}

[quartz herald]

I thought that stuff up there looked relevant but I can't seem to make it work. My output now is just "${count sale +$(1|'1')} widgets sold". The '+<step>' part doesn't seem to like a variable. I tried using the same syntax as the $repeat variable too but that came out with "${count sale +${1}} widgets sold".

[tribal zenith]

you could do something like this ${count yourCounter $(1|'+1')} then and then pass either the + or - with the number
!test +10 to add 10 for example or !test -10

[quartz herald]

this worked! thank you @tribal zenith, you're awesome!

[tribal zenith]

but keep in mind that !test 10 (without + or -) overwrites the counter to that value, so be careful with that 😄

[quartz herald]

yep noticed that. This might be asking a lot, but is there any way to get it to call back what it was before in case i accidentally overwrite?

[tribal zenith]

after it was overwritten, no

[civic stag]

Hey there, I'm wondering how I'd be able to add a blur to my chat when it reaches the top - I'm not really skilled in CSS and unsure how I'd do so. Here is what I mean (EsfandTV's stream had a nice example of what I mean).

Think I was directed to ask here, so hopefully somebody is able to point me in the right direction :)

[patent bane]

Hello, its possible to make on streamelements a timer that every chat comment add to this timer 1 second ?

[pulsar willow]

Is anyone using this API https://docs.streamelements.com/reference ? I really need some help, can anyone help me with user points reference ?

[elfin arch]

sure @pulsar willow which endpoint are you trying to get?

i kinda cheat it @civic stag see: #dev-chat message ... but the message below that by Reboot would probably be the best

i you can target looks like the top 3 chats. #3 from the top goes from 100% -> 70%, #2 from top 70% -> 40%, top chat 40% -> 10%

[civic stag]

Ahh, thank you a ton - I'll look more into this in the morning! Appreciate it ❤️

[pulsar willow]

I want to ask is it possible to get all channel users and user points ?
The steps i am using to get user points, but i have no luck:
First try:

1. Generate JWT token(in steamelements dashoard using this instruction https://docs.streamelements.com/docs)
2. Create api call to this endpoint https://api.streamelements.com/kappa/v2/points/channel/user (changed channel name and username)
3. Get error "{username} was not found", but user 100% exists in the channel and has some points

Second try

1. Using the same JWT from previous steps
2. Create api call to this endpoint https://api.streamelements.com/kappa/v2/points/channel/alltime
3. Get empty array, bet there is hundreds of users in the channel, that has points

Third try

1. Using the same JWT from previous steps
2. Create api call to this endpoint https://api.streamelements.com/kappa/v2/users/channels
3. Returns only my own user in the list

So i don't understand what i am doing wrong. Maybe there is some king of permissions that i need to call these endpoints ?

The only endpoints that works for me is:
https://api.streamelements.com/kappa/v2/users/current - return user and channel details
https://api.streamelements.com/kappa/v2/channels/channel - return details of my channel

[elfin arch]

let's start with your first one;

i use Node (js) ```js
fetch(https://api.streamelements.com/kappa/v2/points/${process.env.SE_ACCOUNTID}/${username}, {
method: 'GET',
headers: {
'Authorization': Bearer ${process.env.SE_JWTTOKEN}
},

are you using your **ID** for the 'channel'

so it'd be something like https://api.streamelements.com/kappa/v2/points/5edslkajf345lk346adj/pjonp (to check the points i (pjonp) have on your channel)

[pulsar willow]

I am so stupid 🙂 I was using not the id but channel name. Thank you very much.

[elfin arch]

no problem. good luck with your project 🙂

[pulsar willow]

I have one more question, is it possible to get points history ? For example when and what amount of points has been assigned to user ? Now i see only total amount of points for user, but no history.

[elfin arch]

I don't believe so. I've never seen a breakdown of where the points come from, just the total

[sturdy oak]

How can I emulate X amount of months gifted to a single user?

Is there an option to do that?

[pulsar willow]

Thank you for your help. If you don't mind I will ask you one more question 🙂 What is the difference between points and pointsAlltime ? Now I can see user with 105 points and 0 of poinstsAlltime

[elfin arch]

I'm not %100; but i think the Alltime is like a fixed amount based on the Time watched (can't be lowered) and the normal Points is like the Time + gambles and gifts.

I'm not sure that is added into the emulation yet @sturdy oak like User A gifts user B 4 months of tier 1 sub?

[sturdy oak]

yeah

Someone using my Hype Goal Bar was gifted 3 Months of a Tier 1 Sub, and nothing happened. I went over the docs and found nothing pertaining to this

[elfin arch]

it might be in the Gift Sub object as 'amount' .... but the sub object confuses me because there are some many different variations (prime, single, resub, singlegift, community gift) and then they all trigger. I haven't made a widget using them so never fully sorted them out. And i forgot about the gift for X amount of time 🤣

[sturdy oak]

The amount if Im not wrong is the number of subs gifted, not the duration of the sub gifted @elfin arch

and yeah subs and gifted subs are tricky lol

[elfin arch]

ya. that's what i was thinking; so hard to get the difference between a single and multi month gift. It should trigger the same though 🤔

[sturdy oak]

Howdy, I'm working on a design rework for the Hype Goal Bar that fills up for Subs, Bits and Donations

If I add a feature where you can upload an image that can be used as the background image for the foreground of the bar, would you use it? Here's an example ⬇️

[sturdy oak]

Or would it just make using my widget more complex for the average Joe

[elfin arch]

i'm not sure; there are a bunch of hype bars and rotators now

i like what you got; looks great and the animation is cool. i'm just not sure what people what in a goal/bar widget.

🤣 last time i told someone I didn't see their vision; i ended up with egg on my face re: @steady iron

[sturdy oak]

It's not a new one, mine's already up lol. This is a new version of the old one

[elfin arch]

ah ya; as an update that would be sweet.

[steady iron]

I think only I could see the vision in that one time

[elfin arch]

in my defense; you had 1 cat on the lower right; then cat image fullscreen; then a cat in like the lower left.

but you did magic. and it was beautiful in the end.

[steady iron]

Bear, cats, different images, animations and orientations, it was chaos

[elfin arch]

i wasn't into the PP 0.5; but when you got it figure out the PP 1.0 was good

[steady iron]

I think 4" will make it a pretty solid one: https://trello.com/c/nHnyX8cW/25-pp-backlog

[elfin arch]

Man; much respect the support you have on your code. I can't image having updates past 10.0.

I know your are growing it slowly; but your chat has plans for 15.0 +; they insane

[steady iron]

I like that model, starting from a simple idea and see it grow based on what people like

[steady iron]

realistically speaking I would say 5-6" would be enough

[whole mural]

i am working with the simple rotator, just trying to work out the phrasing for recent dono w/ $amount, most recent sub inc resub w/ how long theyv been subbed for, follower, cheerer w/ amount of bits Top tip: {tip-monthly-top-donator.name} €{tip-monthly-top-donator.amount} is the base you get, and I have tried looking in the api doc link above, but not entirely sure what what's required as it had extras with data["tip-latest"]["name"] and other things, would it just be the below?

Recent tip: {tip-recent-donator.name} ${tip-recent-donator.amount}
Recent Follower: {follower.name}
Recent Bits Cheer: {cheer.recent-cheer.name} x{amount}
Recent Sub: {sub-recent-sub.name} {amount} month/s

[tribal zenith]

I played around a little and think a gradient as image-mask works best for those cases. So in OBS go to your chat's BrowserSource settings and add or replace the following lines in the custom CSS field:

.chat-theme,
.twitch-chat
{
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 50%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,0));
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center top;
}

like this

you can adjust the values of 50% and 75% depending on where you want to start fading

the CSS is for SE's own chat widget

[elfin arch]

niiicee

[sturdy oak]

ohh big brain, should have though about that

[smoky salmon]

Is it possible for a viewer to make a request, which then gets added to a list?
For example; !request [game]

[tribal zenith]

take a look at #command-share message

[smoky salmon]

Will do, thanks!

[spiral phoenix]

Hi, is it possible to create alerts that access an API?
So I would like to create an alert that will be triggered as soon as an event (like a donation) has been received on my server via the host instanthost.gg. The API is in a Json format. Is that possible? (I hope this is the right section for this, i'm pretty new to this stuff)

[tribal zenith]

if you need it in realtime you will need a websocket connection. So your donation page would have to send an event via socket everytime a payment succeeded

[spiral phoenix]

The Json API is like a list of all events:
{ "message": "Erfolgreich", "output": [ { "state": "Server", "donator": "xy", "message": "test message", "amount": "1.16", "payment_method": "psc", "timestamp": 1605008175 }, [...]
Is it possible with that? If so, is there a tutorial that explains what to do? Like I said, I'm not very familiar with APIs. Thank you in advance!

[tribal zenith]

if it's a "static" API you could also poll every x seconds to see if something new happened, but why not just use the StreamElements tipping page?

[sharp island]

Ey boyz
I've got a new goodie for you
SE_API.setField(key: string, value: any)
Does what it says on the tin.
You can use this to update fieldData programmatically.
NOTE: It does not save
Because launched overlays have no permissions to write
So this is primarily for use in Editor
If you need to set/get things from a launched overlay, the kvstore is still the way to go.
But this will let you do things like add buttons to the settings that will update multiple fields (in my specific use case, I used it to make multiple buttons that set multiple text fields to different languages).

For custom widgets, obvs

[vast kernel]

Hi all.

Can anyone tell me how to stop the "Last Event Rotator By CO6STUDIOS" from, well, rotating? I really want just a static overlay showing my latest follower. I don't care about the other events. Or maybe offer another overlay from the library that does just a latest follower?

[sturdy oak]

There's a latest follower label in SE

[vast kernel]

Where can I find that? Or is it just a global var I can call in a custom overlay?

[vast kernel]

Thanks all.

[charred vortex]

Is there a way to call field values in JS without doing fieldData = obj.detail.fieldData; fieldData.field ...?

[tribal zenith]

you could do something like

function getField(name) { return fieldData[field]; }

but that is not really shorter

so no, there is not really a shorter form

[charred vortex]

okay thanks

[charred vortex]

im trying to make a custom widget alert that triggers when someone buys something from the merch store but when i try to check the listener it says event:test instead of merch-latest like it should. i noticed it does this for the other events too (follower, sub etc) when you emulate them, but when it also does the "subscriber-latest", with the merch it doesnt

[sturdy oak]

Or you can do {fieldName}

[charred vortex]

I tried that but it breaks everything. Says "Uncaught SyntaxError: Unexpected identifier"

[tribal zenith]

it has to be a string to work

[sturdy oak]

String({fieldName})

@charred vortex

[tribal zenith]

just "{{fieldName}}" works as well, but the value is a string then. So it's not so great for other types

[sturdy oak]

yeah, good for basic use though

[charred vortex]

any ideas about this maybe? 😅

[tribal zenith]

I personally never used the merch-events, so unfortunately no

[charred vortex]

well apparently, according to the git page, there is nothing in the listener about merch.. the only thing mentioning merch is this. Even data.type doesnt return anything..

[strong hollow]

Hi guys, was wondering if there is a way you can set a command to put multiple chat messages in chat?

[civic stag]

Thanks a ton Reboot, just popped that into the CSS and it works great :) Thanks a lot to you too pjonp!

[young crag]

Is there a way to POST an event to this widget with the API? I can't seem to find anything

[kind dock]

Any one know of a solution to get alerts that isn't for a specific thing, shows up on screen, and can be configured and triggered from api. I don't need it to be in the activity list, but it would be nice. but other than that it doesn't matter it is just to get the alert functionality from SE in a non specific alert

[sacred gyro]

Is it possible to create a command that can post to a widget, or at least send a request to intermediate webserver which can post back to the widget?

[median dragon]

Hello, I'm trying to test a widget I'm making to see if the session(daily) subscribers is working but it doesn't ever seem to increment the subscriber-session count at all. Is this normal in the streamelements overlay editor? Does it just not recognize sub session counts as I'm not in a live stream environment?

[ember sigil]

HI everyone, is there a way I can develop widgets in VS Code that doesn't involve copying and pasting into and out of the overlay editor?

[sturdy oak]

Yes, lx did that a while ago

[ember sigil]

i have not yet found a guide that even suggests this is possible

[sturdy oak]

@viral patrol ⬆️

[viral patrol]

You can use this tool: <#dev-chat message>

[charred vortex]

@viral patrol got any ideas about this maybe? 😅

[viral patrol]

I think that the best way is to replay previous event as emulator has a lot of additional data.

But TBH - I haven't worked on merch yet.

[buoyant maple]

Hey everyone! I was lurking around #widget-share and saw some AMAZING things, sadly they are all made for twitch and I'm a Facebook streamer. I was wondering if anyone has any knowledge on doing the conversion that could be shared.

[sturdy oak]

Hey, which one are you looking at?

Some can be used for facebook with a few changes, while others need a full revamp

[buoyant maple]

I'm looking at horizontal chat: https://strms.net/minimal_chat_by_mrboost; This event rotator: https://strms.net/advanced_bar_rotator_by_coocla33 and any round goal bar

[granite roost]

Hi, I'm develope a widget and I like to know, if is possible to update the tab FIELDS dinamicly.
For example, if I update a widget, another user that use the widget can receive the update without need to copy new data for the tab FIELDS?
I would like to know if this is possible to do, if not, can I create FIELDS using javascript?

[viral patrol]

@granite roost Your timing is perfect. you can update fields values using JS (but not create them) <#dev-chat message>

[granite roost]

Hi @viral patrol
Is there a way to create fields from a external json? Or the user always must be update the FIELDS manually always when I launched an update for the widget?

[viral patrol]

Unfortunately users will need to update them on the fly (neither other part of code) as it could remove user's adjustment there.

[granite roost]

Ok thanks @viral patrol 😉

[sturdy oak]

Can a widget be used to add events into the activity feed?

[hardy walrus]

I think @viral patrol can answer that as he has something that can do that but I'll leave Otto him for specifics since it's not an entirely publicly released thing.

@sturdy oak ^^^

[viral patrol]

@sturdy oak Unfortunately you cannot create events from widget.

[vestal grotto]

Hi, can anyone help me?

I'm trying to list my giveaways but I always get this error: {'statusCode': 404, 'error': 'Not Found', 'message': 'Not found'}

I checked my client id and my token, and I know they are correct

[stray garnet]

Hey, how can I send requests to an external API in a custom command? I found that people are using something like $readapi, is that what is used for that?

[placid lion]

Does this https://api.streamelements.com/kappa/v2/points/channel/watchtime not have a per user option instead of a list ?

[viral patrol]

@stray garnet You can use ${customapi URL_HERE}

@vestal grotto Try it step by step - if you can list giveaways, then pick one giveaway ID and select single one only

@placid lion https://api.streamelements.com/kappa/v2/points/:channelId/:userName returns watchtime as well

[vestal grotto]

But how can I get a giveaway ID if I can't get them?

[viral patrol]

One moment... Looking into that

[placid lion]

Sweet. Thanks.

[viral patrol]

@vestal grotto #dev-chat message

[stray garnet]

Nice, can I only send GET Requests?

[vestal grotto]

Oh, thank you very much 🙂

[hollow oracle]

@broken coyote did you happen to make the sideways chat widget @heady citrus uses if so i have a question.

[whole mural]

I asked this question the other day, but if it was responded to, I have lost the response since. With the 'simple rotator' overlay, what are the variables to be used? the default ones are very different to streamelements normal variables.
I am looking to have the variables for recent cheerer, recent sub (inc. resubs), recent dono, recent follower... but the default showing is
{cheer-monthly-top-donator.name} x{cheer-monthly-top-donator.amount} which I don't understand, and trying what I thought would be the logical variable from that didn't work

[broken coyote]

@hollow oracle I did

[hollow oracle]

its not showing up in my obs but its showing on the stream elements overlays page any ideas??

Thank you for getting back to me so fast

[whole mural]

question about your widget if i could?

[broken coyote]

Make sure you have your browser source set to 1920x1080 @hollow oracle

Sup @whole mural

[whole mural]

is there a way to alter this? it's got options for 3 socials, which if they aren't filled will leave a blank or 'default text', i only need it for discord and youtube, and want to set the sub, follower, bits and donos to most recent, and not include host/raid info

i like your widget better than the basic one, but didnt want to ping you to ask you, was hoping to find you online to ask

[broken coyote]

Your just wanting to remove socials?

[whole mural]

remove socials, and set the variables for the other settings

[broken coyote]

In js, it’s like... line 12? You can just remove social1,2, and 3

As far as setting variables, you would need to custom code them in

[whole mural]

damn you know your js, it is line 12

[hollow oracle]

@hollow oracle im dumb lol

@broken coyote thanks i was stumped on that for like a day and i finally found you in a server. lil sus right.

[whole mural]

    sub = "<i class='fas fa-" + "{subIcon}" + "'></i> " + subLatest.name;
    bits = "<i class='fas fa-" + "{bitsIcon}" + "'></i> " + cheerLatest.name + '\xa0\xa0\xa0' + cheerLatest.amount;  
    dono = "<i class='fas fa-" + "{donoIcon}" + "'></i> " + tipLatest.name + '\xa0\xa0\xa0' + '$' + tipLatest.amount;```

I assume that this is calling on the most recent of each, which is fine, i just dont want it calling for the top of the month or top of all time, just recents

[broken coyote]

@hollow oracle ha glad it works ol bub

@whole mural yea it calls the most recent

[whole mural]

cheers, are the images in each called via js or css?

[broken coyote]

Css. It’s getting them from font awesome

[whole mural]

is that <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"> from the html?

[broken coyote]

Yee

[pulsar willow]

Hello there. I would like to know if it is possible for the "Credit Roll Widget" to display not only sub/follow from the session but the latest ones (3, 5 or 10). Thank you.

[sturdy oak]

Yes, upto 24-25

[pulsar willow]

Do you know what line(s) in CSS or JS I need to change for that? (sorry but I know nothing about dev)

[sturdy oak]

I wouldnt expect you to know 😄 Let me see if it's a list that I can append to

[pulsar willow]

That would be great

[boreal heath]

Greetings, how can I share my overlay to other channel by url? I have seeen that in #widget-share it is possible. Plase indicate me the steps to share my own overlay to somebody!

[naive scarab]

Hey! Is this channel for giving ideas or even hear if something is already on its way? 🙂

[indigo flume]

Check out the StreamElements ideas board: https://strms.net/ideas. You'll be able to add ideas, upvote ideas you agree with and track their progress with email notifications. Adding and upvoting ideas also helps the staff know which ideas should be prioritized so please take some time to upvote.

[trim rune]

Hey! ^_^ Can anyone here recommend me a person who is really good at coding and can help me create a widget/alerts? 😄

[tribal zenith]

either ask your questions here publicly or look in #art-marketplace if you want to hire someone

[proper oxide]

Im wondering if there is such a thing or how I go about getting it made - A swear jar. Each time a command in chat is done example !swear it adds $1 to a swear jar. Animated or static would be fine.

Any ideas how I do this :heart:

[sturdy oak]

Nice idea, I would have a look in #widget-share to see if there's any

[broken coyote]

Would could get bonkers is if you set a variable to read chat. And it filled a jar. I know my would fill in the first 5mins

[sturdy oak]

Fills when chat swears haha

[chilly abyss]

Anyone know if there is a way to roll dice of varying numbers. i.e. D4, D6, D8, D10 etc without resorting to individual commands like: ${sender} rolls the dice and gets a ${random.1-20}! for each? I did try changing out the last 20 for $arg1 but no joy. Sorry, not my strong suit this command creation thing.

[severe shell]

Try this one:
${sender} rolls the dice and gets a ${random.pick 'D4' 'D8' 'D10'}!

[chilly abyss]

Thanks but what I am actually trying to achieve is for it to do this: Example command: !roll <insert number> outcome: It rolls a number between 1 and <insert Number> thus !roll 20 would show a number between 1-20, !roll 6 would show a number between 1-6 etc

[atomic pine]

hey all just wondering how I grab the data for cheerEmotes...link to the docs or example would be great...Many thanks

you could prng it in your bot and send the command response back

ahhh thinking about it I can check the default widget

hmmm okay so how would I get the cheer emotes from cheer latest...do I have to parse the message and check an endpoint?

orrr is there already written function

anyone about

[mild cipher]

$(sender) rolled a $(customapi.https://api.mathjs.org/v4/?expr=$(queryencode "floor(random() * $(1)) + 1"))

[atomic pine]

ohhh nice

don worry about my question its sorted btw, thanks for that

[stray garnet]

Is it possible to get some custom data like "Users with the most won loyalty points by betting today" or after a bet "Highest wins with the last bet" or would i have to build my own loyalty system for things like that?

[elfin arch]

nothing is coming to my head @stray garnet without using some custom stuff.

if you are doing it per a session (stream) ; you would want to use the API or (jebaited) to add the points and have an internal tracking Object. (like you can't use the default !gamble commands to track it)

[stray garnet]

@elfin arch So I was already thinking about building my own betting system "around" the StreamElements Bot (even using custom StreamElements Commands to trigger my custom logic), but after doing my logic I would still need to update the Loyalty Points in StreamElements. With the API this would probably work, but for every user who took part I would have to 1. remove the bet points from his username and 2. add it (in case he has won). Is there a way to update the loyalty points of users in bulk per api?

[elfin arch]

are you doing this server-side, node?

[viral patrol]

@stray garnet There is a bulk option. I am almost sure this class has it included: <#dev-chat message>

[stray garnet]

I wanted to build it with PHP/Laravel

[elfin arch]

^ lx said (i'm node only 🤣 ) not very cultured

[viral patrol]

@stray garnet so that one above should be really useful for you 😉

[stray garnet]

Amazing, thank you! Will look into it now

[sturdy oak]

if: 
  your_lang.needs_to
                    be_indented
                               like_this
                                        you
                                have_a
                    problem

Haha programming memes

[elfin arch]

this gives me nightmares of trying to learn PUG

[sturdy oak]

That meme is pointing to python

[elfin arch]

oh god.... is Python strict on the indents? .... that's on my 2021 list (maybe)

[sturdy oak]

They dont have ; so indents is what they depend on

[stray garnet]

Yes it is

I believe you can't even mix indents with spaces or it will blow up

[elfin arch]

i'm going to give up on that really fast

[stray garnet]

But Python is actually fun

imo 😄

[elfin arch]

ya; there is a lot more you can do with python (fun stuff) that JS can't do

[sturdy oak]

True, it was the first language I learnt and using selenium, a web automation library, I made like 5k instagram accounts

[elfin arch]

like AI and game playing stuff.

[viral patrol]

And what if your language is only those?

https://en.wikipedia.org/wiki/Whitespace_(programming_language)

[stray garnet]

It really helps a lot! I wonder how can I know about e.g. this bulk-adding endpoint or how do I know which "modes" are available besides "add"? I can not find anything about that in the docs or maybe I'm blind

[viral patrol]

@stray garnet The second possible mode is "set"

[sturdy oak]

CURSED

[stray garnet]

Ok cool, maybe I could have bruteforced that - anyway, is this information written anywhere or how do I find these endpoints?

[viral patrol]

@stray garnet I should use something like phpdoc, but I wrote this for myself and I didn't need it.

[elfin arch]

the endpoints are in the Header of this channel @stray garnet ... but some of them like the 'bulk points' are not there

...if you have to do brute force or constant API calls, it's best to ask here 🤣 ... don't wanna API call for every user

[stray garnet]

I have read the Api Docs if that's what you're referring to yeah, but as you said some seem to be missing there and I wonder how I could have found the bulk point adding endpoint if @viral patrol or @elfin arch would not have been so generous with sharing their code :p

[elfin arch]

half the fun of coding is finding the answer 🙂 ... and here is a good place ... sometimes

[stray garnet]

Haha true 😆

[elfin arch]

i say that; because ... the reason i joined this server a year or whatever ago is that i was looking the the 'bulk point add' end point as well 🤣

[ivory lion]

Can I grab the names of the unique chatters on a session via API?

[elfin arch]

not via the API; no.

[stray garnet]

When calling an api from a command (with ${customapi MY_URL}) is it possible to somehow add authentication to that request? 😄 I do not want to make my api publicly accessable, even if nobody would know about the url

[elfin arch]

i don't believe so. the chat command is just doing a simple API call and looking for a text response.

[stray garnet]

I wanted to use it for building my custom logic and call the api via these commands - would there be a better alternative to do that?

[elfin arch]

you can do a work around with the overlays; but i don't think it's possible with the built in ${customapi}

just assume that the link in ${customapi} is always public. 🤣 ^ @shell tree we had this convo earlier sometime it show shows on the public page and sometimes it doesn't. 95% sure there is no way to add auth to it

[stray garnet]

Oof then I guess I can not use these api calls via commands

Hm maybe I could only let whitelisted IPs use my api and whitelist the streamelements ip where the requests will be fired from? 😄

[tribal zenith]

what do you need the authentication for?

[stray garnet]

I want to build my own betting system with the loyalty points collected with streamelements - For that I wanted to build the logic with php, build an api around it and then call the api with custom streamelements commands (with ${customapi MY_URL}). But if I can't authenticate AND the api urls will be public then I can obviously not use it because I can not " trust" it, everyone could call it with manipulated parameters

[tribal zenith]

That is correct, you would need something like TMI to listen for chat events on your own server, execute code or calls in your own safe environment and then use StreamElements as a "database" to add or remove points from, via the API

[stray garnet]

Makes sense, but if the commands directly trigger logic on my api then I do not have access to the StreamElements database (his current total coins) - how do I solve this? For example to check if a user who wrote !bet 500 even has 500 coins in StreamElements

[tribal zenith]

I think the new API is undocumented yet, so I am not sure if the broadcaster has any special rights, to get point data for users on his own channel

[stray garnet]

Okay

Am I right that there is no other way of getting the current channel points for e.g. 100 users than to check it for each single user via api? = 100 Requests

[ivory lion]

I want to display the unique chatters on my credit roll, do you know if thats possible?

[tribal zenith]

If you have the JS knowledge you could use the SE_API's key-value-store and share the array of unique chatters between the widgets

[ivory lion]

Nice yes I can program in js but I havent found that array in the api docs, could you point me to the place in the docs please?

[tribal zenith]

the array is not part of the API, only the store. I thought you already had a widget with unique chatters, but maybe I just interpreted too much 😄

but the concept behind that is pretty easy: Listen for chat-messages, add the username of the author to an array (if not already in there) and then update the credit roll to add the names from that array to the displayed texts

[ivory lion]

Ohh didnt know I could listen to the messages

[tribal zenith]

https://github.com/StreamElements/widgets/blob/master/CustomCode.md#message

[ivory lion]

I could add a widget that just stays there listening to those events and then share it with the other overlay (credit roll) via the key value store?

[tribal zenith]

either that or let the roll do that internally

[broken coyote]

#widget-share message you can use this to get your feet wet on storing user names. its a user queue widget i did. will store users names when they type !join. obviously would need some tweaks. but will do part of what u want

[ivory lion]

Can it do that even if its not in my currently active overlay?

Ill check it out @broken coyote Thanks

[tribal zenith]

nope, it has to be loaded to execute anything

[ivory lion]

Okay gotcha

Ill probably make an overlay for this types of purposes that I share between my scenes

Or something

Is the SE store cleared every streaming session?

[tribal zenith]

nope

[robust trail]

Hey all!

I'm searching for a dev familiar with the StreamElements API to consult on the planning/development of a custom "Tip" alert system.

**To summarize: **

We have webhooks that would say " <User> has Donated <xamount> of <customcurrency>!

We need a solution that:

• Monitors the webhook
• Displays an on screen alert (using tips api?)
• Adds the tip info to the "Event Feed" in StreamElements OBS.Live

**We really need to make this integration a reality soon... **If anyone could provide some insight or would be interested in getting paid to consult/develop the project, please let me know! $1500 Bounty!

(apologies if this is the wrong channel to ask! lemme know if I need to remove the company name if that counts as advertising)

Thank you so much for your time and consideration in reading this! 😄

We've recently had a bunch of StreamElements partners join our platform to launch their own cryptocurrencies - they've been asking for a way to integrate donation/purchase alerts of their coins into the StreamElements experience.

@broken coyote @viral patrol @mild cipher 👀

[broken coyote]

@elfin arch @tribal zenith

[robust trail]

A simple question that would help:

1. Can custom events be written into the "Event Feed" if so, how?

[robust trail]

Offering $1500 for the above bounty to be completed..

[hardy walrus]

Gimme a sec to get a quote from one of the people you pinged.

[robust trail]

@hardy walrus Thank you brother ❤️

Any insights on: "Can custom events be written into the "Event Feed" if so, how?"

[hardy walrus]

That would be an LX question.

[robust trail]

What a legend... all of the big brains have been pointing to him.

[hardy walrus]

And actually looking again I don't think his thing would be of use to you.

But what you're wanting would definitely need Oauth access I think and that's not open atm.

[robust trail]

I knew it would require oauth2; I didn't know it wasn't 'Open'... Can you share more?

We have a few StreamElement partners that have been requesting these features

[hardy walrus]

The approval system is/was being redone due to some people abusing the API and TTS services.

[robust trail]

DM

[tribal zenith]

• Monitors the webhook
  Your backend would have to listen for these Webhooks and then emit an event via WebSockets, so a StreamElements widget can listen to that.

• Displays an on screen alert (using tips api?)
  The client (the SE widget) can then connect & listen for that socket event and display an alert with the provided data.
  Authentication would require unique URLs, which identify the user by id. If the URL ever gets leaked, the user should be able to request a new one, while invalidating the old.

• Adds the tip info to the "Event Feed" in StreamElements OBS.Live
  You probably can't integrate those in the normal SE feed, but OBS offers docks, so you can embed your own dashboard there. (Or have a OBS plugin which does that for you)

[sturdy oak]

Yeah that's exactly what I told one of their develoepers

[strong hollow]

Alright guys, i don't know where is best to ask but does anyone know if there's a way someone can do a command and have multiple lines or multiple chat messages happen?

[ivory lion]

Can I do a synchronous SE_API.store.get?

[tribal zenith]

you can use async/await, yes

[ivory lion]

ahh nice

[tribal zenith]

but as you probably know, await "freezes" the thread. So only use it when you load data once

[sturdy oak]

You're a man of culture if you use ASync

[ivory lion]

Yea

Im using a SE_API.store.get inside the onWidgetLoad of the credit roll

to get the unique chatters I saved there during my streaming session

[sturdy oak]

ahh nice

[ivory lion]

Its working

[sturdy oak]

Poggers

[ivory lion]

I wonder if theres a better way to do it though ehhe

I have a intro overlay which sets an empty array on a SE_API store key

and then a scripts overlay I have on all my scenes that keeps listening to messages and updating that store key data

[sturdy oak]

"The best way to do it, is to do it yourself" - OverAchiever 2020

[ivory lion]

and then my credit roll gets it

[sturdy oak]

You can just have 1 widget, and use it in all scenes, instead of multiple lolol

[tribal zenith]

you could also have added a button to the credit roll, so it doesn't start automatically and only when you click it. Then the roll widget itself could have an array of chatters

[ivory lion]

if I change scenes wont the widget reload?

[sturdy oak]

Yeah, now that there's no iframe-blocker you can have the button in a dock

[tribal zenith]

BrowserSources have a setting for that

[sturdy oak]

The main reason of using SE.API save is that it dosent reset on load

[ivory lion]

ah yes but I need to clear that array when i start a new stream

[sturdy oak]

yes you can accomplish that by having a !clear command

[tribal zenith]

it gets cleared automatically if you close OBS, since the sources will unload

[sturdy oak]

or that lol

[tribal zenith]

the advantage of the store version is, that the array will still be stored even if your stream crashes for some reason

so there is no right or wrong

[ivory lion]

interesting

I'll try some other approaches later then

Thanks 😄

[kind tusk]

https://github.com/StreamElements/widgets/blob/master/CustomCode.md Why is the variable {{someDropDown}} not working in the official example? is there any good documentation on custom widgets? besides this crappy github page which examples are broken? TIA

[tribal zenith]

it's {{someDropdown}} and no, the GitHub page has everything you need to know

[kind tusk]

Thanks for the hint with the typo. Its actually wrong in the documentation on github <div class="message">{{someDropDown}} is an option for today!<span id="additional">{{someText}}</span></div> can you change it @tribal zenith or who can?

[tribal zenith]

@viral patrol somebody wants to talk to the manager

[kind tusk]

@tribal zenith Do you have a code example on how i can use the value of data like data["subscriber-total"]["count"] in the html code? 🤔 tia

im not sure how i can get those data into a variable to use it in the html code.

[tribal zenith]

you can only use fieldData in HTML, CSS and JS. Any extra data has to be set in JavaScript with DOM selectors

[kind tusk]

So if i simply want the amount of current subs as a plain text. how would i call it via javascript? would i have to inject this info into an html element via jquery?And reinject this everytime theres a new sub? 🤔

[tribal zenith]

if you need it to be in a custom widget, then yes. If not you can just use labels for subcounts

[kind tusk]

Yep, it has to be a custom widget cause i couldn't find an option for backgroundcolor and rounded borders on the default labels and subcounts 😦 do you know if background-color is planned for the default widgets?

[tribal zenith]

Most people put them on overlay backgrounds and don't need that, so I guess there are other features prioritised for now

[kind tusk]

Ohh i see. Thanks for the info 👍

[tribal zenith]

but you could do the same thing. Create an image with rounded borders and background color and add it behind the label in your overlay

[kind tusk]

Yes i have done that before, but i takes me more time in the future when adjusting colors or other stuff to change an image and reupload, then to just change a field with a rgb code, or a slider for rounded corners or stuff like that. atm i just a need a basic text-widget with easy customisation options for backgroundcolor, color, infos displayed etc.

[tribal zenith]

#widget-share message might be a good start. it does not have borders though

[kind tusk]

this looks very promising thanks @tribal zenith

[tribal zenith]

but adding borders via css and maybe a slider should not be that hard

[kind tusk]

No, it shouldn't be hard, i can make this work

[tribal zenith]

[kind tusk]

When im using the "Total Subscribers" label, and emulate a comunity subgift of 10 gifted subs, the counter only counts 1 new sub...is this a bug? 🤔

[placid lion]

Am I using this wrong https://api.streamelements.com/kappa/v2/chatstats/my username/stats?limit=10
json.chatters It returns more then 10 chatters

[elfin arch]

you are using your ID right? .... are you not getting any JSON response, or are you getting more then 10 results?

@placid lion ^

[placid lion]

I'm getting a response with more then 10.

[elfin arch]

there is no 'limit' that i see

[placid lion]

https://docs.streamelements.com/reference/chatstats#chatstatsstatsbyusernameget

[elfin arch]

my bad. was looking at 'stats'

[placid lion]

No worries.
So it returns what i'm looking for in json.chatters, but it's more then 10.

Maybe i should filter the json.chatters output.

[elfin arch]

what have posted above in your link is exactly what i would do. so i'd say you are right. but i've never used that endpoint

[placid lion]

For now i made a trim function. It works how i want. 😉

[elfin arch]

I can't hit many of the endpoints cause I have like 5 followers and never stream 🤣

[placid lion]

Whehehehe.....

[elfin arch]

please tell me you've had some success @placid lion .... i was kicking a hard rock for the last 30 minutes

[placid lion]

With what, followers ? 😛
For the api url, i wrote a trim functions that cuts everything above the 10. In this way i get a output that i want.

[elfin arch]

no... i did a more dumb thing with the {field_data} thing ... i dont wanna talk about it

(╯°□°）╯︵ ┻━┻

[placid lion]

😂 Let me know if you need help 😉

[elfin arch]

it's with handling lx's jebaited

[placid lion]

🤯

[elfin arch]

@viral patrol (╯°□°）╯︵ ┻━┻

[viral patrol]

What did you break? 🙂

[elfin arch]

it's not a promise for the load

so i was always 'error' 🤣

[viral patrol]

Yup. Constructor is not a promise 😉

[elfin arch]

ya... and it can't be caught .... so always ... 'caught' ? 🤣

[viral patrol]

More like - it doesn't have "catch" method.

[elfin arch]

that's why i'm adding the try/catch in there

you have an insta fail on load

[viral patrol]

Yes. It can throw an exception, which should be caught

[elfin arch]

correct. it will crash if the token is not matched

if using this new link (which is way better) ... it must be handled correctly

[viral patrol]

try {
  api = new Jebaited(jebaitedToken);
} catch (e) {
  console.err(e);
}

[elfin arch]

🤣 no need to rub it in

i was double catching

[viral patrol]

Basically like this above or:

try {
  api = new Jebaited(jebaitedToken);
} catch (e) {
  document.getElementsByTagName('body')[0].innerHTML = `<p style="font-size:50px;color:#F00">${e.message}</p>`; 
  console.err(e);
}

Which would display error message within widget if token is invalid

[elfin arch]

correct...

[tepid hull]

i lost the list link for the variable for the time command list Australia/Sydney and Australia/Perth and stuff

[rugged rapids]

<#helpdesk-twitch message>

[tepid hull]

thanks

[sturdy oak]

Just realised SE widgets can be used to make a website(Not full blown, but maybe a landing page) and you get free hosting lolol

[viral patrol]

And with that you share your apikey which allows others to read some data you don't want to share lolol

[sturdy oak]

There are workarounds, alt twitch accounts. But I shouldn't have said that it'll be abused lol

[viral patrol]

For free you can get amazon free tier or 000webhost. There's absolutely plenty of webhostings online.

[static wigeon]

https://pages.cloudflare.com/ & https://www.netlify.com/ are both great options for free hosting.

[elfin arch]

oh great... a shit poster... can someone with mod powers remove those links Kappa

[sturdy oak]

Im not looking for hosting lol I just shared an idea I had@viral patrol @static wigeon

[whole mural]

question about mod vs supermod, if I have streamelements set as a supermod, can streamelements timeout mods?
Just wanting to see if I could get the russian roulette command to work for mods too

[hardy walrus]

No.

[whole mural]

dang

[shell tree]

If someone is a mod, only you can time them out.

[hardy walrus]

Only streamer can do it to mods.