#dev-chat

1 messages · Page 9 of 1

potent halo
#

Don't ask to ask, just ask

cinder imp
#

I've previously been helped getting a text to move text one position to another in Stream Elements as an alert. I'm now wondering if I could have it tweaked to response to whenever a gift sub is triggered. The animation alone is absolutely perfect, I just want that part adjusted.

hollow field
#

Hello everyone ! I'm quite new at using stream elements (currently making my first template, i just need to add streamelements fields).
I wanted to ask if it's possible to add a comment in the fields like a label ?

image.png
severe shell
#

However, I usually do a trick that looks like a comment, but it isn't, actually. You create a new field with hidden type and no values.

"translationText": {
  "type": "hidden",
  "label": "Translation Module",
  "group": "Translation properties"
},

"translationModule": {
  "type": "dropdown",
  "label": "available options: on / off",
  "value": "off",
  "group": "Translation properties", 
  "options": {
    "off": "off (only original text shown)",
    "on": "on"
  }
}

It will look like this:

image.png
hollow field
#

Ooh okay, that what i want. Thx so much ! 🙏 ✨

severe shell
frank lake
#

"Time between each image" which images is it referring to? The different ghost models?
And what does "Time before history repeats itself" mean? Is that the amount of time before it resets back to the right side of the screen?

potent halo
rustic pewter
#

hello how do i delete a payment method i added

i want to delete my details but not giving me option

severe shell
uneven oxideBOT
#

@rustic pewter ⤵️

If you need to fill out a support ticket, please use the command !ticket in chat, following the subject of your issue! For example, please type "!ticket My chatbot isn't working", and then follow the prompts from our bot!

rustic pewter
#

Waiting now

#

Thx u though

vital wadi
#

curious if anyone knows if it's possible to connect to a Firebase database from a custom widget? I'm having trouble initializing. I get unsafe errors, something about iframes, and then I tried a different way by using 'import' in JS and it said 'can't use import outside of a module' error

severe shell
frank lake
vital wadi
jaunty verge
#

hello guys i want to ask. So i checked in etsy for chat widget and i look in custom widget chat they have a nice image asset, i am wondering. How asset image is included in html? is it using svg image and then copy paste the svg into html and then do the animation using css and javascript or we need to host our image assets so we can call it over public url?

i tried use ticket command, but they said they didnt provide support for custom widget.

potent halo
# jaunty verge hello guys i want to ask. So i checked in etsy for chat widget and i look in cus...

There are a lot of ways to include an image in your widget.
Embedding the raw data is one. With SVG it's pretty simple, since it is basically in the correct format already. Rasterized formats can be converted to base64 and included that way.
Of course you can also use image hosts like imgur or your own server. You can even upload it to streamelements and get the url for a dynamic image programmatically using fields.

vital wadi
#

Anybody have any experience reading/writing info from a database in their custom widget? I'm trying to save high scores for my widget game

jaunty verge
potent halo
thorn epoch
#

Are there typescript types available for the window.widget api?

vital wadi
potent halo
#

Security is the difficult part.
How do you ensure, that the score sent to your API is actually made by your widget and not just sent manually

still juniper
#

If he hasn't an API by now that means the game is just a local thing, so I'd just use the KV store for saving your own top scores

severe shell
#

Or... If you just want to send the score, use the SE_API

potent halo
#

If he asked about dbs I assumed it's supposed to be between multiple widget users

severe shell
#

But yeah, we don't know if the database is used for anything else, so we can just suggest things here

jaunty verge
potent halo
jaunty verge
potent halo
thorn epoch
#

Are there any examples of the audio compositeField?

jaunty verge
severe shell
vital wadi
# potent halo If he asked about dbs I assumed it's supposed to be between multiple widget user...

Yes, multiple widget users. Security concerns are what im most afraid of, I don't understand the networking aspect of alot of this, but I'm a serviceable programmer. The goal is to save multiple users high scores, in whatever way possible. Say I just read and write to a JSON file I have hosted on my server, right now I have it set up to read, but writing would open it up to security issues, would it not?

potent halo
# vital wadi Yes, multiple widget users. Security concerns are what im most afraid of, I don...

Well.. duh.
I'm not the best at security focused things, but you should first consider how likely your game is to be cheated (e.g. score spoofing) in. Your efforts should depend on that. If you think that no one is going to cheat because you know everyone that uses the widget, then something like a whitelist is enough. On the other side of the spectrum, if it's going to be public and expected to be reasonably popular you may have to program a validity checking algorithm.

potent halo
vital wadi
potent halo
vital wadi
obtuse isle
#

Does anyone have on hand whole objects from onEventReceived for message, delete-message, delete-messages for YOUTUBE. Twitch ones I have but I need the YouTube ones.

Why I need this?: I have made a little "passthough" overlay to send YouTube StreamElements account events to twitch StreamElements account with websocket connection (cause there is no support for that by default jsaSigh ). I was able to test subscriptions, members and superchats (and remap them to twitch alternatives cause otherwise queue does not work with default event names (we gonna ignore that I have to already use event:test to even receive them correctly)) but I can't test chat without having to start public livestream (kind of stupid as well) and I don't really have a way to do that for now... so one again if anyone has them or can quickly pull them for me quickly I be grateful.

sullen perch
#

Is it possible to hire devs from this channel?

potent halo
sullen perch
#

Awesome! I'm looking for a Dev that can recreate media request/ media share. We need a system that is more robust than the current media request feature in streamelememts.

Reply to my message if that's something you can help with.
Paid ofc.

scarlet bane
#

does this not work anymore?

#

https://api.streamelements.com/kappa/v2/bot/modules/:channelId/roulette
method: PUT
Payload:

{
"roulette":{
"cooldown":{
"user":50,
"global":0
},
"messages":{
"win":"/me {user} won {bet} undefined in roulette and now has {points} undefined! FeelsGoodMan",
"lose":"/me {user} lost {bet} undefined in roulette and now has {points} undefined! FeelsBadMan",
"allinWin":"/me PogChamp {user} went all in and won {bet} undefined PogChamp they now have {points} undefined FeelsGoodMan",
"allinLose":"/me {user} went all in and lost every single one of their {bet} undefined LUL"
},
"enabled":false,
"luck":45,
"minAmount":2
}
}

#

the docs only has this

image.png
severe shell
bright dew
#

Hi there,
So this may sound weird, but I'm trying to find out if there is a way to put a browser source inside of another browser source via streamelements?

My situation involves managing an esports program where I frequently need to distribute OBS builds to players and casters. The issue arises when constructing these scenes, as they can get a bit complex and contain multiple elements that I prefer to remain unaltered. Unfortunately, when sharing OBS scene collections, alterations and mishaps occur more often than I'd like.

Ideally, I'd like to streamline this process by embedding a browser source within another browser source directly through StreamElements. This approach would allow me to consolidate the scene into a single browser source link, simplifying distribution and minimizing the potential for errors.

Is there an existing method or coding workaround that would make this possible? Any insights would be greatly appreciated!

severe shell
bright dew
#

what if one of the browser sources comes from a different site?

severe shell
bright dew
#

thats what i figured.

#

Unless streamelements has a clip player widget?

potent halo
bright dew
#

so what im using is
efuse[dot]gg/sidekick

#

its basically a widget that grabs your top clips and plays them back

#

because of having to send this to multiple people having a huge file to download wouldnt work.

red otter
#

Hi, all. Wondering if anyone has a moment to help me with a browser source inquiry?

#

It's probably a simple fix, or at least I'm hoping, but I'm having this issue where I've done some markup for an overlay that's a browser source. The thing is, it's a local file, and it's my first time attempting this. I was hoping to avoid having to host the files somewhere, in the event I have to use these for offline recording, but basically, the file is not rendering in OBS as it does in a browser.

image.png image.png
#

It just loses all customization other than the background.

#

Wondering if there's a fix/workaround to this. Otherwise, I'll just upload this to a repository or something and call it from there.

hardy walrus
#

Die you make sure the size was 1920x1080?

topaz hornet
#

Hey, I'm writing small custom widget and I need to get stream's current timestamp if certain event happens, but I have no clue where can I get that timestamp.

severe shell
still juniper
#

I think he's referring to the elapsed time since stream started

red otter
#

I did, indeed. Everything is set to 1920x1080. Not sure how that would cause the issue, though.

topaz hornet
red otter
topaz hornet
red otter
severe shell
rose sapphire
#

Hello! I'm experiencing an issue in your custom widgets where your sound upload menu auto-rejects any wav format files. I've worked around it by converting what i need into mp3s, but figured i'd let you guys know

fast wraith
#

Is SE.Live still downloadable? I'm trying to download it to my Macbook but I keep getting an error

severe shell
rose sapphire
#

o7

hasty girder
#

Hi

#

Im trying doing a js script to trigger things

#

But I need it for only mods

#

Anyone know the permission?

#

I want it for mods / broadcaster only

#

What im missing?

hardy walrus
#

That'll be the extent of what I'll be able to help with though kekwholup

dim path
#

Hello, I'm a web dev and I was looking to write my own chat CSS - I found some widgets where it lets me play with the custom code, but the developer experience is kind of frustrating since the editor covers the whole screen/etc. Is there a way to play with the CSS easier like in a code pen or vscode? Thanks

potent halo
austere plinth
#

anyone know what might be causing that white border thingy in my chat box? (im trying to edit cocahhs chat box and i barely know css)

image.png
potent halo
dim path
proud spade
#

Is there a way to change the "Level-up Goal - Level up Goal - by Annedorko" to do subs instead of donos?

#

@charred tundra SEheart If you're around

carmine mason
#

Is the refresh token endpoint still a thing ?

I'm calling the endpoint in POST as follow:
https://api.streamelements.com/oauth2/token?grant_type=refresh_token&client_id=xxx&client_secret=xxx&refresh_token=xxx

With this header: Content-Type: application/x-www-form-urlencoded

The refresh token is valid, freshly got it from authentication endpoint, but no matter what I try, I only get this as a result:

{
  error: 'server_error',
  error_description: 'The authorization server encountered an unexpected condition that prevented it from fulfilling the request.'
}
severe shell
# carmine mason Is the refresh token endpoint still a thing ? I'm calling the endpoint in POST ...

It is working fine, I have just tested on my side. However, I tried to put wrong data to reproduce the error, and these are the results:

Wrong client_id: The authorization server encountered an unexpected condition that prevented it from fulfilling the request.
Wrong client_secret: The client is not authorized to request a token using this method.
Wrong refresh_token / code already used: The provided authorization grant (e.g., authorization code, resource owner credentials) or refresh token is invalid, expired, revoked, does not match the redirection URI used in the authorization request, or was issued to another client.
Wrong redirect_uri or missing parameter: The request is missing a required parameter, includes an invalid parameter value, includes a parameter more than once, or is otherwise malformed.

So check if you didn't type the wrong client_id (maybe some space at the beginning or at the end of the string)

The registered redirect_uri can be checked here:
https://api.streamelements.com/oauth2/clients/YOUR_CLIENT_ID

severe shell
proud spade
severe shell
carmine mason
crystal latch
#

Hi all!
I am a bit stumped with something and could use some help 😅

I am working on some stuff that requires us to be able to trigger custom events in a SE widget, but I am unable to find a reliable and secure way to do so, let me clarify some things to save some time:

  1. It is not an individual use-case, we are managing many users.
  2. I have tried using the onEventReceived event listener and POSTing to https://api.streamelements.com/kappa/v2/channels/<channel>/socket and this works, kinda, it only accepts "event:test" as the event name, which we could work around if really needed, but seems less than ideal
  3. I have tried using a socket.io approach and POSTing to https://api.streamelements.com/kappa/v2/activities/<channel>, but the POST request requires a provider to be specified in the body, which cannot be a custom one, it has to be one from a list, and that makes me assume this is not its intended use. On top of that the socket.io client requires us to connect using the personal JWT token, which complicates things given that we would rather not store what we don't need and risk exposing users's tokens
potent halo
# crystal latch Hi all! I am a bit stumped with something and could use some help 😅 I am work...

Just asking because I didn't yet.. Did you try the other socketio event names?
Otherwise I can't help you with that specifically but I see that you already have some experience with building Apis so.. why not build your own websocket server for events? You could still use the channelid to route events correctly but wouldn't need authentication because it only needs to be read to the outside. Writing events can be done however you like, since it's your server.

severe shell
# crystal latch Hi all! I am a bit stumped with something and could use some help 😅 I am work...

Are you trying to create a totally custom event that is not related to the usual ones (follow, subscribe, cheer, tips, etc)?
Also, are you trying to trigger the custom event outside of SE?
2. Well, /v2/channels/:account_id/socket can receive any data with any event name, the "event:test" is one that it is read by SE by default (by default I mean, the custom one that you can do anything you want). In case you want to change to another event name, you would need to have a custom widget to connect to SE socket (which would be redundant) and read that event name. Check the code at the end.
3. socket.io connection doesn't need the JWT, you can use the apiToken you can get from "onWidgetLoad"

window.addEventListener("onWidgetLoad", async (obj) => {
  apiToken = obj.detail.channel.apiToken

  const socket = io('https://realtime.streamelements.com', { transports: ['websocket'] });
  socket.on('connect', onConnect);
  socket.on('disconnect', onDisconnect);
  socket.on('authenticated', onAuthenticated);
  socket.on('unauthorized', console.error);
  
  // Here you chan change the EVENTNAME for anything you want and create your custom alert
  socket.on('event:EVENTNAME', (data) => {
    console.log(data);
    // Do Your Magic here
  });
  
  function onConnect() {
    console.log('Successfully connected to the websocket');
    // socket.emit('authenticate', {method: 'oauth2', token: accessToken});
    //socket.emit('authenticate', {method: 'jwt', token: jwt});
    socket.emit('authenticate', {method: 'apikey', token: apiToken});
  }
  
  function onDisconnect() {
    console.log('Disconnected from websocket');
    // Reconnect
    onConnect()
  }
  
  function onAuthenticated(data) {
    const { channelId } = data;
    console.log(`Successfully connected to channel ${channelId}`);
  }  
})
still juniper
#

Listening to the socket.io socket inside the widget only makes sense if he's also connecting to the socket from his backend server to send events, meaning the apiToken is out of the question on that side. But you can use an oAuth token instead of a JWT one, which is safer (although it requires applying for oAuth to SE)

crystal latch
crystal latch
last sigil
#

Is there currently a way to see with the onWidgetLoad event object if this is currently the same stream? Like an id or something?

severe shell
last sigil
#

Yeah, I'm looking throught it, but as far as I know, there's really only like alert information

severe shell
last sigil
#

@severe shell well, I meant session information, so recent/session/top/total follows/sub/cheers/tips, etc.
I know SE knows about the current stream session

image.png
severe shell
severe shell
# last sigil <@282327953864523776> well, I meant session information, so recent/session/top/t...

My suggestion would be checking the last reset doing a request:

window.addEventListener("onWidgetLoad", async (obj) => {
  const lastResetRequest = await fetch(`https://api.streamelements.com/kappa/v2/sessions/${obj.detail.channel.id}`, {
    method: "GET",
    headers: {
      Accept: "application/json",
      Authorization: `apikey ${obj.detail.channel.apiToken}`
    }
  })
  const lastResetResponse = await lastResetRequest.json()
  console.log("Last reset:", lastResetResponse.lastReset) // Last reset: 2024-03-16T04:28:52.774Z
})
last sigil
#

This may not be an id but I should be able to accomplish what I was looking for, many thanks!

oak jewel
#

Hey there, i'm trying to connect to user points API, but I am getting 404s in my log.

