Do You Need an ADVOCATE for Family, Civil, Criminal, Cheque Bouncing or ACB Matters in Mumbai? CLICK HERE

Sunday, April 15, 2012

Create a Chat Widget for Blogs and Websites

Hello, today i am going to show on something for creating a chat widget for your blog , websites before starting i would like to thank the admin of for allowing me to write a guest post!

Why Chat Widget?

Many times i see a Chat widget floating, appearing on the Sites, Blogs to chat with us, as

In today Internet world each and every site owner, wants that there customer should be satisfied, as same even a small blog owner would think to have a conversation with their visitors & readers But it is not easy to spend the hard earned money to be invested in blog, where it is no profit!

and yes not to forget that even time is important, one cannot just sit whole day in logging in various types of accounts just for chatting!
So i will show you an easiest way to create a chat widget for free and chat from your Google Account i.e (Gmail inbox)
That's to easy to do even a newbie can setup by own, not code but you need to paste.

For making the chat widget, we will divide this in 4 stages

 #1   Making of chat widget

#2    CSS Hack

#3    Finalising

#4    Chatting From Inbox

#1 Making Of Chat Widget

This is the main/ primary step, Go to Google Badge Start Page

                 Note :- You May need to sign in first to your Google Account.

After Appearing there you will need to edit some info like

Your Nick Name, Title (optional), important! Style, and whether to show or not your last Status message!

(Appears All Features Provided by chat companies like zendesk)

To do this click on edit next to disable old Badges.
Get The code Presented In

After Copying that code open a new notepad by pressing
win key + r, type notepad, ctrl + v

Make Sure You Have Done #1 Step Properly!


Before starting let me make you understand what is css.


used for extra styling.

In this we are going to use inline cSS hack.

When you will paste the widget, widget will not float as you scroll the webpage!

for making it float along the webpage.

Use Of Inline cSS is necessary as most of platform's accepts inline CSS rather than scripts!

Note Down this code carefully, don't worry will bring this code together in step #3


Note:- Top:90 % Shows The Space To Be Left From The Top Of The Browser, And Left 0% Shows The Space To Be Left From The Let Side Of The Browser, If You Want The Widget To Float In Right Change Left :0 % To Left : The Space You Want , and the same if you want to change in top.               

#3 Final Stage

As We saved Code of #1 in Notepad,

We will open a new notepad, and paste the code in it!

<iframe src=";w=200&amp;h=60" frameborder="0" allowtransparency="true" width="200" height="60"></iframe>
Now We Will Copy the code provided in step #2

and paste it before src

like this

<iframe style="position:fixed;top:90%;left:0%;" src=";w=200&amp;h=60" frameborder="0" allowtransparency="true" width="200" height="60"></iframe>

Now after the fusion of step #1 and #2

copy the code and paste on the blog.

Instruction For Users

Log in at

Select the Blog -> Go to Design (in old blogger interface), and Layout (in new blogger interface)->

On sidebar of your blog,

click on the Add Gadget -> Select HTML/JAVSCRIPT

Leave The Title Blank And Paste the Code In Content (made in step #3)

Click On save

after that save arrangement.

Now Go to Your Blogger's  Blog And Have A look it should appear like this

View Demo

For Wordpress Go to Your Site,

 by http://yoursite/wp-admin/widgets.php

Drag Text Widget To your sidebar,

Paste the In Content and save .

Now go to Your Wordpress site and have a look

View Demo

#4Chat From Your Google Account

Whenever You are online (Surfing in your Gmail inbox), And visitor at your page want's to chat and click on the chat widget, as the visitor clicks, he may have to accept the google privacy page!

At your chat box in gmail an message appear like :- your are about to chat with a visitor, please check our policy page....

Don't Forget To have a look at the author's website, any comments will be appreciated!

About the author: Ankit shah is an i.T student from mumbai, loves programming, blogging, hacking. He also writes and manages blog at Get discounts on domain names, CLICK HERE!

Subscribe via Email

Related Posts :


  1. Thanks for the help on the chat on blogs. Been having a lot of trouble and you helped so much. Easy to follow. Thanks.

    1. @pizza in silverdate

      I am glad that it help you.


  2. Nice information men, keep it up! COOL.

  3. Thanks for sharing these crucial insights which helps simplifying things. Happy Blogging!!

  4. Hey, I want to get this chat widget on by blog. Can you share an easy tutorial for its installation?

  5. website chat is great but only if you have many users in your site

  6. Thanks for the instruction on blogger. I will try this one up. I think it's a way to open up engagement in my personal blog.

  7. Thanks for sharing a great information.

  8. Haven't thought that this is possible, but thanks for the tip. I will try it myself.

  9. Very effective and important codes you have shared on your post, being a newbie in blogging field your codes and points are very helpful for me to be successful in this field.

  10. Very cool share...Thank you for sharing a great information...

  11. provide great information and very effictive sharing great information

  12. Regards for all your efforts that you have put in this.
    Very interesting info.

  13. wow it too useful information. we need implement it on our blogger site. i love it.

  14. Chat box has been an effective way to reach out your audience, make conversation and build connection. A very useful tutorial. I'll will try it out and if there's problem, I'll get back to you! Thanks!

  15. I was browsing the net and I found your site, I enjoyed reading every lines of your review. This is very informative.

  16. Excellent information. Your site definitely explains essential concepts to its readers. Thanks for continuing to write such wonderful articles.

  17. Hey great tips shared by you because changing web links at joomla is very difficult for me but after reading your post it become very easy for me so its very helpful for me.

  18. Is there any pre-made widget for it? It's pretty easy to build your own, but I'm too lazy to do one. :P Having your own chat widget will surely enhance the community on your blogger.

  19. Very informative review. I really appreciate how ways were laid. Very interesting. This is very helpful.

  20. A chat widget would best be positioned at the bottom. It will surely help increase the interactions of the people in your community as well as enhance the way information and traffic works on your website. Great post!

  21. Its like you read my mind! You appear to know a lot about this, like you wrote the book in it or something. I think that you can do with some pics to drive the message home a little bit, but instead of that, this is great blog. A great read. I will definitely be back...

  22. Nice informative article,thanks for the share.

  23. I have read article on your website, it was pleasure to see this kind of articles...


  24. Thanks for shared n keep your great jobs!

  25. thank you for sharing your information with us and always success for your hard work!


Have an opinion or suggestion?
Need more help?
If so, drop your comment below.

Important : If you are asking a question click the Subscribe By Mail link below the comment form to be notified of replies.

Do not add any links to the body of the comment. This will result in your valid comment not being published.

Related Posts Plugin for WordPress, Blogger...