Add a Free Blogger Chat Box Widget to Your Blogspot Blog
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 forums 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 forum to use for your chat box.
Go to Chatroll and click the button to create a live forum. 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 forum (this will also help drive traffic to your blog).
- Copy the chat window embed code from your live forum’s home page.
In your new live forums’s home page (the page that is shown after your forum 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. Feel free to contact Chatroll Support if you need any help. Enjoy your new Chatroll chat box widget!
7 comments
I really want to try this on my blog, but Chatroll.com seems to be having technical difficulties (something about there being a high amount of traffic to the site). Does this happen often?
Any way this looks really cool!
Hi Dan -
First, thanks for trying out Chatroll on your site! We aim to be the most reliable live community service on the internet, so the issue you’ve described is very rare. However, we do regularly upgrade Chatroll to add new features or fix outstanding issues reported by our users, and during these times the service may be temporarily unavailable. It is possible this was one such time. These periods normally last for only a few minutes, and only during non-peak hours.
You can be confident that by integrating Chatroll into your site, you’ll be using the most reliable, fastest service around. Our users are accustomed to 100% availability, and we plan to keep it that way!
nice work guys
Hello Jonathan,
1) Can you show me 1 or 2 blogger sites that already use chatroll ? I just want to get a feel of it.
2) I have a technical blog. I would like to conduct chats in my blog only for a specific hour or two in a week. So i need the ability to enable or disable the chatting in my blog during that specific timing. Also the ability to automatically archive all my chat sessions with my blog visitors.
Nice post! I was searchin for a chatbox for my blog and this kind of looks good, gonna try it out (I added your link on my site by the way ^^)
Hey i like this chat widget. I will write a review on you chatbox soon.
@Srini
Thanks for your great questions!
> 1) Can you show me 1 or 2 blogger sites that already use chatroll ? I just want to get a feel of it.
There are tons of them! Some Blogger owners choose to use Chatroll’s “shoutbox” format in their sidebar, like this one:
http://www.ufoblogger.blogspot.com/
Sites that get the best interaction from their readers make their Chatroll widgets easy to notice, for example, using the “shoutbox” format in their sidebar, as well as a dedicated chat page for a full-sized “chat box” format, like this:
http://jewelryrecipes.com/
> 2) I have a technical blog. I would like to conduct chats in my blog only for a specific hour or two in a week. So i need the ability to enable or disable the chatting in my blog during that specific timing. Also the ability to automatically archive all my chat sessions with my blog visitors.
These are some great suggestions! For the first one, unfortunately we don’t yet support scheduling times like this (but we’re always adding new features so keep an eye out for this one!) In the meantime, you can achieve the same thing by embedding the chat in a post on your site, and removing it when you’d like to finish the discussion.
As for automated chat archives, these are available via your Chatroll community home page, by clicking the “Archives” tab.
Hope that helps!
Leave a Comment