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 TricksJunction.Com 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 ChatWith 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!

#2 CSS HACK

Before Starting Let Me Make You Understand What Is Css.

CSS Stands For CASCADING STYLE SHEET.

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

Style="Position:fixed;Top:90%;Left:0%;

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="Http://Www.Google.Com/Talk/Service/Badge/Show?----------Tk=&N&Amp;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="Http://Www.Google.Com/Talk/Service/Badge/Show?Tk=----8n&Amp;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 Blogger.Com Users

Log In At Blogger.Com

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