UI Placement

The very first line of code that we started with looks like this:

<div id="talkjs-container" style="width: 90%; margin: 30px; height: 500px">
<i>Loading chat...</i>

This creates an empty rectangle on the page, where the chat ends up being. Modify the CSS any way you like, and put it on whichever page is most appropriate. So in the case of the Chatbox you will typically want to make it a bit less wide. This way, you can put it besides other content on large screens.

TalkJS will fill the available width and height given on the <div>, like any ordinary HTML element.

Note: you cannot style the Popup in this way, because it creates its own floating container.

Looking good? Let's enable notifications.