How to Embed a Chat Box

Written by andrea ruiz Google
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Embed a Chat Box
(Jupiterimages/Comstock/Getty Images)

A chat box is a small widget you can embed on your website that provides visitors a means to chat with you and with each other. It is a miniature chat room directly embedded into website code. A chat box is a simple way to add interactivity and foster a sense of community on your website. It can be a powerful method of communicating with your site visitors. If you are familiar with HTML code, embedding a chat box into your site is a fairly straightforward matter.

Skill level:

Things you need

  • HTML editor (optional)
  • FTP client

Show MoreHide


  1. 1

    Select a chat widget service. There are many excellent, free services that provide highly customisable chat boxes for use on both personal and commercial sites. Read the terms of service carefully, particularly if you intend to use the service on a business site. Many chat widget services do not charge for use on a personal website, but will charge a small fee for commercial sites.

  2. 2

    Create your chat box. Register with the chat box service, if necessary, and follow the on-screen instructions to create and customise your chat box code. Typically, you will be able to customise the colours, features, functionality, layout and size details.

  3. 3

    Copy the chat box code to your clipboard. Right-click anywhere on the code and click "Select All" from the menu that pops up. Then, right-click again and select "Copy."

  4. 4

    Open your HTML editing software. If you don't have HTML editing software, Windows Notepad is a free text editor that comes with all versions of Windows. You can use it to open and edit any HTML document. Click the "Start" button, select "All Programs" and click on the "Notepad" link under "Accessories" to open Notepad.

  5. 5

    Open the HTML file in which you wish to embed the chat box. In Notepad and most HTML editing programs, click "File" from the top menu, then select "Open" and browse for your file on your hard drive. Click on the file name, then click the "OK" button to open it.

  6. 6

    Scroll down to the section of the code in which you wish to embed your chat box. Chat boxes are often small and designed to be an unobtrusive extra feature instead of the main portion of the site. Many people prefer to put their chat boxes in a side column. Click the starting place in the code in which you want to embed the chat box.

  7. 7

    Paste the chat box code into the code. Right-click and select "Paste" from the pop-up menu. Your chat box code should paste into the code.

  8. 8

    Save the HTML file by clicking "File" in the upper menu and selecting "Save."

  9. 9

    Upload the HTML file with your newly embedded chat box to your website server.

  10. 10

    Ensure that the chat box looks and works the way you intended by visiting your site and testing its functionality. If it doesn't, or there is an error in the code, repeat these steps until the chat box looks the way you'd like it to.

Tips and warnings

  • If you are using a content management system, such as WordPress, check if there is a chat plugin that you can add directly to the site's plugin manager, for easier installation and customisation.
  • In some cases, the addition of a widget of any kind may slow down your page load speed.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.