Villager Chat

Villager Chat [Paid] 2.1.5

Buy for $30.00
Overview Gallery Customization Updates (12) History Discussion
R

reichan_tw

New member
slashie101 said:
Hello reichan!

You can customise villager chat with your own images by using the settings in the newest versions, if that's what you mean? Info on that here: https://forums.slime2.stream/resources/villager-chat.9/field?field=customization

If you mean something else, could you explain?
Click to expand...
1700146898060.png
I tried placing an icon in front of the name, and it worked.(just for ver1.1.0)
I feel that adding this icon makes the overall appearance look cuter!
However, I'm unable to open the HTML webpage to make other adjustments.
(Because I have no understanding of CSS or HTML at all.)
 
Last edited:
OP
OP
Zaytri

Zaytri
she/her

Glitch Witch
Admin
Developer
Streamer
reichan_tw said:
View attachment 28
I tried placing an icon in front of the name, and it worked.(just for ver1.1.0)
I feel that adding this icon makes the overall appearance look cuter!
However, I'm unable to open the HTML webpage to make other adjustments.
(Because I have no understanding of CSS or HTML at all.)
Click to expand...
ok I understand now
the issue is Cappuccicons' script, for some reason they don't use https or http for the script src, which normally isn't a problem if you add the icons to a website, but since villager chat runs in a local file, it's trying to pull a script from your computer instead of their website

so here's a modification of their script, so instead of putting this in the <head> tag:
HTML: 
<script src="//pull.cappuccicons.com/cpf.js"></script>

use this:
HTML: 
<link href="https://icons.cappuccicons.com/cpf.css" rel="stylesheet" />
(all their script does is add this css to the HTML, idk why they made a script for it instead of giving you this directly)

and then you can follow their instructions to either put the icon here in the HTML:
S6zTIzO.png


or here in the CSS:
bmYpVTT.png
 
R

reichan_tw

New member
Zaytri said:
ok I understand now
the issue is Cappuccicons' script, for some reason they don't use https or http for the script src, which normally isn't a problem if you add the icons to a website, but since villager chat runs in a local file, it's trying to pull a script from your computer instead of their website

so here's a modification of their script, so instead of putting this in the <head> tag:
HTML: 
<script src="//pull.cappuccicons.com/cpf.js"></script>

use this:
HTML: 
<link href="https://icons.cappuccicons.com/cpf.css" rel="stylesheet" />
(all their script does is add this css to the HTML, idk why they made a script for it instead of giving you this directly)

and then you can follow their instructions to either put the icon here in the HTML:
S6zTIzO.png


or here in the CSS:
bmYpVTT.png
Click to expand...
thank you so much ! It's work😍
 
A

AnnagramAU
She/Her

New member
Artist
Streamer
Hey Zaytri, I updated to villager chat 2.0.0 and only chats from moderators and myself as the broadcaster were showing up, unsure why this has happened. Any ideas?
 
OP
OP
Zaytri

Zaytri
she/her

Glitch Witch
Admin
Developer
Streamer
Star said:
Hello! Any plans to make this work for Tiktok live streaming too? Thanks!
Click to expand...

Maybe? I have looked into it a bit. While TikTok doesn't have an official chat API, people have reverse engineered a way to get the chat data:
github.com

GitHub - zerodytrash/TikTok-Live-Connector: Node.js library to receive live stream events (comments, gifts, etc.) in realtime from TikTok LIVE.

