How to embed Chatwee chat box for Blogger

Chatwee chat can be very easy to implement on Blogger. Due to the fact that Blogger is still at the forefront of blogging platforms with the huge community, we can not ignore the multitude of authors publishing on Blogger and also their readers.

Here’s our guide to install our chat on blog service hosted by Google.
 

I assume that you already have a Blogger running, if not see the material how to start publishing on Blogger. It is certainly a great platform for those who are starting their adventure with blogging, because it is self-hosted by Google so there is no installation on the server at all. In short embedding chat on Blogger is also trivial involving simple copy-paste operation and some customization. So let’s add a chat application for our blog to make some buzz around.

 

Step 1 – Get free chat code for Blogger

Chatwee is also hosted on their server, so we do not require drilling in the code. Just visit Chatwee and click free registration. Fill out the form. It is important to provide the correct address of your blog so that Chatwee could work under your Blogger url.

Once you are registered you will be forwarded to control panel where you can customize you widget but this time we just only need to get chat code to embed. If you havn’t yet had a chance to go to a different tab, on the home page of the control panel an unique script is beeing displayed that will for a short while revive your blog. So copy the code by selecting it traditionally or use the automatic button Copy to Clipboard Script below it. With Chatwee code copied to the clipboard, you can go directly to the Blogger dashboard.

Step 2 – Embed chat code to Blogger

For sure you know exactly how to log in and go to Blogger dashboard, so kindly please do it, and then from the menu on the left, select Templates, and click Edit HTML button.

 

This is the simple HTML editor of your blog. Locate the closing body tag and paste the Chatwee script right before it. Save your changes by clicking Save Template button at the top of the HTML Editor page. From that moment, your chat widget should already be embedded on your Blogger, so check it out by going to the main page of your blog.

 

Step 3 – Customization

Wait a minute. Did I not mention setting the chat box on the blog? Instead, we have the chat window attached to the bottom of the page. Well, you can leave as it is now, but of course you can configure the chat to show up at a specific site on the blog as a chat box. To do this back for a moment to Chatwee Control Panel, if you had a chance to log out simply log in again. From the main menu, go to Customize and make sure that you are in the first tab General.

Setting up a chat box

Changing the display is very simple. In the ‘ Embed as ‘ select ‘Chat Box’ . Box appears to provide container name or ID of the tag in the HTML code , which is to be placed directly to our chat box . Let’s say that ID is simply ‘ chatbox ‘ .

We only have to set the size of our live chat box . The ‘ Size’ we have to choose whether you want the height and width of the chat window has adapted itself to the container (Then this will probably need to set the width and height in CSS hand- in HTML editor, blogger ) or however you prefer to choose the second option , ie, enter the dimensions . Choose from the drop down menu ‘ Define manually ‘ and enter all the desired width and height of your chat.

The final step is to make sure that the container on the chat box will appear on our blog and that it will have proper ID . To do this, go again to the HTML editor in Blogerze and paste the following code to the desired location in the structure of HTML:

<div id="chatbox"></div>