Adding Chat Box from Shoutmix

Hi bloggy readers,
Visitors are very important thing in our blog because they are the potential readers that in the future can turn into the loyal audience and gain a traffic for us. So, one of many important widgets you must embed to your blog is a chat box widget or shout box. Have you ever heard about chat box or Shoutbox HTML code? If this is the first time you hear about chat box, let me explain to you about what chat box really is.


Shoutbox HTML code is a chat box widget that will allow readers or visitors to leave their messages, questions, or opinions and also, to stay in touch with the blogger or author in a real-time messaging. Shoutbox HTML code contains all the useful elements such as a visitor's URL address and visitor's Name. So if the visitors leave their message, the blogger can reply directly to the visitor's blog in the chat box real-time mode.

There are many websites that provide chat box service. ShoutMix is one of them. I personally never experienced any kind of problem using their service. So, you will be amazed about how rarely the embedded chat box from ShoutMix is getting a server down or lame when submitting a message.

Shoutmix is a good chat box provider and well recommended by many bloggers and internet marketers as a great real-time chat box in your blog. If you are eager to try their service, now go to that website and then Sign Up there. After finished Signing up to ShoutMix, now we can proceed to the next phase, which is, to get the code snippet that later can be embedded to our blog.

1. Press the button Use Shout Box
After Signing up to ShoutMix, you will enter your Shoutmix account. Inside your ShoutMix account, we need to get the widget code that later, will be embedded in our blog. As you can see in your account, under the "Quick Start" menu, there is a button Use ShoutBox. Now press the Use Shoutbox button . By pressing this button you will be prompted with the option on adding chat box into the web page, in this case, our blog.


2. Press the Place Shoutbox on Web Page
In the new page, you will be able to pick an option to embed chat box widget into our blog. As you can see in the options, there is an option called Place Shoutbox on Web page, now click that link. By doing so, you will be prompted with the chat box configuration window.

3. Customize the Shoutbox
In the Place Shoutbox on Web page option, you can control the interface of Shoutbox HTML code you're about to embed to your blog. Now set the parameter size of width and height that later, will fit with the sidebar of your blog (because sidebar is the best position of Shoutbox HTML code widget). By adjusting the width and height parameter into the suitable size of your blog sidebar, you will get more specific size of the chat box widget, rather than just copying and pasting the default code into our blog.

4. Get the widget code
After finished editing the chat box, now copy the HTML code under the words Generated Codes and save it to Notepad. Later will be used to our blog.


1. Log in to Blogger
To begin this tutorial, now go to Blogger.com and Log in to your Blogger account.

2. Go to Page Element
In the Dashboard page, pick one of your blog and go to the Layout/Design page. In the Layout/Design page, you will be automatically presented to the Page Element tab.

3. Press the Add a gadget
Now in the Page Element, pick any area on your blog layout that will be embedded with a chat box widget. My suggestion would be on the sidebar area, because this area will get the most attention from the readers.

Okay, after finished finding the best position on your blog layout, now click Add a gadget. And then choose HTML/javascript as a platform for the Shoutbox HTML code generated code and then paste the Shoutbox codes we've already got before.

4. Save the change
By pressing the Save button, now save the current chat box you've just added. As you can see in the result directly to your blog, the chat box widget has been successfully embedded to your blog.

Okay, that's it for this tutorial. If you got any question or have a problem to applying this tutorial, then you can submit your question below. Hopefully, i can help you with that.