How to Embed Chat Box into Your Website in Three Simple Steps

Have you ever considered adding a chat widget to your websites, but never actually did? Now you can boost your website with the feature-rich chat box tool for free. Just follow these three simple steps disclosed in this tutorial and your chatbox is be ready for use.

The following article reveals the chat box installation manual for websites.

Step 1 – Get the Installation Code

First, you need to get your individual code. Visit Chatwee.com and click a Sign Up. button in the header menu or click here to go to registration page. Fill in quick registration form and click Create my Chat Widget button.

install-chat-box-register

After completing the registration process successfully, you will be redirected to Control Panel home page with the script attached in blue box. Copy it after selection (or just click Copy to Clipboard button) and we move on to the next step.

embed-chat-html-code

 

Step 2 – Embed the Code

Go to your HTML markup editor and paste the installation code on every page of your website. Best place for script injection is just above closing <body>.

embed-chat-box-html-script

Due to the fact that we are installing a chat box version of Chatwee chat service, we need to indicate in what particular place on the page we want our chat box to appear. Add the following code to your HTML markup. This time – the injection spot really matters!

embed-chat-box-html-container

As you can see in the following code snippet the specific id has been given to a div element. It can be named as you wish, but leave it in mind, cause you will have to put it the last step. So, let’s get our chat box start working!

.

 

Step 3 – Set Dimensions & Customize

Return for a while to Chatwee Control Panel and choose Customize from the main menu. Make sure to stay on General tab and scroll down to Embed as section. As the example follows, enter “chatwee-root” to a text field labeled ContainerID. Please note, that if you have changed the id value in the code snippet mentioned in the previous step, just make sure to type the same one.

Last thing to make your chat system operating is setting the chat box dimensions. You can do it in two different ways. Both of them work the same way, so it makes no difference which one you choose.

Setting Chat Box Dimensions Manually

From the drop down menu below choose Define manually. This will cause two additional text fields will appear where you can put your desired chat box dimensions. The minimum value for width is 183 px and 406 px for height. After setting the proper sizes just click the Apply changes button beneath and go to your website to check your brand new chat box in action.

add-chat-box-define-manually

Setting Chat Box Dimensions in CSS (alternative)

This method allows you to set a width and height values in your stylesheet. From the same drop down menu (labeled Size) choose Adjust to Container and click Apply changes button below. Return to your HTML markup editor.

chat-box-setup

Paste the following code to your CSS file. Again, remember to give a proper id if you have changed it previously.

add-chat-box-adjust-css

 

Questions? We are here to help!

This chat box installation guide is suitable for all regular HTML websites. However, if you own a webpage which has been built with CMS like WordPress or one of the web-builder software – don’t worry! It’s highly likely that Chatwee will work for your site too. Please, refer to our extra resources listed below:

  • ฿Visit MoreCoin.tk ✯

    cant install chat ?

  • Cody Ro

    For me do not work. The div id can have any name or need have the Embed name/code?

  • Claude Lendrevie

    About your STEP 3

    At its beginning you say “Return for a while to Chatwee Control Panel and choose Customize from the main menu…” :

    I don’t see such a parameter in my plugin Chatwee installed. None parameters !
    I saw you speak sometimes about a “module” of your product Chatwee, but none place in your Downloads.
    So, I’m lost … and my Chatwee installed on my site seems only for a demo !
    Thanks for help.

  • andy pearson

    Great post! Find free marketing tools at http://thesocialboost.moonfruit.com/

  • k8oms

    I found a way to use Chatwee in a Google Site. http://www.k8oms.net/chat/chatwee

    In GS we can’t get fully in to the HTML.

  • Alb Mee

    can i create individual box locations to house various topic headings