Embed Twitch Chat in Scenes Using ComfyJS

Instructor: [0:00] With our seam layouts ready to go, it's time to add our first bit of interactivity, which is to embed the Twitch Chat. For this, we'll go into our base layout. Next to this section we'd already defined that includes our stream details, we'll create a second section. We're going to give this the ID of Chat Box.

[0:22] Within this section we're going to create a nested div with the ID of chatter. Now, we'll see why we need this nested div in a moment when we get to the styling of this Chat Box section. To help us see what we're doing while we style this up, we'll insert a test element that will represent what will eventually be inserted dynamically.

[0:45] A paragraph with this strong that will take in the user's name and then a span that will eventually take in the user's message. We'll go ahead and duplicate this as well, so we can get a couple of messages and see how those flow into our layout. Our first thing is to update the placement of this.

[1:05] In order to do that, we'll go into our style file and we'll find the section for our header. We're going to update this to use grid display and define a grid-template-columns, where the first column is going to be our details section. We're going to allow that to grow to a max-width of 40ch, and then let our chat fill the remaining space.

[1:29] We have the beginning of our lineup settled. Next, in order to prevent visible overflow of the section is why we added the nested div. Our outer chat box is going to hold the space in our layout and the inner chat box is what's going to scroll.

[1:47] We'll start a rule for our outer chat box area that's holding the place. We'll give it some layout properties. Importantly, setting it as position relative. We'll need that to absolutely position the chatterbox and hide any overflow.

[2:03] Since this is a controlled environment and we will actually have used interaction to scroll the box, we're going to completely hide overflow for our purposes. Following those rules, we can add a few styling related rules for font size and color. We will remove our decorative font and fall back to the sans serif font.

[2:22] With that in place, we're getting close, but if we add more elements in our chatter, we'll start to see that these are overflowing out the bottom. We want to them to overflow out the top. In order to ensure that that happens, we'll come back into our style file and style up the chatterbox so that it has absolute positioning within the parent container.

[2:49] Following that, we want to once again bring in Grid. We're doing that so that we can add some spacing between chat messages with the use of gap. We're also reinstating some padding that we lost on the parent container from using position absolute.

[3:06] With those rules in place, we can see that the overflow is now coming out the top of the element. We're ready to replace this with a template that we'll pick up and use for the JavaScript portion.

[3:19] Since we're using 11d, we can include our JavaScript as a template partial. We're going to be using the open-source script ComfyJS. ComfyJS offers a JavaScript API that allows you to interface with the Twitch API, and allows you to respond to incoming chat messages, chat commands, new subscriptions, and other features.

[3:45] We'll create a directory to hold our related scripts for this, and include. The first thing we'll do is create that include. The first sign I'm replacing in here is we're going to go out to the CDN that's available for Comfy, and then we'll make use of our templating features to pull in the Twitch username, which we had previously defined in our streamed data.

[4:07] Then, we'll include, once again, using 11d templating, specifically Nunjucks. We'll include our script file. We need to create that script file. We've named it script.js. Here's where we start to intake the chat commands. We'll also be using ComfyJS in the next lesson for responding to chat commands. In either case, we need to Init so we'll be able to use that past username that we defined over in our template partial.

[4:37] With Comfy available, the next thing is to grab our chatterbox and also the message template. The chatterbox will have the new chat messages appended to it. We'll use our chat message to construct the new chat message note.

[4:55] We need to create a function. We're using ComfyJS's onChat function so it automatically is creating a listener that can respond when new chat messages come through. We'll reach out to our template and clone that so that we have a new paragraph to work with.

[5:13] We'll populate the strong tag within that with the user's name and the span tag within that with the incoming message. The final step here is to look for our chatter elements and append the new message. It will insert it at the end of the list.

[5:31] Our last step is to jump back into our base template with Nunjucks will include that partial that we created that includes both the CDM script and our custom script that's creating the responses using ComfyJS.

[5:44] To test our chat integration, we can pop open the Twitch chat from your Twitch channel. Even though a stream is not going on we can still go ahead and use the chat widget so we can send a text message.

[6:01] You can see that it instantly appears within our section. We can also add a longer text message. We'll do one more to make sure that our overflow scrolling is working as we expect. You can see that since it's added to the bottom of the list, the previous messages simply scroll out of view as new chats are received.

[6:20] In this lesson, we use Nunjucks templating within Eleventy together with the Comfy CDM script to be able to respond to received chat messages and embed them within our base layout.

[6:33] Using CSS absolute positioning, we were able to ensure that when a new message was received, that it would be added to the bottom of the list and other messages scrolled out of view. We also learn how to test our chat widget by using the pop-up chat functionality from our Twitch channel.