Here's my python code:

    url = f'https://api.streamelements.com/kappa/v2/points/{channel}/{user}'
    headers = {
        'Content-Type': 'application/json',
        'Authorization': f'Bearer {os.getenv("STREAM_ELEMENTS_JWT_TOKEN")}'
    }
    response = requests.get(url, headers=headers)
    if response.status_code == 200:
        return response.json()['points']
    else:
        logging.error(f"Failed to fetch user points: {response.status_code} - {response.text}")
        return None```

and the error

```DEBUG:urllib3.connectionpool:https://api.streamelements.com:443 "GET /kappa/v2/points/neeeekolaz/neeeekolaz HTTP/1.1" 404 None
ERROR:root:Failed to fetch user points: 404 - {"statusCode":404,"error":"Not Found","message":"neeeekolaz was not found"}```

Anyone have any ideas what I am doing incorrectly here? Any help is appreciated 🙂
severe shell
#

By the way, that endpoint you are trying to fetch with GET doesn't need authentication, it's optional.
https://api.streamelements.com/kappa/v2/points/654038aef0d69e318f0770f3/neeeekolaz

oak jewel
#

Aha, good to know thank you! That seems to have resolved the issue.

#

Appreciate your help!

knotty dew
#

anyone who knows why my streamelements extensation panel doesnt refresh my subs/chatters etc. ?

thorny glacier
#

just wanted you to know that this just helped me out a ton

#

honestly it might be worth just creating a custom widget with only the code needed to set up the onEventRecieved listeners so people can just throw that on their dashboard

#

thats pretty much all im doing lmao

severe shell
#

I'm doing a widget for Voicemod and it uses channel points to redeem. So I added the Channel Points widget to the overlay.

image.png
thorny glacier
#

oh nice! i must have missed that

#

when trying to process a specific reward, whats the best thing in the returned json to check against?

severe shell
thorny glacier
#

thanks!

#

works perfectly!

pliant scaffold
#

Please help me, my last follower in my streamelements overlay does not update and is stuck at 1 follower 😭

severe shell
pliant scaffold
severe shell
thorny glacier
#

is there any ability to add custom variables to custom commands?

#

e.g. unix time

#

or would that fall under $(customapi.url)

pliant scaffold
severe shell
thorny glacier
whole adder
#

Can i add text to a widget through the API?

north field
#

Hi. I have Se.live plugin and beeing using it for months with no problem. Yesterday i changed my alertbox from streamelements web site to elements control center in OBS and since then the alerts wont show on the activity feed. I stream full time and this is really messing up the flow of the stream. Also idk why all the alers seems to have a massive delay to pop up (in screen, not activity feed, activity feed wont update at all until I save a change and its forced to update bot wont update further)

severe shell
whole adder
severe shell
# whole adder and to add a text what should i change exactly?

I don't know, that would be my workflow to test it first:

  • Get the overlay details and copy the results on a notepad
  • Add the text manually on the widget (without code, just doing on the overlay editor) and save the overlay
  • Get the overlay details again and check what changed
  • Done. Now you know what you need to change and do your API request correctly.
whole adder
#

For the first one, what are the parameters, i dont get them..

image.png
severe shell
whole adder
severe shell
# whole adder i get a 404 Not Found

That endpoint only exists on v2, but it is selected v3 on your screenshot.
Where it says "v3" (next to Send API Request button), change it to v2 and try again

whole adder
#

should be this one right?

image.png
severe shell
#

Yes!

whole adder
#

@severe shell ^

#

nvm it worked

whole adder
#

Thanks c4ldas for the help!

pulsar willow
#

any one to help me somthing ?

uneven oxideBOT
#

@pulsar willow ⤵️

Not all staff are able to assist with support issues. Please refrain from pinging them or sending them DMs unless asked to.

graceful latch
#

Hello everyone, I have a small problem with the animations of a chat widget.
I found the widget on the internet in the form of code, when testing it on the PC that is going to use it, the animations for entering and exiting the message do not work, but if I use it on my PC the animations do work, I already noticed and in both computers hardware acceleration is disabled. The only thing I can think of is that it is due to the resolution of the screen since the screen on which it does not work is 1366x768 and the one that does play the animations is 1920x1080.
I attach the link with the chat box files in case someone can review them and tell me how to solve it.
https://drive.google.com/drive/folders/1daeedFvioD4zoDYBbLyJbpkTNrIGdgWq

severe shell
#

Or Settings > Accessibility > Visual effects > Animation effects

graceful latch
graceful latch
pulsar willow
#

How would I get started making a SE chat for Youtube?

new CustomEvent("onEventReceived", {
        detail: {
          listener: "message",
          event: {
            service: "youtube",
            data: {

would something like this work? I don't quite understand how SE talks to YT API

or should i just straight up use this?
https://developers.google.com/youtube/v3/live/docs/liveChatMessages

topaz hornet
#

Is there an endpoint what let's me get watchtime of all users in given channel?

severe shell
severe shell
obtuse isle
# pulsar willow How would I get started making a SE chat for Youtube? ```js new CustomEvent("on...

You will have to make your own parser for the message to get emotes. Cause they are not returned by StreamElements.

Here a full object of youtube chat data.

"data": {
            "kind": "youtube#liveChatMessage",
            "etag": "hiddenStringValue",
            "id": "hiddenStringValue",
            "snippet": {
                "type": "textMessageEvent",
                "liveChatId": "hiddenStringValue",
                "authorChannelId": "hiddenStringValue",
                "publishedAt": "2024-03-11T10:01:06.186779+00:00",
                "hasDisplayContent": true,
                "displayMessage": "message with emotes :hand-pink-waving::face-purple-crying::text-green-game-over::face-fuchsia-tongue-out:",
                "textMessageDetails": {
                    "messageText": "message with emotes :hand-pink-waving::face-purple-crying::text-green-game-over::face-fuchsia-tongue-out:"
                }
            },
            "authorDetails": {
                "channelId": "hiddenStringValue",
                "channelUrl": "hiddenStringValue",
                "displayName": "DisplayName",
                "profileImageUrl": "hiddenStringValueLink",
                "isVerified": false,
                "isChatOwner": false,
                "isChatSponsor": false,
                "isChatModerator": false
            },
            "msgId": "hiddenStringValue",
            "userId": "hiddenStringValue",
            "nick": "DisplayName",
            "badges": [],
            "displayName": "DisplayName",
            "isAction": false,
            "time": 1710151267710,
            "tags": [],
            "displayColor": null,
            "channel": "hiddenStringValue",
            "text": "message with emotes :hand-pink-waving::face-purple-crying::text-green-game-over::face-fuchsia-tongue-out:",
            "emotes": [],
            "avatar": "hiddenStringValueLink"
        },
        "renderedText": "<span>message with emotes :hand-pink-waving::face-purple-crying::text-green-game-over::face-fuchsia-tongue-out:</span>"
    }
#

I made this to add html for emotes into renderedText.

// Here you put array of youtube emotes. I got it by snooping around the popout of youtube chat.
const emotesArray = [] 

//If I recall its window.ytInitialData.contents.liveChatRenderer.emojis on 
/// www (dot) youtube (dot) com/live_chat?is_popout=LIVE_VIDEO_ID_HERE

const makeRichMessageWithEmotes = (message) => {
    const emoteCodesInMessage = Array.from(message.matchAll(/:(.*?):/gim), x => x[0]);
  
      emoteCodesInMessage.forEach((emoteCode) => {
        const youtubeEmote = emotesArray.find((youtubeEmote) => (
          youtubeEmote.shortcuts.includes(emoteCode) || youtubeEmote.searchTerms.includes(emoteCode.slice(1,-1))
        ));
      
          if (!youtubeEmote) {
          return;
        }
      
          message = message.replaceAll(emoteCode, `<img class="emote" title="${emoteCode.slice(1,-1)}" src="${youtubeEmote.image.thumbnails[youtubeEmote.image.thumbnails.length - 1].url}" alt="${emoteCode.slice(1,-1)}" />`);
    });
                                
    return message;
}
#

As well take in mind there is no delete-message and delete-messages event being send. At least none I seen after trying for few hours. Is this expected behaviour?

potent halo
severe shell
ornate turret
#

hello my partner is still in class is it normal that I have this?

1995.png
uneven oxideBOT
#

@ornate turret ⤵️

Sponsorship questions can only be handled with the ticket system. Please type !ticket sponsor support in #community-helpdesk and follow the instructions from the bot.

Attempting to open multiple tickets will not quicken staff response as they are handled in the order they are received.

blissful flax
#

anyone from stream elements hear that can help me with SE.live ?

uneven oxideBOT
#

@blissful flax ⤵️

If you need to fill out a support ticket, please use the command !ticket in chat, following the subject of your issue! For example, please type "!ticket My chatbot isn't working", and then follow the prompts from our bot!

slim matrix
#

Need help with a math command

I'm doing subpoint goal - current subpoints divided by a number (say for tier3s which would be 6) and I need this rounded to nearest whole number.

I currently have $(math a=4000-3826;a/30)

So, I need a/30 to round to nearest whole number
I'm using a= because when I tried $(math 4000-3826/30) it gave me a wrong output number

proud spade
#

I don't believe there is a way to round numbers currently.

severe shell
floral ibex
#

Hey! im not a coding genius, but i'm looking for maybe a push into the right direction.

My idea is to have my webcam fade out whenever an alert is triggered, and then fade back in at the end.

Example
First two seconds of the alert is a static image of my webcam, while the original static Webcam fades out. the next couple seconds the webcam animation plays, and slowly fades back into the static image which then appears again.

#

But I'm not so sure if theres a way to hide the original image in the editor

#

😂 I imagine the code to look like this 😂

if alert=yes
fade out: x
if alert = finished
fade in: x kekw

potent halo
floral ibex
#

Ill have a look there! I hope you can control a single source, otherwise I could maybe look into having just 1 scene that I then nest into my main scene

severe shell
# floral ibex Ill have a look there! I hope you can control a single source, otherwise I could...

Why not just put the alert overlay above your webcam and make the alert fade in / fade out? You wouldn't need to change anything in your webcam.

If you really need to use OBS, you have an example here to test (with a live test)
https://github.com/c4ldas/obs-websocket-example

And here you can find a (rough) OBS websocket connection example using Streamelements
https://streamelements.com/overlay/643b4512360d0db87031360f/Wjp3qP2b0cdcJ1A9faxnaUjyCGF2BQ2zvcmbW0CTUvAu0Jn-

floral ibex
potent halo
#

Let's fuckin go. Done with studying. Finally got my Masters degree. Gonna work on some fun stuff now moepComfy

#

Time to rewrite a certain program that uses se events and finally release it

severe shell
graceful pine
crystal latch
# crystal latch Hi all! I am a bit stumped with something and could use some help 😅 I am work...

Hi, re-surfacing this, we just got OAuth access and I am trying to POST to https://api.streamelements.com/kappa/v2/channels/:channel/socket, unfortunately I keep getting 401 with the user OAuth token, scope is only channel:read, but I have tried a few other scopes and none of them seem to work. Worth noting, yes, I am using an OAuth Token, not the code from the callback, I already processed it and checks out fine against the validate endpoint
[Disregard, it was an issue with the HTTP client I was using for testing, kept appending Bearer when it was not supposed to, switched to manual headers and it worked fine]

hot trout
#

hello

hot trout
inland gyro
#

hi

#

It is very very specific, it is made with html, css, js, fields
It's about the overlays created with these codes that I want to add a background sound
The problem is that I did not find a way even with src from an audio in the html code using, for example, Google Drive as a web server to obtain a link and from there copy it into the src of the audio variable
the same with another page and soudcloud
Since it can't do any of this, I tried making a video with the music I want in the background to play it, but when using the shout out command the alert works perfectly but the sound I want doesn't work.

#

What I want to see is that if you can add audios more than anything to all the custom widgets

lilac laurel
#

What is the best way to retrieve all subs in a given time window using the API? the api is limited to 100 results per query but this means someone droping a 100 sub bomb is enough to fill it instantly, i'd like to run some stats for a channel where having >100 subs in a short time period is not that uncommon, however doing it at that frequency would mean an insane number of queries (would need to do it per maybe 10 seconds? and even for a monthly report, there's a lot of 10 seconds time windows in a month). Currently thinking of approaching it this way

Get the whole month, divide the time in 2 and re query recursively until all leaves of the recursive tree are < 100 items, return them all and drop the duplicates based on id. That would work and generate a looot less querying on my side and api load on SE side but i'm wondering if i missed an obvious simpler solution (is there some kind of pagination option? if not where can i make such a feature request / is one planned? 100 results per query wouldn't be bad at all if we could opt to receive 1 event per gift bomb so it's more than fine for cheers but for sub bombs it's very ouchies). It's also very spikey so if i ran it at high frequency that's just wasted queries as most would have 0 subs but running it even hourly (which would still be very wastefull) would return 100 for things that are as high at 800 in my example.

Any improvement on my split time solution is most welcome

severe shell
# lilac laurel What is the best way to retrieve all subs in a given time window using the API? ...

Connect it to Streamelements socket.io (https://dev.streamelements.com/docs/api-docs/5a84cc101a9c5-connecting-via-websocket-using-o-auth2), listen for each sub event, and save it elsewhere for your monthly report. This way you don't need to do requests and you will receive the events every time someone shares the subscription. By the way, that's important, not all subscribers share their subscriptions, so the streamer can miss some of them.

If you don't want something like that to happen, better to use Twitch API directly, connecting to it via Pubsub (https://dev.twitch.tv/docs/pubsub/), for example

Connecting via Websocket using OAuth2 | API Reference

After gaining the AccessToken make sure to pass it in the const in the JS bellow. Powered by Stoplight.

severe shell
lilac laurel
#

(public vs private is not a problem, it's for channels that trust me/i have full access on, it doesn't need to scale to more than those few)

severe shell
# lilac laurel i'm looking at tracking historical not future data however, i don't think twitch...

Twitch API doesn't give the date of when a subscription happens (unless you catch them at the time of the subscription). You can get all subscribers from a channel, but it won't give when those happened, so don't think it will be useful. https://dev.twitch.tv/docs/api/reference/#get-broadcaster-subscriptions

SE doesn't have an API history to catch more than you mentioned (100) nor a pagination. I believe the subscriber-recent from https://dev.streamelements.com/docs/api-docs/f337dd80fb783-channel is the best you can get, unfortunately.

lilac laurel
# severe shell Twitch API doesn't give the date of when a subscription happens (unless you catc...

I think get broadcaster subscribtions would only give the currently active ones? if not that could be interesting to get full subs summary but i'd still need something else with the date as i want to partition that data to see when things perform well and not

So for SE my best bet if going back years is the option i gave of splitting time until no > 100 results happen? Also i was using /v2/activities while your doc link is for /v2/sessions , is sessions for when you want to retrieve everything at once? the doc simply says "get session data", or is it for the current session in the "reset session" sense of streamelements? (if the later this doesn't go far back enough for me, activities happily gives me 2021 data).

Realistically by splitting in half until < 100 it wouldn't be that many queries i'm just trying to avoid unnecessary API spam even if i throttle and was making sure there was no better option (i really had hoped i had missed pagination 😅 )

inland gyro
severe shell
# inland gyro Can you tell me how to do it? because I am doing it from html, css, js, fields a...

Go to Fields tab and add a sound-input.

{
  "audioName": {
    "type": "sound-input", 
    "label": "Audio info", 
    "value": ""
  }
}

In your JS you can access it using the below:

window.addEventListener("onWidgetLoad", (obj) => {
  fieldData = obj.detail.fieldData;
  const yourAudio = fieldData.audioName; // This is your audio
})

In case you just want to use it on HTML, you can access it directly with something like that:

<audio autoplay>
  <source src="{{audioName}}" type="audio/mpeg">
</audio>
#

Then you can upload your sound file through the field on the left.

inland gyro
#

tenkiu tekiu

inland gyro
severe shell
inland gyro
#

HTML
<div id="alert" class="animated initialHide">
<div id="content">
<div id="gifContainer">

  <img id="gif" src="https://media.tenor.com/4IL8QJDz_GsAAAAi/gojo-dance-transparent-gojo.gif" width="498" height="498">
</div>
<div id="alertContent">

  <div id="logo"></div>
  <div id="displayName"></div>
  <div id="twitch"></div>
</div>

</div>
<audio autoplay id="customAudio">
<source src="{{audioName}}" type="audio/mpeg">
</audio>
</div>

#

CSS
@import url('https://fonts.googleapis.com/css?family={fontFamily}:100,300,400,500,700,900&display=swap');

div {
font: normal 150px/1 {{fontFamily}}, Helvetica, sans-serif;
text-align: center;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
letter-spacing: 3px;
}

#alert {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
width: 80vw;
height: 60vh;
margin-top: -30vh;
margin-left: -40vw;
background-color: rgba(31, 35, 47, 0.8);
border-radius: 15px;
padding: 20px;
}

#content {
display: flex;
align-items: center;
}

