Chat Designer for Twitch

Chat Designer for Twitch 3.0.2

Download
Overview Updates (4) Reviews (4) History Discussion
MiiRiiCo

MiiRiiCo

New Member
MiiRiiCo updated Chat Designer for Twitch with a new update entry:

2.8 - Presets

2.8 - Presets​


NEW FEATURES:
  • Added Presets to this tool. Currently there are three different designs with three different styles each. There will be more in the future! (I'm still discovering different styles myself ^^' )
  • Added Hyphenation to this tool. You can now enable that if words get too long and cause overflow issues they now break into a new line. Because every language has different words, of...
Click to expand...

Read the rest of this update entry...
 
MiiRiiCo

MiiRiiCo

New Member
GwnMees said:
Hiii, how can i add a custom font??
Click to expand...
Hey :) If you download a font to your PC (for example with Google Fonts) you can install this file if you right click on the .otf or .ttf and click on install. After that, restart your browser so that it can recognize the font and open the tool again. Now you have to write the name inside the font settings.

Sometimes the name of the font is not exactly the name of the file. So what you can do is to open Paint on your PC and add a new text box. Search for your font and it will show you the correct name you have to use.

Currently it's still that complicated, because I wasn't happy yet with the different APIs I tried out for this tool. But I think I will improve this feature in one of the next few updates ^^

I hope I could help :)
 
MiiRiiCo

MiiRiiCo

New Member
trailblaz3r said:
How do you install this chat box for obs?
Thank you
Click to expand...
1. Download the file with the white download button on the top right of this page

2. Unzip the folder (if you have a "Stream-Folder" you can unzip it there) with a right-click on the filename > unzip or extract

3. You should see multiple files and folders that are necessary for the tool to work. Open the Designer.html to design your chat. Follow the instructions in the howto.txt and the readme.txt files.

4. After you saved the design, add the Chat.html as a browser-source to your OBS. Set the width and the height of your chat to your size of choice.

That should be it ^^ I hope I could help :) If you're still facing some problems feel free to reply to this again :)
 
V

Valla

New Member
Hi!
Firstly, this is brilliant! Fantastic job and makes my life far easier so I and many to come really appreciate it!

Ran into a few hiccups,
Not sure why but the badges dont seem to be showing after adding it to the Text-Content. Do I need to download some Favicons or update a url?

Id also like to re-open a Save, is that a function yet?
Or can I jimmy my data into one of the presets?
This feature will help this blow up with many community-downloadable presets. I'll share mine once I'm happy with it and you can add it if you'd like! :)

Thanks again!
 
V

Valla

New Member
I wish I could remove messages...

I figured out tmi is in fact not a dependency...

And I saw in the patchnotes how your badges source changed.

Is there a new one available yet or another way to use them?
Thank you
 
D

DasPana

New Member
Hi,
do you plan to add an emote only function, so that emotes are displayed larger if there is no text in the message?
or does anyone have any ideas on how to implement this?
 
D

DasPana

New Member
DasPana said:
Hi,
do you plan to add an emote only function, so that emotes are displayed larger if there is no text in the message?
or does anyone have any ideas on how to implement this?
Click to expand...
Ok, i got it :D

If you want messages that only contain an emote to be displayed larger, then you actually have to change the if function in the decompileFile.js from line 1210 (// settings.othEmotes[`${role}`].value) as follows:


JavaScript: 
                    // Überprüfen, ob Text vorhanden ist
                    if (msg.innerText.trim() === '' && emoteRanges.length === 1) {
                        // Wenn kein Text vorhanden ist, setze eine größere Emote-Größe
                        emote.style.fontSize = '50px';
                    } else {
                        // Andernfalls, setze die normale Emote-Größe
                        // settings.othEmotes[`${role}`].value
                        if (settings.othEmotes[`${role}`].active === true) {

                            if (settings.othEmotes[`${role}`].value.auto === true) {
                                msg.style.setProperty("--othEmoteHeight", `${settings.msgFont[`${role}`].value.size}px`);
                            } else if (settings.othEmotes[`${role}`].value.auto === false) {
                                msg.style.setProperty("--othEmoteHeight", `${settings.othEmotes[`${role}`].value.height}px`)
                            }

                            msg.style.setProperty("--othEmoteVPos", settings.othEmotes[`${role}`].value.linePos);

                        }

                    }

at the moment I still have the size hardcoded in the .js, I'm still trying to include it in the css.

Pana Out!
 
RaccoonViolet

RaccoonViolet

New Member
Awesome tool! Been using this with my twitch stream recently and has been pretty flawless for my needs. Is there any way to get third party emotes such as FFZ and BetterTTV working with this?
 
azido

azido

New Member
Thank you for this tool, it's wonderful.

I have the same questions as RaccoonViolet, plus a major one that bugs me the most:

Can you implement a "LOAD" feature? That is a big request from me. Reason: you've spent a lot of time customizing your chat, you thought u're happy with it, you put it online - and you see there are some hickups. You want to correct them, but for this you have to redo the whole thing again :(

It would make life way easier if you could just load in your created data.js, do your changes and save again.

Is this possible?

Another question is: how can we change the badges? i.e. i'd like to have the sub badget i've designed for my channel.
 
Bacarra

Bacarra

New Member
This is such a great tool, amazing work. Looking forward to having the badges fixed.

As others have said, being able to import your existing setup would be fantastic.

Would also be great to integrate Twitch Chat Pronouns (https://pr.alejo.io) so you can add pronouns next to the chatter's name.
 
MiiRiiCo

MiiRiiCo

New Member
MiiRiiCo updated Chat Designer for Twitch with a new update entry:

3.0.0 - New API, Badges and Info Panels

CHANGES:
  • Changed the API for better support for newer features. The new API needs authentication, so if your data.js file has no oAuth code set up, you'll get a prompt. If you want to change the authenticated account, click on ‘Remove oAuth token’ in the top right corner. Then, log in to your correct Twitch account before generating a new token.
  • Changed the font-weight input from a "number" to a "slider", so that it's more obvious how thick the font will be.
  • Opening...
Click to expand...

Read the rest of this update entry...
 
B

Beefyrulz

New Member
I like the designer, even managed to design a really cool chat layout to match the game I've been streaming.
However it doesn't work at all. I followed all the instructions exactly to the letter but the chat does not appear in the overlay.
It appears in the editor, but not in the browser-source in OBS. I overwrote the data.js file in the script folder as instructed, I deleted the Custom CSS data in the browser source itself.
As well another gripe is that there is no way to save or import layouts.
 
cdutson

cdutson

New Member
This is exactly what I was looking for (I'm working to move away from streamelements, and chat overlay was an issue).

I'm wondering if there's a github repo for this? I ask because I made some custom alterations/additions to support things like gigantified emote messages, emote-only messages, highlighting, etc. and I'd love to contribute to the project or fork it.
 
You must log in or register to reply here.
Top