Here’s the easiest way to add a free Blogger chat box widget (also known as shoutbox, chatterbox, or chat room) to your Blogspot blog. Adding a chat box widget to your blog is an easy way to build community on your site and keep your visitors coming back. It’s so easy we can do it in less than a minute. We’ll use Chatroll live communities to create a chat box widget, customize it, and add it to your Blogger layout.
Here’s a screenshot of a Blogger blog with a chat box embedded in the main column:

These steps are easy enough for anyone, but if you have any trouble, you can contact Chatroll Support via live chat or email. Let’s get straight to it!
Create a Chatroll live community to use for your chat box.
Go to Chatroll, enter your community’s name in the “Name Your Live Community…” box and click “Create”. Choose a name that fits with your blog, as this name will appear in the chat box title. Write an attractive and detailed description so that people can easily find your new Chatroll community (this will also help drive traffic to your blog).

Copy the chat window embed code from your live community’s home page.
In your new live community’s home page (the page that is shown after your community has been successfully created) copy the embed code from the text box labeled ‘embed’. This text box is located under the chat window, as shown below:

Edit your Layout in Blogger.
In Blogger, click on the “Layout” tab to show your blog’s layout:

Add a new HTML/Javascript gadget.
On your blog’s layout screen, click the “Add a Gadget” link to open the Add a Gadget window:

In the Add a Gadget window, scroll down and find the “HTML/Javascript” gadget. Click on the “+” icon to add it.

Paste the Chatroll embed code into the HTML/Javascript gadget.
On the new HTML/Javascript gadget screen, enter a title for the gadget. A good title should alert your readers that this is your site’s live chat. Here’s the important part: Paste the chat window embed code into the Content area (this is the code you copied from Chatroll in step 2):

Finally, click “Save”. The gadget should now be visible in your blog’s layout.
That’s it! You’ve just chat-enabled your Blogger or Blogspot blog! You can now use the Blogger Layout tab to drag the chat box widget wherever you want in your blog’s layout.
Here’s a few more tips for best results:
Position the chat box so it appears on every page: For best results, place the chat box where it will appear on every page, so that your readers can continue their conversation even if they move from one page to another within your blog.
Match the chat box colors and size to your blog’s template:To further maximize your chat widgets’s success, you’ll want to customize it to match your site design. Chatroll lets you customize the position, size, and color of the chat to fit in perfectly with your blog’s template. Each time you customize the chat, simply click “Edit” on the chat gadget in the Blogger Layout page and re-paste the embed code.
Thank you for reading, we hope this article has been useful for you.. Enjoy your new Chatroll chat box widget!