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 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:

New! Our updated install wizard:
Add Chatroll in 3 Easy Steps »

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!

  1. 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).
  2. 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:
  3. Edit your Layout in Blogger.
    In Blogger, click on the “Layout” tab to show your blog’s layout:
  4. 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.
  5. 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!

27 thoughts on “Add a Free Blogger Chat Box Widget to Your Blogspot Blog”

  1. 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!

  2. 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!

  3. 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.

  4. 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 ^^)

  5. @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.

    Here is a demo: http://chatroll-demo.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.

    > 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!

  6. hello Sir,

    How can we enable users of the community to have a private chat. I am not sure if that feature is feasible in this community chat. Please let me know as i need this to my blog.

    Thanks,
    Vasanth

  7. @Vasanth

    Thanks for your question!

    There are many cases where a fully private chat is necessary. Indeed, we consider privacy and security to be of utmost importance throughout Chatroll.

    Here are a few easy steps you can take to implement a private chat using free features available on Chatroll today:

    1. Remove your community from Chatroll’s public listings. In your community’s settings page under “Access Controls”, disable the “Publicly Listed” checkbox. Once this is done your community will only be accessible via its home URL.
    2. Disable message archives access. Again in the “Access Controls” section, set the Archives Access to “Admins Only”. This will ensure only you have access to the chat history.
    3. Embed your chat in a private page on your site. The idea is to host the chat in a place where only the desired people will find it.

    Using these 3 steps, you will prevent unwanted guests from discovering your chat. If someone does discover your chat and enter it, you can use Chatroll’s powerful moderation features to remove them and ban them from entering again.

    Throughout the early months of 2009, you’ll see several new security and privacy features launched on Chatroll. Keep checking back on your community’s Settings page- that’s the first place you’ll see the new features appear!

    Thanks again for using Chatroll and keep the feedback coming!

    Kind regards,
    Jonathan
    Chatroll.com

  8. Hello. I plan on trying Chatroll this weekend on my site. I have three questions, if you’d be so kind to answer them.

    1. Is there a way to “screen” posts by readers before they go “live” and become available for public reading?

    2. If not, is there a way to quickly remove posts by readers that may be objectionable due to profanity, etc.?

    3. Is there a way to “block” a poster if he continues using profanity or harasses myself or other readers?

    Thank you very much for your help.

  9. @Jerry

    > 1. Is there a way to “screen” posts by readers before they go “live” and become available for public reading?

    No. At this time, all messages sent by members become instantly available for all other members to see. Please contact us if you need more control than this.

    > 2. If not, is there a way to quickly remove posts by readers that may be objectionable due to profanity, etc.?

    Yes. Any community administrator (you can add as many as you want) can delete messages by readers right inside the chat widget. Simply hover over the message, and click the red “X” button. You can also use this technique to ban a user, or delete ALL their messages.

    > 3. Is there a way to “block” a poster if he continues using profanity or harasses myself or other readers?

    Yes. Same as above, click on the red “X” beside a message, or click the icon next to the user’s name. You’ll see an option to ban the user. A ban lasts 1 hour, but you can extend it via your community’s Settings page if you need to make it permanent.

  10. Simple chat but needs many more features.
    I like the addidtion of sound which many free web based chat lacks.

    But then there should be inclusion of basic emoticons,
    the users should be able to change their font color and the font size.
    And also moderation must be included.

    Thank you. :D

  11. Hi
    I have added this wonderful feature to my website..i want to make sure that users can only chat when they sign up using some password..is that possible
    thanks in advance

  12. Hi.

    Chatroll is great. but the embeded chatroll at blog not auto refresh the messages. Or how I can do it? Any setting?

  13. I was looking for something like this for some time. It is great that this widget can be implemented to blogspot. I will try it in the near future.

  14. Thanks very much for this looks like just what we are looking for. Going to try it out on my site and looks like might keep it.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>