#gifContainer {
margin-right: 20px;
}

#alertContent {
text-align: center;
position: relative;
}

#logo {
position: absolute;
top: -170px;
left: 50%;
transform: translateX(-50%);
width: 150px;
height: 150px;
border-radius: 50%;
overflow: hidden;
}

#logo img {
width: 100%;
height: 100%;
object-fit: cover;
}

#displayName {
text-align: center;
font-size: 25px;
margin-bottom: 5px;
border-radius: inherit;
}

#twitch {
text-align: center;
font-size: 25px;
margin-bottom: 5px;
border-radius: inherit;
}

.initialHide {
visibility: hidden;
}

.animated {
animation-fill-mode: both;
}

@keyframes SlideRightIn {
0% {
transform: translate3d(-150%, 0, 0);
visibility: visible;
}
60% {
transform: translate3d(10%, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}

.SlideRightIn {
animation-name: SlideRightIn;
animation-duration: 1s;
}

@keyframes SlideRightOut {
0% {
transform: translate3d(0, 0, 0);
}
40% {
transform: translate3d(-10%, 0, 0);
}
100% {
transform: translate3d(150%, 0, 0);
visibility: hidden;
}
}

.SlideRightOut {
animation-name: SlideRightOut;
animation-duration: 1s;
}

#

JS
let cmd, duracion, colorC, colorT, inT, outT, customAudio;

window.addEventListener('onWidgetLoad', function (obj) {
const fieldData = obj.detail.fieldData;
cmd = fieldData["command"];
duracion = fieldData["duration"];
colorC = fieldData["colorC"];
colorT = fieldData["colorT"];
inT = fieldData["inT"];
outT = fieldData["outT"];
customAudio = fieldData["audioName"]["value"];
});

window.addEventListener('onEventReceived', function (obj) {
let data = obj.detail.event.data;
let command = cmd + ' ';

if (!data.text.startsWith(command)) {
    console.log("no empieza con " + cmd);
    return;
}

let badges = data.badges;
let i = badges.findIndex(x => x.type === 'moderator' || x.type === 'broadcaster');
#

{
"duration": {
"type": "number",
"label": "Duration (seconds)",
"value": 5
},
"command": {
"type": "string",
"label": "Comand",
"value": "!so"
},
"inT": {
"type": "dropdown",
"label": "Enter animation",
"value": "SlideUp",
"options": {
"SlideUp": "SlideUp",
"SlideDown": "SlideDown",
"SlideLeft": "SlideLeft",
"SlideRight": "SlideRight",
"Fade": "Fade",
"Bounce": "Bounce"
}
},
"outT": {
"type": "dropdown",
"label": "Exit animation",
"value": "SlideUp",
"options": {
"SlideUp": "SlideUp",
"SlideDown": "SlideDown",
"SlideLeft": "SlideLeft",
"SlideRight": "SlideRight",
"Fade": "Fade",
"Bounce": "Bounce"
}
},
"colorC": {
"type": "colorpicker",
"label": "Name Color",
"value": "rgba(0,172,255,1)"
},
"colorT": {
"type": "colorpicker",
"label": "Link color",
"value": "rgba(238,153,0,1)"
},
"fontFamily": {
"type": "googleFont",
"label": "Font",
"value": "Sail"
},
"audioName": {
"type": "sound-input",
"label": "Audio info",
"value": ""
}
}

#

eso es todo

#

that's all*

severe shell
inland gyro
#

When I enter the command, the sound I set does not sound, the alert works but not the sound, nothing sounds

severe shell
# inland gyro When I enter the command, the sound I set does not sound, the alert works but no...

You have to put it in onEventReceived:

window.addEventListener('onEventReceived', function (obj) {
    let data = obj.detail.event.data;
    let command = cmd + ' ';

    if (!data.text.startsWith(command)) {
        console.log("no empieza con " + cmd);
        return;
    }

    let badges = data.badges;
    let i = badges.findIndex(x => x.type === 'moderator' || x.type === 'broadcaster');

    // Here is the code for the audio
    const soundElement = document.querySelector("#customAudio")
    soundElement.src = fieldData.audioName;
    soundElement.play()
})
#

Also, you don't need the customAudio variable in onWidgetLoad, in this case, you can remove it.

window.addEventListener('onWidgetLoad', function (obj) {
    const fieldData = obj.detail.fieldData;
    cmd = fieldData["command"];
    duracion = fieldData["duration"];
    colorC = fieldData["colorC"];
    colorT = fieldData["colorT"];
    inT = fieldData["inT"];
    outT = fieldData["outT"];
    // The line below can be removed: 
    /* customAudio = fieldData["audioName"]["value"]; */
});
#

If you are not playing the audio when the widget loads, you also don't need it on HTML:

[...]
  <audio autoplay id="customAudio">
    <!-- You dont need to add it to src, instead leave src empty -->
    <!-- <source src="{{audioName}}" type="audio/mpeg"> -->
    <source src="" type="audio/mpeg">
  </audio>
</div>
inland gyro
#

As I explain to you, now the alert doesn't even work, it doesn't appear.

severe shell
inland gyro
#

I tried everything but nothing still works

severe shell
#

How is your HTML now?

inland gyro
#

<div id="alert" class="animated initialHide">
<div id="content">
<div id="gifContainer">
<img id="gif" src="https://media.tenor.com/4IL8QJDz_GsAAAAi/gojo-dance-transparent-gojo.gif" width="498" height="498">
</div>
<div id="alertContent">
<div id="logo"></div>
<div id="displayName"></div>
<div id="twitch"></div>
</div>
</div>
<audio autoplay id="customAudio">
<source src="" type="audio/mpeg">
</audio>
</div>

severe shell
#

Ok, what about your JS? Please put the code between three backticks so it will create a block of code
``` code here ```

inland gyro
# 
let cmd, duracion, colorC, colorT, inT, outT;

window.addEventListener('onEventReceived', function (obj) {
    const fieldData = obj.detail.fieldData; // Accede a fieldData dentro de onEventReceived
    if (!fieldData || typeof fieldData.audioName === 'undefined') {
        console.log("No se encontró audioName en fieldData");
        return;
    }

    let data = obj.detail.event.data;
    let command = cmd + ' ';

    if (!data.text.startsWith(command)) {
        console.log("no empieza con " + cmd);
        return;
    }

    let badges = data.badges;
    let i = badges.findIndex(x => x.type === 'moderator' || x.type === 'broadcaster');

    // Play custom audio
    const soundElement = document.querySelector("#customAudio");
    soundElement.src = fieldData.audioName; // Accede a audioName desde fieldData
    soundElement.play();
#

Now I blocked myself and I did what you told me when you sent the code below

hardy walrus
#

Sorry bout that.

Bot was angy with your message.

severe shell
#

This code is incomplete. Also, fieldData is only available in onWidgetLoad, not in onEventReceived.

let cmd, duracion, colorC, colorT, inT, outT;

window.addEventListener('onWidgetLoad', function (obj) {
  fieldData = obj.detail.fieldData;
  cmd = fieldData.cmd;
})

window.addEventListener('onEventReceived', function (obj) {
    let data = obj.detail.event.data;
    let command = cmd + ' ';

    if (!data.text.startsWith(command)) {
        console.log("no empieza con " + cmd);
        return;
    }

    let badges = data.badges;
    let i = badges.findIndex(x => x.type === 'moderator' || x.type === 'broadcaster');

    // Play custom audio
    const soundElement = document.querySelector("#customAudio");
    soundElement.src = fieldData.audioName; // Accede a audioName desde fieldData
    soundElement.play();
})
inland gyro
#

It blocks me when I send the next part of the code

severe shell
inland gyro
#

´´´
if (i !== -1) {
let input = data.text;
let usr = input.substring(command.length).replace('@', '');

    $.get({
        type: 'GET',
        url: 'avatardetwitch' + usr,
        success: function(data) {
            if (data) {
                $("#alert")
                .queue(function() {
                    document.getElementById("displayName").style.color = colorC;
                    $("#displayName").html(usr.toUpperCase());
                    $("#logo").html("<img class='round' src='" + data + "'>");
                    document.getElementById("twitch").style.color = colorT;
                    $("#twitch").html("linkdetwitch" + usr);
                    $(this).removeClass(outT + "Out initialHide");
                    $(this).addClass(inT + "In");
                    $(this).dequeue();
                })
                .delay(Math.min(duracion * 1000, 8000))
                .queue(function() {
                    $(this).removeClass(inT  + "In");
                    $(this).addClass(outT  + "Out");
                    $(this).dequeue();
                });
            }
        }
    });
} else {
    console.log('no es mod');
    return;
}

});
´´´

#

well something is something that is the second part of the code

severe shell
#

Check the browser console, it can help you to find any errors.

inland gyro
#

me dice esto
Uncaught TypeError: Cannot read properties of undefined (reading 'audioName')
about:srcdoc:262 Uncaught TypeError: Cannot read properties of undefined (reading 'audioName')

severe shell
#

So that's it. Did you add the audio file on the field on the left side of the overlay?

inland gyro
#

yes

severe shell
#

I didn't see the onWidgetLoad in your code, so probably it is not reading the fieldData because of that

# 
window.addEventListener('onWidgetLoad', function (obj) {
  fieldData = obj.detail.fieldData;
})
inland gyro
#

If I put it on but nothing, the alert and sound still don't work now
sorry for bothering so much

severe shell
inland gyro
#

14hfrpqs ID

severe shell
# inland gyro 14hfrpqs ID

This should be the correct JS:

window.addEventListener('onWidgetLoad', function (obj) {
  fieldData = obj.detail.fieldData;
  cmd = fieldData.command;
  duracion = fieldData.duracion;
  colorC = fieldData.colorC;
  colorT = fieldData.colorT
  inT = fieldData.inT;
  outT = fieldData.outT;
})

window.addEventListener('onEventReceived', function (obj) {
  let data = obj.detail.event.data;
  let command = cmd + ' ';
  
  if (!data.text.startsWith(command)) {
    console.log("no empieza con " + cmd);
    return;
  }
  
  let badges = data.badges;
  let i = badges.findIndex(x => x.type === 'moderator' || x.type === 'broadcaster');
  
  // Play custom audio
  const soundElement = document.querySelector("#customAudio");
  soundElement.src = fieldData.audioName; 
  soundElement.play();
  
  if (i !== -1) {
    let input = data.text;
    let usr = input.substring(command.length).replace('@', '');
    
    $.get({
      type: 'GET',
      url: 'https://decapi.me/twitch/avatar/' + usr,
      success: function(data) {
        if (data) {
          $("#alert")
            .queue(function() {
            document.getElementById("displayName").style.color = colorC;
            $("#displayName").html(usr.toUpperCase());
            $("#logo").html("<img class='round' src='" + data + "'>");
            document.getElementById("twitch").style.color = colorT;
            $("#twitch").html("https://www.twitch.tv/" + usr);
            $(this).removeClass(outT + "Out initialHide");
            $(this).addClass(inT + "In");
            $(this).dequeue();
          })
            .delay(Math.min(duracion * 1000, 8000))
            .queue(function() {
            $(this).removeClass(inT  + "In");
            $(this).addClass(outT  + "Out");
            $(this).dequeue();
          });
        }
      }
    });
  } else {
    console.log('no es mod');
    return;
  }
});
inland gyro
#

well now the sound works but my alert appears for a second and goes away but I think I can fix that thank you very much c4ldas

junior bison
#

Hello, I was wondering if I could output text into chat using a custom widget? I am making a tasklist bot and would like to output a list of all the tasks a user has entered.

severe shell
junior bison
#

Oh I want to send a message to chat, thanks! I'll look into that tomorrow

manic frost
#

Does anyone know of a widget that tracks monetary goals in the same bar - so all bits, subs, donos would go to the same goal respectively?

mystic juniper
#

Anyone here wanna try beta version for new chat widget? Pepega

hot trout
celest cypress
#

Hy everybody,
i got a question.

How can i get the subscriber-total in onSessionUpdate?

in onWidgetLoad i get it with

let data=obj["detail"]["session"]["data"];
$("#subscriber").text(data["subscriber-total"]["count"]);

Thanks

severe shell
severe shell
severe shell
mystic juniper
crystal crescent
#

Anyone from the SE team know why the docs for generating an access token say to use cURL with -X and -d (https://dev.streamelements.com/docs/api-docs/cd02cda5171ea-o-auth2), but inject the query params into the URL of an axios call in the sample code (https://github.com/StreamElements/authentication-samples/blob/master/nodejs/index.js)?

When using a POST request with fetch, should I hit the endpoint straight up with the data in the body (like the cURL)? Or should I put the data into the URL params (like the Axios call)?

severe shell
# crystal crescent Anyone from the SE team know why the docs for generating an access token say to ...

Well, when you have a application/x-www-form-urlencoded, you are creating a form data, and it will construct a query string-like structure when sent to the server. You can simply add the parameters directly to the URL (without body) or add them to the body as a "new URLSearchParams()". Both ways will do the exact same thing in the end:

fetch("https://api.streamelements.com/oauth2/token", {
  "method": "POST",
  "headers": {
    "content-type":"application/x-www-form-urlencoded"
  },
  "body": new URLSearchParams({
    "grant_type": "authorization_code",
    "client_id": "01234567849",
    "client_secret": "98765463210",
    "code": "abcDEFghiJKL",
    "redirect_uri": "https://your_url.com/callback/"
  })
})

The above is the same as:

fetch("https://api.streamelements.com/oauth2/token?grant_type=authorization_code&client_id=0123456789&client_secret=9876543210&redirect_uri=https://your_url.com/callback/&code=abcDEFghiJKL", {
  "method": "POST"
})
#

Also, when you use -d in curl, it expects the data to be in application/x-www-form-urlencoded by default

manic frost
little basin
#

Has anyone seen an issue where an array being set in SE_API store comes back with duplicated items in the array when retrieving from the store? I can see the set network call only add the item once, and can see it in console that it looks appropriate, but immediately after, sometimes the store get will return the array with the item duplicated 1-2 times like refreshing the browser to trigger onWidgetLoad

ornate field
#

Hi, I created a simple widget on streamelements which is a sub-cheer-follower daily goal but somehow when someone does one of does action the widget doenst update till hours, and i need it to do it manually by updating the cache, can someone help me? ive seen another widgets that do it automatically

tough crane
ornate field
#

yeah im using it

#

now im trying neohud by neoshin widget and its the same, it doesnt rest the amount when someone unfollow me and also it doesnt update the numbers till i do it manually or i need to wait hours , would it be a problem of the code?

tough crane
#

I find session data to be a bit finicky

#

First you need to make sure your session is set to be reset when your stream ends I guess

ornate field
#

it is set

#

but yeah if i dont do it manually it updates it till next day

#

kinda weird

tough crane
#

On Twitch it seems to work ok but on YouTube it doesn’t

#

Then you can get session data in the widget load event

#

And in the session update event

#

What do you use?

#

Also note that unfollows don’t trigger session updates

#

Only follows do

#

So if you get 2 unfollowers and on follower only then you followers count would show -1

ornate field
#

sorry eng isnt my main language lol

tough crane
#

Me neither haha

ornate field
#

this is the widget i use

#

imsure the reason might be in the css code or smt like that

#

the thing is i failed that subject in school but kinda read it

#

jaja

tough crane
#

Keeping track of unfollowers would require use of session data

ornate field
#

what ive seen it uses it

tough crane
#

And it doesn’t work properly most of the time

ornate field
#

but not sure

tough crane
#

So I would not do that

#

Think about it this way

#

You set a 100 followers goal

#

And you reach it

ornate field
#

yup

tough crane
#

Does it matter if you lose some followers during that time?

#

You still got 100 new ones

ornate field
#

yeah

#

youre right

tough crane
#

But if you want to do it anyway here’s how I would do it

ornate field
#

then now my concernd is that it isnt updating. and when it does is when i end stream most likely

ornate field
tough crane
#

Either I would call a rest api periodically to get the live number of followers and adjust accordingly

#

Or force reset the SE session before starting your goal

#

They have a rest API to do that

ornate field
#

it is somewhere in the code?

tough crane
#

You can see your channel ID and token by clicking on your avatar on the top right corner of the SE website

#

And then choosing « channel settings » in the menu

ornate field
#

you mean this right?

tough crane
#

Yes click on you name and another menu should open

ornate field
#

ok there it is

#

i saw it

tough crane
#

Use the JWT token, not the overlay one

#

And keep it private

ornate field
#

okay

#

i already copied i t

tough crane
#

Note that if you linked more than one platform and you switch between them the token will change

ornate field
tough crane
#

And the previous one won’t work anymore

ornate field
#

okay so

#

i would read and try to fix it asap

#

any updates ill let u know

tough crane
#

Using the rest api you can force reset the session programmatically

#

But you’ll then probably need to refresh your widget

#

I’m not sure if the session update event would emit or not

ornate field
#

lets see if it works

#

wish me luck

#

thank u so much for your help

tough crane
#

🍀

#

No problem

ornate field
#

and thank u for being so nice

#

have a good one ❤️

tough crane
#

You too

severe shell
# ornate field Hi, I created a simple widget on streamelements which is a sub-cheer-follower da...

Just to let you know, goals are not subtracted, it is something that only counts up. The idea of a goal is to gain the amount you set in a given period. It won't give you the total.
If you want to check the real amount, you should check the "Totals", but that takes some time to update, as it is not possible for Streamelements to consult and update the value every second due to Twitch API rate limits.

ornate field
# severe shell Just to let you know, goals are not subtracted, it is something that only counts...

Thank you C4ldas, hey, I am using your widgets for Valorant and it’s awesome, I edited the TFT widget because it wasn’t updated for the TAG system and as I couldn’t find the widget for LOL I kinda edited it too so I can show my rank in LOL too, I was gonna ask you if it was okay for me to share it with my friends of course giving you the credit, I just know the basic thing about programming so it took me some time but it worked

#

Hope I explained myself cuz my English isn’t that good

severe shell
ornate field
severe shell
severe shell
ornate field
fading oxide
#

Does anyone know how to send a message to chat from a streamelements custom widget?

#

I just get a 401 error when I try

#

I'm grabbing the token and channel Id from the widget load event.

severe shell
fading oxide
#

oh, what is that token useful for?

severe shell
#

When you use the Overlay Token, the header is:

"Authorization": `apikey ${TOKEN}`
shut talon
#

@mystic juniper So how would i go about getting more stacks in a horizonal chat widget?

mystic juniper
#

I can however build a custom theme for my new chat widget that supports horizontal mode

#

And then allowing custom stacks

shut talon
#

That would be amazing

mystic juniper
shut talon
#

Got you Thanks for being awesome

mystic juniper
#

For our users, ALWAYS 👍❤️

vital wadi
#

What is this "Platform Mismatch" error when I make a widget and send someone the one-click-install link? Its only been happening very recently, everything work fine for over a year until the last few days

icm_fullxfull.647275537_l8tinh4q7eo00008g848.webp
hardy walrus
vital wadi
hardy walrus
#

Was it for Facebook by chance?

vital wadi
vital wadi
hardy walrus
#

When clicking the special links they're usually designed for a specific or several platforms when making it.

If it indeed was made for FB then that would be an issue as we no longer support FB as a platform.

vital wadi
hardy walrus
#

Yup

inland gyro
#

Hello, I wanted to know if there is a way to link streamelements with Twitch in the channel points, for example make a widget with the reward name "droparms" and in Twitch make the points reward "droparms" so that when it is redeemed the created animation appears. in the overlays widget

#

I already have the animation created because I used one from another widget that is for a shout out or a channel mention

severe shell
inland gyro
#

sorry but I tried but I don't know how to do it right, I'm new to this 😅

#

I tried to do it but when I redeem the points nothing comes out. I don't know if I should give you the codes that I have or what.

severe shell
inland gyro
#

I know but I only achieved a little, just to be able to create the animation widget that I have but beyond that I cannot locate the js, html and css codes I understand it

#

And sorry if English is bad, I don't know much either.

severe shell
# inland gyro I know but I only achieved a little, just to be able to create the animation wid...

Ok, no worries, we can help each other. English is also not my main language, so I understand you :).
Well, you need to create a custom widget first.
Instructions here, but it is basically this: - Streamelements Overlay Editor (+ icon > Static/Custom > Custom widget)
https://dev.streamelements.com/docs/widgets/3cf52461e4e34-before-starting#custom-widget

After that, you will see "OPEN EDITOR" on the left. When clicking on that, you will have the tabs HTML, CSS, JS, FIELDS and DATA. Explanation what they are and how to work with them here: https://dev.streamelements.com/docs/widgets/ec99002224803-code-editor, but you can delete everything in there. For DATA, replace the contents with {}

Widgets use 3 types of Event Listeners, instructions here:
https://dev.streamelements.com/docs/widgets/6707a030af0b9-custom-widget-events.

  • onWidgetLoad - When the widget is loaded, that means when the widget is opened for the first time or when you refresh the browser source on OBS.
  • onEventReceived - When the widget received any event, like a chat message, subscription, follow, etc, and Channel Points redemption
  • onSessionUpdate - When there is an update on the session data, like a subscription will change the total subscription data, the last subscriber, etc... This is a session Update. We don't use this much, because most of the things we can get on onEventReceived, except when we are using session data or goals info.

For our situation, we are most focusin on onEventReceived. I will give you more info in my next message.

#

In case you want to use an animation or anything like that when someone redeems a channel points, you can create a simple one (to start), like this:
On HTML tab:

<div id="item-redeemed"></div>
<div id="redeemer"></div>

On JS tab:

window.addEventListener('onEventReceived', async (obj) =>{
  if(obj.detail.listener != "event" && obj.detail.event.type != "channelPoints") return // Here will ignore any event that is not a channel Point redemption
  
  const itemRedeemed = document.getElementById("item-redeemed")
  const redeemer = document.getElementById("redeemer")

  itemRedeemed.innerText = obj.detail.event.data.title
  redeemer.innerText = obj.detail.event.data.username
})

In this case, every time someone redeems an item, it will show the name of the item and the name of the viewer who redeemed the item.

inland gyro
#

Can I pass js codes here, right?

severe shell
#

Yes

#

You can check the full obj on browser console when you redeem something, like this:

image.png
inland gyro
#

moment I want to try to adjust the codes

#

well I have this js code
You had helped me on one occasion, I don't know if you remember.
window.addEventListener('onWidgetLoad', function (obj) {
fieldData = obj.detail.fieldData;
cmd = fieldData.command;
duracion = fieldData.duration;
colorC = fieldData.colorC;
colorT = fieldData.colorT;
inT = fieldData.inT;
outT = fieldData.outT;
});

window.addEventListener('onEventReceived', function (obj) {
let data = obj.detail.event.data;
let command = cmd + ' ';

if (!data.text.startsWith(command)) {
console.log("no empieza con " + cmd);
return;
}

let badges = data.badges;
let i = badges.findIndex(x => x.type === 'moderator' || x.type === 'broadcaster');

const soundElement = document.querySelector("#customAudio");
soundElement.src = fieldData.audioName;
soundElement.play();

if (i !== -1) {
let input = data.text;
let usr = input.substring(command.length).replace('@', '');

$.get({
  type: 'GET',
  url: '(urlavatarusers' + usr,
  success: function (data) {
    if (data) {
      $("#displayName").html(usr.toUpperCase());
      $("#logo").html("<img class='round' src='" + data + "'>");
      $("#twitch").html("Ha canjeado tirar todas las armas");
      $("#alert").removeClass("initialHide").addClass(inT + "In");

      setTimeout(function () {
        $("#alert").removeClass(inT + "In").addClass(outT + "Out");
      }, Math.min(duracion * 1000, 8000));
    }
  }
});

} else {
console.log('no es mod');
return;
}
});

At least trying to make the changes, is that okay?

#

window.addEventListener('onWidgetLoad', function (obj) {
fieldData = obj.detail.fieldData;
cmd = fieldData.command;
duracion = fieldData.duration;
colorC = fieldData.colorC;
colorT = fieldData.colorT;
inT = fieldData.inT;
outT = fieldData.outT;
});

window.addEventListener('onEventReceived', function (obj) {
let data = obj.detail.event.data;
let command = cmd + ' ';

if (!data.text.startsWith(command) && obj.detail.event.type !== "channelPoints") {
console.log("no empieza con " + cmd);
return;
}

let badges = data.badges;
let i = badges.findIndex(x => x.type === 'moderator' || x.type === 'broadcaster');

const soundElement = document.querySelector("#customAudio");
soundElement.src = fieldData.audioName;
soundElement.play();

if (i !== -1) {
let input = data.text;
let usr = input.substring(command.length).replace('@', '');

$.get({
  type: 'GET',
  url: '(urlavatarusers)' + usr,
  success: function (data) {
    if (data) {

      $("#displayName").html(usr.toUpperCase());
      $("#logo").html("<img class='round' src='" + data + "'>");
      $("#customText").html("Ha canjeado tirar todas las armas");
      $("#alert").removeClass("initialHide").addClass(inT + "In");

      setTimeout(function () {
        $("#alert").removeClass(inT + "In").addClass(outT + "Out");
      }, Math.min(duracion * 1000, 8000));
    }
  }
});

} else if (obj.detail.event.type === "channelPoints") {
const itemRedeemed = document.getElementById("item-redeemed");
const redeemer = document.getElementById("redeemer");

itemRedeemed.innerText = data.title;
redeemer.innerText = data.username;

} else {
console.log('no es mod');
return;
}
});

#

(urlavatarusers) this is the url of the user's avatar

#

Now I don't know what to do in the code because the animation doesn't work but that's easy to fix XD

severe shell
# inland gyro well I have this js code You had helped me on one occasion, I don't know if you ...

Yeah, I remember now that I saw the code.
Well, as long as you have the divs mentioned in JS in your HTML (#item-redeemed and #redeemer), I think you are fine (considering you added the channel Points widget I mentioned initially so you can receive channel points events).

My suggestion is: Always have the browser console open to see if there is any error when you are creating, modifying or testing widgets.
I won't be able to reproduce the problem (even because I don't know if there is a problem now)

inland gyro
#

Well the problem is that when you exchange it nothing comes out xd that's why I was asking if the code was correct

#

The only errors I get are these
Access to XMLHttpRequest at 'httpsstreamelements.com/(urlavatarusers)maxi21232' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
/(urlavatarusers)maxi21232:1

   Failed to load resource: net::ERR_FAILED
mystic juniper
#

The problem is in the URL, Take a good look at it again

mossy topaz
#

Is there any way to quickly contact support?

uneven oxideBOT
#

@mossy topaz ⤵️

If you need to fill out a support ticket, please use the command !ticket in chat, following the subject of your issue! For example, please type "!ticket My chatbot isn't working", and then follow the prompts from our bot!

mossy topaz
#

I have a question. I have enabled se.pay payments and previously dotpay-blik worked normally for me. However, now I log in and dotpay is not available in the payment methods. I am from Poland and I have created a ticket, but I have not received any response yet. This is important to me because I have everything planned.

severe shell
hardy walrus
#

And that bit specifically at that.

mossy topaz
#

Could you please let me know when I can expect a response to my ticket? It's very important to me because I have everything planned for the 19th hour, and I realized a few hours ago that Dotpay is not available, whereas it was earlier.

hardy walrus
#

As we do not have access to any of the stuff handling this we unfortunately can't answer.

rich zodiac
#

Hello. Can somebody help me with loyalty system. Im looking to be able to show users points via my own website, and display my store items on my own website, is this possible?
i dont know if this or tech-talk was teh right place to ask

severe shell
rich zodiac
#

is it possible to get a quick explanation on how to implement that on a react website?

severe shell
rich zodiac
#

not seeing t he option for js or node?

severe shell
rich zodiac
#

thank you!

inland gyro
#

I still don't understand why it doesn't work when redeeming my Twitch channel reward, sorry.

rich zodiac
#

im getting at a loss, which option is used for react? running jsx filees, but i keep getting error when implementing

severe shell
severe shell
rich zodiac
#

im actually not getting errors, im using js fetch but it does give mee a white screan

#

no i do not

severe shell
inland gyro
severe shell
#

Then open the browser console and redeem your item. You should see the obj in the console with all the information

inland gyro
#

I get these errors

Captura_de_pantalla_2024-04-05_134532.png
rich zodiac
#

i may be very dumb, but i cannot do any of it, i getting multiple errors - is it because im using vite?

severe shell
# inland gyro I get these errors

It is related to this line:
if (!data.text.startsWith(command) && obj.detail.event.type !== "channelPoints") {

Check what you have in data first

inland gyro
#

what I have in data is this

Captura_de_pantalla_2024-04-05_135250.png
severe shell
severe shell
# inland gyro what I have in data is this

I mean data, the variable. This data from here:

if (!data.text.startsWith(command) && obj.detail.event.type !== "channelPoints") {

Do a console.log(data) on that before the if condition and check what is the value on console.

rich zodiac
#

c4ldas, where would i find the channel id needed? is it through twitch or streamlabs, and is it just t he cchannel name or an api or?

severe shell
inland gyro
#

I put it like this

window.addEventListener('onEventReceived', function (obj) {
let data = obj.detail.event.data;
console.log(data);
let command = cmd + ' ';

and this appears

VM1208 about:srcdoc:18 Uncaught TypeError: Cannot read properties of undefined (reading 'startsWith')
at VM1208 about:srcdoc:18:18
at VM1207 about:srcdoc:31:10
(anónimo) @ VM1208 about:srcdoc:18
(anónimo) @ VM1207 about:srcdoc:31
postMessage (asíncrono)
m @ app.js:397
(anónimo) @ app.js:397
(anónimo) @ app.js:397
(anónimo) @ vendor.js:67073
completeOutstandingRequest @ vendor.js:52995
(anónimo) @ vendor.js:53275
setTimeout (asíncrono)
Browser.self.defer @ vendor.js:53273
timeout @ vendor.js:67071
(anónimo) @ app.js:397
r.emit @ app.js:12
f.onevent @ app.js:310
f.onpacket @ app.js:310
(anónimo) @ app.js:310
r.emit @ app.js:12
f.ondecoded @ app.js:310
(anónimo) @ app.js:310
r.emit @ app.js:12
d.add @ app.js:34
f.ondata @ app.js:310
(anónimo) @ app.js:310
r.emit @ app.js:12
u.onPacket @ app.js:379
(anónimo) @ app.js:379
r.emit @ app.js:12
i.onPacket @ app.js:34
i.onData @ app.js:34
ws.onmessage @ app.js:381

rich zodiac
#

itkeeps giving me the error that the id isnt correct - well a 404 error indicatingits incorrect?

severe shell
severe shell
inland gyro
#

and this appears
VM2009 about:srcdoc:17 Uncaught TypeError: Cannot read properties of undefined (reading 'startsWith')
at VM2009 about:srcdoc:17:18
at VM2008 about:srcdoc:31:10
(anónimo) @ VM2009 about:srcdoc:17
(anónimo) @ VM2008 about:srcdoc:31
postMessage (asíncrono)
m @ app.js:397
(anónimo) @ app.js:397
(anónimo) @ app.js:397
(anónimo) @ vendor.js:67073
completeOutstandingRequest @ vendor.js:52995
(anónimo) @ vendor.js:53275
setTimeout (asíncrono)
Browser.self.defer @ vendor.js:53273
timeout @ vendor.js:67071
(anónimo) @ app.js:397
r.emit @ app.js:12
f.onevent @ app.js:310
f.onpacket @ app.js:310
(anónimo) @ app.js:310
r.emit @ app.js:12
f.ondecoded @ app.js:310
(anónimo) @ app.js:310
r.emit @ app.js:12
d.add @ app.js:34
f.ondata @ app.js:310
(anónimo) @ app.js:310
r.emit @ app.js:12
u.onPacket @ app.js:379
(anónimo) @ app.js:379
r.emit @ app.js:12
i.onPacket @ app.js:34
i.onData @ app.js:34
ws.onmessage @ app.js:381

rich zodiac
severe shell
# inland gyro and this appears VM2009 about:srcdoc:17 Uncaught TypeError: Cannot read properti...

Man, it's the same error. You don't need the lines after the first one, it is exactly the same error. You are just sending the same thing again and again.
Just check what's the value of the data variable first. You said you knew javascript, so you should be able to check what's the value of the data variable you are declaring.
I don't know, comment the if condition, remove the line with the error... Just work part by part. I don't know what you are doing, you are just showing errors and errors.

severe shell
rich zodiac
#

then why is that the GET im told from the docs?

inland gyro
severe shell
# rich zodiac then why is that the GET im told from the docs?

Which GET? Please, be more descriptive. I'm not able to help if you don't give full information. There is no /stats/alltime endpoint, don't know where you saw that, that simply doesn't exist.
Show what you are looking at, show what is the error, show your thinking flow, make an explanation. I'm really trying to help, but one line message doesn't help me to help you.

rich zodiac
severe shell
inland gyro
#

That's why I apologize for bothering you so much.

severe shell
#

As regards the https://api.streamelements.com/kappa/v3/points/YOUR_ACCOUNT_ID/stats/alltime, this doesn't exist. Do you have a screenshot showing the page that shows that endpoint?

rich zodiac
#

it dissappeared after i messed around with it unfortunately

severe shell
inland gyro
rich zodiac
#

c4ldas, thank you very much for your help. i just have the problem now that it displays 0 points, when there should be point?

severe shell
# inland gyro

Great, now go to https://jsfiddle.net again and copy the HTML, CSS and JS tabs in there. Click on Save and send me the ID of the page.
Go to https://cl1p.net/maxi21232 and put the FIELDS in there and click on "Create cl1p" button (don't need to send the qrcode, I can check the page after you click on "create cl1p")

inland gyro
#

ID
1y8dnx52
and that's it with Create cl1p

severe shell
severe shell
rich zodiac
#

you are a god ❤️

inland gyro
#

okok sorry c4ldas for everything

severe shell
severe shell
# inland gyro okok sorry c4ldas for everything

No need to be sorry. 🙂
I'm checking the code here. I see in the FIELDS there is a Command, which is set to !s and there is a Recompensa, which is set to soltararmas.
1 - When someone types !s, what should happen? And who is able to type that command?
2 - Is "soltararmas" the channel point name? What should happen when redeem it?

inland gyro
#

I used it to see how the animation worked (which worked but when I changed the code it stopped working but I can verify that, don't bother with this), at the point of the channel it is called "soltararmas" which should be What happens is that, when you redeem the "soltararmas" channel point, the corresponding animation appears, rocklee releasing the weights from the legs with an animation of
Enter animation
SlideRight
exit animation
SlideRight

rich zodiac
#

@severe shell if you aree still here im trying or i did also get fetch for my y store, but i am not seein a redeem button - and im not sure what the parameter for that is, can you help with that?

#

or anyone else

#

bruh

#

got not eeven halfway through haaha

severe shell
# rich zodiac <@282327953864523776> if you aree still here im trying or i did also get f...

There is no redeem button, you are doing an API request. There is no way to have the same page on your website, it doesn't work like that. You have to code everything.

https://api.streamelements.com/kappa/v2/store/ACCOUNT_ID/redemptions/ITEM_ID
method: POST

headers:
Accept: application/json
Authorization: Bearer JWT_TOKEN

body:
One of the below:
If the item store does not need an text input and has no requirements, you can leave the body part as:
{"input": []}

In case the item store has the option "Allow user to add a text message to the alert":
{"input":[], "message": "MESSAGE HERE"}

If the item store has requirements (part 3 of the item configuration), you will send them this way:
{"input":["FIRST REQUIREMENT","SECOND REQUIREMENT","AND SO ON"]}

severe shell
rich zodiac
#

ahha no problem! i appreciate you

#

alright now that ive done it i am wondering, are people gonna be able to r edeem it or do i need a function to connect either twitch or similar to "acces" the points or how will it work? if you know

severe shell
#

Ideally, you would need to do oAuth authentication flow, because if you use your JWT Token, it will appear as if you were the one who redeemed the item.

rich zodiac
#

where can i obtain 0Auth token? is that eeven a thing?

severe shell
# rich zodiac where can i obtain 0Auth token? is that eeven a thing?

You have to apply for that, but I've just remembered the scope to redeem items from store is not working using oAuth flow, so, it wouldn't matter if you had the oAuth access, unfortunately.
I asked to fix that long ago, but never received a response from staff about that, unfortunately. 😦

rich zodiac
#

aw, shoot thats annoying 😦 - weell, can always just add button to redirect

shrewd radish
#

Hey guys! I'm new to streaming and idk much about programming, but I think someone maybe can help me.

In my overlay, I used the viewer count widget provided by StreamElements but when reading the code it only gets the live viewers from Twitch. However, I would like to make it count viewers from other platforms such as YouTube and Facebook alongside Twitch because my community will multi-stream, i.e. the result should be the total count of the 3 platforms.

So, can anyone tell me how I can integrate it into the current code?

image.png
#

Because my objective is to ensure that "Atuais Espectadores" (Current Viewers) shows the total number of people watching from the mentioned platforms as shown in the below image

image.png
dense dawn
#

Why is my owned Tv overlays not working like its suppose to be

#

I paid cause it suppose to be easy and its not

severe shell
severe shell
ancient lynx
#

Hey! Maybe I can find some help here. I've just created a widget that allows streamer to keep track of the books they're reading, allowing them to show a customizable book on stream (like a bookshelf basically). To allow the streamer to add books I'm using custom fields, so the streamer can choose the book color and some decorations. The problem I have is once I open obs and insert the widget, the colors bug because of the second instance of the browser. I'm using fieldData.bookColor (and many other custom fields) to save the preferences into se_store. Any idea how can I ONLY save the book using the fieldData from the editor tab? Or any hint to make this work?

rich zodiac
#

Any way to choose the amount of winners in a multi-raffle? as the random amount of winners isnt working for me

severe shell
ancient lynx
severe shell
ancient lynx
severe shell
ancient lynx
severe shell
tribal zenith
dreamy marsh
#

Hi, is there a way with custom elements to start a poll and get his result with js ?

mystic juniper
#

No integration with Twitch polls yet, but you can create your own

marsh urchin
#

Hello, I’m currently developing a custom follower progress bar widget. It uses an event listener to update when I gain new followers. While it’s functioning well, it currently requires me to manually update the follower count before each stream. I’m wondering if there’s a method to automatically sync the follower count in my custom widget, similar to how the follower count widget in StreamElements operates. Would this require direct access to the Twitch API, or is there a way to achieve this within the StreamElements platform? Any guidance would be greatly appreciated.

obtuse isle
marsh urchin
#

Thank you I'll look into that

meager bronze
#

I need help. My widget for ant legion is not working even if my viewers download and play the game. Can somebody assist me because I am running out of time for my campaign?

severe shell
uneven oxideBOT
#

@meager bronze ⤵️

If you need to fill out a support ticket, please use the command !ticket in chat, following the subject of your issue! For example, please type "!ticket My chatbot isn't working", and then follow the prompts from our bot!

naive sorrel
#

Hello. HelloWorld
I'm making a small widget and I have a couple of questions:

  1. Is it possible to make the widget stretch over the entire overlay? I'd like its size to be determined by the window size that is set in OBS.
  2. How do I share the widget with someone when I'm done with it?

Thanks in advance. 🙂

severe shell
naive sorrel
# severe shell 1. You can make the widget uses the entire overlay space. However, when added to...

Thanks for the link.
I know that resizing an element in OBS like that transforms the entire thing, but you can go into the properties and change the rendered window size by dimensions.
If, for example, I make the overlay 1920x1080, and scale the widget accordingly, and then set the window size to 800x600, will the widget still fit the window or will it exceed it?
I made a simple widget which scales the font in it based on its size, but for that to work it needs the dimensions of the container it's in to match. I want the streamer to be able to resize it to fit where they want to put it.

severe shell
pseudo socket
#

Hello all, is there a way to access the SE API from the overlay widget editor without having to do a new auth? Im trying to get the store redemptions

severe shell
pseudo socket
#

Wouldnt that make it accessible from the front end

#

I guess that doesnt matter if you dont share it

#

hmm

#

Thanks

naive sorrel
celest cypress
#

Hello,
is it possible to display the 3 Twitch subscribers who have been subscribed the longest time in a widget?

Greetings Tad

hardy walrus
#

99% sure that info isn't available.

#

Assuming you're referring to twitch.

celest cypress
junior bison
#

Hello when using jebaited.net's api to send messages into chat with stream elements it sometimes does not send any message, but other times it does. Is there a way to send messages more consistently?

var response = "some response";
const encodedMessage = encodeURIComponent(response);
fetch(`https://api.jebaited.net/botMsg/${jebaitedToken}/${encodedMessage}`);
hardy walrus
#

That may be something to ask @viral patrol as that's his stuff.

junior bison
#

is there another way of sending messages with the stream elements widget besides using the jebaited api?

severe shell
# junior bison Hello when using jebaited.net's api to send messages into chat with stream eleme...

Maybe the encoded message has something that is preventing it to be sent. Better to check which messages are not being sent to analyse each situation. Personally, I've never had issues with jebaited.net, except when the service went offline for some time (which can also happens).
Without the response, the message or anything, it would be impossible to know what is happening.

Another option is using the Streamelements API (https://dev.streamelements.com/docs/api-docs/1e22a4ed3ad16-channel-say), which jebaited.net uses or going to Twitch API directly (https://dev.twitch.tv/docs/api/reference/#send-chat-message).

#

Do you have any error in your fetch when the message is not sent?

junior bison
#

no errors, I put a console.log after the fetch and it prints

#

I'm making a task list so responses, would be based on what the user enters. for example "!task clean" should send out the message
"Task "+task.name+" added for "+username+"."
Where the task name is clean and the username is the user's display name

viral patrol
#

I think you can also send a JSON payload with post method. GET method was created to add possibility to invoke bot message by command on chat as well. I don't remember the actual structure of this call, I will look for it bit later.

bitter cobalt
#

Hi! I'm learning how to build twitch widgets through streamelements, I have prior coding experience (R and Python) but have been familiarising myself with HTML, CSS and JS recently! does anyone have any useful links to resources I can use to learn? So far I've just been practising by editing pre-existing widgets, but I would like to start building my own widget ideas from scratch

severe shell
# bitter cobalt Hi! I'm learning how to build twitch widgets through streamelements, I have prio...

Well, it depends, if you are using the Overlays Editor, the documentation is on https://dev.streamelements.com/docs/widgets/3cf52461e4e34-before-starting.
However, in case you are using Elements, you can go to https://dev.streamelements.com/docs/elements--sdk/9do3bhwlp2fdt-introduction.

Editing existing widgets available on #widget-share (in case you are using the Overlays editor) is a good way to start, I learned a lot from them. Anyway, in case you have questions about that, there are a lot of answers here in this channel.
If you need help on Elements, you can also go through #elements-editor-widgets20. As it is still in beta, the staff is very present in there and answering questions.

bitter cobalt
severe shell
bitter cobalt
viral patrol
# 
const sayMessage = (message) => {
  if (jebaitedAPIToken.length !== 24) return;
  fetch(`https://api.jebaited.net/botMsg/${jebaitedAPIToken}/`,
  {
    method: 'post',
    body: JSON.stringify({"message": message})
  })
    .catch(e => console.error(`Error sending message to chat`));
};
``` @junior bison
plucky halo
#

Hi there.

I've got a question regarding the streamelements api and how to manage banned phrases with it.

I've basically an excel spreadsheet that has two tabs with each one table, one containing all channel that I manage and a second one banned terms and generated regular expressions.

Those tables I then load into power query.

I've managed to get all banned phrases, but couldn't figure out how to manage existing, how to add missing ones to the group.

Maybe someone has got experience on doing that or has at least an example.

Thanks in advance.

Cheers.

proud spade
fading oxide
#

Does anyone know what the rate limit is on SE_API.store calls?

severe shell
lunar shuttle
#

Any ideas on this?

severe shell
rose sapphire
#

hello! I've got some code that reacts to bulk community gift subs and it is working as intended for me but some streamers in europe are experiencing different behavior there. Has there possibly been a change to the community gifts api?

lethal matrix
#

Hey there
Is it possible to read the data of the donations of a stream? The amount and the donator?
If yes: Where do I find that? The API is... well... not very intuitive and straight.

ancient lynx
ancient lynx
rose sapphire
# ancient lynx What seems to be the issue?

Events that should be filtered by checking the flags for community gift subs are still displaying, I.E. if theres a 100 gift sub its still playing all 100 individual alerts

lethal matrix
severe shell
# lethal matrix I am creating my own "credits roll". I already have all the data from twitch, li...

If the donations are made from Streamelements, you can use the tips/:channel endpoint:
https://dev.streamelements.com/docs/api-docs/704e5580be2d9-channel

Although it says all parameters are required, they aren't actually (except the channel, which is your account ID), it's just a bug on the request form. You can do the request on your application without using any parameters (again, the channel is the exception here)

knotty thorn
#

is there anyway to get the jwt token for a user from the api at all? instead of getting it from the dashboard 'show secrets' site

severe shell
knotty thorn
#

ok cool thanks - that should also apply for getting the activities feed too (with the activities:read scope)?

severe shell
knotty thorn
#

awesome thanks for that

severe shell
# knotty thorn awesome thanks for that

By the way, sorry, I mentioned about the tips scope, but it was because I was engaged in a conversation related to tips before and ended up mixing up everything. 🤦‍♂️
But the rest of the conversation is true

naive sorrel
#

Hello again. HelloWorld

#

(Oops, sent too early.)
I'm having trouble with an API call from a bot I wrote in the past, to add points to a user.
It used to work fine but now "suddenly" (been some months since I used it) it doesn't.
Seems like the API call is rejected over authorization but I don't understand why.
I copied the request sample from this page:
https://dev.streamelements.com/docs/api-docs/28b81292df03d-channel-user-amount
and I replaced the "123" in "Bearer 123" with my JWT token that I copied from this page:
https://streamelements.com/dashboard/account/channels
(Naturally, I also changed the parameters in the URL to match my channel.)

Doing so I get an error message saying:

{"statusCode":403,"error":"Forbidden","message":"Not allowed to perform this operation"}

What am I doing wrong here?

torpid sierra
#

Howdy boys! Is there a way to refresh the JWT programmatically? Some kind of endpoint I'm too dumb to see in the documentation?

I'm building a bot that needs to look at donos for a single user, so getting an application approved for OAUTH seems a bit messy

severe shell
torpid sierra
#

awww, man. Thanks for the news though!

#

I guess I can always use the expire date in it to set my calendar

#

🤣

severe shell
#

But depending on what your needs, you can use jebaited, that has already a oAuth and you just use the token provided that has no expiration

#

It was created by a SE staff

torpid sierra
#

The name scares me a bit, but I appreciate the pointer

#

will research now

severe shell
hardy walrus
#

Can't be any worse than mine doggo

worldly oxide
#

I have a few questions, since I know little to nothing about Java and JSON. I'm thinking of building some customizable widgets later on, and was wondering if it's possible to build pre made themes into the java switches? That way people can select a theme type first. Then maybe based on the theme, they'd be given certain modular fields to further customize the widget.

Is it possible? Or would it only be possible to show different themes, but not different fields based on a chosen theme in Stream Elements?

I was also thinking I could have some preset functions, and also offer the option to choose more advanced controls if desired

severe shell
# worldly oxide I have a few questions, since I know little to nothing about Java and JSON. I'm ...

I'm considering you meant Javascript and not Java. Also considering you are talking about Overlays Editor and not Elements.
But based on your idea, it would not be possible to do that, as the FIELDS on the left side are static and do not change based on the user choice.

In case you are talking about Elements editor, I think the best option would be asking in #elements-editor-widgets20 as it is in beta and staff are actively in that channel.

worldly oxide
# severe shell I'm considering you meant Javascript and not Java. Also considering you are talk...

Yes, Javascript. My bad, completely forgot Java is it's own separate thing.
I think I get what your saying, I still may be a little confused about.

Just to clarify, you mean that what ever exist in the fields generated. Are completely static, and can not display extra fields after selection. Just basic interactions?

Because I know in the fields, people can select custom fonts, ranges, and add custom sounds or images.

So are you saying they can't select potential presets? Like if I we're to exclude different looks. Can I at least set animation presets?

I'll also give that channel a look, I recently got back into things. So the elements editor is very new too me, and definitely seems like it could use some work...

Thanks!

severe shell
# worldly oxide Yes, Javascript. My bad, completely forgot Java is it's own separate thing. I t...

Just to clarify, you mean that what ever exist in the fields generated. Are completely static, and can not display extra fields after selection. Just basic interactions?
Exactly, you cannot hide or add new fields based on user choice.

So are you saying they can't select potential presets? Like if I we're to exclude different looks. Can I at least set animation presets?
Well, you can do whatever you want using Javascript. For example, you created a field called "preset" with options, "Alpha", "Beta" and "Gamma". Based on the choice, you can create new divs, make characters bigger, change color, create animations, change image... Everything at the same time using javascript, which can be a real preset. The only thing you cannot do (kinda) is creating a new field or removing them. You are not able to interact with the FIELDS tab.

worldly oxide
vital wadi
#

is there a way to add a custom field programatically, possibly through a button? click the button and it adds an extra image slot, something like that

severe shell
quartz talon
#

Hello! My elements isn't quite working? I clicked on setting and did Widget data but it gave me an error when the browser opened

vital wadi
next remnant
#

idk what happened to my old suggestion

#

I remember SE_API.store.set and SE_API.store.get

#

I wonder what happens if I use it to set a table

#

if I want to update the table I'd have to use SE_API.store.get before I use set 🤔

#

problematic

severe shell
next remnant
#

what if I store a {} though 🤔

#

and use get before set

severe shell
#

You can get the current value of the key and then update it with set.

next remnant
#

now what if two things try to do that at the same time 🤔

#

does get internally have a queue system?

severe shell
#

I remember that I had the same question some time ago and during my tests, it updated as expected. I did many requests at about the same time and one was done after the other, the results were fine.

next remnant
#

:O then maybe it does

#

all stores are unique to the current Overlay, right?

next remnant
severe shell
#

It is like a database

next remnant
#

then I have to choose a wise name if I want it to become a public available thing

severe shell
# next remnant then I have to choose a wise name if I want it to become a public available thin...

Yes, I recommend that you use something that has the name of the widget in it.
By the way, in case you want to check all the keys stored, you can do a get request to the endpoint, like below:

window.addEventListener('onWidgetLoad', async function (obj){
  const apiToken = obj.detail.channel.apiToken
  const id = obj.detail.channel.id

  // Get all the keys stored
  const seAPIFetch = await fetch(`https://kvstore.streamelements.com/v2/channel/${id}/customWidget`, {
    method: 'GET',
    headers: {
      'Accept': 'application/json',
      'Authorization': `apikey ${apiToken}`
    }
  })
  console.log(await seAPIFetch.json()) 
})
next remnant
#

oh

#

wait do those stores ever get reset?

severe shell
#

Nope, I have keys in there from years ago

#

You are not able to delete the keys, unfortunately, you can just set a blank value, but the key will be there "forever"

next remnant
#

oh that's good to know
also kinda bad to know
I actually inteded to use those stores for a temporary storage of data, only while the Overlay is active

#

🤷 I proposed a suggestion once for Custom Widgets. To add the ability to add something similar like "Variations" for the settings to it, which was approved. But that was years ago

still juniper
#

not being able to delete keys is something that appalled me back in the day when I found about it... Imagine tha amount of wasted storage

severe shell
next remnant
#

now I realize that this won't work out, unless I empty the table inside the store everytime
cuz if the user deletes one of the custom widget setting, you expect the value to be deleted as well from the store, but it won't because there's nothing that will delete it
sooo PepeThink

#

which set will run first

#

🤔 hmm

image.png
#

okay it's an array 🤔 but atleast it's multiple, that's a progress

image.png
#

now I just need that but for fields of fields

#

like a duplicateable version of groups

image.png
#

I forgot the name of the person that approved that thing once, but I am not sure, maybe I am mistaking something
back at when StreamElements used something where there was a light bulb icon

#

what's the point of SE_API.setField('key', 'value');

severe shell
next remnant
#

but it doesn't save?

severe shell
#

Nope, it works only while you are in the overlay editor, you need to save it after

next remnant
#

I found a link to the old suggestion, it was on helprace back then

#

It had a reply from "Bar M" saying that they'd have forwarded it to a team and marked it as Under Review. This was 2 years ago.
If i2896 is an ID, could it be that it was eventually stored somewhere else where it can be retrieved? Like a Trello or something?

severe shell
dim hound
#

What's the difference between goal and count in session?

lethal matrix
#

Hey there
How can I access the donators name and the donation-amount for my streamer.bot? Are there any variables that I can use?

proud spade
lethal matrix
proud spade
#

%tipAmount%, %tipCurrency%, and %tipUsername% are already variables in streamer.bot with the streamelements integration.

lethal matrix
proud spade
lethal matrix
proud spade
lethal matrix
#

And I am very sorry, if I bother you, I am just starting with all that stuff, and it's still a lot to learn for me.

proud spade
lethal matrix
slim matrix
#

Ok, I don't know if this is possible but is there a way to create a command that tracks calendar week math from a specific date.

Like say I wanted to track how many weeks old from Feb 2, 2024

severe shell
# slim matrix Ok, I don't know if this is possible but is there a way to create a command that...

I don't know any that would give the answer in weeks only. But this one tells the difference between two dates.
${customapi.https://decapi.me/misc/time-difference?first=02/02/2024&precision=2}
The response here would be 2 months, 2 weeks. You can adjust the precision to match your need if necessary, but I don't think it would have an option to calculate only in week period.

More info here:
https://docs.decapi.me/misc?endpoint=time-difference

DecAPI Docs

Documentation for the project DecAPI, a custom API provider intended for Twitch chatbots.

slim matrix
fossil violet
#

anyone here can help me with the counter
$(if $(getcount chicken) = 0)
"No chicken today, we are fasting FeelsRainMan !"
$(endif)
$(if $(getcount chicken) > 0)
"We ate $(getcount chicken) 🐔."
$(endif)
its showing whole this in chat 0 - "No chicken today, we are fasting FeelsRainMan !"$(endif)0- "We ate 0 🐔."
plz
help

severe shell
fossil violet
#

there is way

#

to do that with elemets onlly

severe shell
fossil violet
potent halo
#

chat lines seems a bit high, doesn't it?

still juniper
#

it could be worse (I don't know what kind of chat SE staff usually sees...)

image.png
#

being serious though, it's kinda hard to use the slider to set a sane value with that crazy range

potent halo
burnt yoke
#

OK y'all, help me if you can. My logic on this is sound and I know it, but for some reason it will only work every other time the event fires.

I have a single custom widget added to an overlay with the following JS added to it.

const regex = /\s+/i;

window.addEventListener('onEventReceived', function (obj) {
      console.log("event fired");
  
    if (!obj.detail.event) {
      return;
    }
  
      const listener = obj.detail.listener.split("-")[0];
    const event = obj.detail.event;
      const badges = event.data.tags.badges;

     if (listener === 'message' && event.data.text.startsWith("!")) {
      console.log("command caught");
      let cmd = event.data.text.toLowerCase().replace(regex, '');
      
       console.log(cmd);
        
        switch (cmd) {
          case '!brb':
            console.log("Trigger BRB");
            break;
          case '!ss':
            console.log("Trigger SS")
            break;
          default:
        }
      
      if(badges.includes("broadcaster") || badges.includes("moderator")) {
        
      }
    }
});

/*window.addEventListener('onWidgetLoad', function (obj) {
    
});*/

Whenever I spam !brb in chat you can see the console logs in screen shot provided where it shows Trigger BRB only fires every other time.

image.png
still juniper
#

my bet is you're using 7TV and while spamming they're effectively adding an "invisible" zero width character to the string, so even though it seems you're sending brb you're sending brbsomethingelsehere (they do this to avoid the unique chat feature of Twitch)

burnt yoke
severe shell
burnt yoke
still juniper
#

honestly I don't know what exact character they use for that since I don't use 7TV and I don't waste my time trimming it. Bear in mind that it only adds the character if you've previously send the same message, so in normal conditions your current logic should be fine - if the command isn't getting triggered is because the user who typed it already typed it just before

#

for developing just disable 7TV and you'll be fine (it might even be a configurable option inside the extension, I don't really know)

grim rover
#

Hello, I'm trying to create a custom event and I've seen in previous messages that I need to send a POST request to

https://api.streamelements.com/kappa/v2/channels/[user-id]/socket

but I'm getting this error:

<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Error</title>
</head>

<body>
    <pre>Cannot POST /kappa/v3/channels/[user-id]/socket%20</pre>
</body>

</html>```
The JWT token is good; I tested it by making a `GET` request on `channels/me` and I got a complete JSON response.

Can you  help me please? Thank you and have a nice day !
severe shell
grim rover
#

Ahahah it's just the space omg, thank you...

burnt yoke
umbral ivy
#

Does anyone know how long it takes for JWT tokens to expire?

proud spade
umbral ivy
#

Oh alright, not bad

#

thanks!

#

And you should be able to use JWT tokens to connect to the socket io stuff right?

severe shell
#

Yes

umbral ivy
#

hm, im getting an unauthorised error not sure whats causing it :(

# 
private final Emitter.Listener onConnect = args -> {
        JSONObject data = new JSONObject();
        try {
            data.put("method", "jwt");
            data.put("token", jwt);
            socket.emit("authenticate", data);
        } catch (JSONException e) {
            e.printStackTrace();
        }
        System.out.println("Successfully connected to the websocket");
    };```
#

Oh I figured it out I think, nevermindddd

#

was an unrelated issue

#

(the jwt token was incorrectly being passed)

crisp tendon
#

my alerts arnt working on obs from stream elements what do i do

ancient lynx
#

Hey, anyone know if there's a way to catch twitch point redeems using SE overlay?

severe shell
ancient lynx
strong falcon
#

I have an unusual case. Im using AlertBox with custom code JavaScript, and without going into details:
Im using AI Voices from ElevenLabs and my Alert end before AI Audio Voice ends, So there is an option to terminate the alert after the Audio AI has finished? The built-in TTS option does exactly that.

#

im tried enable tts and turning volume to 0% to play ai voice and tts synchronously to finish alert at the same time but it does not work at well

#

im mean, ai generated voice have 1-5 seconds delay (depends on the length of the text)

#

Is there anyone who can help?

#

(if anyone asked: its just a elevenlabs api for generate ai voice)

pale lotus
#

hey, i feel a bit stupid but i cant seem to find it. i am connecting to the SE websockets, i am connected fine, i am authorized etc. i have handlers for the message types event, event:update and event:test. when i'm in the overlay editor and click emulate, i can see it happening in the widget. but the websocket stays silent. Am i missing a button somewhere to emulate events independant of the widget?

pale lotus
#

oh nevermind. i'm receiving the messages, but the socketio library was dropping it because its invalid json

sturdy steeple
#

hey guys, can i use customapi with queryescape ?

severe shell
sturdy steeple
#

😦

#

$(customapi.Adress$(queryencode$(1:))/moreaddress ?

severe shell
sturdy steeple
#

queryencode doesnt work well lol

#

pathescape.. ill can try

severe shell
#

Maybe because it is queryescape and not queryencode...

sturdy steeple
#

oh ehh

#

ill try, thanks

#

he dont take the things after "/"

#

like "/the/other/things" isnt with the request

#

so, no one of the 2 works atm

#

ok, well, was my mistake xD set the ) at the wrong place

#

@severe shell do u know a free api that gives time by city name ?

severe shell
sturdy steeple
#

yea, i found more than 10 apis

#

but all with .."10 free api calls" xD

#

or get a subscription for more than 10000 api calls

#

ill take a look, maybe i find a solution

inner jackal
#

Hello, had a question asked at community-helpdesk. The final answer advised me to ask again here at dev-chat. Now this is the short conversation, copied and pasted:

hello, i have a question about the widget data/session data. In times of the old widget editor it was not possible to receive any data, that would lower the total amount of subscribers, a streamer has, during an active stream. For example, lets say a streamer loses 300 subs while live, because of subscribers didn't renew there subscription, then there was no way to show this lose of subs in any kind of alert/widget on a realtime base. I hope my request is not to confusing, as my english is not the best. So is there, todays, a way to get this live data  shown up?```
```TheSemicolons:
There is not
Twitch doesn't make that data available that I am aware of.```
```Me:
you may remember the total sub counter that was chosable oob. This one had this ability, what confused me all the time.```
```TheSemicolons:
Add Widget -> Labels -> Subscribers -> Total & All Time -> Total Subscribers
I think that's the only one that does it.```
```Me:
exactly. This made me belive that there had to be a way.```
```TheSemicolons:
It would probably be a custom widget, I would ask in ⁠dev-chat to see if someone knows.```

Thanks in advance.
severe shell
# inner jackal Hello, had a question asked at community-helpdesk. The final answer advised me t...

That information is not requested in real time, because Twitch doesn't send a notification when a subscription expires. It is requested from SE in an interval period (maybe once every time the stream is started). What (I believe) is done is that SE requests the information to Twitch API, store it, and for each new subscription (that is shared on chat), is added to the counter.

If you need to have it in real time (or close to that), you will need to request periodically to Twitch API to get the "totals" value
https://dev.twitch.tv/docs/api/reference/#get-broadcaster-subscriptions
Or maybe you can force resetting the SE session from time to time, so the data will be re-fetched... But that resets session data counters as well, which I wouldn't recommend. https://streamelements.com/dashboard/session/totals

inner jackal
severe shell
inner jackal
strong falcon
#

Why does my JWT token change every day? Is there an option to make it permanent?

hardy walrus
#

It does not change every day but it unfortunately is not permanent.

My understanding is there is a 30 day period for them.

strong falcon
#

My JWT token changed after just 2 days

pulsar willow
#

hi im in development mode and
im not quite sure what this means, i have obs app open(?)
updated obs and made teh browser source have full access...
changed my browser to firefox from edge
ive also tried installing SE.Live

tried referring to Reboot0's earlier message about window.obsstudio being undefined in normal browsers so i tried looking around in the browsers security/perms? cant find anything-- thank you for reading

image.png
severe shell
severe shell
# pulsar willow hi im in development mode and im not quite sure what this means, i have obs app ...

That just means when the browser source is not active (or not on focus), the alerts will not appear. That happens on the web browser as well, not something to be worried.
For example, if you open your overlay on the website and run an alert, it will run normally. However, if you minimize the overlay page and try to run the alert, it won't. That's good to avoid running alerts in many browser sources at the same time, even when you don't have it active.

pulsar willow
#

Thank you so much for your insight Prayge

dry anvil
#

im trying to make a custom euromilhoes in one of my streams, but i cant really make any good or find any good ways of rolling a d50
Does by any chance anyone knows like some software of streamelements widget that can do something like that or similar (it needs to be able to roll some kind of d50 and d12)

have you ever seen the euromilhoes? theres like that wheel with all the 50 balls in there, i just want to like make something similar or just roll a d50 not sure how to make the art for it, i know i can make ${random.number 1-50}

severe shell
dry anvil
strong falcon
#

StreamElements change something now? Because when i emulate an alert respond look diffrent

image.png
#

This is the first time ive seen it

image.png
tribal zenith
#

what do you think has changed?

strong falcon
#

Build of this object

#

I imported the new Marathon Timer and it also didn't work

#

Every my widget now not working

tribal zenith
#

emulated events are always different from real events and mix fields

#

just the crucial ones exist, like type = tip, name, amount, message

strong falcon
#

And still, even new imported Marathon Timer didnt work

tribal zenith
#

where did you install that widget from?

severe shell
strong falcon
#

Oh my, you’re right

#

Thanks a lot, I haven’t noticed that

tribal zenith
#

the other test event shouldn't break your widget tho, if the core checks are correct PepeThink

vital wadi
#

I've made a widget and I want to use loyalty points as rewards. Looking around the api docs, ive seen its possible to 'addPoints' but im a bit confused on how to connect. I donwloaded the loyalty leaderboard widget in widget-share to look at the code but it keeps returning 404 error. Do i need this Jebated thing? access token? JWT token? How do I connect to the api to get and set loyalty points?

severe shell
uncut sandal
#

hey, so I was looking around the SE dev reference and I was trying to figure out if any of the message event data would indicate a first time chatter?

#

I'm thinking that maybe the "flags"key could indicate something but wanted to check if any of the devs know already

severe shell
# uncut sandal I'm thinking that maybe the ```"flags"```key could indicate something but wanted...

There is a key called first-msg when it is the first message. The same for returning-chatter (new viewers who have chatted at least twice in the last 30 days.). In case they are not present, means that is not the first message nor a returning-chatter.
It is on obj.detail.event.data.tags

{
  "detail": {
    "event": {
      "data": {
        "badges": [
        ],
        "channel": "c4ldas",
        "displayColor": "",
        "displayName": "caldas13",
        "emotes": [
        ],
        "isAction": false,
        "msgId": "REDACTED",
        "nick": "caldas13",
        "tags": {
          "badge-info": "",
          "badges": "",
          "client-nonce": "REDACTED",
          "color": "",
          "display-name": "caldas13",
          "emotes": "",
          "first-msg": "1",  // HERE IS THE FIRST MESSAGE
          "flags": "",
          "id": "REDACTED",
          "mod": "0",
          "returning-chatter": "0", // HERE IS THE RETURNING CHATTER
          "room-id": "28057703",
          "subscriber": "0",
          "tmi-sent-ts": "1714625786850",
          "turbo": "0",
          "user-id": "REDACTED",
          "user-type": ""
        },
        "text": "Hi!",
        "time": 1714625786669,
        "userId": "29220391"
      },
      "renderedText": "Hi!",
      "service": "twitch"
    },
    "listener": "message"
  }
}
uncut sandal
#

wooo thanks!

#

that is really helpful!

vital wadi
vital wadi
severe shell
severe shell
native lava
#

Hey, I was wondering if it's possible to import browser sources (plain text with some CSS already applied) into the overlay with a custom widget.
My use case specifically is importing RTIRL GPS metrics for an easy way to adjust them on my streamer's overlay.

hardy walrus
native lava
hardy walrus
#

oh

#

I see your message got yeeted by the bot but it actually mentions that one on the editor page

native lava
#

Yeah, I included the link. One sec, typing again.

hardy walrus
#

actually lemme whitelist the link.

#

Not sure if the editor one or github was reason

severe shell
#

I believe it was the editor url... I think github is in allowlist

hardy walrus
#

Yeah. Just added it to whitelist.

native lava
#

I think I figured it out. HYPERS

On the RTIRL GitHub, there are instructions on how to do it. You import it via an iframe in HTML:

src="<YOUR METRICS URL GOES HERE>"> 
</iframe>```

Then you put your desired metrics URL, found on the GitHub, after `src=` with your own pull key that you get from the RTIRL overlay editor. 
Example: `src="https://overlays.rtirl.com/speed/kph.html?key=<YOUR_PULL_KEY>"`
This is raw data without any CSS, so I assume it can be styled in the StreamElements overlay editor.
obtuse isle
#

Hey @viral patrol sorry for the ping but is jebaited api working correctly? I am trying to use it for getActivities but I am getting cors errors in my face while trying ot use it in overlay.

Error is:
"URL HERE" from origin 'null' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

native lava
#

Can anybody confirm that external browser sources just aren't possible to import into the SE overlay editor?

hardy walrus
#

Correct

viral patrol
obtuse isle
obtuse isle
#

Wait I realized I am stupid... I left the authorizartion header from the "default" request and it was messing with it.

gritty jetty
#

idk if this is the right chat but for the hype type in elements, how do i choose between the different effects? Is there a template gallery and can i make my own with css, its using lottie right??
i just realised that there is an elements channel, im going to post it there

worldly oxide
#

Anyone here familiar with how SE has their Lottie widget update the text?
I currently have my own Lottie animation that I'm trying to just update the text locally for a niche thing.

I looked at the Github and it's a bit to digest right now. Especially since it updates multiple things and I just wanna know how to update just the text.

I was able to use some JS earlier on a simple html element, and update that. But I now wanna update something exported from AE

median spade
#

Hello, chatbot question! I was looking for a way to make a sort of !first command that rewards the first person doing it during a stream with a fix amount of points. I was wondering how to use the !addpoints automatically to reward the user using the command.
I was informed that maybe I need some API and had to ask in this channel

severe shell
severe shell
worldly oxide
# severe shell Which Lottie widget are you referring to exactly? I went to SE github page and c...

I'm currently on mobile, but I'm referring to these two Lottie alerts. There's a link to their respective GitHub docs and SDKs on the page

https://widgets.streamelements.com/element/hype-type-lottie-only

https://widgets.streamelements.com/element/hype-type-lottie

Last night I added some variables to the json based on a Lottie tutorial. Which vaguely covered the idea of how to utilize them.

Obviously someone with a better understanding of JS would know how to execute it. But I'm still stuck on what I need to do to properly target it.

Also the developer of Body Movin has mentioned a few ways to do it as well, but I feel like something's a little different file wise.

So I'm sort of stuck

worldly oxide
#

A quick little update for reference.
I just found the codepen again for updatable text from the developer of Body Movin.

https://codepen.io/airnan/pen/ZLVJmq

var text1 = "Bouncing text";
var text2 = "Scale in text";
var text3 = "Wipe to center";
var text4 = "Jump in text";
var text5 = "Mixed animation text";

//Updating Animation data with text values before loading
//This is the hard part since there is not an official API yet to edit values, you need to find them by hand.
//Documentation on the exported json data can help
//https://github.com/bodymovin/bodymovin/tree/master/docs/json
text_demo_data.layers[0].t.d.k[0].s.t = text1;
text_demo_data.layers[1].t.d.k[0].s.t = text2;
text_demo_data.layers[2].t.d.k[0].s.t = text3;
text_demo_data.layers[3].t.d.k[0].s.t = text4;
text_demo_data.layers[4].t.d.k[0].s.t = tex

I'm just not sure how to tell the variable to be updated and how to discover the specific layer.

severe shell
worldly oxide
quasi charm
#

So I had to get an up-to-date JWT token yesterday for my Twitch bot because it didn't want to connect anymore.
I have to do it again today.
What gives?

#

Heading to the StreamElements dashboard and getting the new JWT token, then decoding it on a website gives me an exp (expires) field with 1717608171, which translates to 7:22pm gmt+2 (so literally in 4 hours) in a month, but I had to get a new token 2 days in a row, so something messed up there

restive timber
#

Sup

quasi charm
#

I logged out and back in on the website and now it gives me a token that's valid for another month. Cool. Still not enough.

#

The main issue is that sometimes I am required to login again on the website, which then invalidates the JWT token again.

#

Can't we please get a separate token that either has a custom expiry time or just expires in, say, a year, and isn't affected by logging out and back in?

hardy walrus
#

I'm poking someone elsewhere about this.

#

You're the 2nd person in the last week or so to mention it dropping from a month to a day or so.

quasi charm
#

I really don't know why it happens but I have to put in the token every other day in my bot 😦

vital wadi
#

I have a crane game widget that picks up little characters, if you pick up a rare character I want to be able to give that chatter a special badge for the rest of the stream. Is that possible? to add a badge to someone when my widget doesn't handle the message/chat system?

royal ridge
#

I submitted a widget for publishing but I did a lot of polishing and updates since then, is there a way to submit an update for review?

paper flax
severe shell
# royal ridge I submitted a widget for publishing but I did a lot of polishing and updates sin...

I've just seen you submitted it using the Overlay Editor. Unfortunately, that is not available to publish anymore, the staff told me there is a plan of creating a forum here in the server where people could share their creations, we just need to wait.

You can submit your widgets using Elements Editor, but you maybe need some time to learn a bit more on how to use it (as it is completely different from the Overlay Editor). Documentation here:
https://dev.streamelements.com/docs/elements--sdk/

severe shell
vestal wolf
#

Been having some issues here as well, that might be the cause?

#

Same thing happened to my friend when he tried it on his SE account

warm meteor
#

Goood Afternoon, im a very big noob at this stuff. Im trying to make a custom giveaway bot where people can see their names on screen, and their giveaway "tokens" fall into the bitcup. .
my current progress is i made a custom overlay in the overlay editor that has the giveaway as layer 1, layer 2 is a custom widget that lists followers/etc and im trying to change that to show "ticket entries" but dont know how to code. Layer 3 = cup that im trying to setup to do the same.

MY current issue is when the giveaway is reset/turned off the background image/giveaway information vanishes. trying to get that to stay on the screen as well

PS: if theirs a better way to go about this please let me know, i have not found anything about this yet.
any help is greatly appreciated!
Deathz ❤️

royal ridge
hardy walrus
#

The overlay editor is more or less in "maintenance" mode as the primary focus is on Elements.

lofty wigeon
#

Can the API have the bot trigger a store redemption? I have a command !redeemvideo that will do it when a person types that in, however, when the bot sends that same command to chat, the redeem doesn't happen / video does not play (I understand this is to prevent infinite looping).

Is there an API command that doesn't use the chat command but instead just redeems the store video without having to say anything in chat. I see items in the API docs for adding new store items or deleting them, but nothing about executing the actual redeem to trigger the video.

image.png
#

TLDR: Looking for API endpoint that lets the bot redeem a store item.

severe shell
lofty wigeon
#

oooo thank you!! ❤️

lofty wigeon
#

okies, following up for executing the call. Is the $item the name of the store item that I type in or is it a different behind the scenes item id that I need to poll the API for?

image.png image.png
severe shell
lofty wigeon
#

Okay, got the id. The video isn't being popped out but I will error check on my side of things for bad body or whatnot. Have to debug things. Big thanks for that URL 🙂

#

Success! Just posting for anyone else searching here: Store Redemptions via API:

I ended up removing the $payload and the setopt for $payload. Video played as expected. Thank you so much for the help!

image.png
pallid elm
#

hello, I would like to know how I could make a bar goal that works with a percentage system and that increases when there is a new sub (t1, t2, t3, prime), sub gift and bits,

severe shell
shut turtle
#

Hey guys, I see on the dev documentation that external libraries can be used. How can I import those in the JS files?

potent halo
shut turtle
#

So is there no need to run npm install or anything?

potent halo
#

You can think of widgets as (somewhat) static html pages

#

So yeah no npm

oak plank
#

why does not it work?
donationalerts widget

screenshot_14641.png
oak plank
severe shell
oak plank
#

no

severe shell
#

Yes, they are, it's not a question. Iframes are blocked in Streamelements overlays

oak plank
#

I checked, they work on other widgets, other sites - work

image.png
severe shell
#

So it's donationalerts that are blocking

oak plank
#

What's a way to display notifications from other platforms without making a bunch of links to widgets?

severe shell
oak plank
#

thank you
in which section can you connect the API inside the Custom HTML widget?

image.png
severe shell
oak plank
strong falcon
#

Is there an option to get a top tippers list in custom widget? I want to make a custom top tippers list

severe shell
strong falcon
#

This api call gives me different results from my current list of top tippers in the dashboard

severe shell
strong falcon
#

Oh no sorry, i mean i have diffrent results in /:channel/leaderboard, so diffrent call. Ok last question, when i try to call this /:channel/top and i get an error 401, is it because i am moderator and have someone else jwt token?

#

Because im developing someone else overlay

severe shell
strong falcon
#

Omg thank you!!!

#

I used my jwt token and it works

oak plank
#

when will this feature start working?
so that donations can be approved manually in the Pending Tips panel

image.png
severe shell
oak plank
#

I hope they see and correct the error, thank you

image.png
severe shell
uneven oxideBOT
#

@oak plank ⤵️

If you need to fill out a support ticket, please use the command !ticket in chat, following the subject of your issue! For example, please type "!ticket My chatbot isn't working", and then follow the prompts from our bot!

vital wadi
#

I have a game widget and I want to save high scores, I can use the SE_API to store values, correct? Also, this may sound really dumb but I think it's why I got so confused, because I've asked a similar question before and everyone told me use 'store'. The 'store' in "kvstore:update - Update of SE_API store value" is about storing/saving a value? like a database? it's not the 'store' where you sell merch? I'm an idiot, but I think I understand now, but I just want to double check

hardy walrus
#

The latter I can definitely answer: No.

Merch is its own entirely separate thing and while you can retrieve that data from the API (I think) there's no correlation between it and your aforementioned bit.

severe shell
# vital wadi I have a game widget and I want to save high scores, I can use the SE_API to sto...

Yeah, there are two types of "store".
One is the store page, where viewers can redeem things using Loyalty points (https://streamelements.com/USERNAME/store).

The other one is the SE_API.store function in custom widgets, where it is exactly what you said, a database to store and get key/values. I think this post can give you a good example on how it works:
#dev-chat message

StreamElements
StreamElements - The ultimate tools for live streaming

The Ultimate All in One Platform for Streamers

vital wadi
glacial panther
#

I'm trying to use POST /tips route with my OAuth client but it's not working. Here's the request to get the access token, successfully returning it along with the correct scopes:

CleanShot_2024-05-12_at_23.48.062x.png
#

Then when I try to use the access_token provided in the POST /tips route, I get 401 "Not allowed to perform this operation".

#

Nevermind. Just figured out I needed to pass header Authorization OAuth instead of Bearer. Docs need an update.

steep pasture
#

Hi Streamelements devs, i raised this regexes issue 3 months ago, any timeline on a fix? we really need regexes on a channel, they are getting spammed with follower bot advertisement

severe shell
uneven oxideBOT
#

@steep pasture ⤵️

If you need to fill out a support ticket, please use the command !ticket in chat, following the subject of your issue! For example, please type "!ticket My chatbot isn't working", and then follow the prompts from our bot!

steep pasture
spice hearth
#

Hi developers, I just created a custom widget. I saw that there is a way to create a share link that adds the widget to the streamelements widgets list. Can anyone tell me how to create that link?

hardy walrus
#

Did you make it using the overlay editor or with elements?

spice hearth
#

Overlay editor

hardy walrus
spice hearth
pulsar willow
# 
fetch('https://api.streamelements.com/kappa/v2/channels/' + obj.detail.channel.id + '/').then(response => response.json()).then((profile) => {
        provider = profile.provider;
    });

If I'm not wrong, this is technically what's talking to Twitch right? and if I want it to talk to Youtube, I just fit it with this HTTP request?

GET https://www.googleapis.com/youtube/v3/liveChat/messages

severe shell
quick sequoia
severe shell
quick sequoia
quick sequoia
severe shell
shut turtle
#

Is there a reason a lot of people primarily put their widget elements programmatically in js? I.e, they add divs and everything through javascript including classes and the html is basically empty from examples I've seen

severe shell
uncut sandal
uncut sandal
#

Does anyone know if its possible to listen for Twitch point redeems in widgets? Like if there is a "redeem" event provided by the streamelements overlay API?

hardy walrus
#

We do not have any integration with twitch channelnpoint redemptions.

#

HOWEVER...

#

There is one widget in #widget-share that works with them but only with ones requiring text input.

uncut sandal
#

ah I see

#

thanks!!

#

time to pull out the third party boths BFNWVSJA

#

I assume that one in widget share works something along the lines of making use of the msg-id tag returned by the twitch API huh..

hardy walrus
#

Since it's a custom user submitted one you can look at the code to see what's done but beyond that I unno nothing DerpDogPaola

uncut sandal
#

oh yar I plan on doing that! I'm just on my mobile right now haha

hardy walrus
#

@uncut sandal I have a gift. I'm on mobile as well so it'll be a few with copying between apps DerpDogPaola

uncut sandal
#

a?

#

LOL?

hardy walrus
#

Actually disregard.

My copy grabbed a bunch of junk and editing that out is more of a PITA than reading it on mobile >.<

uncut sandal
#

AHAHA

#

its alls good I was just brainrotting before bed fjnevr

#

I was going to check it out when I got to a bigger screen

severe shell
uncut sandal
#

that's so cool!! excitedcat

#

I've got to check it out

quick sequoia
#

I guys, again, im in a trouble right now, i want check the information give by the event i triger in this case is a message event, and i want see the information of the event but doesnt appear that, just a warning: "app.js:397 editor mode: will not report widget channel event: visible" I dont know what to do, im just wanna check when is the first message and see the property. SOS, and thanks you again guys

severe shell
quick sequoia
severe shell
# quick sequoia Says its not defined

Ok, I should have explained it better, my bad.
Click on "Custom Widget 1", then click on Settings and go to OPEN EDITOR. Inside the editor, you should have tabs, click on JS tab

You should see a line with something like:

window.addEventListener('onEventReceived', async function (obj){

Right below that line, type:

console.log(obj)

Click on Done and type a message on your chat.
The obj details should appear on your browser console.

quick sequoia
#

Thanks you very much bro, again haha

gritty imp
#

i can't get the api to work at all. it just keeps saying forbidden. is there something i'm missing? i'm using the jwtbearer from the dashboard as the token. channelID from a converter it looks like 209489922 and then accept is application/json

severe shell
gritty imp
#

see i thought maybe that's it but then i thought. why would they call it channel ID if they wanted the account ID. okay well thanks let me try that

severe shell
gritty imp
#

yeap okay well there we go that works lol. spent like an hour doing tests. thanks appreciate it!

wise pollen
#

just curious, is this dev chat related to any dev topics or only topics related to se.live?

severe shell
knotty thorn
#

hello, i know SE has their Elements SDK, do they have an Overlay SDK at all?

potent halo
hardy walrus
knotty thorn
#

cool, thanks

pulsar willow
#

how can i add Gift-Subs without Repeating the Alert 5 times if someone Gifts 5 subs ?

image.png
severe shell
next helm
#

Heya all 🙂

Has anyone else had problems with pathscape not converting "&" in a message string and leaving it intact in the URL so that the receiving server thinks it's the start of a new variable instead of part of the string ?

Is there any way around it please ?

Many thanks

severe shell
next helm
severe shell
#

pathescape is used when you want use the text as part of the url path.
queryescape is for a situation that you need to convert symbols to url encoding format.

next helm
#

So just out of interest, what WOULD you use pathescape for and not queryescape ?

severe shell
# next helm So just out of interest, what WOULD you use pathescape for and not queryescape ?

Pathescape don't convert strings that are used in URL parameters, like &, ?, #, =, @, /, + (among others) because they are part of the URL.
Queryescape will convert any symbol to the respective url encoded format because they will treat them as a single word (basically).

Pathescape can be used when you need to send some data to a server to process the parameters sent. From the screenshot, the first example would send the values to the server to process, like below:
value: 10
newitem: true
font: lucida

The second example, the server would just receive value%3D10%26newitem%3Dtrue%26font%3Dlucida like a single word. Depending on what the server is expecting, it won't be able to process that.

next helm
paper flax
#

So why is it that every time you log in on the streamelements site it resets the JWT token?

severe shell
paper flax
#

hmm, it feels like it does, and 30 days seems awful short, i feel like it wasnt always like this

severe shell
paper flax
#

ok that explains things, its a hassle to have to remember to change things all the time :/

severe shell
paper flax
#

oh, thats an idea, i know i have some before then as well

tribal obsidian
#

is there really no way to refresh the jwt token from the application's end?

severe shell
tribal obsidian
#

wild

#

you think there are any plans to add one or is OAuth just how it's gonna be?

severe shell
#

And even with oAuth, we don't have access to all endpoints

tribal obsidian
#

actually wild, i guess im just gonna have to implement it all based on twitch's api directly then

dark blaze
#

Does anyone here know how I can get my AlertBox not to be triggered for specific 7€ donations? So only 1€-6,99€ & 7,01€-Infinite? Because there is only a minimum amount but not a maximum amount option

severe shell
dark blaze
pulsar willow
#

Oh man, don't be as dumb as I am---

I've been scratching my head for days over console logs in editor mode but I really cannot trigger the eventListener for Youtube after rewriting code again and again

Turns out the widget I was editing was on my Twitch account instead of my Youtube account

silk pebble
#

Hi there. Anyone know of a way to have ${random.chatter} (or other method) return an active Twitch chatter and not just any person in the chat list? Thanks 🙂

proud spade
silk pebble
static elbow
#

how to i set the stream up ? i have everything but when i turn stream on i just get a black background, im on pc just wanted to know how to stream off my monitor

swift bear
#

Hi, I'm creating a custom widget for subscriptions and I can't find a way to make it so that when I click session data > Data display settings > goals > subscription goal progress, I enter a number of subscriptions and save changes but the quantity is not updated. Could someone provide me with the code to make it work?
**edit: and reset objectives I can't get it to work either

Captura_de_pantalla_2024-05-21_225745.png
prime tapir
#

I just switched to OAuth2 and the store:read scope doesn't work KEKWait
Looks like it's been an issue for 2 years 🫢
Going to raise this with support@streamelements.com, but if someone already has a ticket for this, lmk

severe shell
spring sparrow
#

i have an issue in my donations list which is the top tipper became a an app-test donations so the question is how can i remove the toptipper test

proud spade
quick sequoia
#

Guys sorry i have a question, that never happend to me. I have made to comments, if you see there is a div with a class named "triangle" and other named "border-message". Well seems like in the HTML exist but when i check on them is actually the element in the first message, the strange part is i have to "triangle" tags and actually shares one element. At least visually, i dont know why happens this

image.png
#

Even the values in the class are the same but marks the first triangle in the first message

image.png
#

Sorry guys you gonna heat me

#

I think i found why this happen

#

I solve it. I was forgetting to do a position relative 🥺 sorry guys

image.png
#

I mounted a circus just for a dumb error XD

shut turtle
potent halo
#

Read the docs for more info on fields if needed

steep pasture
#

Hi everybody, is it possible to construct an api link like this:
'elex420, $(customapi.api_link/api/get_player_stats?player_name=${1}y&match=5700)'
where I call the $(1) with !anystats name?

hardy walrus
#

To copy your original question:

!commandname username theoretically should work with this but only if it returns a singular line like this and not a full json response. $(customapi.https://7957-2a02-810a-9640-14fc-d98d-58ec-7b9b-dda2.ngrok-free.app/api/get_player_stats?player_name=${1}y&match=5700)

Screenshot_20240522_134544_Chrome.png
steep pasture
#

It should work then because using GET on the api returns a variable of type string PepeThink

hardy walrus
#

I say that bit specifically like that as we can't parse json responses and would need to be done serverside.

#

But as long as the response is shown the same as my image then you're g2g.

potent halo
#

Or to be a bit more verbose "html plaintext". No html tag no nothing

hardy walrus
#

Yeah. That thingie DerpDogPaola

steep pasture
#

The thing is when I preset the player name (e.g. '...?player_name=player1') it works

#

I just can't make the player a choice through the command

#

Sorry btw for poor formatting, I am on mobile

hardy walrus
#

Could you give me a username that should work? I tried using the one you sorta used in your question above but got this

image.png
#

And used the exact link from my post above.

steep pasture
#

Try Alliance_Unlucky for example

hardy walrus
#

Same response as well

potent halo
hardy walrus
#

Oh

#

That fixed it for me

Screenshot_20240522_154703_Chrome.png
#

@steep pasture Use this and it should work as intended from what it seems. You oopsed a letter in the link.

#

$(customapi.https://7957-2a02-810a-9640-14fc-d98d-58ec-7b9b-dda2.ngrok-free.app/api/get_player_stats?player_name=${1}&match=5700)

steep pasture
#

I just figured this one out dude

#

Damn I feel stupid, time for bed I guess

#

Thanks for the help anyways

potent halo
#

bad? OMEGALUL

steep pasture
#

Sleep

potent halo
#

jup time for bad :)

dark blaze
#

Hey I have to ask for another help. I want to use a Widget 2 on my IRL Server and on my Alert Box Smartphone. It's a Spin the Wheel Widget which works perfectly fine, but if I use it like that, it's playing 1 seperate spin for every integration. So 1 spin on my smartphone and 1 spin on my IRL Server with different results. I want to have the video from the overlay on my Server and the Audio from the overlay on my Alert Box Smartphone. Is there any way to handle this? Maybe get the audio from the obs server into my smartphone or telling the Widget to do the same spin with same results for both integrations?

severe shell
devout axle
#

Hi ! I want to see if i can disable a widget on an overlay with an API call. Can i do that using a PATCH or a PUT on the endpoint https://api.streamelements.com/kappa/v2 /overlays/{channel}/{overlayId} and replacing the "visible" value ? And if possible, do i need to reload aswell the overlay or is it done automatically ?

severe shell
devout axle
lost isle
#

So Streamelements can tell me who received a YouTube Membership Gift. Am I an idiot? I can't find that in my youtube analytics!

solar swallow
hard lance
#

👋 I am stuck and in need of some helpful advice, I understand streamelements has a new feature regarding subathon timers ect. I was wondering if anyone could please refer me to some information on whether the widgets available, are capable of being used/with/in conjunction with the Streamelements mobile alerts for IRL streaming ❤️ from a mobile device. so far all I have found is subathon timers for OBS browsers sources not for the streamelements IRL app I currently use ❤️ thank you all I look forward to hearing from y'all

desert topaz
#

Türk arkadaş varmı oynamak isteyen

brave tulip
#

Hey, my overlays are not loading... nothing is loading even the website, what could be the problem?

severe shell
devout axle
severe shell
devout axle
spice hearth
#

Hello! I have a question. I'm pretty sure it is not possible to do but... Is it possible to write from code a settings field? I want to create a custom widget that needs an oauth login and I want to save the token in a field

potent halo
#

Nvm I guess storing in a field might actually be safer. SE Store can be accessed by other overlays on an account.

#

Gimme a second. I'll search my old code for that

#

So this stores the value of myCoolVariable in the field with the name myCoolField
SE_API.setField('myCoolField', myCoolVariable);
BUT due to how SE handles UI fields,
calling setField(...) on a valid fieldname, will reload your widget instantly.
So keep that in mind I guess

#

I made it a button so the user doesn't get jumpscared or smth.

function handleButtons(v){
  switch(v){
    case "loadValues":
      SE_API.setField('subsNum', currentSubP);
      SE_API.setField('bitsNum', currentBits);
      SE_API.setField('donoNum', currentDono);
      break;
    [more buttons...]
  }
}
spice hearth
dapper birch
#

suh every1 im a AAA game prod. (i earned me 3x As last summer i shipped a big ole game) HOWEVER -> i like -> im also just a fuckshit game dev straemer / sometimes vtuber -> i need to like -> contact the legit game that i hav a sponsorship under -> cause u kno.. im like .. triple a game dev so -> u kno -> therefore methinks me could u kno -> do some like ...

idk im 3d animator in blender and shit lMAO make some fuckign lil edits or smthn

#

^idk where tf to post this i usualy just run to the dev chat always - imma copy paste it in general for more Viewage ig

severe shell
dapper birch
#

-> im autisitc and dsylexic

#

-> i just graduated from post grad

#

-> why r u critiquing my grammar in a discord server tho

#

-> i understand i am hard 2 read sometimes but ya im hardcore disabled so thts why +

ty for the help -> i pressed the contact page + it took me to this discord hence why im Here u kno

dapper birch
severe shell
dapper birch
#

ya ty and like - im not mad i just ... dont like 2 intro myself with like "sup im extremly autistic + dsylexic + etc.." -> so yea but that is why i am hard to read