dev-chat

[cinder imp]

Thats all I have

[severe shell]

You have only the default custom CSS alertbox from Streamelements, basically. Do you have any visual example of what you want to achieve?

[cinder imp]

sure! gimme a sec

[cinder imp]

@severe shell

I have the video ready and loaded, the text as well, I just need to make the text move.

[gloomy quail]

In any of my overlay edit pages, the following error is being spammed when viewing the console.log:
`GET https://api.streamelements.com/kappa/v2/widgets/62a8e07378a1ad7ebc9769a5/youtube-chat 400'

Expanding any of them shows the following in repeat:

e    @    app.js:395
(anonymous)    @    app.js:395
(anonymous)    @    vendor.js:67351
completeOutstandingRequest    @    vendor.js:53273
(anonymous)    @    vendor.js:53553
setTimeout (async)        
Browser.self.defer    @    vendor.js:53551
timeout    @    vendor.js:67349

Getting a bit much when I am trying to use the console.log to troubleshoot some javascript. 😛

[silk pebble]

Hi there. Does anyone know if StremElements (or some external API+ SE) can be used to show like a top 5 all time sub gifters in chat with something like !gifted? Thanks.

[cinder imp]

Do you need any more information?

[glass edge]

In a custom widget, how do I reference images which I uploaded as an asset? Is this even possible?

[coarse hull]

the image/video/sound-input types in json let you choose uploaded assets in the overlay editor https://dev.streamelements.com/docs/api-docs/775038fd4f4a9-stream-elements-custom-widgets#json

[cinder imp]

I'm making a tip widget and was wondering if it were possible for a certain animation (a video) to be triggered after a specific amount range is donated and then immediately after have another video play on a loop until another donation is made and this keeps going on until a point where the entire widget resets.

[severe shell]

Well, I'm not that good with CSS, but I tried to do something for you. I took into consideration the Alert box would be 1920x1080 (as you sent the video in that resolution), so I put the values in pixels. You will need to play with the values in case you want something different.

[cinder imp]

https://tenor.com/view/hhgf-gif-25031041

THIS IS PERFECT!!!!!!!!!!!!!!!!!!!!!!

[severe shell]

HTMLhtml <div class="text-container"> <div class="image-container"> <video autoplay> <source src="{videoAlert}" type="video/mp4"> </video> </div> <div> <div id="awesome-text-container" class="awesome-text-container"> <span class="username-container" id="username-container"></span> </div> </div> </div>
CSS```css
.username-container {
position: absolute;
top: 250px;
left: 200px;
font-size: 4em;
font-family: "Arco Typography";
color: #127bf9;
}

.animation-moveDown {
animation-name: moveDown;
animation-duration: 1.5s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}

.animation-startAgain {
animation-name: startAgain;
animation-duration: 4s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}

@keyframes moveDown {
1% {
top: 250px;
}
100% {
top: 500px;
}
}

@keyframes startAgain {
0% {
top: 200px;
transform: rotate(-10deg);
}
25% {
transform: rotate(10deg);
}
50% {
transform: rotate(-10deg);
}
75% {
transform: rotate(10deg);
}
100% {
top: 1090px;
transform: rotate(-10deg);
}
} JSjs
const userNameContainer = document.getElementById('username-container');

userNameContainer.innerText = '{{name}}'
userNameContainer.style.visibility = "hidden"

setTimeout( () => {
userNameContainer.style.visibility = "visible"
userNameContainer.classList.add('animation-moveDown')
}, 1800)

setTimeout( () => {
userNameContainer.classList.remove('animation-moveDown')
userNameContainer.classList.add('animation-startAgain')
}, 3000)

FIELDS```json
{
  "videoAlert": {
    "type": "video-input",
    "label": "Video Alert",
    "value": ""
  }
}```

[cinder imp]

OMG!

Thank you!!!!!!!

I'm so happy right now my face is red!!!!

[severe shell]

😂
I'm glad you like it.

[cinder imp]

I can't even tell you how many people I asked for the last two weeks and got "...yeah...I don't know what your talking about" 😂 😂 😂

I had one friend mention Keyframes and I understood that because I work in After Effects but after that I was lost lolololol

[severe shell]

Oh, one more thing... The font name I assumed it was "Arco Typography", so you can change it as well (I forgot to put that in the fields to be easily accessible)

[cinder imp]

Thats perfect! I will! So the values I would tweak would be under keyframes right?

[severe shell]

Yeah, those things in 250px and 500px and any other px you find haha

[cinder imp]

https://tenor.com/view/leslie-jordan-leslie-belly-dancing-belly-dance-dancing-gif-25526487

perfect!

I will probably have another question in a few days. Its, again one of those things that look so clear in my head and totally doable, but I need to be pointed in the right direction. Can you help me with that too?

[severe shell]

Just make sure to ask! 😄 If we know the answer, we will try to help.
By the way, about your question to have a donation video to be triggered and after that another one to play in loop until another donation... That looks like a mix of a donation goal + alert donation. If you don't have anything already coded, you will need to contact someone who works with widget creation.

[cinder imp]

Perfect! The thing is, I want it to stay on the screen the entire stream

I don't want it to pop up

[severe shell]

Instead of creating and modifying an alert box, you will need to create a widget using + > Static/Custom > Custom widget. And then you can code anything using HTML, CSS and JS in there. If you know some Javascript, you can have a look at some widgets in #widget-share and modify anything you find interesting to achieve what you want.

[cinder imp]

https://tenor.com/view/the-grinch-evil-smile-creepy-smile-gif-7618321

perfect!

I was once told that anything was possible with coding and now I'm starting to believe it!

(literally was considering throwing my brain away)

@severe shell how did you attach the font type? I'm trying to add this one but its coming up times new roman lol.

[severe shell]

You don't. You have to install the font on your computer and use the font name on CSS code (the one in orange)
Or you can use google fonts

[cinder imp]

perfect!

thanks! this means alot

[glass edge]

I already saw that but I just want to use the images via js/html/css and NOT with fields.
Reasoning: I have 50+ images I need to set dynamically, which would be too much in my opinion to set via fields.

[severe shell]

You will need to have the link of each image and reference them using their links (which will be https://streamelements.com/uploads/<image_uuid>)

Or you can have the images on FIELDS and use the image-input key with the multiple value set as true. That will give you an array of images.

{
  "imageList": {
    "type": "image-input",
    "label": "Image list",
    "multiple": true
  }
}

window.addEventListener('onWidgetLoad', (obj) => {
  console.log(obj.detail.fieldData.imageList)
})```

[glass edge]

For the "multiple" field:
Do you know how that array is sorted? Because I need to know which image is at which position of the array. And it needs to stay at that position.

As far as I see now, it's in the order of adding the images

[severe shell]

First-come, first-served basis.
First image added will be the first on the array. It won't change position

[glass edge]

perfect, thanks! Will probably stick with that option.
None the less, it would be great to reference assets inside the code. without fields 🙂

Thanks for your help!

[alpine mango]

The input is correct. Does @viral patrol widget work for you?

[severe shell]

It does work fine:

[alpine mango]

Still hasn't succeeded. But I'll keep trying. Thank you for the information

[severe shell]

Do you have any error on browser console?

[paper lantern]

Hello world 👋 I'm currently developing a custom widget and I can't seem to find a place where all the different obj.detail.event.data.badges.type are defined 🤔 does anyone have a reliable list by any chance ? 🙏
Thanks 🥰

(context if needed: on message events, I want to display badges with certain conditions, eg custom sub badges bigger than "classical" ones)

[umbral flint]

Hello, is it possible to send a message into the chat via the custom widget?
I found SE_API.sendMessage, but it appears it's not for that

[alpine mango]

The second account works fine. So withdraw from streamelements. and tried to register again. But I can't log in to https://jebaited.net/. Thank you for your answer.

[cinder imp]

Is it possible to trigger an alert when someone donates between a range of $0.01-$4.00?

and then have another alert triggered between $4.01-$8.00?

and so on and so forth?

[fervent stratus]

Alertbox > Tip > Variation Settings

[cinder imp]

it works for Custom Widgets as well?

[fervent stratus]

Not 100% on that as it varies.

[cinder imp]

would i have to code that part?

[severe shell]

If you are customizing the alert box, the variation will work. If you are doing a custom widget using Static/Custom > Custom widget, then you have to code everything

[cinder imp]

perfect

[twin canyon]

Hello all, I was wondering if there was a way for me to make it so I can show alerts from 2 different Twitch streams that are properly queued and handled so they don’t go off at the same time if a user were to follow both channels.

[hardy walrus]

@twin canyon you'd have to use your own system to deal with alerts via the API and even then I can't say with certainty that it would work period.

[twin canyon]

Thanks for answering. Is there a websocket or something I can listen to within a custom widget that would provide me JSON information about incoming alerts from Twitch.

For instance how does the standard alert box get notified of alerts?

[severe shell]

Check the "Overlay Editor Documentation" on this channel description. You don't need a websocket for a custom widget as it is able to listen directly

This simple code here will show on console anything that happens on SE and Twitch chat:

window.addEventListener('onEventReceived', function (obj) {
  console.log(obj)
})

[delicate latch]

why im having error login on stream elements, it said localhost error??

[wind meadow]

hi i just started streaming and made some overlays how can i get the overlays to obs

[severe shell]

On top right of the overlay you will see a link icon, click on it and you can add it to OBS using browser source

[opaque wasp]

I can't access session data from onSessionUpdate no more, is this something wanted or a bug?

[severe shell]

I've seen that when the session data is reset. To "fix" that, open the Session Data popup and click on "Save" (don't need to modify anything)

[opaque wasp]

Thank you, this solved this solve the issue. Shouldn't we report this?

[severe shell]

I think so... I think I did it once, not sure, probably thousand years ago 😄

[crimson garden]

hello, can anyone help me fix my problem, i keep getting "cross origin request blocked" when trying to get data from other source using eventsource on custom widget, im quite new to this so sorry if my question sounds stupid. 😅

[severe shell]

It usually depends on the other source if it will block or allow the request. You can try to add mode: 'no-cors' on your fetch request to see if that works, but most of time it won't.

[amber sable]

Hello! I'm trying to make a chat widget for my Twitch stream and everything is looking great except for one thing. When a new message comes in, it plays the intro animation for the box (which is perfect) but all of the other chat messages just clip up to their now position. I was wondering if there was a way to either make all the other messages replay their intro animation to slide them up to their new position or if I could just have them slide somehow through JS? If anyone could help me out I'd greatly appreciate it!!

[mint apex]

request : can we get the data tab expanded to be a multi line form field vs a single line

its a bit of a pain in the butt as is

[cinder imp]

@severe shell I made the code for the Tip animation I want but now I'm having trouble having each video show up when a certain amount is donated.

[severe shell]

Well, that tab is not supposed to be edited, those keys are usually the ones set in FIELDS for make it easier to the user to modify on left panel.
Either way, you can suggest that using the ideas board

[uneven oxide]

@mint apex ⤵️

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

[severe shell]

You have to set up the variation settings, and put your code for each variation

[cinder imp]

where do i learn about variations? I'm soooooo new to this entire thing.

[severe shell]

The only different thing is that you will inform the condition for that notification appear:

The part after that is the same, you will set how you want it to appear

[cinder imp]

This sounds perfect! But I want my animation to stay on the screen and actively respond to a viewers tip.

This is the animation I made. I've already broken up the stages into several videos so that after a person tips, the glass goes from empty to partially filled, and then stays there until another tip is given.

[severe shell]

You would be better with a donation goal, then

[cinder imp]

really?

[severe shell]

Yeah, a donation goal is usually a bar that fills once someone tips

Import some from #widget-share and see how they work

[cinder imp]

...ok

😂

the videos don't play

[cinder imp]

Is there a way to made an "if/the" statement? Example "If tip is $0 then display this image" "if tip is at least $4 then display this image"?

I've gotten as far as uploading the videos

[severe shell]

Yes, with custom widget you can do anything you want with HTML/CSS/JS. But you will need to code what you want

[frosty cliff]

Idk what channel I’m supposed to ask in but my alerts won’t work like I have them in obs but they won’t pop up when people follow me

[alpine mango]

cant login 'jebaited.net'. if i click authorize, It's coming back to the 'sign in with streamelements' screen. My streamelements account is 63b6b4930032b4f4b5d17e92.

[hardy walrus]

@viral patrol ^^^^

[viral patrol]

This should be fixed now.

[still pelican]

Hi, I made a custom widget for SE and have a few question.

1. Where can I get a share URL for quick install?
2. How to set custom overlay image visible in gallery (some widgets have that)
3. Is there any gallery where I can share my widget?

[hardy walrus]

1. Only available for certain users/brands and those submitting widgets for the community.
2. They're actually not custom. All of them have ones for games that complete when setting the game in the overlay properties.
3. https://strms.net/codeshare

[cinder imp]

when you say code, you mean implementing the right lingo that Streamelements uses?

[sacred holly]

Is there anyway to edit the code of the "Stream marathon timer" widget to allow the max time to be changed without resetting the timer? I want to be able to change the max time mid-stream without losing progress on the timer.

[severe shell]

Yeah, I mean programming in Javascript like the widgets in #widget-share. Those widgets in that channel are created by the community, not SE developers (although some of them are made by SE developers). The good thing is that you can see the source code in any widget in there and modify the way you want (of course, taking into consideration you know javascript language)

[severe shell]

It is possible, but it would require to modify many parts of the code. Not a small change only.

[sacred holly]

How difficult would it be to implement? Could it possibly be done with a button similar to the "Add 60s" button?

[severe shell]

Anything is possible, as long as you have someone to do it. I don't know how difficult that would be, someone with more experience in JS would be able to do that.

[sacred holly]

Ok. I'll wait to see if someone is able to help me figure it out. Thanks

[cinder imp]

ooooh okay! That makes sense. Thanks!

[frigid cairn]

Can someone help me to change the session subscriber to an actual subscriber and have them in my credit roll if they have a sub? I think it must be something here in Credit roll by @hushed hazel (maybe it is you?)

[strange axle]

For a custom widget , to show for example clips in an iframe it wont let me because of X-Frame-Options anyone know a way around this so i can show clips as a custom widget ?
I can get get it to work locally by add &parent=127.0.0.1 to the embed link. But in SE when I add parent=streamelements.com i wont load

Refused to frame 'https://clips.twitch.tv/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://streamelements.com".

[alpine mango]

I'm sorry to bother you. The same error is emerging. 🤒 Symptom: https://streamable.com/zdk495 😷 I closed my account because of a roulette game point error. I guess this is the cause

[cinder imp]

if there is font that has different styles as well, like Arco Typography and then it has a variation thats Italicss, how do I make it so its the Italics one in the code? This is what I have now. The font family is CocoSharp Trial but there is a specific sub text that I want to use called Coco-Sharp-Heavy-trial .username-container { position: absolute; top: 250px; left: 200px; font-size: 4em; font-family: "CocoSharp Trail"; color: #127bf9; }

[unique totem]

I'm coming from a local-based chatbot and I'm trying to migrate to a "cloud-based" bot instead. A few struggles I'm encountering: A.) I'm looking for a way to introduce conditional (if/then) statements into a custom chatbot command and B.) Is there any method for storing arguments for reference later? Specifically, for the last "issue", I'm thinking about borrowing the "Quote" feature, but I've not looked close enough to determine if it's a viable option.

[severe shell]

You can add font-style: italic;

[viral patrol]

Can you provide your channel ID so I can investigate that?

[vocal terrace]

Hey guys! I tried to find the right module for a chat game. Example: a User write: !coffee in chat. bot should answer for example ramdom L of coffee: you drunk 50L of coffee. (Another viewer) Userxzy drunk 100L, you missed by 50L. To beat userxyz you need more coffee. Good luck 😎 what modul could to something like this? Thanks for helping. I checked existing commands, but found nothing

[severe shell]

No SE module or command is able to do that, unfortunately.

[green coral]

Hi, crossposting my message from #helpdesk-youtube here

[crude merlin]

Hello, I've been looking for any information as to what category and item actually are, because they aren't documented anywhere, I can't see them in use anywhere (i.e. the stats frontend) and they don't seem to relate to anything in the rest of the API. Any help is appreciated

[cinder imp]

I want to use Google Fonts Changa One but it keeps coming out as Times New Roman . How do I get it to be accepted

[severe shell]

If you want to use that font from Google Fonts, you have many options. But based on what you already have, you can just add this on top of everything on CSS tab:

@import url('https://fonts.googleapis.com/css2?family=Changa+One:ital@0;1&display=swap');

And then change the font-family to:
font-family: 'Changa One', cursive;

[cinder imp]

https://tenor.com/view/thank-you-thank-you-alin-gif-24629689

[cinder imp]

is there a way to keyframe the fonts size to get larger and then smaller?

[severe shell]

You can use the CSS I had sent before as a base. Would probably need to create a new @urban boltframes and create an animation to increase/decrease font size (using font-size)

[cinder imp]

can you give an example of what that would look like. What you did was perfect and I don't want to mess it up too much lolol

[severe shell]

I tried to use that endpoint but could not find those routes either. Checking the stats page, the only endpoint I could use for chatstats is this one:
https://api.streamelements.com/kappa/v2/chatstats/USERNAME/stats

@viral patrol do you know something about this endpoint? The only example we have is username, we don't know which values would be valid for category and item parameters:
https://dev.streamelements.com/docs/api-docs/24c3ad81002f0-username-category-item

[severe shell]

Something like this

.username-container {
  position: absolute;
  top: 250px;
  left: 200px;
  animation-name: fontSize;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  font-family: "CocoSharp Trail"; 
  color: #127bf9;
}

@keyframes fontSize {
  1% {
    font-size: 10em;
  }
  100% {
    font-size: 0.1em;
  }
}

[alpine mango]

sure! my twitch channel ID : 71392781 , Streamelements account ID : 63ba199ab64f6a123f3cf3e9

[viral patrol]

Should be fixed. You can try now.

[crude merlin]

Thanks for the follow up, and for clarity, I am using the /chatstats/{username}/stats endpoint, I'm just trying to figure what this other API actually does and how it's used as it seems entirely undocumented and I couldn't find any additional information on it, originally I thought perhaps it was used in the Twitch extension but after checking the calls made on both the stats site and extension I couldn't see it being used at all.
Call it professional intrigue rather than a burning issue 😄

[alpine mango]

Thank you very much! Now I can access Jebaited. The !bet command in roulette game still doesn't work, but I'm very happy to be able to log in to https://jebaited.net/. I was afraid I couldn't log in forever. thanks!

[viral patrol]

Remove and create your token for widget again. I hope that it helps.

[fathom orbit]

Hi have been streaming for a couple months and I’m at 139 followers but since I’ve downloaded SE recently it thinks I only have 13 fwlrs, is there a way to fix this Tnx

Sorry wrong channel I presume!

[tropic glen]

Hi, I'm wondering how song request work. Every time its checking on which device page loaded last, then this device (browser) become output. Is there any kind of API i can use to stream music for multiple devices/ browsers at one time ?

[severe shell]

It can refetch your data if you go to https://streamelements.com/dashboard/session/totals and click on RESET SESSION

[zenith pulsar]

I am trying to get a custom widget to work but I am at a loss.

I would like to get an image to display based on a random number of subscriber events.

I read the documentation on the dev section of SE website and I think I used the eventListener correctly, but when I try to emulate subs in SE UI, the image never shows up no matter how many subs I emulate.

Here's my JS:

function setup() {
  let subscriberThreshold = Math.floor(Math.random() * 18) + 3;
  let newSubscibers = 0;

  // Listen to 'onEventReceived' event
  window.addEventListener("onEventReceived", e => {
    // Check if event type is 'subscriber'
    if (e.detail.event.type === 'subscriber') {
        newSubscibers = newSubscibers + 1;
      // If subscriber count is greater than or equal to threshold, show image and reset threshold
      if (newSubscibers >= subscriberThreshold) {
        $(".main-container").css("background-image", `url("${currentImage}")`);
        setTimeout(() => {
          $(".main-container").css("background-image", "none");
        }, 10000); // delay of 10 seconds
        setup(); // restart the process with a new random number
      }
    }
  });
}```

Any help is appreciated.

[severe shell]

Well, I don't know how your CSS is, but in order to have a background image shown, your .main-container needs to have a dimension. So if you CSS does not look like that, the image will not appear even if your JS is fine:

.main-container {
  height: 100px;
  width: 100px;
}```
As regards the JS, I'm assuming you are running setup() for the first time somewhere in your code.
However, every time you run setup(), the value of newSubscibers will be set to 0.
As you set the value of `subscriberThreshold` to a random number + 3, it will be always bigger than `newSubscibers`. Therefore, not entering the condition `if(newSubscibers >= subscriberThreshold)`

[zenith pulsar]

I am using the default CSS file. I added that chunk to it.

And now that you said the rest, it makes sense. I'll try something else. Thanks for your response. 🙂

Holy moly. We got the image to appear finally. Progress.

[shut tulip]

Hello, I’m trying to see on how I can connect my Facebook account. I keep getting an error message

[covert mural]

Hello everyone, I was asking myself if it's possible to have some "if/else" code in custom command for chatbot? I want to create a command that return a different text depending on a random number generated

[hardy walrus]

Natively no. You'd need to have an external handle that all as it's not something the bot can handle.

Ffs

External server to handle

[covert mural]

Okay no problem, thank for the answering, have a nice day/night 😄

[zenith pulsar]

I'm not sure if you care, but your input helped me so I wanted to share my solution to see if you think there's a better way to do it.

let subscriberThreshold = getRandomThreshold();
let newSubscibers = 0;

function getRandomThreshold() {
  return Math.floor(Math.random() * 18) + 3;
}

// Listen to 'onEventReceived' event
window.addEventListener("onEventReceived", e => {
  // Check if event type is 'subscriber'
  if (e.detail.event.type === "subscriber") {
    newSubscibers++;
    if (newSubscibers >= subscriberThreshold) {
      $(".main-container").css("background-image", `url("${currentImage}")`);
      setTimeout(() => {
        $(".main-container").css("background-image", "none");
      }, 10000); // delay of 10 seconds
      newSubscibers = 0;
      subscriberThreshold = getRandomThreshold();
    }
  }
});```

It works flawlessly and you were a great help. 🙂

[muted latch]

Is there a way to create a OAuth2 App to test the API?

Or do I need to apply for it to test it?

[hardy walrus]

If for a single case of just yourself you can use your jwt token.

Anything more spread would really need an application filled.

[muted latch]

Great!
Also is there going to be a API-Endpoint that allows to get information from Widgets?
I am trying to make an application which takes the Audio-Source of Widgets and plays them over Discord for the Users, but I do not seem to find it being supported?

[real furnace]

there is no endpoint to extract information from a custom widget. You would have to send the info to a server to expose it

[muted latch]

What exactly do you mean with sending the information to a server?
That the User has to set something on their account to relay that information to a server?

[real furnace]

you would have to create an API to act as an server and publish it somewhere, then on the custom widget itself you would use an POST request or the API websocket to pass the data to be used by your other applications

a custom widget or SE overlay lives in a kind of self contained sand-box for security reasons. So the only way to get information out of it is if you send the data to somewhere

[muted latch]

Interesting so there is no actual way to access the SE Overlay or its Widgets?

From an external software point

[real furnace]

not unless you code it inside a custom widget.

[muted latch]

How might I do that?
For example I want to give my current Alert Box information to my external software.

[real furnace]

I am unsure of how you could do it with the Alert Box, or if it would be possible to send information out of it to another source.
With a custom widget there would be the possibility by checking the discord documentation to see how their endpoints work
https://discord.com/developers/docs/reference
and making an HTTP Post request to their websocket so discord can consume it and use the data. In the documentation from Discord you are looking for the upload files part.

[wise basalt]

Is there a way to upload a complete custom widget as a zip for instance instead of copy and pasting the each changed file each time an update is needed?

[hot trout]

yes I made a tool for that, albeit not as a zip https://github.com/CyBeRoni/se-overlay-uploader

[wise basalt]

ah, no shade to you but this should be a built in feature

thank you though

[zenith pulsar]

Make sure to request it in #💭︱feedback-and-ideas

[wise basalt]

can do

[long terrace]

Hiii, is it possible to show the top 5 SE donator in the chat ? Maybe by using a api ?

[green coral]

Hi StreamElements Devs,
There is currently an issue with the YouTube information that is sent in the websocket payload.

This is currently what the payload looks like:

{
    "data": {
        "amount": 3.33,
        "currency": "GBP",
        "username": "Speedy",
        "tipId": "63bf6*********1a15c",
        "message": "",
        "avatar": "https://cdn.streamelements.com/static/default-avatar.png"
    },
}

What's missing from this is the UserID, which is essential for distinguishing different users with the same username (as they are not unique on YouTube)

This means that bot integrations can potentially direct a command at the wrong person if they happen to share the same name.

Please update the websocket & API endpoints to include this information as it will solve many problems for a lot of users 🙏

[zenith pulsar]

I would suggest adding this to the #💭︱feedback-and-ideas channel as well.

[zenith pulsar]

https://dev.streamelements.com/docs/api-docs/71ceadfacf7a4-channel-leaderboard

I'm assuming you mean tips in SE. This link shows you the API call you would use to get the leaderboard.

[zenith pulsar]

This might work, assuming you have the right authorization keys:

I removed this because it was wrong. Very wrong.

Make a custom widget and put that in the JS tab. Change the authorization information to yours. This will add an event listener looking for a chat message to come through reading “!tipleaders”

Feel free to change it to whatever you like.

[long terrace]

wow ok, i added the widget, i removed the default JS tab code and past this one

Now i have to add the "myAuthKey', 'myChannelName" and "Bearer myAPIKey"

myAuthKey is the Token ?
What is the "Bearer myAPIKey" ?

[zenith pulsar]

Check the api documentation on Dev.streamelements.com

[long terrace]

ok sorry i'm a bit noob in this, i don't understand what is what

[long terrace]

Can’t make it work, i don’t understand what is the Bearer myAPIKey and if the myAuthKey is the SE token or not

[still juniper]

All that code is plain wrong.

[zenith pulsar]

Please go on.

[zenith pulsar]

I've never used any API calls in custom widgets. Maybe someone smarter can offer better constructive feedback than, "All that code is plain wrong."

myAPIKey: Overlay token
myAuthKey: JWT Token

Both found on your StreamElements settings page. Slide the "Show Secrets" slider to show them. DO NOT SHARE WITH ANYONE

[still juniper]

My answer was just informative. You're giving code to someone that already stated are a newbie and it just won't work, for multiple reasons. If you're taking it personal, welp

[zenith pulsar]

I'm not taking it too personally. I just don't think you're being constructive with your feedback. Tell me where it won't work and I can learn. 🙂

You don't even have to give the full answer. I'm doing this based on the documentation, so if there's a portion of it that I should focus on, let me know. I'm pretty sure the last half of it is useful.

Wait a second. I'm using out of date documentation. I just checked the SE github and they don't even offer what I'm using anymore.

Well that's embarrassing.

[still juniper]

Again, that wasn't feedback, that was just information. If you want, there is it, but basically and as I said, the code is plain wrong. I honestly don't know what part of the documentation you're referring to, but I think you're misguided.

1. You're apparently connecting to websockets, when within a widget you should be using the native window event listeners instead (and I don't even know if SE.connect is valid - it may be or not, depending on whether SE wraps and exposes a way to create a new ws connection)
2. You're using a chat.message event that simply doesn't exist.
3. Calling the SE API fron within a widget requires the Authorization header to be a apikey one, not a bearer one
4. SE.send doesn't send a message to chat

