Chat Box Problems plus Ways to Fix it

Assalamualaikum and hi all! I am really sure that all blogger suffer the same problem as me on chat box ( Cbox ). Actually, there are some more problem that you will face if you put cbox widget on your site.So, let's go through all of it to make you think twice before adding cbox widget to your blog.

Some of the cbox problem

1. Cbox won't appear on a secure connection.

As Blogspot team turned on HTTPS Redirect, we can see this problem happened to cbox. Cbox will not appear if you view them on a website with HTTPS Redirect. This is not an issue if you are using your own custom domain because automatically it will disable HTTPS. Cbox will work on a secure connection if and only if you upgrade your cbox to premium.

2. Cbox is an Iframe widget

Having an Iframe widget on your site is a total disaster. Why did I said that? content in an Iframe cannot be indexed. It will lower your SEO ( Search Engine Optimization ) and slower your blog which will increase your page loading time.

3. Cbox is not private

If you think that you already private your cbox, think again. When you click on someone blog URL that they leave in your cbox, blogger will detect your cbox as a traffic source. So, an URL to your cbox is generated in someone else stats page and they can view and read your entire cbox messages.

I think for now, that is the only issue on cbox that I am aware of. I am sure that there are more to come.

How to fix cbox issue?

If you still want to add cbox widget on your blog please do this :

1. Disable HTTPS redirect

Follow below steps so that people will not view your blog on a secure connection.

Log into your blogger account > Go to Dashboard > Settings > Basic > HTTPS Redirect > Choose No > Save

2. Do not click URL directly from your cbox

If you want your cbox messages to stay secret, do not click any blog URL on your cbox, what you can do is copy link address and open it in a new tab. If you don't mind the fact that people can read your cbox message, you do not have an issue here.

3. Alter the cbox code

Okay, to avoid using Iframe type of widget, we can actually change the Iframe code to object code. How to do so? read below explanation

Example of cbox code :

<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="205" height="150" src="http://www7.cbox.ws/box/?boxid=467090&amp;boxtag=zg126z&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-ryfd" id="cboxmain7-rtg"></iframe></div>
<div><iframe frameborder="0" width="205" height="75" src="http://www7.cbox.ws/box/?boxid=12ef&amp;boxtag=zg126z&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-467090" style="border-top:2px solid #FFeeee;"> id="cboxform7-467ht"></iframe></div>
</div>
<!-- END CBOX -->

Explanation : Change the word iframe with object, Change the word src with data.

Example of the edited code :

<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><object frameborder="0" width="205" height="150" data="http://www7.cbox.ws/box/?boxid=467090&amp;boxtag=zg126z&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-ryfd" id="cboxmain7-rtg"></object></div>
<div><object frameborder="0" width="205" height="75" data="http://www7.cbox.ws/box/?boxid=12ef&amp;boxtag=zg126z&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-467090" style="border-top:2px solid #FFeeee;"> id="cboxform7-467ht"></object></div>
</div>
<!-- END CBOX -->

If you want to use cbox  without affecting your blog you can :

Show a link to your cbox.
People can view your cbox diectly in cbox site. So, you don't have to add the cbox widget to your blog. As I told you above, cbox widget is not friendly for your website. What you should do is get a direct URL of your cbox by following below steps :

Log into your cbox account > Click Publish on the top navigation bar > Locate your Quick Link which will show your cbox page.
As for me, my Quick Link is  http://my.cbox.ws/Teddy_chimi

If you also want to add the cbox link gadget as mine, follow this simple steps :

Log into your blogger account > Go to Dashboard > Layout > HTML/Javascript > Copy below code and paste it in the HTML/Javascript content.
If you wish to edit the code first, paste it here first then, copy and paste the edited code into the HTML/Javascript content.

<style>
.chat {
border-radius: 0px 15px 15px 0px;
width:30px; height:90px;
text-align:center;
padding:5px 5px 5px 0px;
position:fixed;
top:60px;left:0px;
background-color:#999999;
background-image:url(BACKGROUND IMAGE URL);
background-position:0px 0px;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.chat a{
font:17px Century gothic;
font-weight:bold;color:#FFFFFF;
text-decoration:none;
text-shadow:1px 1px #777777;
}
.chat:hover {
width:50px;text-shadow:1px 1px #777777;
background-position:0px 100px;
}
</style>
<div class="chat">
<a href="QUICK LINK" target="_blank">C<br />B<br />O<br />X</a></div>

The Notes : Color code here
Blue text : Change with your background image URL
Red text : Change witth background color code
Fuchsia text : Font color
Lime text : Text shadow color
Orange text : Change with your Cbox Quick Link

Okay, I think that's all that I want to share with you guys about Cbox. I really hope that this post are useful and can increase your knowledge on cbox. If you have any problem regarding cbox that I am not aware of, you can share it by commenting on this post.

I will be very busy soon so, don't expect me to update my blog frequently. I do hope that I will have some time to update my blog. See you again next time.. Bye Bye  \ o /