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