[still juniper]

and that's why I said it was plain wrong. Apologies if it sounded harsh, I truly just meant it was invalid in pretty most senses

[zenith pulsar]

SE_API commands are probably what I should be using if I'm going to try to get this to work. This is also wrong. 🥲

Based on the StreamElements/api-docs/blob/main/docs/Widgets.md github page.

I'll see what I can come up with.

Thanks @still juniper and hang tight @long terrace. I have some learning to do.

[long terrace]

I appreciate your help, maybe it can be cool if SE add a official code exemple for this ? I think this can help a lot other people for charity streams as example

No worries @zenith pulsar 🙂 i tested it during 15min, easy 😃

[zenith pulsar]

They are bombarded with requests for functionality. I think they are focusing on increasing functionality for non-Twitch streams so YT and FB streamers can have access to what Twitch streamers have now.

If the code I write is good enough, maybe they'll add it as a default chat command. We'll see.

[long terrace]

I will test it again with the correct keys

[zenith pulsar]

Oh it's not going to work. I'm going to try to figure this out tonight if someone else hasn't helped you first.

[long terrace]

Thanks a lot, let me know, we can speak private to test it if you want 👍

[zenith pulsar]

Sure, but if we get it to work, I'll paste it here for others to use.

And based on comments and pinned messages in this channel, it's going to involve JEBAITED.

[azure moat]

Can someone help me to start in html css a dono goal are there any instructions to do that?

[green coral]

If any StreamElements staff see this, please look into the above mention 🙏

[zenith pulsar]

I don't understand what you're wanting.

[azure moat]

I want to make my own donation goal with html css js, And wanted to ask if you have a tutorial or something for this or an example

[zenith pulsar]

https://dev.streamelements.com/docs/widgets is the best documentation. Not really a tutorial. There are plenty of tutorials for custom widgets on YouTube. Just search "StreamElements custom widgets" and look for a recent video to make sure guidance is up to date.

[zenith pulsar]

There are also some pre-made widgets on the Stream Elements github that helped me learn some of the functions. github/StreamElements/widgets

[azure moat]

thx

[opaque wasp]

After saving the overlay, I need to close the preview tab and open it back again because it somehow crashes. What's happening?

[manic prairie]

I don't know who to go for this, but im having trouble getting the alertbox to actually recieve audio. It works in the emulator in the editor, but in a browser test and on obs. I checked the google console and I found this: se-widget-alertbox 1: muted (skipped: false, hidden: false, muted: true ) , any ideas?

[real furnace]

@pulsar willow please see above message thread

[green coral]

Thank you Stolie

[real furnace]

In your dashboard https://streamelements.com/dashboard/activity check if the activity feed bell icon is "Red" if it is your alerts are muted in the feed. Click on the bell and it will unmute it.

[manic prairie]

im so stupid.

[green coral]

@pulsar willow what do you think of the above?

Is it something you might be able to change?

[worn bolt]

hello i need help i did a sponsor and its not registering

[proud spade]

You probably wanted #helpdesk-twitch or #helpdesk-youtube.

It can take several hours for events to register, if it's been more than a couple days, please submit a ticket.

[uneven oxide]

Please go to https://support.streamelements.com/, click the big blue question mark on the bottom left and select SE.Sponsorships Form. Fill that form to submit a Sponsorship related ticket and wait for our Support Team to get back to you. Please do not fill the form multiple times, as that will not speed up the response time.

[hot trout]

one should not do charity streams through SE but use a dedicated provider for that like tiltify

having people donating to you with the promise of donating that to a charity is a great way to get accused of charity fraud

[zenith pulsar]

Does onSessionUpdate include all of the information included in onEventReceived? Would I still be able to use something like this?

  if (obj.detail.listener == 'message' && obj.detail.event.message == 'test')```


The documentation seems like it says that, but not sure if I should make that assumption.

Specifically from the documentation: Note: Due to complexity of object in onSessionUpdate a onEventReceived event listener will be the best way to use for most of scenarios (**easier to implement **and better performance).

[real furnace]

@zenith pulsar onSessionUpdate does not have access to events message. Basically the session is events that happen during your stream, and are updated in your account example: total subs, monthly followers, top tips, top cheers... It does not store chat messages

OnEventReceived is a direct connection to twitch websocket and will receive all new events that happens when you are live or not, example: new follows, new subs, new cheers, new tips, new chat messages, new raids...

So onEventReceived has access to everything that onSessionUpdate has. But onSessionUpdate has not the same information that onEventReceived

[long terrace]

It’s different in my case because we are doing this with a official radio station and with the charity boss that will be here, physical in our studio

[severe shell]

There are some goals widgets in #widget-share. You can import them to your account, open the editor and you will see all the code in there. It is a good start, so you can modify the way you want

[severe shell]

Are you using other browser other than Chrome or Edge? They are the ones that have full support, the others may have some issues to work correctly

[opaque wasp]

I'm using Chrome. When I hit save on the overlay editor, the widget works fine into the editor but the preview tab have problems with the reload and crashes
I have to close that preview page and open a new one that will work fine until a new save occurs.

[broken coyote]

Any errors in console?

[severe shell]

Hmm, here on my side it is working with no problems. Last time I saw someone having issues with the editor was related to an extension they were using, it was affecting the editor to work somehow. Not sure if that would apply for you, but it is worth the shot

I mean, disabling the extension temporarily to test

[opaque wasp]

Yeah gotcha, it will take a few since I've a ton of extensions ^^

[opaque wasp]

I don't see nothing that seems important to be honest

[opaque wasp]

I've disabled all the extensions and the problem still occurring.

[broken coyote]

Does it load fine in obs?

[opaque wasp]

Yeah, it actually does..

[broken coyote]

Problem solved.

[opaque wasp]

I mean yes and not, at least it's for sure that the problem is on my Chrome. Thank you for your hint tho!

[sleek latch]

I recently created an overlay and wanted to share it to other creators through a link (as RAID does, for example), I saw that you should take the editor url:
https://streamelements.com/overlay/ID/editor?er=1
remove the "/editor?er=1" and change "/overlay/." for "/dashboard/overlays/share/", so the URL would become:
https://streamelements.com/dashboard/overlays/share/ID
However when me or the other creators try to use it, it simply goes to the login page, instead of listing the Overlays with the new added one (as it happens with RAID, for example)

(not sure if this is the correct chat for it, but if it is not, please point me to the right one as I am a bit lost with all the channels)

[severe shell]

That option is not available publicly, it needs to be enabled manually for the staff and not everyone is able to have that (usually business and some from SE Community, like artists or devs that shared widgets previously with the community). However, if you want to apply, this is the form:

[uneven oxide]

One-Click Overlay Sharing Application

Use this link to submit an application: https://strms.net/shareoverlay_request

[sleek latch]

Thank you!

[frosty pendant]

Apologies if this is in the wrong channel...

Looking for some widget help. I have created a very simple custom widget which uses JS to pull todays date - the aim being that I have a follower notification which is in the style of an airline ticket, and I want it to print todays date on the ticket when the follower notification is displayed. Is there a way to get my custom widget to show in combination with the follower notification, or is there an easier way to achieve what I'm trying to achieve?

Thanks in advance 🙂

Edit: I'm new to creating widgets etc...I know this is probably ridiculously simple but...I have no clue!

[severe shell]

You can use the default Alertbox for that. Click on the follower gear icon and then "Use Custom CSS" and then "Open CSS Editor". In there you can use your code to create the widget for a follower notification.

You will se some code in there, you can adapt to your need. If you need any help, just give us some more details on where you are strugling and we can try to help.

[frosty pendant]

Thanks - I will have a butchers now 🙂

[severe shell]

And this is the correct channel, by the way. Anything for chat commands, widgets, overlays, API, websocket, those kind of things 🙂

[violet torrent]

Hello all! Im trying to teach myself a little JS with the custom widget tool. I'm struggling to get the url for an image that I uploaded to stream elements so i can set it as a background for the widget itself.
Can anyone help me out? Or am I being silly and there's another way to do it lol Im going off an old old widget I had that i dont entirely remember how I made.

[severe shell]

The easiest way is to choose the image on the Fields. Go to FIELDS tab and add a new entry like below. It will create an entry on the left side of the editor so you can choose an image you have uploaded.

"imageBackground": {
    "type": "image-input",
    "label": "Background Image",
    "value": ""
  }

You can access the image on HTML tab:

<img id="background" class="background" src="{{imageBackground}}">

On JS tab:

window.addEventListener('onWidgetLoad', obj => {
  fieldData = obj.detail.fieldData

  document.getElementById('background').src = fieldData.imageBackground
})```
On CSS tab: 
```css
.background {
  content:url({{imageBackground}});
}```

