Villager Chat

 Villager Chat [Paid] 2.1.2

✅ This widget has passed review and has been verified to follow the Widget Gallery Guidelines.

reichan_tw

New member
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?
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
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.)
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
 

reichan_tw

New member
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
thank you so much ! It's work😍
 

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
Hello! Any plans to make this work for Tiktok live streaming too? Thanks!

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:

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
no, they're all on default options
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
 

AnnagramAU
She/Her

New member
Artist
Streamer
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

that seems to work fine, i'll keep it open and check for any errors next stream and report back
 
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
 

AnnagramAU
She/Her

New member
Artist
Streamer
that seems to work fine, i'll keep it open and check for any errors next stream and report back
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
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

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
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

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?
 
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
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.
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
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
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.
 
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>

<!-- 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"
<img class="emote" /><span class="cheer-amount"></span
</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"
<div class="redeem-wrapper"><div class="redeem"></div></div
</template>
</html>


 
Last edited:
OP
OP
Zaytri

Zaytri
she/her

Glitch Witch
Admin
Developer
Streamer
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>



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
 
Back
Top