Early December we have provided a new version of Chatwee live chat software, which is fundamentally different from the previous one, namely the fact that now our social chat can be embedded anywhere on the page as live chat box.
This article aims to introduce the advantages which our online chat box provides for websites and show best practices of customization and exploiting its rich features. So let’s take a moment to check out this setup and configuration guide.
What is html Chat Box for website?
Our live chat for website is now available in two versions in terms of placing them on the page. The application can be embedded on the page as a tab (position: “fixed”). In this case, the chat plugin always adheres to the edge of the browser window, typically at its bottom. Chatwee so far only occurred in that form. The second solution is a chat located anywhere on a particular subpage in specific container. Such chat box has a predetermined size (width and height).
Embedding Chat Box
If you do not have a line of Chatwee code yet, simply get chatbox free here to access your control panel where you can obtain the code for your website, convert the chat widget into a chat box and customize its properties. If you only want to set your current chat widget to display in the form of a box, of course you do not need to register a new account, just login to the control panel traditionally.
I assume that your account Chatwee is ready, so you have received a unique code to run your own chat system, let’s configure the free chat box. After logging in to the Control Panel, simply go to Customize, and then click on the tab Size & View. We see that we have two options: embed a chat as Fixed Tab by default, or embed as a Chat Box. Of course we are interested in this second option.
The Container
In the form we see an empty field ContainerId where you need to provide id of the element in the chat box will be automatically placed after pasting line of code on the website. If you do not already have such a container where you want your real-time chat box to be found, create one. This will often be an ordinary tag <div> for example:
<div id="myChatBox"></div>
When you create a container for a chat box in the html code of your page please go back for a moment to the panel. Make sure that you have entered in the field ContainerId the same id and move on to the final step, which will set the size of your html chat box.
Sizes
Sizes of our chat box can be set in two ways. You can set the CSS property width and height pre-set container in your CSS file. To do so, select ‘Adjust this container’ from the dropdown menu Size. Then the chat widget will automatically adjust all its dimensions to the CSS properties of the container in which it is currently located (ContainerId).
If you do not want to modify your CSS file, simply select the ‘Define manually’ from the dropdown menu and specify the appropriate values for the two additional fields ‘Width’ and ‘Height’. Speaking of dimensions, it is worth mentioning the minimum values that are 183px width and 406px height. Maximum sizes are not determined, so your chat window may be as large as you need.
Both solutions give the same results, choose one that is convenient for you. I recommend by the way to experiment with different values of the height and width of the chat box. This will give interesting results in the composition chat box on your website. Here are some solutions for example.
Appearance of the chat box
If you placed the the code (anywhere on the page) and correctly perform all three steps of this guide your group chat box should now be available and fully functional. It is still a matter of giving it proper character that is selecting skins, color adjustments and fonts. More on customizing the appearance, you will learn by reading a separate article here.
A few words about styles of container
As the chat box is placed in a specific container and its edges overlap the edges of the chat window, I would like to suggest several possibilities for additional embellishments the chat plugin on your site, By adding the power offered by the CSS and especially its latest variety CSS3.
Adding the shadow
Adding the CSS3 box-shadow property, you can beautifully highlight your free chatting box on the page. Add the following code to your CSS file:
# myChatBox {
float: left;
margin: 40px;
box-shadow: 0px 0px 20px -5px #000;
}
The result is shown in the picture:
Here are a few more examples:
# myChatBox {
float: left;
margin: 40px;
box-shadow: 0px 0px 3px 3px #FFC14F;
}
# myChatBox {
float: left;
margin: 40px;
box-shadow: 0px 0px 0px 6px rgba(193,0,32,0.3);
}
Other CSS properties
Interesting effects can also be achieved by experimenting with different properties such as the backround, border, border-radius and opacity.
Here is an example:
# myChatBox {
float: left;
margin: 40px;
box-shadow: 0px 0px 0px 6px rgba(0,118,237,0.2);
border-radius: 5px;
border: 4px solid #0076ED;
}
Summary
I hope that the information in this article will help you better use our free chatbox widget in practice, and some ideas and advice for customization inspire you to experiment with the look of the chat. I am convinced that the chat box will be perfectly fitted to your website and serving your users become best chatbox for website, because that’s what it’s all about.