[twin kernel]

anyone know how to make the bot give points when a command is given in the chat example !points the user receives +10 points?

[livid flax]

is it possible to make a counter with two things like a duel thing score is now 1 to 1

[hot trout]

@buoyant compass you haven't asked a question so both helping you and informing you of the correct channel are impossible, though I'll add that if your question does not involve programming it's the wrong channel.

[buoyant compass]

oh sorry. i only deleted part of it lol.
I asked the question in selive

[hot trout]

ah gotcha

[buoyant compass]

i posted here because a line of code has now replace my OBS screen. maybe someone in here could help?

(function(w,d){zaraz.debug=(eS="")=>{document.cookie=zarazDebug=${eS}; path=/;location.reload()};window.zaraz._al=function(eh,ei,ej){w.zaraz.listeners.push({item:eh,type:ei,callback:ej});eh.addEventListener(ei,ej)};zaraz.preview=(ek="")=>{document.cookie=zarazPreview=${ek}; path=/;location.reload()};zaraz.i=function(eJ){const eK=d.createElement("div");eK.innerHTML=unescape(eJ);const eL=eK.querySelectorAll("script");for(let eM=0;eMnew Promise((b=>{if(a){a.e&&a.e.forEach((c=>{try{new Function(c)()}catch(d){console.error(Error executing script: ${c}\n,d)}}));Promise.allSettled((a.f||[]).map((e=>fetch(e[0],e[1]))))}b()}));zaraz.pageVariables={};zaraz.track=async function(eo,ep,eq){return new Promise(((er,es)=>{const et={name:eo,data:{}};for(const eu of[localStorage,sessionStorage])Object.keys(eu||{}).filter((ew=>ew.startsWith("zaraz"))).forEach((ev=>{try{et.data[ev.slice(7)]=JSON.parse(eu.getItem(ev))}catch{et.data[ev.slice(7)]=eu.getItem(ev)}}));Object.keys(zaraz.pageVariables).forEach((ex=>et.data[ex]=JSON.parse(zaraz.pageVariables[ex]))); // et.data={...et.data,...ep};et.zarazData=zarazData;fetch("/z/t",{credentials:"include",keepalive:!0,method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(et)}).catch((()=>{console.

[hot trout]

you're gonna want to put that in a code block

(triple `)

also this is very very condensed so it's gonna be hard to debug

it also does not seem to have any relation to streamelements

[buoyant compass]

It's stopping SE from logging in

[buoyant compass]

how do i do that?

[hot trout]

between two pairs of ```

wrong ones

you need the backtick specifically

it may be on your tilde (~) key

[buoyant compass]

(function(w,d){zaraz.debug=(eS="")=>{document.cookie=`zarazDebug=${eS}; path=/`;location.reload()};window.zaraz._al=function(eh,ei,ej){w.zaraz.listeners.push({item:eh,type:ei,callback:ej});eh.addEventListener(ei,ej)};zaraz.preview=(ek="")=>{document.cookie=`zarazPreview=${ek}; path=/`;location.reload()};zaraz.i=function(eJ){const eK=d.createElement("div");eK.innerHTML=unescape(eJ);const eL=eK.querySelectorAll("script");for(let eM=0;eMnew Promise((b=>{if(a){a.e&&a.e.forEach((c=>{try{new Function(c)()}catch(d){console.error(`Error executing script: ${c}\n`,d)}}));Promise.allSettled((a.f||[]).map((e=>fetch(e[0],e[1]))))}b()}));zaraz.pageVariables={};zaraz.track=async function(eo,ep,eq){return new Promise(((er,es)=>{const et={name:eo,data:{}};for(const eu of[localStorage,sessionStorage])Object.keys(eu||{}).filter((ew=>ew.startsWith("_zaraz_"))).forEach((ev=>{try{et.data[ev.slice(7)]=JSON.parse(eu.getItem(ev))}catch{et.data[ev.slice(7)]=eu.getItem(ev)}}));Object.keys(zaraz.pageVariables).forEach((ex=>et.data[ex]=JSON.parse(zaraz.pageVariables[ex]))); // et.data={...et.data,...ep};et.zarazData=zarazData;fetch("/z/t",{credentials:"include",keepalive:!0,method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(et)}).catch((()=>{console.

[hot trout]

and where did you get this code

[hot trout]

as written there are syntax errors in it

[buoyant compass]

My OBS screen is just a white screen with that code

[hot trout]

ah

is that screenshot the whole window?

[buoyant compass]

that's the whole application

[hot trout]

does your audio inputs scene have anything but audio sources

specifically are there browser sources

if not try resetting the ui (view menu)

[buoyant compass]

nah it just has audio sources.
(but i have this white screen no matter which scene i'm in)

[buoyant compass]

how do i do this?

[hot trout]

pick reset ui from the view menu

this resets the obs interface to the defaults

[buoyant compass]

no. screen is still there

[hot trout]

and if you remove the selive plugin?

if so it's a question for #helpdesk-selive

[buoyant compass]

how do i do that?

[hot trout]

so far as I can tell that code is from cloudflare but the webpage it is in is not being rendered correctly which can either be a problem on the cloudflare end (unlikely they tend to know what they're doing), an issue in the plugin (obs by default does not load anything like that) or an issue with something else like an antivirus on your computer

whatever installer you ran to install it, run it again to uninstall usually

[buoyant compass]

what the hell is cloudfare

[hot trout]

don't worry about that

[buoyant compass]

if i uninstall SE.live will i lose anything?

[hot trout]

basically it's a company that hosts half the internet's websites

you shouldn't no

you don't really need selive to use streamelements

[buoyant compass]

ok doing it now

Worked a treat @hot trout . Thank you so much for your help. I have a big stream at 6am tomorrow in 8 hours and did NOT need this issue.
you are a life saver and a bloody legend. thank you

[hot trout]

👍

[severe shell]

You would need to use jebaited.net for that. Take a look at it here:
#dev-chat message

[severe shell]

Each counter has only one value. However, you can create as many commands as you want with that counter. And you can have a command with how many counters you want:

!cmd add wins User won and now they have ${count wins}
!cmd add lose User lost and now they have ${count loses}

!cmd add score User has ${getcount wins} wins, ${getcount loses} loses and ${getcount draw} draws

[elder geyser]

hello there
I'm not terribly experienced with web dev, but is there any way to get the overlay query string from within the code of a custom overlay?
would like the user to authenticate with Twitch, so the overlay gets basic access to the API. is it at all possible? maybe there is some other way to get the user access token?

[still juniper]

It doesn't really make sense to use an overlay to request a Twitch token tbh, to start off the redirect url would be dynamic. The user should get the token externally via Implicit Flow and then paste it in whatever configuration field you set for it in your widget

[elder geyser]

I guess that's true. just want to make it as easy as I can for the user

I'm using decapi.me for now, I just need a chatter's profile picture for now

[slow shale]

greetings. im new here, and don't know if this is the right place to ask, but im working on a custom overlay and custom widgets for a client, and its a requirement to parse event.type and separate primes from tier 1 subs, however in the documentation it states that it can only parse tiers 1-3. i've tried the twitch sub_plan parse for primes of the string "Prime" in all variations of spelling and value, and i've tried the following code

if (parseInt(event.tier) === 1000) {event.type = 'subscriber'} else if (parseInt(event.tier) === 2000) {event.type = 'subscribertier2';} else if (parseInt(event.tier) === 3000) {event.type = 'subscribertier3';} else {event.type === 'subscriberPrime'}

but primes are returning as value 1000.
I know streamelements has the ability to parse primes separately through its normal variations for alert widget. does anyone have an idea of how i can implement this?

[elder geyser]

prime subs give me events with tier set to "prime"

well, at least when I emulate them using the button in the editor

[slow shale]

if (parseInt(event.tier) === "prime" ) {event.type = 'subscriberPrime'}

if (parseInt(event.tier) === "Prime) {event.type = 'subscriberPrime'}

if (parseInt(event.tier) === 'prime') {event.type = 'subscriberPrime'}

if (parseInt(event.tier) === 'Prime') {event.type = 'subscriberPrime'}

if (parseInt(event.tier) === '"prime"') {event.type = 'subscriberPrime'}

if (parseInt(event.tier) === prime) {event.type = 'subscriberPrime'}

all of these lines of code did not spearate out a prime sub. is there any other format i could try it in?

[young shard]

parseInt only returns a number or NaN so it can never equal a string

[slow shale]

@young shard Godsend. found it. you type the same thing so many times in a row, you sometimes forget what it actually does ❤️

and here i was throwin 100 console logs in to find where the string was getting set to NaN in console

[elder geyser]

I noticed it before, but that's why it's not the greatest idea to change the event fields in your code. ideally, they should remain constant

[slow shale]

@elder geyser nowhere does it actually change the event field before that check, which is the last step before drawing the elements, which was the only way i could work out how to get it done. im not the greatest programmer in the world, and my time to research and understand the languages better is limited, so im working with what i know, with alot of help from google 🙂 Thanks for your assistance though, without your comment, i wouldnt have remembered to use console logs to check that it was returning NaN and @young shard's comment of why it was returning NaN gave me the final piece of the puzzle. Much appreciated, both of you.

[vagrant leaf]

How much of stream elements is open source? Or can edit functionality anyway

Would like to take a look at how the sr command works and add some features

[severe shell]

It isn't

[pulsar willow]

hi! im getting sound from my alerts overlay but nothing is visibly showing up in OBS (already disabled hardware acceleration) and while the alerts worked before ive never gotten chatbox to work 💔

[narrow spade]

Working on a custom widget. Is it possible to send javascript variables to the CSS?

[broken coyote]

What in tarnation

[broken coyote]

Are they working in the se editor? And not in obs?

[pulsar willow]

correct

[pulsar willow]

i get sounds in obs but no visuals

[broken coyote]

Something custom? Or from a company

[pulsar willow]

custom

[broken coyote]

So. I haven’t had to disable hardware acceleration in a really long time. I would start with marking sure you have the browser source set to 1920x1080. And verifying that the layer in obs is on stop

[severe shell]

You can change the CSS using JS... Most of time is using document.getElementById("id").style.propertyName = newStyle
https://www.w3schools.com/js/js_htmldom_css.asp

Not sure if that is what you are asking exactly, though.

[narrow spade]

👍

[pulsar willow]

ya i did all those things

[twin kernel]

Thanks you really are the best!! @severe shell

[neon frost]

👍

[twin kernel]

Good morning, I'm here again, does anyone know how to make the bot identify that an item was purchased in the store and send a command when someone asks for that specific item?

[severe shell]

What do you mean exactly? Let me see if I understood:
You can go to modules and activate chat alerts > redemptions. Every time someone redeem an item, a message will be posted on chat.
Another option is editing the item store and activating the option “Send confirmation when redeeming via chat”.

I’m not sure what is the idea of “send a command when someone asks for that specific item”. Is it literally when someone asks in chat “how to redeem item X?”, a command be sent on chat?
If so, you have to create a command with the response you want to give and in “command keywords” you add as many keywords as you want to trigger that command when someone type any of them on the chat.

If that isn’t what you want, please give some more details so we can try to help.

[twin kernel]

Hello, so I'm trying to create an rpg in my chat using only elements from streamelements and one of my ideas was to create monsters as redemptions in the store but I wanted to create a kind of "buffs" in the store too so I would like that when someone redeems an item from store this item by giving a command in chat like ${random.pick '1''2'}

[severe shell]

You can go to Modules > Chat Alerts > Redemptions and add random.pick in the Message part:

{user} resgatou {item} e recebeu o buff ${random.pick 'abc' 'def' 'ghi' 'luvas' 'gold'}

[twin kernel]

Obrigado é uma boa alternativa

[covert ferry]

Hi guys
currently we are more and more affected by follower bot attacks on our Twitch channel. To ban the followers we use the Sery Bot. The chatbot we use is a bot we developed ourselves, which we can set to a state via "!attackmode on" so that, for example, the follower messages are no longer displayed in the chat. Now we would like to integrate in this mode that the follower alert is switched off in the overlay. Has anyone of you done something like this before and maybe a hint to a sample code? That would help us a lot. Thanks a lot!

[young shard]

seems like you might be able to send "mute" or "pause" to this endpoint https://dev.streamelements.com/docs/api-docs/e8fbde6ebad51-channel-action-action

[sick vessel]

Hi! Not sure if this is the best place for this, but OBS isn't loading in any of my streamelements overlays? I'm not sure if this is something I'm doing wrong or if this is best an OBS issue

[severe shell]

It seems this endpoint is outdated and it is not sending the mute event to the overlays. Here we have a workaround that works on mutting overlays:
#dev-chat message
@covert ferry check if that is good for you. Unfortunately, there is no way to mute only the follower alert, unless you update the entire overlay via API

[radiant raft]

Hey! I've got a problem with answering the ticket on dashboard - I've added an attachment with bank statement etc. and it somehow bugged out the conversation and won't allow me to answer now. I'm even unable to make new ticket kek.

[uneven oxide]

@radiant raft ⤵️

Please contact us via email for support with SE.Pay. You can use our contact form here: https://streamelements.com/contact Thank you.

[hardy walrus]

Fill that out with the basic description of the issue and you'll be able to handle the stuff after a reply is returned.

[radiant raft]

Thank you very much

[wooden kindle]

Hey All, maybe someone could help me here! (I have very little programming knowledge).

I am trying to create a simple custom widget, which shows my subscriber count, but I want it to fade in and out.

(I have an animation where I only want subs to show when a certain part of the animation is showing.

Could anyone help me with this please 🙂

[wooden kindle]

so I have...
<div id="myelement"> </div> in html

Under the on event and on load JS sections I have
document.getElementById('myelement').innerHTML = obj.detail.session.data['subscriber-goal'];

no idea why the text isnt showingg

[frigid dagger]

Hey everybody!

I'm completely noob in js

I'm creating a subtrain bar with sgv circle timer

How I get the data and add this to html?

[real furnace]

I have no sample code to share at the moment, but you just need to have a custom widget in the overlay listening to the chat messages and when the bot command is sent by a mod or broadcaster the overlay can do whatever you need it to do.

[real furnace]

hey theMahano, shoot me a DM and I can give you a hand with that

[dusk token]

Hey there,

I'm attempting to setup a new chat command that will keep track of my time alive and I'm not sure if it's possible. I figured I would send a format and see if someone might be able to answer my question.

I want the timer command to be something similar to:

!timer

"Bwais has been alive for 45:36"

with commands such as:

!resettimer

"Bwais's survival time has been reset."

!settimer

"Bwais adventure has begun"

I'm not sure if the chatbot has the capability to track time, but if it does I was curious if you had any suggestions. Thanks.

[crimson kettle]

how do I use Mecoins

[broken zenith]

Hello!

I need help.
I often run into the fact that the text of the notification (for example: <name, thank you for following>) hangs out of the notification box due to its length.
I used to use streamlabs notifications. These notification boxes are resized (for example, width) compared to the text.
I would like to use this in streamelements as well. Currently, I have a very simple oblong notification box, and I want to automate the scaling of its width to the length of the notification text.
Is there any solution for this?

Thanks for your reply!

[severe shell]

That is not possible using Streamelements variables. You would need an external counter API and use it with ${customapi.LINK_HERE}

[severe shell]

Unfortunately, there is no option for a dynamic font size or a dynamic box size on Alerts. The workaround would be keeping the username on the first line and the rest of the text on the next line. Just press ENTER after {name} and it will break a line.That way, the username will always be on the first line and you can have a bigger username in there.
I know it is not an ideal solution, but it is the only one I can think of right now. Well, you could use custom CSS, but you will need to create your own dynamic text font code

[broken zenith]

yes, that's what I came up with, unfortunately. the problem is that I use an elongated notification box and it is ugly if the text is in two lines. maybe there is someone in this group who can help with CSS?

[severe shell]

Zaytri and @covert ferry I was taking a look at the endpoints for muting alerts and saw an endpoint that effectively mute the alerts
URL: https://api.streamelements.com/kappa/v3/overlays/ACCOUNT_ID/action
Request type: PUT
Headers:
accept: application/json
content-type: application/json
Authorization: Bearer JWT_TOKEN

Body:
one of them:
{"action": "mute"}
{"action": "unmute"}
{"action": "skip"}
{"action": "pause"}
{"action": "unpause"}

@still juniper maybe you are interested in that as well

[still juniper]

v3? Maybe they fixed the endpoint finally...

[severe shell]

Yeah! Unfortunately, the API page doesn't have any v3 endpoint yet. Let's hope they will update the documentation soon

[still juniper]

Though make sure the update is properly propagated to the overlays. Old endpoint would show the alerts as muted in the dashboard, but overlays would never be muted (because they were sending an incorrect/old websocket event)

[severe shell]

I checked that, it persists on overlay reload and the websocket is receiving the information

[hardy walrus]

overlays are changing as well so it probably might be happening.

[still juniper]

good news then, thanks for sharing

[frigid dagger]

Hello! I need a help for make subtrain, I want make the name of last sub disappear after x time

but when I receive a new sub it appears again and the timer reset

also I have a circular stroke using sgv I want use it for represent the time outing

can someone help me with this please

    const listener = obj.detail.listener;
    const data = obj.detail.event;
    
const formatCash = n => {
  if (n < 999) return n + "x";
  if (n >= 999 && n < 999999) return +(n / 1e3).toFixed(1) + "k";
  if (n >= 999999 && n < 999999999) return +(n / 1e6).toFixed(1) + "m";
  if (n >= 999999999 && n < 999999999999) return +(n / 1e9).toFixed(1) + "b";
};

    if(listener  == time(10000) + 'subscriber-latest'){
    $("#lastsub").html(data["name"]);
    $("#times").html(formatCash(data["amount"]));
    
    $('#lastsub').delay(5000).hide(0);
    }

});```

this is what I have in the moment

[real furnace]

I'll take a look for you

[frigid dagger]

wow thanks so much!

[real furnace]

me manda um DM tenho algumas perguntas sobre o widget

[frigid dagger]

claro

[gentle geode]

Hey, sorry if this is a bit of a dumb question or if it doesn't make any sense but I was wondering if there's a more efficient way of developing a widget other than using a code editor, and copying and pasting the code as I write it into Stream Elements to test if it works. I don't have much experience with coding things but previously I would've launched a live server using VS Code and the changes would appear as I've saved my files but obviously this doesn't really work as it seems like default html css and js syntax differs slightly from the one SE Custom Widgets.

[weary tangle]

hi, I have the question about the bulk edit loyalty point

how can I edit it for all user one by one in my channel

[real furnace]

Do you want to edit on bulk, multiple users?

Or one by one?

[real furnace]

There is a way to set a local Development server that connects to the editor. I can help with that, send me a DM. We are working on a new editor that will provide a better Development experience, but is still in the design phase.

[hardy walrus]

Sorry about that.

Actually meant to link this as well https://github.com/tehbasshunter/localdev

[weary tangle]

One by one because of the wrong operation for sending the points to everyone

But it is the few weeks ago

[real furnace]

On your streamelements dashboard -> click in loyalty -> leaderboars there you an add and remove points one by one

[weary tangle]

Could I use API to do it because I will use the formula to set the new point for everyone

There are 40000 people to do it

[hardy walrus]

There is an endpoint to mass edit users but it would require EVERY username to be included in the call which in itself would probably take a while if not get rejected.

Now depending on how you want to edit the points for everyone (Varying amounts or set everyone to specific amount) there is a 3rd party way you could possibly do it.

[weary tangle]

I hav all username and origin point data

[hardy walrus]

Now how do you want to adjust the points?

[weary tangle]

Yes

I want to adjust all user’s point after running a mathematical formula

[hardy walrus]

Yeah. That's a hard nope from me

Not quite sure how that'd be done tbh.

This is the endpoint I think you'd want to mass.adjust but not sure where you'd be able to do it based on other information https://dev.streamelements.com/docs/api-docs/54472038d5274-channel

[weary tangle]

Oh yes this is what I want

But I found that it need auth

How can I get it

[hardy walrus]

Is it solely something for your channel or mass availability?

[weary tangle]

Yes I just want to set all user’s points individually

[hardy walrus]

Depending on who is going to use it will determine how much fun you'll have getting auth handled.

[weary tangle]

Because I have no idea to set it for so many people with ui operation

[weary tangle]

I’m the mod of the channel

[hardy walrus]

Solely that channel?

[weary tangle]

Yes

[hardy walrus]

1 sec

Because the easy way will involve credentials that are not supposed to be distributed to anyone outside of staff/certain people it's a little funky figuring it out.

[weary tangle]

I see

[hardy walrus]

Now if everything was handled by the streamer it wouldn't.

[weary tangle]

The api seems not open to everyone

[hardy walrus]

For the sake of clarity: where are you in the flowpath of the API call/response?

Or what part do you manage.

[weary tangle]

I will use node to fetch

And set it using for loop

[hardy walrus]

While the situation sounds easy enough to solve I've asked elsewhere for guidance given that option isn't a safe thing to do when more than 1 person is involved.

[weary tangle]

Okay thank you

I hope this is last time for me to do such trouble task

Or is there any way to get the list of the mistake operation is sent about 2M points for all user.

[vital saffron]

anyone know where to get additional social icons for a super theme? the theme has a link to a dropbox but the folder has been deleted and the super theme is missing an instagram icon

[gentle geode]

How would I go about accessing the name of the most recent follower - tried using session data but obviously it purges at the end of a session

[plain jasper]

Hi everybody!

I'm trying to load a Streamelements overlay in an OBS Browser source inside a Kubernetes Pod but I'm getting errors and the source is behaving weirdly.
Has anyone encountered something similar? Is there a known solution?

Thanks!

[dense cedar]

Hay I have the tip me link but I can't find were to enter it any help please

[severe shell]

If you use the endpoint presented by sudo, you don't need to go for a loop. As he said, you can add the usernames in there and the amount of points you want to add/subtract or even set a specif amount. The only thing is to get all users you need, but if you gave them 2milion points, probably they are all at the top of the leaderboard, so you can get their names to add to your code.
If you are a moderator and have access to the streamer's SE dashboard, you can use your own JWT for that, which allows you to run the endpoint. Just pay attention to put the correct channel ID.

[severe shell]

It depends on where you are trying to access it.

• Are you trying to get the name inside the overlay? If so, you have a widget in Labels > Followers > Latest > Latest follower.
• If you are trying to find the information on the SE dashboard, you can go to https://streamelements.com/dashboard/session, tab Labels and the first field is the latest follower (which is not reset at the end of a session)
• In case you are trying to get the name of the follower in a custom widget, you can get it from here:

window.addEventListener('onWidgetLoad', (obj) => {
  console.log('Latest follower: ', obj.detail.session.data["follower-latest"].name)
})```

[weary tangle]

Okay I will try it

[severe shell]

Depending on the icon style, you can look for them on Flaticon, Freepik and other icon websites. Also, Google images is a good place to find some.

[weary tangle]

But how can I get the JWT for my own

[severe shell]

Go to your Dashboard, click on your avatar on top right > your username > Channel settings > Show secrets (just pay attention to keep the JWT safe as it is a sensitive information)

[weary tangle]

Okay

[gentle current]

Good evening! I have been tinkering around with the Channel Rewards alerts (from the Overlays gallery > Widgets) and, from what I can see testing it, it only responds to Rewards that have a message attached. I've tested it with a few rewards that don't require a message and it seems like 'onEventReceived' doesn't fire. Anyone else have any thoughts?

[hardy walrus]

If you mean.twitch channel points then yes.

We don't have an integration ATM.

[junior wadi]

hi! i want to add this api (api thecatapi com/v1/images/search?) as a chat bot command but only want to keep the URL response that is generated through the api. is there a way to do that?

[hardy walrus]

the bot unfortunately can't parse json responses and would need to be done server side.

[junior wadi]

i see thanks anyways

[wide cliff]

I'm looking for someone that know how to make custom widgets, I have a couple of questions and a possible commission!

[plucky wing]

@viral patrol Hello, I have a question. I downloaded the Bank Heist Widget and everything works except "Max points to gamble". No matter what I set, the viewers can still bet as much as they want. Does anyone know what to do with it? Thank you for answer

[gentle geode]

Hey, I'm working on a custom widget and one of the things it's supposed to do is change a static image source to a gif once a follow event happens. The problem is that whenever I try to emulate it, it gives me an uncaught TypeError stating that it cannot read the properties of an undefined field. I've double checked that the field exists etc. but it keeps giving me shade. Would anyone be able to peek at my code and see if they can spot any mistakes?

window.addEventListener('onEventReceived', function (obj) {
  let listener = obj.detail.listener;
  let fieldData = obj["detail"]["fieldData"];
  
  let logoGIF = fieldData["gifImage"];
  if (listener == "follower-latest"){
    document.getElementById("logo").src = logoGIF;
  }
});             

  "gifImage": {
    "type": "image-input",
    "label": "Logo GIF Event",
    "value": "",
    "group": "Logo Settings"
  },

<body>
  <div class="main-container">
    <div id="circle-bar"> 
      <img src="{logoImage}" id="logo" /> <!-- LOGO sIMAGE -->
    </div>
  </div>
</body>

[severe shell]

onEventReceived cannot read obj["detail"]["fieldData"], you need to declare it in onWidgetLoad as a global variable

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

window.addEventListener('onEventReceived', function (obj) {
  let listener = obj.detail.listener;  
  let logoGIF = fieldData["gifImage"];

  if (listener == "follower-latest"){
    document.getElementById("logo").src = logoGIF;
  }
});

[gentle geode]

Silly me, thank you!

[ancient citrus]

Confirming that data["subscriber-session"]["count"] is no longer present for YouTube?

[gentle geode]

Coming in with another dumb question most likely... Now that I've figured out how to properly get the image changed, I'm running into an issue of the gifs not loading properly; sometimes they'll load their last frame and then loop back to the first one, and sometimes they'll load the static image first and then reverse it. What I expect to happen is the follow event happens, image updates to a gif that runs for about 1 second until it reaches it's last frame, at the same time, I set a timeout function that basically does the reverse i.e. loads a reversed gif after 5 seconds, and once that runs, hopefully I'd expect the gif to look like it smoothly transitioned from start > end -> start, problem it doesn't and I don't know if what I'm doing is somewhat logically incorrect or if it's a downside of using gifs.

window.addEventListener('onEventReceived', function (obj) {
  let listener = obj.detail.listener;
  
  logoGIF = fieldData["gifImage"];
  logoGIFReversed = fieldData["gifImageReversed"];
  
  
  if (listener == "follower-latest"){
    gifLoop();
  } else if (listener == "subscriber-latest"){
    gifLoop();
  } else {
    return
  }
  
});               

function gifLoop(){
  $("#logo").attr("src", logoGIF);
  setTimeout(function(){$("#logo").attr("src", logoGIFReversed)}, 5000);
}

^ fieldData is set onWidgetLoad

the gif runs twice, on the first run you can see that when follow event is called, it automatically shows the last frame of the gif and then resets it, on the second run, the gif starts reversing then goes forward???? I don't know how badly I messed this up.

[severe shell]

The problem is not with your code, as far as I know, it is just gif images have a strange behaviour sometimes depending on where you are running it. My suggestion is to convert the gif to webm and work with it as a video, which will give you better results. You can use https://ezgif.com/gif-to-webm for that.

[gentle geode]

I thought that may have been the case; thank you once again

[austere wigeon]

Hey I'm trying to fix someone's code with their tip counter but I'm having trouble getting the global "count" variable in the onSessionUpdate EventListener
I haven't used streamlabs before and I only had the documentation + what someone already wrote to work off of so I'm kinda lost about how to get the current tip amount
I tried accessing obj["detail"]["session"]["data"]["tip-total"]["amount"] but it says it's uninitialized so idk
But the issue I noticed with the code I was fixing was that it seemed like the person that wrote it initialized a global count variable to count the curr donations but instead of adding new donations to the curr donations, they just did count = obj["detail"]["session"][index]['amount']; which would of course only update the count to be the tip num

But I can't find the thing in obj that would give me access to the curr amount and in the EventListener the initialized count variable turns into [object HTMLSpanElement]

Was helping a friend out but this is the first time I ever worked w/ the streamlabs API so I was trying to learn as I go x.x
Edit: I also found that count = obj["detail"]["session"]["data"][index]['amount']; works in onWidgetLoad to get the tip-total but it doesn't seem to work in onSessionUpdate

[honest bloom]

hi there, hope you guys are well.
pls may i get some support regarding the rotating merch widget, it seems not to be rotating and yes i do have more than 1 item in my merch store

[severe shell]

Well, first I believe you meant Streamelements, as Streamlabs is another system from another company.

The correct key for tip ammount via onSessionUpdate is obj["detail"]["session"]["tip-total"]["amount"] (without the ["data"]). This is how much the user has received since first day and you can see it on https://streamelements.com/dashboard/session, tab TOTALS

The key you posted is accessible via onWidgetLoad, which is used to load the widget for the first time and represent the same thing.

[severe shell]

Try to recreate the widget or even try to check if creating a new overlay and adding that widget in there will work for you. I have seen someone in the past with the widget broken and they needed to recreate it in another overlay.

[honest bloom]

Hi, i have done so a few times as well as setting up new browser source, still not rotating and only showing the first image of the store, any other solutions

[severe shell]

Hmm, so probably it has something to do with the account. As we don't have access to your data, I would suggest to open a ticket with support in this case, so they can look at it and help you internally.
Please go to https://support.streamelements.com/, click the big blue question mark on the bottom left and select Support Ticket Form.

[honest bloom]

thank you will do so

[gentle geode]

Is it possible to get the total followers count onEventReceived if the event is 'follower-latest' or is my only option to get it from onSessionUpdate? I'm trying to update a follower counter when a follower event is triggered but whenever I emulate it and feed the counter element the ['amount'] from the obj['detail']['event'] it turns it into a seemingly random number.

[wide cliff]

I need someone who knows how to code custom widgets to contact me, either reply here or DM me please!

[opaque wasp]

Are you looking for help with your custom widget? If yes feel free to ask in here! Otherwise if you're looking for someone that can code your widget, feel free to DM me

[opaque wasp]

You can't access session data via onEventReceived afaik + emulated events can't contain misleading data

[twin kernel]

hello again, I would like to know if there is any way to show the store items that have been redeemed in the private of the people who redeem

[terse dawn]

is there a way to reload the 7tv emotes for the overlay chat box? i'm testing it in the overlay editor while offline and newly-added emotes don't show up.

[hardy walrus]

is it for twitch or youtube?

[real furnace]

You can get it from onSessiomUpdate as the onEventReceived just checks for the latest real-time event. Another way would be to get the initial count from onWidgetLoad with a global var and then add it with the onEventReceived followr var

[gentle geode]

I figured it out already; was just wondering if it'd be possible with just onEventReceived as it states in the docs that it's more performance friendly to do it that way. But thank you anyways

[real furnace]

No worries. It is more friendly because loads less data, but for that you have to store the initial count from onWidgetLoad and then add to it

[twin kernel]

I'm sorry I didn't understand

[terse dawn]

this is for twitch

[severe shell]

He replied to you by mistake, it was to reply GraksO.
But answering your question, only the streamer can see the redemptions made in their store. The only way an user can check the redemptions they made is using API, so no interface for the user to check that.

[frigid dagger]

How I clear the timeout function or add more time to it?

I have a subtrain here, I'm testing with 3s

follower A send sub and when left 1s to dissapear the name, the follower B send sub and it dissapear lefting 2s

I want reset the timeout function in js, for each time I receive sub

[young shard]

save the return value of setTimeout into a variable, and if you use clearTimeout on that, it'll cancel it and then you can use another setTimeout to redo the timer

[terse dawn]

is !emotes update supposed to reload 7tv emotes?

[frigid dagger]

can you send a example in code pls?

I'm coding but I'm noob

[young shard]

https://stackoverflow.com/a/1472717

[austere wigeon]

Hey I'm helping a friend fix up some code they got from someone else and it's just a dono bar that displays the curr amount and etc.
It seems like they setup a global "count" variable that first gets the curr donos then does count += [new dono amt] (main bug before was they did count = [new dono amt] instead), but I'm not sure if this actually increments the donos in the backend or wherever that data's stored 🤔
If a real donation came in would I have to increment any additional things on my end or is it fine?

[severe shell]

You can just read the obj.detail.session["tip-session"].amount or obj.detail.session["tip-total"].amount value from onSessionUpdate (depending on what you want to collect exactly) as they are incremented on each donate.
However, when working with obj.detail.session["tip-session"].amount and session is reset, that key is removed and will be created on first donate.

So, a recommendation is to check on onWidgetLoad if the key obj.detail.session.data["tip-session"] exists. If not, set the amount to 0 on the overlay

[raw wedge]

Hello)
I set a command with spotify api endpoint request, but it returns with "EAI_AGAIN curl-xgethttps curl-xgethttps:80", and this is a dns problem, how i see. Any fix for that?
Thanks)

[toxic scarab]

Can anyone tell me how to edit the sideways chat code to include a custom font?

[severe shell]

Probably it was a temporary issue, I've just tested and it worked fine. Can you check again?

[raw wedge]

Still dead

[severe shell]

How is the command setup?

[raw wedge]

Curl, token. +/- simple

[severe shell]

This is totally wrong... You are using a curl command to try to get to use the API. The bot doesn't support that. This is a command you run on Windows/Linux terminal.
Try to use this one here:
#command-share message

[raw wedge]

Oh, really. Thanks!

I'll try it)

[twilit crag]

I'm not sure I'm asking in the right place. If not, I'm sorry.

I'm attempting to set up the event rotator widget by CO6STUDIOS. I'd love to make the widget itself a bit smaller in width but I can't. The text gets cut off. Is there any way to fix this? If not, is there a widget similar that I could use instead? I like how the widget has the slash sliding animation

[tepid cliff]

I'm looking into how to create a custom chat box and was wondering if there are any good starting points from SE or that anyone knows of?

[opaque wasp]

any of the chat widgets you find into #widget-share could be a great start point if you already have some coding knowledge

[opaque wasp]

you're asking in the right place, do you have any coding knowledge or?

[tepid cliff]

oh awesome, thank you. I've done mainly data analysis with python so will be a bit of a learning experience 🙂

[opaque wasp]

it should be pretty doable, feel free to ask in here if you face any problem

[twilit crag]

I don't I'm afraid. It's something I always wanted to learn but never got around to

[terse dawn]

i've noticed that !emotes update doesn't update the 7tv emotes, would this be considered a bug report or feature request?

[raw wedge]

yeah! It's really works!) Thank you
One more question for this, can it pull the song link? Or may it have some settings or something?)

[severe shell]

No, it doesn't pull the song link. For that, it would need someone to setup a server to connect to Spotify API and treat the response to send the link in the bot message.

[raw wedge]

okay, got it 🙂

[orchid lodge]

Hey there! 👋 I'm having some issues changing the font of a StreamElements overlay source through CSS in OBS. My method worked for the chatbox, but not for the subscriber count and other 'labels'. I can't change the font family, weight, size and color but somehow can change the style to italic 🤔 '!important' doesn't help here either. I've tried to change it within 'body {}' too, so that should cover everything. Is it still somehow possible to change the font? I'm clueless.

Oh wait. After searching again I found out this issue cannot be solved with the default widget: #dev-chat message

I'll try that.

[dusty whale]

Hello, I would like to share a widget I made with a friend. How do I create a link so that when my friend clicks on it, it installs in his overlays?

[severe shell]

Well, I tried to change it to make it more responsive, but it is impossible to make everything responding accordingly as it has a lot of fixed values. After some time working on it, I think I got a acceptable result.
However, if you are trying to make it smaller, you will also need to change the font and slash size to make sense.

On overlay editor, click on the widget > Open Editor. You will need to replace the tabs CSS and FIELDS.
Click on each tab and copy everything to a notepad before replacing it. That will ensure you have a backup in case of everything went wrong.
Copy the content of each file below and replace each respective tab.

It will create a new entry on left size called "Widget width (in PX)" with the default value of 500. Just change it to a slower value and test it. Remember to change the Slash size and Title size to make some sense, visually speaking.

Let me know if it works for you.

[twilit crag]

Thank you so much! I'll definitely give that a go in the morning. Currently 2am here

[severe shell]

Same here! Take your time! 😄

[frigid dagger]

I still not understanding how clear timeout when receive a new sub

and restart the animation etc without it bug

[severe shell]

const timeoutName = setTimeout( etc etc etc your code here bla bla bla )

When you want to clear the timeout, you run this:

clearTimeout(timeoutName)

[frigid dagger]

ohh nice, I will test here

[frigid dagger]

can I send you the code?

I'm having problem with subs names disappering before the time in my subtrain

the first sub works fine, but the second disappear with the same time left for the first sub disappear

[severe shell]

I'm about to logout for today, so I'd suggest that you post the code here so others can also help you when they see it. If your code is too big, put in a notepad and attach it here.

[frigid dagger]

Fine, Thanks so much!

[high shadow]

Suuuuuuu

[neat frigate]

Hi all, im building a new web app to send donations to streamers.

I filled ouath2 api access form but i got no response from that.

how can i find a support about this ? also i sent an email to support team too and they just asked me that if i filled the form and i said yes. There is no answer after this.

im just wondering if that form things are not necessary because i can find my client_id and client_secret by myself

[inner lagoon]

I applied to this https://form.asana.com/?k=R1cL_2hpCK74zXViBD2Hug&d=224349692947415 months ago but haven't heard back. who can i ask to follow up on this?

eglorian hasnt gotten back to me about this

[severe shell]

Yeah, the process of oAuth2 is really taking too long, unfortunately. The backlog is huge for that and it is taking months last time I heard about it 😦

[severe shell]

This is the same situation as above... It is taking months

[inner lagoon]

its been almost a year i think. this is crazy

at least 6 months. probably more like 8

[opaque wasp]

Why isn't this font https://fonts.google.com/noto/specimen/Noto+Sans+Mono part of googlefont's custom field?

[neat frigate]

i just mailed them and they said "we are looking into it" so yea i think you re right. Also documentation is too blank 😄

[lunar beacon]

Is there an array for YouTube memeber gifter like there is for recent memebers
data[“sponsor-recent”]
If anyone can help it’ll be great! Thanks.

[vale harbor]

I’m trying to figure out how to get images to scroll like this in stream elements and possibly link a bit amount to each image to change its opacity.

Would that be possible?

[severe shell]

There is no option like that in default SE widgets. You would need to create a custom widget for that. Do you have any coding knowledge (html, css and javascript)?

[vale harbor]

@severe shell i have 0 coding knowledge unfortunately 😦

[lunar beacon]

Is there an array for YouTube member gifter like there is for recent members -
data[“sponsor-recent”]
If anyone can help it’ll be great! Thanks.

[inner lagoon]

Since its so hard to get approved for a one-click overlay sharing ability i'm making a Chrome extension that lets you import a zip file containing widget files and it does it all. lol

[severe shell]

According to the documentation, no. But maybe you can emulate a gift event on the overlay, check what is shown in console.log and work on that

[severe shell]

Everything related to development that depends on SE is taking a huge delay (oAuth2, one-click sharing, widget-sharing...) 😦

[lunar beacon]

hey! thanks for the response.. the console.log says its sponsor-latest

but the same array is used for default memberships (not gifted ones)

[severe shell]

But you can chek if there is any information that is related to a gift

[green night]

I'm not a dev but maybe someone here can help me. How do I list all subs from my current live session in the streamelements overlay? I would love to acknowledge them at the end of the stream.

[wicked scroll]

Hello, is there an way to make a Variable and be able to change it through command?
Kind of like how ${Count} works but instead of Numbers it allows Letters and such?

Is there a Variable for this?

[real furnace]

you can use this #widget-share message

[upper willow]

helloo, sorry to bother, i was wondering if anyone could help me with the widget "Neohud" by @bitter abyss ! i've been struggling to find out why for the followers goal it isn't using the total followers amount, and in the subs goal it's using a subs amount i've never reached so i'm confused on how to fix that

[inner lagoon]

I haven't looked at that exact widget but it's likely using the session data. At the top of the widget editor go to session data and look through there. There's a goals tab that may be where it's getting the data from.

So everyone, I've been hard at work developing a Chrome extension that lets people export & import StreamElements overlays. So for all you graphic designers and widget makers who have been waiting forever for the one-click sharing ability, once I'm done making the extension you will have this to use instead 🙂

[glacial forge]

Hi, I am seeking a dev who would be willing to create a command that converts a time in another time zone whether 12 hours or 24 hours (depending on what's easier coding) into another time zone for eg "20:00 AEST to MST" and then it converts your time into that time zone.

I would love to have this for my viewers in chat so they know the times that my stream starts etc.

If anyone is up for the task kindly DM or respond to this message. Thank you 🙂

[knotty thorn]

hello i see under session data there is a 'cheerPurchase-' - what are these from?

[shrewd copper]

Hey. I would love to see that. Do you know we have a new widgets and overlay editor? It's now in beta. Do you want to have a peek? Also, in the new system, we will have a built in "share" function for everybody. Any feedback at any point will be highly appreciated (p.s. I am the product manager in-charge of that in StreamElements)

[inner lagoon]

Yes please

[shrewd copper]

you should have access now. It's under "Streaming Tools>> Alerts and Widgets".

[shrewd copper]

you are also welcome to the beta-widgets2-0 channel on this server

[inner lagoon]

Thanks, I'll check it out tomorrow! Any timeframe when it's expected to be released to everyone? @shrewd copper

[shrewd copper]

The new editor: In a week or so, this will be available as an opt-in for all users. In a couple of weeks it will be out for everybody. The sharing function will probably be available during March.

[shrewd copper]

We have also started on a new SDK project and looking for design partners...

[inner lagoon]

Oh that's awesome then I don't need to make that extension haha I've been struggling

[clever raptor]

Hi yes sorry to bother here but the latest update to both this add on & obs has given me crash issues & what I have found that cause im in the windows insider program it is causing it to crash when I have 2 sources for display or when I click on any of them. OBS works fine without S.E.Live add on it only happens when this add on is installed & running. not sure what to do so I am brining it to your attention.

[still juniper]

The SDK is meant to improve/replace the current creation of custom widgets, or does it only target alerts? And in general, are current overlays/widgets be compatible with the new editor, or everything is to be reconfigured if using the new option?

[wide cliff]

Is there a way I can alter the 'event list' widget so the box where the text is in would change size accordingly to the amount of text.

I've resorted to having decently large boxes so it would fit all usernames but when someone with a short username pops up on the event, there's a lot of screen space wasted on nothing.

[severe shell]

Not with the default event list, that would need to have a custom widget that have this option.
Maybe you can find something on #widget-share, but I don't remember any that does that off the top of my head

[shrewd copper]

That's a good idea idea to have. I will take it internally. We can add an "auto" font size based on amount of text for the textbox

[lunar beacon]

https://dev.streamelements.com/docs/api-docs/775038fd4f4a9-stream-elements-custom-widgets
when are you updating this to include new YouTube updates like gifted memberships?

I am not able to access this variable and alerts for gifted memberships!

[wide cliff]

Yeah I checked pretty much all widgets there and didn’t find any that behaves that way, appreciate the help though!

[wide cliff]

That would be amazing! If you’d like I can DM you a video of a streamer who’s widget is working like that.

I don’t know anything about coding so i’m not sure if that’s helpful or not

[still juniper]

My message was completely ignored for some reason. I feel if you're improving the current custom widgets stuff, you should probably talk to 3rd party devs and address the currently unsolved (huge) issues, and also warn if things are going to break in the near future

[severe shell]

@shrewd copper

[upper willow]

it is using session data (even though i don't really know where it gets the data from bc it's not accurate at all) but i don't find a way to change it

[severe shell]

Usually the goals are obtained from https://streamelements.com/dashboard/session
Go to the tab GOALS and check if the values are matching. If so, you can just reset or change to whatever value you want in there.

[upper willow]

thanks i'll check that!

[shrewd copper]

We are talking to 3rd party devs, and if you are one, please dm me because I would love to talk to you.
Nothing is going to break as we are offering a complete new system and keeping the current system intact

[polar hedge]

can we rename 8 ball? I want to change 8-ball says to something else

[hardy walrus]

Not possible unfortunately.

[real furnace]

the SDK will improve/replace the current creation of custom widgets and the system will be compatible with all the previous created widgets

[opaque wasp]

lets goo

[stark condor]

I have a custom widget (someone else made) with the CSS and JS tabs empty. Am i able to customize this widget? I think I can figure it out eventually but right now I'm getting worried its not possible

[hardy walrus]

As long as you are able to do this with the widget then yes https://streamelements.is-serious.business/8KN3QKG.jpg

[stark condor]

yeah, i can edit the html. just cant figure out changing the font and adding a fade in/out (chat widget)

[stark condor]

and thank you

[hardy walrus]

I'd say grab the code from those css and js links and put those in their respective tabs and see what happens.

[stark condor]

oooo is that why im confused! thank you

[hardy walrus]

Yeah. Looking through it they remotely handle that rather than have it managed by you.

[stark condor]

appreciate the insight.

[orchid tree]

Hello all! I'm an artist with almost zero programing knowledge. (I'm super interested in learning though!)

I'm trying to implement a custom widget/alert system where:

1. An idle animation plays continuously (video A)
2. When a subscriber event appears, replace the idle animation with a donation animation (video A -> video B)
3. Goes back to the idle animation (video A)

Later, I plan on creating more video for subscriber, donation, host... but for now, I just want to warp my head around the code and analyze how it works 🙂

Here's a visual example of what I want to achieve:

So far, this is what I put together but obviously it doesn't work lol:

[fast cairn]

Hi, is there any way to put this on my wordpress website?

[fierce wing]

Hey all!

I am trying to do a randomise Chat command and a Store Loyalty redeem, but I keep having the redeem gif come up but not the randomly picked message to appear in chat. Is there a way of doing this.

Example:
$(redeem Hogwarts) $(user) Your house is ${random.pick 'Gryffindor' 'Slytherin' 'Ravenclaw' 'Hufflepuff'!}

So the sorting Hat appears on screen with his animation and the user gets sorted into their house randomly.

[hardy walrus]

unfortunately you can't have both. It's one or the other.

[fierce wing]

oh poop! that sucks, oh well was worth to ask anyway. Thank you

[severe shell]

You forgot to declare the variables. video, source, listener… you have to inform what each of them is.
Maybe we can help here. I think if you put this above if(listener == subscriber) can help:

const listener = obj.detail.listener;
const video = document.getElementById("video");
const source = document.getElementById("source");

Also, it is good to check the browser console (usually F12) to look for error messages and have a better idea what is wrong.

[alpine mango]

Is there anyway to give loyalty points for chatting?(Wize bot's ALLOCATION BY ACTIVITY)

[pulsar willow]

Hayy

I just changed my twitch name and my twitch e-mail, and now I can't get the chat bot to join. When I click Join Channel it says that it successfully joined my channel, but I can¨t see it in my channel.

Can anyone help me? by the way I am a german, sorry for my bad english

[uneven oxide]

If you changed your name on Twitch, please follow these steps:

1. Visit https://streamelements.com/logout and then log in again by connecting with Twitch.
2. On the right side of the dashboard page that opens, select Join under bot settings. If it says Part select that and then select Join to send the bot to the chat. Don't forget to mod the bot by typing /mod streamelements in your channel if you have not already.
3. Post your old and your new name here so that we can update your channel's chatstats tracking (must be done by staff).

[proud cradle]

Hello, how can I save a data and that the new session can obtain this data?
I need to save the last time a command was executed (!test) and verify that 10 minutes have passed since the last time so I can run it again

[minor elbow]

I hope I don't get the wrong channel but I wanted to ask, if the StreamElements bot can be added to Discord as can be done with Nighbot?

[hardy walrus]

We do not have discord integration atm unfortunately.

[dry creek]

Hi , I am trying to share one of my overlays with a friend so he can help me with something and I am a bit lost on how I am gonna share it ?
when I click edit and copy the link on top it like throws him out to the main page. Could I get help to understand how to share my overlay ? 😄

[wet mauve]

If you click on the Copy URL in your overlay gallery, it should work -

But he will only be able to see the changes made on the overlay. If you want him to make edits for you, he'd have to be added as a manager on your SE profile

[severe shell]

Ask your friend to add you as EDITOR following this guide:
https://www.youtube.com/watch?v=zl_h-ttZDF0

Once you have editor access, you can click on "Duplicate" in your overlay and choose your friends account.

[drowsy dust]

hello, there. i have question, it's about "fields" in editor mode when you are working with custom widget is there a place where i could read more about it? thank you.

[narrow spade]

Is it possible to add TTS to a custom widget like the one in the default Alertbox widget?

[opaque wasp]

https://dev.streamelements.com/docs/api-docs/775038fd4f4a9-stream-elements-custom-widgets#json

[opaque wasp]

what's the issue about it?

[narrow spade]

I would like to add TTS for my subscriber messages in my custom widget.

[gilded kindle]

I have a bot that reads twitch chat and uses it to write a list of character names to file for use in a game. I'd rather not have people run a random .py file from me and do it more officially through StreamElements or something similar. Is it possible to do this with StreamElements?

[stiff crater]

I don’t know if this the right channel but I have a sponsorship and I can’t start it even thought it hasn’t expired

[severe shell]

No, Streamelements bot is not able to write in a file

[severe shell]

The best option for that is going to a ticket system.

[uneven oxide]

@stiff crater ⤵️

Please go to https://support.streamelements.com/, click the big blue question mark on the bottom left and select SE.Sponsorships Form. Fill that form to submit a Sponsorship related ticket and wait for our Support Team to get back to you. Please do not fill the form multiple times, as that will not speed up the response time.

[pliant tundra]

Hey, guys! can i create a chat command in the widget? For example, I want streamElements to say !hello in the chat, this inside the widget.

[severe shell]

You can, you can use https://jebaited.net to get a token for botMsg and fetch the link provided using javascript in a custom widget
You can find instructions and an example code for that in Pinned Messages (third post from the list)

[gilded kindle]

can it copy to clipboard or have similarly easy to copy over bit of text?

[dense sparrow]

Hi,
i wan to use the AlertBox {image} template string but it always returns the same value regardless if the image is selected or not.

I am aware that i can upload image via fields image-input. But it feels wrong having the image upload on top of the AlertBox that does nothing.

I have also described it in this GitHub Issue. https://github.com/StreamElements/widgets/issues/42

[opaque wasp]

{{image}} - URL of image attached to alert. For example <img src="{{image}}"/>
{{video}} - URL of video attached to alert . For example <video src="{{video}}">

[opaque wasp]

That's doable, I know there was a bug that permit to use Google Translate in order to include TTS in custom widgets; otherwise you'll need to search for a API's service that returns audios when fed with text.

[still juniper]

You can use SE TTS in fact

The endpoint url is somewhere in this Discord

[dense sparrow]

{{image}} and {image} return the same UL neither of which is the image selected in the UI. Default value is returned instead
https://cdn.streamelements.com/static/alertbox/ALERT_STARS_converted.webm

[opaque wasp]

SE TTS is a thing?

[opaque wasp]

what I'm saying is that it returns default value when you're trying to use {{image}} but uploaded a video and the other way around

[dense sparrow]

But i have uploaded JPG and the POST request that goes to SE API right after uploading a image confirms that the JPG has been sucessfuly uploaded.

[dense sparrow]

Setting it through the alertbox default UI doesnt work but setting it from audio-input field works

[opaque wasp]

that's strange, I just tried with PNG and JPG.. both worked properly

[dense sparrow]

It doesn't work for me even on fresh overlay and alertbox

[opaque wasp]

can you send that image please?

[dense sparrow]

there seems to be delay when loading the image and is replaced by the default form me sometimes

[dense sparrow]

Ty will reduce the resolution

Unfortunatly SVG are not supported would be ideal for quality and small size

[main aspen]

Hi! I can't connect DonatePay. Help me please. When I click "connect" the next page is loaded, but then it returns to the previous one without DonatePay connected

[still juniper]

<#dev-chat message>

[pliant tundra]

Thanks! You are awesome!

[pseudo summit]

Hello! Im having an issue with the alerts. When I try to do the "Text over image" option, the text just does not display.

[uneven oxide]

@pseudo summit ⤵️

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

[pseudo summit]

Oh thank you, thank you! I have been stuck on this for hours!

[sterile forge]

Hey all, please correct me if I'm not posting this in the correct place but I had 2 questions regarding doing giveaways:

1. Is there a way to break up lines in the giveaway description. As it shows up its all in one line, i.e:

line 1 line 2

instead of:

line 1
line 2

2. Is there a way to do a giveaway without having to use loyalty points? Essentially I would like to do a giveaway where all it does is verify they are a follower and the user only has to type a special word or something in the chat.

overall loving the se bot though!

[proud cradle]

Hello, how can I save a data and that the new session can obtain this data?
I need to save the last time a command was executed (!test) and verify that 10 minutes have passed since the last time so I can run it again

[ancient lynx]

Hi! I'm kinda new to se widgets, and I am trying to figure it out how to get the data from the fields into my code, so for example, if I have a field that allows user to pick a color, how do I take the info and set that color into my code? Is there any guide somewhere were I can go check? thanks in advance!

[severe shell]

In the channel description, Overlay Editor Documentation

Those fields can be accessible via onWidgetLoad:

window.addEventListener('onWidgetLoad', (obj) => {
  fieldData = obj.detail.fieldData
  console.log(fieldData)
})```

[ancient lynx]

Thanks for the info and help! I'll try it out and check the docs also!

[severe shell]

1. There is no way to add description in more than one line
2. You can set the "Ticket cost" to 0 and "Maximum ticket per user" to 1
   There is no way to check if the user is a follower, but you can put your chat in follower-only mode during the giveaway

[severe shell]

At first I thought about the chatbot Timer, but it won't work because it depends on the amount of the chat lines in the last 5 minutes to trigger the timer.
You would need a custom API for that, not possible with just SE commands.
Unless you create a widget that alerts you every 10 minutes making a sound.

[sterile forge]

I think for the giveaway description there should definitely be a way to enter to new lines. I'm wondering where I can make that suggestions. I don't see why that'd be a limitation and it would make it so much cleaner for people.

I really appreciate your response

[severe shell]

#1063154790831501395

[sterile forge]

Thank you 🙏

[late cedar]

Hello is there a way for me to create a command that updates to the username of the person with the most stream elements points? I tried using the api link and make it display only the first username, but it displays as the following: {“_total”:(the total number),”users”:[{“username”:”(the username of the #1 person)”,”points”:(points that they have) }]} but i want the command to only display the username so is it possible to do so?

[severe shell]

Unfortunately, the API only provides response in JSON format.
You would need another API to extract the information from SE API and respond with text format.

[late cedar]

Is there a way that i can obtain the other api ?

Like is there an API for the text format that i can get my hands on or is it not available for the public?

[severe shell]

It is not a matter of "it is not available to the public" or "obtain access to the other API". What I meant is that you would need someone to code that for you and host it somewhere you can use it. The person should take the response from Streamelements API and manipulate the way you want so the result shows to your needs.

[late cedar]

Ohh ok so in other words i should make a website to display what i want from the stream elements API and then use that website link to create the command

Oh wait oops sorry for the ping

[severe shell]

Yeah, something like that!

[late cedar]

Aight thank you soo much for the help

[severe shell]

Don't worry, I prefer that way, because I know when someone replies do me! 🙂

[late cedar]

Oh ok 👍

[severe shell]

Can you try this and let me know if that works for you? I'm still making some changes, but I think it could work:
${customapi.https://seapi.c4ldas.com.br/top/$(channel)}

[late cedar]

Aight let me try it

Omg thanks a lott it worked

I really appreciate it

[severe shell]

I'm planning to do something like that for other API endpoints to convert to text... So, in case it fails in the future, you can let me know because maybe it needed some update, ok?!

[late cedar]

Yes ok I’ll keep you updated, I’ll play with the points to see if everything is working well

[severe shell]

At this moment, this is the only one that is working

[late cedar]

Ohh ok then I’ll tell you if anything changes

[uneven oxide]

@main aspen ⤵️

Please create a support ticket by filling out the form here: https://streamelements.com/contact This will ensure staff can track and resolve your issue in a timely manner.

[upper warren]

can anyone tell me what version of SE is running
im on version 27 and it wont let me update to version 29

[golden imp]

Has anyone run into the issue where you open OBS (in admin mode) and you switch scenes and it just crashes? never had this issue until recent updates -__- Please help!!

[floral blade]

Hey guys, I am having a issue with porting from StreamLabs to Streamelements, my problem is when porting over the overlays I am making nor progress, the progress bar stays at 0%, I have been waiting for an hour and it has been no changes. Any assistants will be helpful 🙂

[real furnace]

hey @floral blade when porting overlays sometimes the import tool get stuck because of file size, check your StreamElements account, see if the tips and alerts got imported, close the import window and try again with only overlays. If still won't go shoot me a DM and we can take a look together

[floral blade]

Will try this now thank you 🙂

[jolly dawn]

Hello there. I got started with StreamElements last year and made some cool stuff with it despite being relatively new to Javascript.

Recently, I've been hearing that PyScript, a way to integrate Python code into HTML, is currently in development. I'm much more familiar with Python than Javascript.

I'm aware that PyScript is currently in alpha, but is there any chance of PyScript being integrated into StreamElements once it reaches a stable version?

[hot trout]

seems to me like it just needs javascript

i.e. you can use it right now

as long as it supports whatever version of chrome is currently in obs

[real furnace]

our editor only supports javascript, html and css

[lucid juniper]

Hello, I created a custom widget that has 2 image inputs that I would like to be optional.

I'd like to hide the images from the overlay if there is no image uploaded so it doesn't show there is an image missing. I know I can do this with:

document.getElementById('team1Logo').style.display = "none";

but I'm not sure what I should be putting in my if statement to trigger this if nothing is uploaded. Any help would be greatly appreciated!

[floral wraith]

Hi, anyone happen to know how to edit chat? i want the username to be on one side and then the actual message on to the right of the name, like two separate columns instead of one paragraph if the message is too long

[pallid mirage]

Hi! has anyone been able to access the api documentation? I have been getting a blank screen on all my browsers.

https://dev.streamelements.com/docs/api-docs

[lunar beacon]

hey!
below is a code that I'm trying to run but it's not executing the requested function.. greatful to anyone who can help

      listener = obj.detail.listener;
    if (listener == 'subscriber-latest'){
          widgetSlide(6);
    } else if (listener == 'superchat-latest'){
          widgetSlide(10);
    } else if (listener == 'sponsor-latest'){
          widgetSlide(10);
    };

[severe shell]

Hmm, I think there is no obj.detail.listener in onSessionUpdate
Add an console.log("obj contents here: ", obj) right before listener = obj.detail.listener; to confirm and look at the console.

[lunar beacon]

i got a response.. it has a session obj

[severe shell]

It is working fine to me. Try to remove cookis and temp files to check. Or open it in a private window to test

[lunar beacon]

apparently the code works when I try to use all three conditions with ||

          widgetSlide(6);
    };```

[severe shell]

This is wrong. You are not testing if listener is one of those 3... You are testing if listener is equal to subscriber-latest or if 'superchat-latest' is true (which will always be true, strings are always true)
This is similar to

if('asdf'){
  widgetSlide(6)
}```

The correct test should be:

 if (listener == 'subscriber-latest' || listener == 'superchat-latest' || listener == 'sponsor-latest')
  widgetSlide(6);
};```

[lunar beacon]

alright.. but I am looking for seperate parameters for each of them..

[lunar beacon]

want to make this work

[severe shell]

Yeah, I know... I was just explaining your code had wrong logic in the example you sent.

[severe shell]

Use onEventReceived instead of onSessionUpdate and that should work

[lunar beacon]

thanks! it did!

but am confused as so why this didnt work with SessionUpdate

[severe shell]

Because they are different events

[jolly dawn]

Okay. Thank you for your time.

[proven hatch]

Hi,
Hope this message finds you well.

I've been using the StreamElements API to build a small bot for my Twitch channel.
I use JWT token for authentication and I was able to use the points endpoints that I needed for my app.
https://dev.streamelements.com/docs/api-docs/54472038d5274-channel

I use it to add points to my viewers via my app and It works fine. However, recently I wanted to use the Giveaway endpoint to create giveaways from my app, but I noticed it does not work and it returns a 404 (not found) error.

So I went ahead and used my authentication token and account ID on the API page below to test: https://dev.streamelements.com/docs/api-docs/2f4b1eadde6cb-channel

And upon testing, the response returns 404 error in an HTML page saying that
Cannot POST /kappa/v2/giveaways/<accountID>

I've been using the same testing feature when I was developing with the points feature, so I wonder what the issue is.

The error returned from the testing page seems as if the feature is not even developed, meaning POST method is not implemented on the API side. I hope this is not the case as I need that endpoint for my app's functionality.

Is there a way to make sure that API endpoint is functional, and/or if I'm doing something wrong?
I highly appreciate any input you might have for me. Thanking you in advance.

PS. I tried submitting this by opening a support ticket but the form kept saying "try again" -- so I'm hoping I can get some assistance here.

[severe shell]

It seems the /v2/ for giveaways is broken, but /v3/ is working. The API page takes long to be updated, so I will give you the trick to get the endpoints.
Go to the dashboard, open the browser console > Network, and create the giveaway (or any other activity).
Select Fetch/XHR and look the endpoints that appear when you run the giveaway. You will see the one that works to create the giveaway is:

https://api.streamelements.com/kappa/v3/giveaways/<ACCOUNT_ID>
Method: POST
Body: ```json
{"preview":"","title":"Giveaway Title","cost":20,"maxTickets":10,"subscriberLuck":3,"botResponse":true,"description":"Giveaway Description","subscriberonly":false,"freeTicket":true}

You will receive the giveaway id in the response. After that you have to start the giveaway. 

`https://api.streamelements.com/kappa/v3/giveaways/<ACCOUNT_ID>/<GIVEAWAY_ID>/action`
Method: `PUT`
Body: ```json
{"action":"start"}

If everything goes well, you will receive {"success":true}

[proven hatch]

Thank you so much for your quick answer ❤️ I'll definitely try this and will report here if I face any issues.
I really appreciate your reply -- you're amazing 🙏

[warped tusk]

I saw the "credit roll by grot" but i would like a add active viewers in the chat to it. If i write a own widget, could i use data like active viewers ?

[warped tusk]

*active viewers in the chat

[hot trout]

since you get an event for every chat message, it would be rather trivial to create a list of chatters

or even a list of chatters with more than X messages

[warped tusk]

trivial or not, it is relevant for me because i want a credit roll ending scene with my active viewers and not a list with subs, tips, cheers follows etc. or did i miss understand you?

i want the viewers in this list to and not subs tips cheers .... only

[hot trout]

trivial means easy

[wispy mirage]

anyone know why i cant login streamelements using facebook.. it says "Error fetching profile from provider. Please contact us for help."

[gloomy kestrel]

Check #announcements

[wary folio]

I would like my Twitch chat to appear from top to bottom. What CSS can I use to make this possible? I am using Dynamic Chat Bubbles by Zaytri

[wary tusk]

What's the easiest way to create a field to select audio from stream elements and play that sound on event in a widget?

assume I have a good knowledge of JS and all

or relevant documentation link will also help

thank you ❤️

[severe shell]

In the channel description you will find the Overlay Editor Documentation. Take a look at it, especially the FIELDS part, where it shows how you can create an audio field.
If you have any question, feel free to ask 😊

[wary tusk]

thanks! Appreciate the response 🙂

[wary tusk]

Alright, so I successfully got an audio input field, I can't seem to find docs on JS or otherwise implementation to actually play the sound

[severe shell]

To get the audio field, you can have it on JS: ```js
// Get the Field data
window.addEventListener('onWidgetLoad', (obj) => {
fieldData = obj.detail.fieldData
})

// When any event happens, play the audio
window.addEventListener('onEventReceived', (obj) => {
const sound = new Audio(fieldData.sound) // considering your field is called "sound"
sound.play()
})```

[wary tusk]

Woo! Got it 😄

Thanks!

in the field, I saw in docs there was a volume attribute for audio, how do I do that as a slider or similar in fields and apply that to the sound if not automatically grabbed from the object?

[severe shell]

Create a FIELD with the "type": "slider"

To apply to the sound, it is the same
sound.volume = fieldData.soundSlider

I think audio volume is from 0 to 1, so you can have this on FIELDS: json "soundSlider": { "type": "slider", "label": "Audio here", "min": 0, "max": 1, "step": 0.1 }

[young shard]

Settings > Bubble Position > Direction (For List)

[wary tusk]

ooh nice!

Excellent, let me try that

[wary tusk]

Is there a field suitable to set the default value?

for the slider

Got the slider working 🙂

[wary tusk]

Am I able to modify the default countdown timer to trigger an additional effect after the timer completes?

[severe shell]

Nope... Any of the default widgets are customizable.

[digital kernel]

I need help with the social media rotator for it is not appearing in my obs when i created the browser source

where do I go to talk about this

[severe shell]

Which media rotator exactly are you trying to use?

[digital kernel]

the one from Breci

Like idk if the display not working properly or the timer it self cause its not showing up at all

[digital kernel]

Oh I figure out the issue thanks for coming to help

it was the display which was confusing cause on the size and style it said 1920 by 272

[wary tusk]

Hold on, I'm a little confused by that message, you said no but also say they are customizable lol, is it possible? 😛

[severe shell]

None of them is customizable, sorry

[wary tusk]

Ooh understood, is there anywhere which lists custom widgets? I see there is a channel here but is there a repository that specifically tracks them?

[severe shell]

#widget-share

Other than that, no

[warped tusk]

did i need to use the APIs or could i create it with "custom widget" `?

[hot trout]

Custom widget should do fine

You could just modify the existing one to add a list of chatters

[fathom thistle]

Hi devs! First time here 😊 So, I've a question about the obj.detail.event.data json: What kind of message makes this property isAction to be true? (searching around this channel I found that /me command do that, but idk if there're other ones. I'm not even sure what an action is... jeje 😅). I also checked the SE API docs, but I couldn't find an answer to this. It's my first time doing custom stuff, so if I miss any page to check let me know. thanks!

[warped tusk]

thank you very much, i will try that. If I don't get any further, may I write to you again?

[hot trout]

@fathom thistle twitch chat is based on irc and in irc, an "action" is specifically the /me command (which is actually a CTCP ACTION message)

ctcp being a sort of control message format for irc

@warped tusk you're better off just asking in here but other than that sure

[sterile forge]

Hey all, I'm having another issue with my streamelements bot. When I go into the stream settings under custom name, it gives me 3 options for the bot name: 1. streamelements, 2. channel name, 3. custom name. I am changing it to channel name but when I test it and when im stream it proceeds to use the "streamelements" name instead of the channel name. This was working fine prior, but i had to reset my computer and now it won't stick.

hoping someone here may have some insight to this issue

[upbeat kiln]

hey idk if this is the correct chat, but I added the uptime widget to my overlay and noticed that it doesnt actually relay how long the stream was up, and rather it just starts counting up from whenever the overlay was refreshed. Is anyone aware of what's wrong?

to be clear, its the SE Stream uptime counter widget

now im aware that at some point its supposed to grab my uptime from https://decapi.me/twitch/uptime/channelname however everytime i check it myself it says im offline, I did two test streams to be sure too, one for 3 minutes and another for 20.

[upbeat kiln]

i figure maybe its intended to have the overlay refresh everytime the scene is brought up, but since its not instant its a bit jarring when it pops in

[upbeat kiln]

nevermind i gave up and changed it to show system time, thanks for the help!

[lunar beacon]

hey! I'm trying to use

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

on the default AlertBox custom CSS option but the object is not being generated.. is it restricted inside alertbox env? Or I'm missing something?

[severe shell]

You don't need onEventReceived in a default Alertbox as your code in there will be triggered once the event happens, you can check the obj in console.log and use it with {{keyName}}.
You can work with onWidgetLoad in a default Alertbox, though. If you need some information like, session or recent events, for example.

[proper pilot]

Hi. Can anyone help me with GET request of tip? -> https://dev.streamelements.com/docs/api-docs/704e5580be2d9-channel
I want check tip username, but my request keeps getting this response

{
  "docs": [],
  "total": 0,
  "limit": 25,
  "offset": 0
}

could someone help me make this request work?

[severe shell]

It depends on the filter you did. You didn't mention how you did the GET request.
The tips that would appear in the API are the tips shown here: https://streamelements.com/dashboard/tipping/list

[half abyss]

hi guys, i try to obtain authorization code via OAuth2/authorize endpoint. I set all the required credentials but i get error 400. Message is "missing client id". But i set it in my request.
Does anyone there to help this issue?

[proper pilot]

simply this, but something is wrong and i dont know what

import requests

url = "https://api.streamelements.com/kappa/v2/tips/channelID"

querystring = {"offset":"0","limit":"25","sort":"idk this","tz":"4","username":"testUser","email":"[e-mail]","after":"0","before":"1544178274000","message":"test message"}

headers = {
    "Content-Type": "application/json",
    "Authorization": "Bearer my TOKEN"
}

response = requests.request("GET", url, headers=headers, params=querystring)

print(response.text)

[severe shell]

I'm going to explain each query string later (little busy right now). But in the meantime, just make the request without them and you will get the last 25 tips registered in SE.

Just use the headers and URL

[proper pilot]

Thanks, I appreciate it.

[severe shell]

Each parameter from query string means a filter. So the response will show only the ones that matches with what you put on the query string.
I started writing it, but I can see the documentation already explains each one of them, just scroll down and you will see the Query Parameters part. The only thing wrong is the "required", as none of them are required.
https://dev.streamelements.com/docs/api-docs/704e5580be2d9-channel#Query-Parameters

[proper pilot]

Yes, that's what confused me. But u it works thanks again.

[severe shell]

It will only work if you have applied previously to have the client ID from SE. Have you done that?
If not, you need to apply manually first (but it is taking months to a response from team, unfortunately) here:
https://strms.net/oauth2_request

[half abyss]

Thx. Streamelement support person mailed me the required parameters like client_id and secret_key.
And yes i request with props below,

client_id
redirect_uri
response_type
scope

[severe shell]

Unfortunately, I don't have oAuth2 to check if there is any issue with the authorization process. But maybe the formatting is wrong? Are you sending the header as application/x-www-form-urlencoded?

[half abyss]

Actuall not.
I send all the parameters in query string as documented at https://dev.streamelements.com/docs/api-docs/cd02cda5171ea-o-auth2

[severe shell]

Can you post the piece of the code here, so we can have a look at it? Just remove the credentials or replace them with **
I will try to have someone from dev staff to check it for you, but I'm not sure if they are available right now.

[half abyss]

POST: https://api.streamelements.com/oauth2/authorize
Json: {
"client_id":"CLIENT_ID",
"redirect_uri":"REDIRECT_URL",
"response_type": "code",
"scope": "giveaway:write"
}

[half abyss]

if you call the url in dev.streamelemenst.com (https://api.streamelements.com/oauth2/authorize?client_id=9d5422b8ff529d420&redirect_uri=https%3A%2F%2Foauth.it-really.rocks%2Fcallback&response_type=code&scope=channel%3Aread) you get 400 error.
I get the same

[lunar beacon]

Thanks!!! Can you also tell me is there’s an object that returns something when the user starts streaming?

[sterile forge]

Hey does anyone knwo why I can't change my bot's name to my channel name instead of "streamelements"

i changed it in the settings but it continues to come up as "streamelements"

[severe shell]

Yeah, that's expected, once that example is just an example.
But what I asked is to send a piece of the code you are trying to run on your application. If you are running using curl, javascript, nodejs or any other language. So we could see if there is something incorrect with the code.

[severe shell]

You can have it from decapi endpoint, but will need to fetch that on JS. If channel is online, it will show the uptime, otherwise it shows "offline"
https://decapi.me/twitch/uptime/CHANNEL_NAME?offline_msg=offline

[severe shell]

Maybe people in #helpdesk-selive can help you with that. Can you ask that in there?

[sterile forge]

sure thing, i appreciate that

[true tapir]

hey! i want a custom chatbox to be able to stylize /announce messages differently. is it just a simple matter of looking for "/announce" at the beginning of the message string, or is there something in the obj detail / event i need to check?

[severe shell]

Unfortunately, SE does not provide any information for widgets when an announcement is on chat. In fact, the message isn't even captured on widgets

[rotund sinew]

Hello, i'm trying to found the list name which have every followers in it, but i don't found the doc for it, someone can help me with it ?

It's for the credit roll, i'm trying to change the session followers to all of them

[hardy walrus]

Since the bot ate that message

  "url": "https://api.streamelements.com/oauth2/authorize",
  "method": "POST",
  "timeout": 0,
  "headers": {
    "Content-Type": "application/json",
    "Cookie": "__cf_bm=DKciGkDvrxOmsxCwXa45l3DCBHlSTw5lpL1huIXuUHU-1676270394-0-AZIjfAK1TZTMdCSGdKBdRCB2NGA62VOcR3VBNa6/OvwNu58T2pJb0OZNY7xHcQGY0+x3nfcgmDIm9fU1vR6GtFg="
  },
  "data": JSON.stringify({
    "client_id": "f22b2c1a27dc70a4",
    "redirect_uri": "https://www.papara.com/become/streamer",
    "response_type": "code",
    "scope": "giveaway:write"
  }),
};

$.ajax(settings).done(function (response) {
  console.log(response);
});```

[severe shell]

In SE, you can only find the recent followers, not all of them. They are shown here:
https://streamelements.com/dashboard/session

If you want to see all of your followers, Twitch will provide that. You can see them here:
https://dashboard.twitch.tv/u/c4ldas/community/followers-list

[still juniper]

@half abyss you're not supposed to POST to that url, just simply GET (in a browser window)

[half abyss]

Hi, i also tried get too. I get the same error. Seems like an api problem which i don't understand

[half abyss]

https://api.streamelements.com/oauth2/authorize?client_id=f22b2c1a27dc70a4&redirect_uri=https%3A%2F%2Fwww.papara.com%2Fbecome%2Fstreamer&response_type=code&scope=tips%3Awrite

Here the url which i requested. It is the same format with example url in api document

This is the example url in api document

https://api.streamelements.com/oauth2/authorize?client_id=9d5422b8ff529d420&redirect_uri=https%3A%2F%2Foauth.it-really.rocks%2Fcallback&response_type=code&scope=channel%3Aread

[still juniper]

Yea, that should be fine in theory, if your values are valid

[half abyss]

Everything seems right but ...

[severe shell]

I tried to reach the staff as soon as you sent the piece of the code, to check if some developer was available to help, but had no response so far. Let's see if someone appears to help you later.
In the meantime, I suggest that you open a ticket here: https://support.streamelements.com
Click on the blue question mark on bottom left and select "Support Ticket". In the description you can either explain it again or you can inform that you were trying to have help here on discord, and copy the link of your messages to give some context to the ticket.

[half abyss]

Thank you bro

[orchid lodge]

The StreamElements chat overlay uses 1.0 emotes (28×28 pixels), but they become quite blurry. Is there a way to use 2.0 (56×56px)?

[hardy walrus]

You'd need to make a custom widget for it to reference them since the default widget lacks that customization.

[orchid lodge]

Alright, thanks!

[rose sigil]

Guessing due to the amount of data being passed through your servers it's not possible... But is there a way to send my camera feed to my overlay and comeback as a browser source along with my alerts?

[severe shell]

Without a well implemented system, you would have a lot of delay, frame drops and other issues, so I don't think it is even a valid thing to put on Streamelements.
But if you want to send your video remotely, you can use https://vdo.ninja

Now I got curious, why would you want that if you already have it locally?

[mystic kraken]

yeah - that's got to be inefficient - you're uploading video, downloading it again, and then re-uploading it.

[rose sigil]

Ok, so I've only been learning JS for about 3 weeks and I could be going to wrong way about it, but I want to code a webcam overlay that incorporates the camera also.

[mystic kraken]

it would be much better to do the overlay separately, and group it in OBS with the video source

[rose sigil]

I completely agree but I have z-index layers in CSS with keyframes. No idea how I'd be able to animate the camera source let alone match the animation with an independent overlay. You're right though, I just have an idea in my head and I can't get rid of it 🤣

[mystic kraken]

ah, so you want to animate the position of the video feed in synch with the overlay moving?

[rose sigil]

Yep. And perspective

The plus side is though I'm learning a bunch of new stuff - even if I've wasted my time

I can code a webcam feed into a browser but the same code doesn't work in my overlay. Guess that's something to do with protected sandbox etc

[mystic kraken]

learning new stuff is never a waste of time

[severe shell]

Well, on OBS you can move the camera on X and Y movements. In order to get Z perspective, you would need some plugin like StreamFX and create filters to move the camera. If you can move the way you want (manually), you can do with code. Just look for obs-websocket-js. It's a library to work with Websockets on OBS where you can send instructions to almost anything in there

[mystic kraken]

you might also look at Transforms in OBS.

[rose sigil]

Ok thanks both I'll check those out. Very much appreciate your time and kind advice.

[severe shell]

I'm going to copy here something I had put in another server related to OBS WebSocket JS:

Hey, I have just seen your message and the conversation.
As I have been working on OBS websocket and Streamelements for a while, I will post here some information that could help you and others:

Obviously, the script is only going to work if you import the overlay to OBS from SE. If you want to troubleshoot the code in OBS browser console, you will need to add the parameter --remote-debugging-port=9999 (being 9999 any port you want) on OBS shortcut before running it and then open the browser on http://localhost:9999

Back to the Streamelements editor. I'm assuming you are creating a custom widget for that (Overlays > Edit > + > Static/Custom > Custom widget).
In HTML tab, you can add the following to import the websocket library:

<script src="https://cdn.jsdelivr.net/npm/obs-websocket-js@5.0.1/dist/obs-ws.min.js" defer></script>

On JS tab, you need to declare obs as newWebSocket() and then connect to OBS either when the widget loads or during an event received (like a message, subscription, follower event, etc) or even during session Update (usually for sub goal bars, donation goals, etc), depending on what you want. ```js
obs = new OBSSocket()

window.addEventListener('onWidgetLoad', async (obj) => { //onWidgetLoad, onEventReceived and onSessionUpdate
obs.connect(ws://127.0.0.1:${PORT}, ${websocketPassword}) // .then is optional
.then( () => {
const version = await obs.call('GetVersion')
console.log(Connected to OBS ${version.obsVersion}, Websocket version ${version.obsWebSocketVersion})
})
})```
Every call can be done using obs.call('request', { requestFields }) found here: https://github.com/obsproject/obs-websocket/blob/master/docs/generated/protocol.md#requests-table-of-contents:

obs.call('SetSceneItemTransform', { sceneName: "Jogo", sceneItemId: 10, sceneItemTransform: { positionX: 50 } })

However, some of them do not use requestFields:

obs.call('GetSceneList')

The response (when there's a response) is a JSON object

I also created a basic webpage to run locally so you can have some practical understanding, let me upload it here

Just download the files on the same folder, open the .html and try to use it.

[rose sigil]

Wow great thanks!!

[nocturne axle]

Not sure if im just blind but where is the websocket documentation i.e when you are piping events down a websocket to a client app vs doing api requests?

[opaque wasp]

I'm coding some alerts where the attached message get typed in character by character by a function, my issue is that because of the said animation I'm not able to set a static Alert Duration: I'd need a dynamic way to handle it. Since seems like there is no way to SE_API.resumeQueue() from inside an Alert Box I decided to switch to a Custom Widget and now the issue is that I don't receive a raw message object anymore and I can't display emotes. At this point I don't really know what to do.. Suggestions?

[broken coyote]

First thing I’d say is. I would look at a new way to do your typing effect. Using gsap to create a typing effect. You could achieve a effect that takes the same time regardless of amount.

And on the emotes. Why can’t you? Shouldn’t be any reason you can’t do emotes. I recently rebuilt ManVSgame’s alert and was able to do emotes and user message

[opaque wasp]

Yeah I can probably achieve an effect that takes the same time regardless of amount, but I'm worried it wouldn't look that cool..

As far as emotes, I tried printing into the console some onEventReceived => obj and the only thing about user message I saw was a message attribute that contains plain text without any html tag in it. How did you get messageRaw via custom widget?

The only thing I came up with at the moment is to set Alert Duration to X seconds: alerts will appear once every X seconds, where X is a safe number of seconds that will let any animation run properly and at the same time don't wait much longer than needed between alerts.

[broken coyote]

im not sure in the method you are using. But using gsap and splitext is how i always do my animated chat widgets.

and with the emotes. i just made a api call that grabs emotes from the channel

[opaque wasp]

I never heard about gspa and splitext, I'm definitely going to learn more about them. Basically I have a script that divides in parts (str.split() with some regex)to be displayed the messageRaw string, then I add character by character or tag, basically whatever it takes to the message to displayed correctly e.g. <img> for emotes, <span> for special text etc. Meanwhile I also check if the new addition will go new line so when needed I can increase SVG's container height and adjust its path.

API call through Streamelements or directly towards Twitch APIs? How do you replace them into the code? Is it just a simple .replace('emoteName', <img class='emote' src='${imgSrc}'>)? What about global emotes?

[severe shell]

I don't know if you know "typewritter effect", but it is small and kinda easy to use. You can call a function once the animation finishes (.callFunction( () => YourFunctionHere() ) so you don't need to worry about a safe number of seconds.
https://www.npmjs.com/package/typewriter-effect

[severe shell]

The only information about websocket on SE is here (not much, but sometimes is enough to start playing with it):
https://dev.streamelements.com/docs/api-docs/5a84cc101a9c5-connecting-via-websocket-using-o-auth2
If you have a specific issue, you can ask here and we are going to try to help you.

[opaque wasp]

The "X seconds" solution was thought as a workaround while working within the AlertBox, from where seems like there isn't a way to resumeQueue().

Anyway I'm already able to execute any code after the animation ends.

Another solution I just came up with, could be setting a SE_API store value once the alert is done into the AlertBox and meanwhile listening for that kind of edit via Custom Widget from where I can resumeQueue()...

[broken coyote]

https://codepen.io/mrboost/pen/JjajJOW/149b20588c647d083d0a7f85e9ec7068

here is a basic example of a type writer effect

[vivid needle]

function getData() {
  $('#status').text('ERROR');
  $().ready(function () {
      var url = '[URL]/?api_key=' + apiKey;
    
    $.get(url, function (data) {
        $('#status').text('SUCCESS');
    });
  }, 'jsonp');
}```
I am currently trying to access an api for Marvel Snap to display player stats, but I can't seem to get it working
The console is currently outputting `Access to XMLHttpRequest at '[URL]/?api_key=*myApiKey*' from origin 'null' has been blocked`

[potent hornet]

Is there a theoretical limit (aside from memory) for number of fields? Building out a set of fields per viewer (about 60 fields per unique viewer in total), even built a custom field generator tool so I don't have to manually write all that stuff... but is there a better / more efficient way? Basically its custom community gift sub trains for whoever did the gift subbing.

[hardy walrus]

The only way to determine is if you get a payload 413 error when saving the overlay/widget. Outside of that I don't think there's a real way to determine it.

[potent hornet]

Awesome. Haven't got that back yet.

[pulsar willow]

Is there a way to restore an older version of a widget in SE?

[hardy walrus]

Unless you have a saved copy no.

Actually.

If you're still in the editor I think Ctrl+Z should work but not 100%

Otherwise no.

[pulsar willow]

Version control in SE when Thanks tho

[potent hornet]

Having an option to link a github or gitlab account / private server would be cool, with all the most common git actions.

I suppose there would need to be a deploy option to take it out of git and be "deployed" to whatever servers they are on now.

[severe shell]

I saw the original message with the link the bot removed.
Usually the complete message says [...] has been blocked by CORS policy, which is a browser security feature.
Is the API available publicly or is it closed?
Those errors are very hard to be solved from client side on browser, most of time the server needs to do something. I would ask the API creator what they would suggest to do.

[vivid needle]

Publicly available, I can access it through chrome and python, just not from Streamelements

And I've contacted the creator too, thought I would send it here just in case it could be solved from my side tho

[hot trout]

if CORS is the problem you can fix that by proxying the request yourself and inserting the relevant CORS headers

[vivid needle]

How would I do that?

[hot trout]

you'd run some server or service that takes requests from your widget and proxies them to the api, and upon receiving the result, inserts a header that indicates that the request is permitted

if you run your own server(s) anywhere this is fairly trivial to do with nginx or haproxy or apache, if you don't it's possible to do it using cloudflare workers

of course the easiest is for the origin to add it, but if they don't it's not an insurmountable problem

[vivid needle]

Oh I see, thank you!

Would something hosted on Heroku or Azure work?

[hot trout]

no experience with those myself but I don't see why not

[vivid needle]

Thank you so much 😄

[severe shell]

Yes! I use replit for doing some things and it works like heroku

[vivid needle]

I'll check it out, thank you!

[vivid needle]

How do you share custom widgets for others to use?

[opaque wasp]

SE_API.resumeQueue() isn't affecting an Alertbox, why is that? I'm calling it from a custom widget.

[still juniper]

meaning what exactly? resumeQueue() should only remove the* custom widget from the queue - if there's an alertbox running at the event, it will continue until finished

• although (unless fixed) there's a bug that makes every custom widget in the overlay to be removed from the queue, not only the one making the call

I mean, the naming leads to confusion. It really doesn't resume the queue, it just removes the widget from the queue, and then queue moves on to the next event depending on if there are other things still pending or not (e.g. alertbox)

[opaque wasp]

Yeah I kinda know it was something like this.. I'm just looking to code dynamic durations into an AlertBox, but it seems like it can not be done.

[severe shell]

There are some ways:

• If you just want to send to a colleague or someone you know, you can ask that person to add you as an editor in their SE account. #dev-chat message

• Another option is to copy your code to github or any other repository and direct people to there, so they can copy each part of the code and and "create" their own widget.

• If you want to submit it to anyone be able to use using a quick link, you can use the form https://strms.net/codeshare and wait until it is released (don't hold your breath, though, it is taking months to be released)

• There are some users who have ability to share overlays using quick-install links (like the option above). But usually they are companies or someone who already submitted a widget and it was released on #widget-share

[pulsar willow]

Hello! I was trying out an animation using JS and clip-path and it is incredibly laggy and broken in browsers like Chrome, Edge, Brave but seamless in Firefox.

Would anybody have an insight on to what exactly is happening here? I would greatly appreciate it!

[still juniper]

You might be using something not supported: https://caniuse.com/?search=clip-path

[pulsar willow]

Thanks for this! I've been experimenting and what I've observed is that partially supported browsers don't like it when I mix clip-path, box-shadow, and JS magic together. 🫶

[broken coyote]

@opaque wasp Here is all the dirty work for getting emotes. This is just a global emote json i pulled from twitch. You would need to add/modify if you wanted to get live info or user emotes. But this will atleast get you in the direction.

const emotesUrl = 'https://cdn.mrboostlive.com/emotes.json';

// Escape special characters in the emote names
const escapeRegExp = string => {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
};

// Fetch the emotes array from the URL
fetch(emotesUrl)
  .then(response => response.json())
  .then(emotes => {
    const message = "I really like the poggies and MrDestructoid emotes; they're my favorite!";
    const regex = new RegExp(emotes.map(emote => escapeRegExp(emote.name)).join("|"), "g");
    const newMessage = message.replace(regex, match => {
      const emote = emotes.find(emote => emote.name === match);
      if (emote) {
        return `<img src='${emote.images.url_1x}' class='bit-img'>`;
      } else {
        return match;
      }
    });
    console.log(newMessage);
  })
  .catch(error => console.error(error));

i have mine set up so it grabs the global emotes, and channel emotes

You can see it in action here https://codepen.io/mrboost/pen/ZEMGPQM/b50e96a1052772b68de5a4a2611aa312?editors=1010

[muted agate]

Procuro desenvolvedor familiarizado com API da streamelements. Pago R$150,00 hora!

[severe shell]

Melhor escrever em inglês que será mais fácil de encontrar alguém.
Caso queira alguém que fale português, então melhor procurar em #🇵🇹︱português (mas será um pouco mais complicado)

[muted agate]

ok

[serene gulch]

Hi, I want to use the websockets connection to be notified about new tips. It's working so far but I can't figure out how to get the currency of a tip. Anyone able to help?

[sharp arrow]

Hello I wanted to ask how i could use multiple TTS voices the loyalty redemption. I have use this guide and it works great but i would like for some one to enter in a different command and get a different voice. is this possible or are users locked down to one voice?
https://support.streamelements.com/en/articles/128-how-to-setup-command-triggered-tts

[warped tusk]

Hello, i try a develop a custom widget, a credit-ending-scene, but i want to list the viewers who was active in the chat. I tryed if (typeof session['viewer-session'] === "undefined")
session['viewer-session'] = {count: 0}; but i doesn't works. I rewrited the Credit roll by Grot.
could someone help me

[warped tusk]

https://codepen.io/Saint2k6/pen/MWqaEYj

[severe shell]

The tip event shows the currency:

[severe shell]

All loyalty items will use the same TTS voice , there is no way to set a specific voice to an item, unfortunately.

[severe shell]

This key viewer-session doesn't exist, not sure where you got it.
But you can fetch the chatters using the chatters list from this link (replace username for your channel name) and work with that list:
https://tmi.twitch.tv/group/user/USERNAME/chatters

It is not a real time list of users, but it is the closest one you can have if you don't want to keep registering the users that are active in your chat.

[serene gulch]

Interesting, that's not at all how it looks for me. This seems to match the structure on the websockets docs page, I was confused about that one 😄
What I'm getting is the structure of the custom widget events which is also mentioned in the websocket docs and example.

How do I get the structure you're showing? Is it because I'm testing with the overlay editor "emulate" button? Is there another way to test? I'm currently using a JWT in case this matters. Also I'm running it in a node app not in the browser

example I'm getting:

{
  "listener": "tip-latest",
  "event": {
    "type": "tip",
    "name": "Frannie",
    "amount": 10,
    "count": 10,
    "items": [
      {
        "name": "Shirt",
        "price": 41,
        "quantity": 3
      },
      {
        "name": "Hat",
        "price": 16,
      },
      {
        "name": "Hoodie",
        "price": 10,
        "quantity": 2
      },
      {
        "name": "Protein powder",
        "price": 33,
        "quantity": 3
      }
    ],
    "tier": "1000",
    "month": "April",
    "isTest": true,
    "message": "Do not fear a man that spams 1000 memes, instead fear a man that spams a meme 1000 times"
  }
}

[hot trout]

that seems to just be a very very bad test message that the overlay editor sends

notice it also contains merch items

and a sub tier

[serene gulch]

Thanks, I saw that too but the general structure at least matched.
If that's the case, I think the ws docs need an update. The code example says the structure is as described on custom widgets events > onEvent (using an outdated link as well)

[still juniper]

Sadly the docs need multiple updates

[warped tusk]

i was two times muted. i tryed to answer of an answer. i answered with a part of code and a link from codepen. I dont wont to get muted again. what is the problem?

[hardy walrus]

Fairly certain it was the tmi link but here's your message again.

thank you. i remove the partin the loop with the "Viewer". i added your link, chatgpt wrote a scourcecode

fetch(url)
.then(response => response.json())
.then(data => {
const viewers = data.chatters.viewers;
for (let i = 0; i < viewers.length; i++) {
addEvent('viewer', viewers[i]);
}
})
.catch(error => console.error(error)); ```
If i use the link, i see that my secound twitch account is listed but if i try the code in the console of my browser chrome i get the error "Failed to fetch at <anonymous>:2:3. In The widget i didn't see that my secound account was active in the chat. https://codepen.io/Saint2k6/pen/mdGeLxL Could i test the widget in someway offline, trigering some events?

[warped tusk]

thank you, but what is a "tmi" link?

[hardy walrus]

Look at my mesage above.

[warped tusk]

a ok i find it

i got the link c4ldas above, is it a problem that my username is in it instead USERNAME ?

[hardy walrus]

It contained twitch.tv which is blacklisted on the server.

I whitelisted that one specifcially.

[warped tusk]

ah ok, thank you very much

[still juniper]

FYI that chatters endpoint will stop working on April

[warped tusk]

oh ok, that is intressting. What soulution could i use instead?

could i test the creditroll from grot that a edited in some way without to be live with a stream?

*i

[sharp arrow]

I sincerely appreciate the direct answer. Well I'm going to continue using stream elements that would have been a really cool feature but now my audience can talk to me when I'm playing hardcore games thank you again

[steady cave]

So I need to be able to manually loop video clips seamlessly but there's randomly a stutter or gap that's ruins the smoothness of the loop.

I loop them by checking the "ended" and "play" events.

I'm using the script from "Reboot0" to manage the queue for events. So at the end of the clip if there a queued notification it'll play the corresponding clip then go back to an idle animation. This part is working perfectly just having the issue with clips not starting instantly or stuttering a few frames at the start

[severe shell]

You can test creating a new "real" tip on Data & Reports > Revenue history
Click on Add a tip and fill the values. Don't forget to check the option "Imported tip" before clicking on Submit, otherwise it will not generate the alerts.
Once you click on submit, it will generate a new alert. Those events are the real alerts

[severe shell]

Just import it to an OBS scene and done. The overlay doesn't depend on whether you are online of offline.

[serene gulch]

Thank you, that's exactly what I was missing 👍

[crimson turtle]

Hey there! I was trying to search for this but couldn't find any documentation on it.

Is there a way to have two tip goal bars on screen at the same time.

One showing the tip goal for just that stream,

and one a month tip goal that tracks that stream and doesn't get reset with the tip goal progress.

The show I put on has tip goal unlocks but we'd also like to have a visual of like an overall month goal.

Thanks!!

[winged wedge]

Hey! I'm having 2 issues. On the alertbox I can't remove the annoying default message (or at least change the language), and I think that on the sub messages there is no bad words filter either. I thought that at least remove the default message (I mean, for example "John gifted 193 subs on this channel blabla), it was like an obvious feature. Thank you!

[severe shell]

You would need to write a custom widget for that. The default tip bar is just the one that resets in goals. And you would need to keep track of the donations elsewhere as the custom widget does not keep the values saved.
You could also track the monthly donations using the Streamelements API and filtering it for the month (https://dev.streamelements.com/docs/api-docs/704e5580be2d9-channel), but that would need your JWT token in the overlay, which is not recommended.

[severe shell]

If you want to remove the message, just uncheck the option "Show subscriber messages" on the Gifted sub variation.
As regards the bad words filtering, you can configure that in SE dashboard > Revenue > Tip settings > Tip moderation. That will apply for all Streamelements alerts, not only tips

[winged wedge]

Thank you for your answers. About the Tip moderation I already have it, so if apply to all SE alerts, great then! About the other point, I understand that, but what if the person gift 10 subs and wrote a message? Am I thinking wrong oh that? Thank you again.

[severe shell]

The person who gifts sub cannot type messages as well as first-time subscribers. The only ones that can type messages are the resubscribers.

[winged wedge]

Yes, I was thinking on that, that's why on the final I wrote "Am I thinking wrong?" hahaha. Sorry, you are right, I was confusing the resub with a gifted one. Perfectly clear. Thank you!! And I have one last question, because I don't know if may be I have to do a custom overlay or do some modification. Can you help me to understand the alert size logic on the alertbox or tell me if it something wrong about it? I can give you a particular example if you want.

[severe shell]

No worries, I also took some time to understand how to remove the gifted message! 😄
What you mean by the alert size logic?

[winged wedge]

^^ For example (I will try to be detailed and clear):

The canvas of my alert box is 2560x1080 (my resolution).
On OBS, I have the source with the same 2560x1080, full screen. Everything it's OK up to here.

Now, for example, I have a GIF, 800 width, 1066 height.
So, I create a layer, just for that alert, width 800, height 1066 and 0px top 880px left on position (to be horizontally centered).

Then, if I test the alert, is like... I don't know, 500px height? I don't really understand how it works.

[severe shell]

Hmm, okay. Well, all overlays created in SE have the dimension of 1920x1080 by default (as this is the most used resolution nowadays), so the overlay editor white screen (with little points) represents that dimension. Everything you put in there will be set as if the screen have 1920x1080. So in OBS you create in that size (you can change the overlay size going to overlays page, clicking on ... on the overlay and selecting Properties, by the way)
When you create an alert in the overlay editor, you have to take that into account. In the picture you can see the red square represents 1920x1080 and the blue square is the the size of the alert.

[winged wedge]

This is my alertbox at this moment

The size of the overlay should be OK, it's my resolution. Is that OK?

And thank you for your time.

[severe shell]

Yes, so you are going to add on OBS the same resolution

[winged wedge]

Yeap, that what I did.

As I said, that part is apparently OK, and even If I move the alert, it works.

But, for example...

The blue alert, as you can see, 800x1066, has a GIF with that size, and if I test it...

This is the size.

Like... half of the real size. And if I test it on OBS, same result.

[severe shell]

Yeah, that's because of the scale thing. I'm not sure how the scale works on the alertbox, but try to put "Text over image" in layout options
Probably you will need to go to Text Settings > Advanced and change the Margin Top from -50 to a positive value after that

You can also make the width larger to check if the image increases

[whole mountain]

Hey guys. We are working on an integration with Streamelements. Is there API for getting watchtime for a specific user?

[hardy walrus]

Quick look says no.

But I may be wrong.

[winged wedge]

Both ways works!

[whole mountain]

I tried some mock endpoints from the doc, and haven't found anything too. But not all of them work, some return Uable to find content for application/json 😦

[severe shell]

It only shows all users, it seems you will need to filter it on your application 😦

[severe shell]

Great!

[winged wedge]

I mean, of course I don't found an exactly logic or something, like you said, I'm not sure how the scake works either, I will have to try until I found the perfect size and location, but It works, haha.

[winged wedge]

Thank you for everything!

[whole mountain]

Which endpoint do you mean?

[severe shell]

Yeah, that's kinda confusing sometimes!

[severe shell]

https://dev.streamelements.com/docs/api-docs/c9d09fae6dcbd-channel-watchtime

[whole mountain]

Thanks, haven't seen this one

As for someone who never worked with Twitch, how many users average twitch channel may have?

[severe shell]

By the way, the limit and offset are optional (although the page says it is required)

[whole mountain]

Does it show only followers, or all users who ever watched the channel?

[severe shell]

Any user who ever watched the channel

[severe shell]

That's something impossible to measure. There are channels with 15 users as well as thousands... It depends on the country, the game, the event, it depends on many things

[winged wedge]

Is here a channel to ask something about a widget? (I just don't found how to pause the marathon timer by LX)

[winged wedge]

Hm, I checked all the channels, and I think the place is may be here, haha. So, anyone know a way to pause? I will doing an extensible really soon, and for the first time I wanna to pause it. On other platforms you have a button, but I prefer to use streamelements.

[severe shell]

This is the correct place, indeed. In that one you have 4 buttons.

• Start/reset timer
• Add 60s
• Pause timer
• Resume timer

[winged wedge]

wo wo wo

At anytime I did something wrong I think, haha

I don't even have a BUTTON section, haha

I will add the widget again and start from zero

[winged wedge]

I create one from zero, and I don't have any "buttons" section either.

[hardy walrus]

Timer settings

[winged wedge]

haha

May be you did some modification?

[severe shell]

Are you getting this one? This is the one I clicked:
#widget-share message

[winged wedge]

Nop, that was the issue, is the same one, but it doesn't appears searching "marathon" on overlays, I don't really understand why, but this one is correct.

[severe shell]

Ahh, I think you got it from SE widgets gallery

[winged wedge]

exactly!

Are the channel one more updated?

[severe shell]

Yeah, that one looks outdated

[winged wedge]

I understand, thank you (again)!

[severe shell]

I think so, because in order to get in the overlays gallery, it takes time.
The ones in #widget-share are more easily updated.

[winged wedge]

Oh, I understand. Great then, solved, thanks!

[warped tusk]

thank you for that information, could i use/implement the emulated events too? with your information i cloud now test the donations, and the follows are working to. i would to test the sub, resub, sub gift, cheer and raid events to.

[whole mountain]

How long does it take to get API access from the SE crew? I have submitted a form last week but still no response :\

[severe shell]

You mean the oAuth credentials? As far as I know it is taking months and months, sadly.
You can work on the API using your JWT to test it. If you are using for personal queries, oAuth isn't even needed

[whole mountain]

It’s sad. We want to use oauth to allow streamers to get their stats

Seems like I will have to make own bot

[severe shell]

Not sure what you mean, but I believe the credit roll widget gets information from Widget Data > Labels:
https://streamelements.com/dashboard/session

[warped tusk]

that means if i edit it, the credit-roll would take the informations and must show it ?

[severe shell]

I think so, you can test it

[warped tusk]

i tested but it seems that is has no effect

what did i have to implement that i could use the emulated events?

[broken coyote]

that widget pulls from session data. so go to your session data and set followers and subs to a random amount

[warped tusk]

thats nice, thank you

[broken coyote]

after you adjust it. it needs refreshed. so just uncheck "Enable subs" and then recheck it