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 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.


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.



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>.


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!


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.


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.


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



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:

Chatwee logo

Get your community engaged. Sign up and start growing.

65k+ sites served

By clicking the Create my account button, you acknowledge that you have read and agree to the Terms of Use and Privacy Policy.
We keep your details to ourselves. No spam or third-party communication will be sent to you.
Already have an account? Log in.