How to Install a JQuery Chat App

Have you ever wanted a Facebook messenger-style chat on your site? This article will explain just that, and other features like chat rooms, a mobile version, embedded versions, video chat, and more.

ArrowChat will help you do all that and more. Their great team has developed a chat similar to Facebook over the past ten years. It will only take about 5-10 minutes to get set up and running. It's built on JQuery and PHP to be compatible with most websites, so your site doesn't even have to be running PHP!

Sample of the chat on your website

Requirements

Luckily, there are not many requirements for running Arrowchat on your site.

  1. PHP Installed - Your site does not need to be written in PHP so long as it is installed on your server.
  2. MySQL or MSSQL Server - Most websites already have one of these.

    **You don't need to do anything with JQuery because ArrowChat will automatically install and manage it for you.

First Step - Create an ArrowChat Account

Visit https://www.arrowchat.com/trial/ and enter your information to sign-up for a free account.

You should see a screen like this

This is a limited trial edition that is encrypted and is missing features like mobile and video chat. If you'd like to skip the trial, check out the ArrowChat pricing. It's worth it!

Update Aug 22, 2022 - There is no longer a 10 day limit on the free version of ArrowChat. You can use limited features forever!

Download the Chat App

After you login, visit https://www.arrowchat.com/members/ and click "Download" to get the ArrowChat package.

Member's dashboard screenshot

Unzip and Upload

The first step is to extract the ArrowChat .zip file. This will slightly vary depending on your operating system and the program you use. Generally, you will right-click on the icon and choose Extract Here.

You can also double-click the .zip file and drag the folder out

Next, simply upload the arrowchat folder to your server's root directory (don't place it in a plugins folder) by dragging and dropping the folder. For example, /public_html/arrowchat/. If you don't have an FTP program to do this already, we recommend WinSCP or Filezilla.

Drag and drop the ArrowChat folder

Run the Web Installation

Almost done installing your JQuery chat! Simply open up your browser and point the URL to http://www.yoursite.com/arrowchat/install/, replacing yoursite.com with your domain.

First up, the installer will check that you meet all the requirements for installation.

The requirements page

If a file or folder is unwritable, right-click the item in your FTP program and select properties. You can then either enter 777 or select ALL of the R, W, and X checkboxes. Hit next.

Database Details

The great thing about ArrowChat is that it already supports over 46 integrations, such as WordPress. Select your integration if it is supported or select not listed.

Select your integration for the JQuery chat

In the database details section, you'll want to enter the database details for the existing database for your site. This is important so that ArrowChat can read user information. You can either look in a configuration file on your site or contact your host for these details.

Administrator Details

This section is very self-explanatory. Fill out your details and hit next.

Select your username, password, and email

Configuration

Select the various settings that you want ArrowChat to use on the initial install (you can change these later). I highly recommend that you use the push server option, but you can always add it later.

Choose the settings you want

The database prefix is any characters that proceed all your tables. For example, if you have a phpfox_user table then phpfox_ is most likely your database prefix. There is a lot more information on this available in the ArrowChat documentation.

You can see the table prefix is "phpfox_" in this example

If you are installing ArrowChat on a custom website, you'll need to enter a few more database details. Again, there is more information available in the ArrowChat documentation.

Final Step

Follow the final steps on the last page and you're done! Each installation has a different way to add the ArrowChat JQuery chat code to your template, and the installer will tell you how. You can also look this up later in the documentation.

Remember to delete or rename the install folder for security reasons!

**Custom installations (if you selected "Not Listed" before) will have an extra step. Please see the custom installation guide.

You're Done! Configure Your Chat

ArrowChat has a wide range of configuration options that you can change via http://www.yoursite.com/arrowchat/admin/, replacing yoursite.com with your domain.

The ArrowChat administration panel

Congratulations! You installed a JQuery chat app on your site in less than 10 minutes. If you need further assistance, feel free to contact the ArrowChat team.

Sample of chat on your website

About the Author
Jason has been developing websites for 25+ years. He has a passion for modern UIs and an attention to detail. His hobbies include skiing, Texas hold'em, and roller coasters.