Node.js library to receive live stream events (comments, gifts, etc.) in realtime from TikTok LIVE. - GitHub - zerodytrash/TikTok-Live-Connector: Node.js library to receive live stream events (comm...
github.com github.com

But since it's not official, there's no way to know if that will always be reliable, and TikTok could choose to make that more secure and completely break that code
 
OP
OP
Zaytri

Zaytri
she/her

Glitch Witch
Admin
Developer
Streamer
AnnagramAU said:
no, they're all on default options
Click to expand...
weird! hmmmmmmm
what about test messages using the Send Test Message button? is that working correctly for non-mod test users?

also open dev tools when you have it open in your browser with ctrl + shift + i, tab over to Console, and let me know if any errors show up when non-mods send a message
 
A

AnnagramAU
She/Her

New member
Artist
Streamer
Zaytri said:
weird! hmmmmmmm
what about test messages using the Send Test Message button? is that working correctly for non-mod test users?

also open dev tools when you have it open in your browser with ctrl + shift + i, tab over to Console, and let me know if any errors show up when non-mods send a message
Click to expand...

that seems to work fine, i'll keep it open and check for any errors next stream and report back
 
J

JeanneMichiru

New member
Greetings,

I'm currently setting up Villager Chat for my stream and ran into an issue, where neither the "send test message" nor the "widget settings" pop up.

now I'm wondering what I'm doing wrong here.

The Chat is correctly connected and I can even send messages. But I can neither choose villagers nor reroll nor setup the widget at all. I can also not download the assets. Also as stated above, neither the "send test message" button nor the "settings" button pop up when hovering over the window.

I don't have any addblockers or any other plugin for that matter installed. Running the latest version of FireFox

Thx in advance
Jeanne

1700400079211.png
 
A

AnnagramAU
She/Her

New member
Artist
Streamer
AnnagramAU said:
that seems to work fine, i'll keep it open and check for any errors next stream and report back
Click to expand...
so had it happen again this stream, messages from one person weren't coming through in OBS but they were in my browser. i refreshed the browser source in OBS and the messages started coming through.
the only thing i noticed was they didnt have pronouns set when everyone else in my chat did (they added pronouns before i refreshed the browser source)

however, after refreshing the browser source, the file open in my browser stopped receiving some messages and gave me some errors image.png
 
OP
OP
Zaytri

Zaytri
she/her

Glitch Witch
Admin
Developer
Streamer
AnnagramAU said:
so had it happen again this stream, messages from one person weren't coming through in OBS but they were in my browser. i refreshed the browser source in OBS and the messages started coming through.
the only thing i noticed was they didnt have pronouns set when everyone else in my chat did (they added pronouns before i refreshed the browser source)

however, after refreshing the browser source, the file open in my browser stopped receiving some messages and gave me some errorsView attachment 31
Click to expand...

hmm yea i noticed the same thing during my stream yesterday

I'm going to run dev mode today to see what's going on because that shouldn't be happening, something to do with how the new authentication works
 
OP
OP
Zaytri

Zaytri
she/her

Glitch Witch
Admin
Developer
Streamer
JeanneMichiru said:
Greetings,

I'm currently setting up Villager Chat for my stream and ran into an issue, where neither the "send test message" nor the "widget settings" pop up.

now I'm wondering what I'm doing wrong here.

The Chat is correctly connected and I can even send messages. But I can neither choose villagers nor reroll nor setup the widget at all. I can also not download the assets. Also as stated above, neither the "send test message" button nor the "settings" button pop up when hovering over the window.

I don't have any addblockers or any other plugin for that matter installed. Running the latest version of FireFox

Thx in advance
Jeanne

View attachment 30
Click to expand...

hm, I wonder if it's a Firefox only issue, I tested Firefox in dev mode but not for the final build

I'll look into it, can you test it in other browsers?
 
J

JeanneMichiru

New member
Thx for the quick response.

Also tested it in EDGE and Google Chrome.

In Edge I got the "send test message" button, in chrome I got neither as well.
 
OP
OP
Zaytri

Zaytri
she/her

Glitch Witch
Admin
Developer
Streamer
JeanneMichiru said:
Thx for the quick response.

Also tested it in EDGE and Google Chrome.

In Edge I got the "send test message" button, in chrome I got neither as well.
Click to expand...
Ok so I'm not entirely sure why it doesn't work in Google Chrome or Firefox for you, I haven't found anything that would prevent that. Do the settings work in Edge at least?
 
OP
OP
Zaytri

Zaytri
she/her

Glitch Witch
Admin
Developer
Streamer
AnnagramAU said:
so had it happen again this stream, messages from one person weren't coming through in OBS but they were in my browser. i refreshed the browser source in OBS and the messages started coming through.
the only thing i noticed was they didnt have pronouns set when everyone else in my chat did (they added pronouns before i refreshed the browser source)

however, after refreshing the browser source, the file open in my browser stopped receiving some messages and gave me some errorsView attachment 31
Click to expand...
I found the issue that was causing this and I think I have a fix, I'm just going to make sure it works with my own stream before I release a new update.
 
J

JeanneMichiru

New member
This is what it looks like on MS Edge.

1700482108723.png

Here's Chrome

1700482265803.png

Both on their latest version, no plugins installed.

Here's Chromes source code:


<!-- Villager Chat v1.1.0 by Zaytri (https://zaytri.com/) -->
<!-- using slime2 version 0.2.3 -->

<!doctype html>
<html lang="en">
<!------------------------------------------
HTML info and the files imported into it
------------------------------------------->
<head>
<!-- HTML meta fields -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- title and favicon -->
<title>Villager Chat v1.1.0 by Zaytri</title>
<link
rel="icon"
type="image/x-icon"
href="https://slime2.stream/favicon.ico"
/>

<!-- jQuery, used in the custom JS -->
<script
src="https://code.jquery.com/jquery-3.7.1.slim.min.js"
integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8="
crossorigin="anonymous"
</script>
Click to expand...

<!-- custom JS/CSS -->
<script src="TOKEN.js"></script>
<script src="villagerData.js"></script>
<script src="villager.js"></script>
<link href="villager.css" rel="stylesheet" />

<!-- slime2 JS/CSS -->
<script type="module" crossorigin src="https://cdn.jsdelivr.net/gh/zaytri/slime2@0.2.3/release/slime2.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zaytri/slime2@0.2.3/release/slime2.css">
</head>

<!-----------------------------------------------------
HTML structure, slime2 inserts everything into main
------------------------------------------------------>
<body>
<main
id="slime2-root"
class="vertical-bottom-left dynamic-emote-sizes avatar-left"
</main>
Click to expand...
</body>

<!----------------------------------------------------------------------
template structures, the custom JS copies these to build the message
----------------------------------------------------------------------->

<!-- message template, inserted into main -->
<template id="message-template">
<div class="message">
<aside class="avatar"></aside>
<section class="bubble">
<div class="bubble-background">
<div class="background-box"></div>
<div class="background-tail"></div>
</div>
<div class="user"></div>
<div class="content"></div>
</section>
</div>
</template>

<!-- avatar template, inserted into the avatar container class -->
<template id="avatar-template">
<img class="avatar-image" />
<img class="punctuation-image" />
<img class="role-image" />
<div class="pronouns"></div>
</template>

<!-- user template, inserted into the user class -->
<template id="user-template"><span class="name"></span></template>

<!-- emote template, inserted into the content class -->
<template id="content-emote-template"><img class="emote" /></template>

<!-- cheer template, inserted into the content class -->
<template id="content-cheer-template"
<img class="emote" /><span class="cheer-amount"></span
Click to expand...
</template>
Click to expand...

<!-- text template, inserted into the content class -->
<template id="content-text-template"><span class="text"></span></template>

<!-- redeem template, inserted into the content class -->
<template id="redeem-template"
<div class="redeem-wrapper"><div class="redeem"></div></div
Click to expand...
</template>
Click to expand...
</html>


 
Last edited:
OP
OP
Zaytri

Zaytri
she/her

Glitch Witch
Admin
Developer
Streamer
JeanneMichiru said:
This is what it looks like on MS Edge.

View attachment 32

Here's Chrome

View attachment 33

Both on their latest version, no plugins installed.

Here's Chromes source code:


<!-- Villager Chat v1.1.0 by Zaytri (https://zaytri.com/) -->
<!-- using slime2 version 0.2.3 -->

<!doctype html>
<html lang="en">
<!------------------------------------------
HTML info and the files imported into it
------------------------------------------->
<head>
<!-- HTML meta fields -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- title and favicon -->
<title>Villager Chat v1.1.0 by Zaytri</title>
<link
rel="icon"
type="image/x-icon"
href="https://slime2.stream/favicon.ico"
/>

<!-- jQuery, used in the custom JS -->
<script
src="https://code.jquery.com/jquery-3.7.1.slim.min.js"
integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8="
crossorigin="anonymous"


<!-- custom JS/CSS -->
<script src="TOKEN.js"></script>
<script src="villagerData.js"></script>
<script src="villager.js"></script>
<link href="villager.css" rel="stylesheet" />

<!-- slime2 JS/CSS -->
<script type="module" crossorigin src="https://cdn.jsdelivr.net/gh/zaytri/slime2@0.2.3/release/slime2.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zaytri/slime2@0.2.3/release/slime2.css">
</head>

<!-----------------------------------------------------
HTML structure, slime2 inserts everything into main
------------------------------------------------------>
<body>
<main
id="slime2-root"
class="vertical-bottom-left dynamic-emote-sizes avatar-left"

</body>

<!----------------------------------------------------------------------
template structures, the custom JS copies these to build the message
----------------------------------------------------------------------->

<!-- message template, inserted into main -->
<template id="message-template">
<div class="message">
<aside class="avatar"></aside>
<section class="bubble">
<div class="bubble-background">
<div class="background-box"></div>
<div class="background-tail"></div>
</div>
<div class="user"></div>
<div class="content"></div>
</section>
</div>
</template>

<!-- avatar template, inserted into the avatar container class -->
<template id="avatar-template">
<img class="avatar-image" />
<img class="punctuation-image" />
<img class="role-image" />
<div class="pronouns"></div>
</template>

<!-- user template, inserted into the user class -->
<template id="user-template"><span class="name"></span></template>

<!-- emote template, inserted into the content class -->
<template id="content-emote-template"><img class="emote" /></template>

<!-- cheer template, inserted into the content class -->
<template id="content-cheer-template"



<!-- text template, inserted into the content class -->
<template id="content-text-template"><span class="text"></span></template>

<!-- redeem template, inserted into the content class -->
<template id="redeem-template"


</html>


Click to expand...

oh! ok that's villager chat v1.1.0, the current version is v2.0.1

v2 is the one that introduces the settings screen, v1 only had the Send Test Message button

you can download the latest version thru your email purchase receipt or purchase history

tho I would recommend waiting a few days before updating, I gotta see if my fix for the authentication bug works
 
You must log in or register to reply here.

Similar threads

Y
ios notification chat [Paid]
Replies
1
Views
432
sillylilkat
sillylilkat
Zaytri
Animated Gradient Frame + Rounded Border Mask
Replies
0
Views
318
Zaytri
Zaytri
cafeaunat
Bubble Chat
2
Replies
22
Views
1K
AkoChan
AkoChan
melon
Flexible bubble chat
Replies
12
Views
1K
phroobin
phroobin
mielzy
Window Browser Chat
Replies
0
Views
430
mielzy
mielzy
Back
Top