Discord DM StreamKit Generator

Discord DM / GC Voice Indicator Generator

The Discord DM Voice Indicator Generator allows streamers to modify a StreamKit Voice Widget link so it works inside Direct Messages and Group Chats.
Simply paste your StreamKit link and a DM message link below to generate a compatible overlay for OBS. If Discord changes the streamkit in the future I will try to update this.

Step 1

Go to https://streamkit.discord.com/overlay
Click "Install for OBS" Click Voice Widget tab, select any server and VC channel option.
Configure any appearance options you would like.
Copy the generated link and paste it below.

Step 2

Go to the Private Direct Message or Group Chat that you want that VC to show in stream.
Grab any message → Click Copy Message Link → Paste it below.

Preview

If the preview opens correctly, copy the link into an OBS Browser Source.

OBS Dimensions:
Width: 312 px
Height: 600 px

If you want the VC styled like this:

Enter this CSS inside your OBS Browser Source → Custom CSS section. You may want to use other dimesstions

Width: 600 px
Height: 115 px

/*＊＊＊＊＊カスタムCSS＊＊＊＊＊*/
/*アバターの大きさと明るさを決めるよ　あと線を消してるよ*/
img[class^="Voice_avatar"] {
height:57px !important;
width:57px !important;
border-radius:10px !important;
filter: brightness(70%);
}
/*しゃべったときの状態の設定してるよ*/
img[class*="Speaking"] {
border-color:rgba(0,255,0,0.7) !important;
position:relative;
animation-name: speak-now;
animation-duration: 5000ms;
animation-fill-mode:forwards;
filter: brightness(100%) ;
}
/*しゃべってるときのアニメーションの設定だよ*/
@keyframes speak-now {
0% { bottom:0px; }
5% { bottom:10px; }
10% { bottom:0px; }
15% { bottom:10px; }
20% { bottom:0px; }
25% { bottom:10px; }
30% { bottom:0px; }
35% { bottom:10px; }
40% { bottom:0px; }
45% { bottom:10px; }
50% { bottom:0px; }
55% { bottom:10px; }
60% { bottom:0px; }
65% { bottom:10px; }
70% { bottom:0px; }
75% { bottom:10px; }
80% { bottom:0px; }
85% { bottom:10px; }
90% { bottom:0px; }
95% { bottom:10px; }
100% { bottom:0px; }
}
/* アバター及びネームタグ表示位置調整だよ*/
li[class^="Voice_voiceState"]{
width: 70px;
height: 90px;
position: static;
display: inline-block;
}
div[class*="user"]{
background: rgba(0,0,0,.7);
padding: 4px 5px 0px !important;
border-radius: 4px;
display: inline-block;
}
span[class^="Voice_name"]{
display: inline-block;
position: relative;
width: 55px;
height: 17px;
line-height: 17px !important;
white-space: nowrap;
text-overflow: clip;
text-align: center;
background-color: rgba(0,0,0,0) !important;
padding: 0 !important;
overflow: hidden;
}
body {
background-color: rgba(0, 0, 0, 0);
margin: 0;
padding: 0;
overflow: hidden;
}
/*＊＊＊＊＊カスタムCSS終わり＊＊＊＊＊*/