How to change my chat’s design ?

If you want to customize the look&feel of your chat, you need to use CSS.
If you don’t know what is CSS, please visit that site. (however learning CSS will take a few days, so If you have some urgent customisations, I suggest you hire a freelancer or eventually contact us for this extra task)

Do not overwrite, but add !

Many users ask us to send them access to CSS so they can modify it. This is a big misunderstanding about how CSS really works.
In order to maintain the script up to date, you will never change script or CSS, but you will add yours. The added properties will simply overwrite the existing one.

How to add my own CSS ?

Go to your chatadmin panel -> config ->Design/Layout and insert there the link to your own CSS under the Link to external CSS to customize your chat text field.

How to write my own CSS ?

You need good knowledge of CSS. Use Google Developer tool to get the selector of your DOM, and then write the property.
Ex: Here is the CSS to overwrite the way messages are shown in the chat:
We hide the avatar, the time and make the message fit 1 line:

div.message img.userItem {
display: none;
div.message div.timeStamp {
display: none;
div.message div.content {
box-shadow: none;
border: none;
display: inline;
div.message div.flex-property {
display: inline!important;
.arrow-chat {
display: none!important;
div.message div.userItem {
display: inline;
font-weight: bold;

div.message div.userItem:after {
content: ":";

The messages will appear now:

CSS to make messages appear on 1 line !

How to directly enter a room ?

(UPDATED – fixed bug)
New feature: It is now possible to join a particular room directly at login

2 cases

Let suppose you want to join room id : 1620
(you can find out your room id in your chatadmin)



  1. if you don’t use JWT authentification, just pass the url parameter startRoom
  2. You do use JWT to login, then just inject the parameter: startRoom: id
Where to find the room id ?


so for room : 1620, you just need to add


So for instance your JSON will be:


$json = json_encode(array('username'=>'myUsername', 'password'=>'myChatAccountPassword', 'gender'=>'male', 'role'=>'user', 
'image'=>base64_encode('https://html5-chat.com/img/malecostume.svg'), 'profile'=>'https://monsite.com/profile/myUserername', 'startRoom'=>1620));

HTML5 chat and JOOMLA: new html5chat joomla plugin

! WARNING ! A new update of Joomla plugin can be found here !

You can now easily integrate html5 chat into your joomla

The joomla plugin can be downloaded from this link

Here is how to make it run in 2 minutes:

HTML5 allows you to easily add a webcam video chat into your JOOMLA page.

###How to use it:
1) register free on https://html5-chat.com/register

2) install the plugin and setup the password and webmasterid parameters you got when registered.

3) add a new article and insert a shortcode like

          [html5chat width="100%" height="800px"]

You will get your chat with 100%, 800px dimensions with authenticated user (username, role)



php fox plugin a new version

PHP fox 4.5 and 4.6 : a new version of the plugin

A newer and more flexible version of phpfox plugin for html5 chat is available:

Here is the installation guide:

  1. Download phpfox-product-vchat and unzip it on your computer
  2. Upload all the files and folder to phpfox root folder.
  3. After file move, Go to phpfox adminpanel : https://yoursite.com/index.php/admincp/product/file
  4. In the above page, you can see “vchat” module, click install.
  5. go to your app https://yoursite.com/index.php/admincp/apps/ : the module_vchat should be there (activate it if needed, but should ba active by default)
  6. Click on module_vchat and then click on settings: insert the webmasterid (your script id) and your password parameters (you received them in your email or you can find it when you login to your chatadmin panel)
  7. Your chat is now available at the url : https://yoursite.com/index.php/vchat

Easy developer integration : how to integrate html5 chat into your site ?

In your chat admin panel, you will find a quicker and simpler way to integrate the html5 into your existing chat

You have now 3 scenarios possible:

How would you like to integrate your chat ?

  1. I want anyone to enter my chat (easy integration). Anyone will choose his username and gender at login
  2. I want people to register before they enter chat (easy integration handled and stored by html5-chat)
  3. I have already my own website with registered users and I want to connect my chat to my existing website)

The most probable scenario in real life usage is #3.

You will be guided on how to integrate your chat with these 3 steps process.



How to add link to profile ?

profileYou can easily add a link to your user profile (when you have that feature in your existing website)  in html5chat by adding the profile parameter into the JWT connection.

For that you need to define the url link that leads to your profile and pass that into the profile parameter

ex: ‘profile’=>’https://www.mysite.com/user/myUsername’

Step 1: you create an array of your user such as:

$json = json_encode(array('username'=>'myUsername', 'profile'=>'http://www.mysite.com/user/myUsername',  'password'=>'myPassword', 'gender'=>'male', 'role'=>'user', 'avatar'=>'https://html5-chat.com/img/malecostume.svg'));

Step 2 : you encode it using the html5 JWT online service

$encoded = file_get_contents("https://html5-chat.com/protect/".base64_encode($json));

Step 3 : you inject that encoded string into your JS script

<script src="https://html5-chat.com/script/xxxxx/<?=$encoded?>"></script>

where xxxxx is your webmasterid parameter.

And that’s ALL !




html5 and datingsite integration

How to integrate html5-chat and datingscript ?


Here is a snippet to help you to integrate html5 chat and dating script.


Just edit $password and $webmasterid variables


ini_set('display_errors', 1);
require '../vendor/autoload.php';
use \Firebase\JWT\JWT;

if (!isset($_SESSION['session']['username'])) {
    header('Location:' . $config['base_url'] . 'users/login');
$password = 'YOUPASSWORD HERE';
$webmasterid = 'YOUR SCRIPT ID HERE';
$gender = isset($_SESSION['session']['data_genre']) && is_array($_SESSION['session']['data_genre']) && $_SESSION['session']['data_genre'] ? (key($_SESSION['session']['data_genre']) == 1 ? 'Homme' : 'Femme') : '';
$avatar = isset($_SESSION['session']['picture_file_path'], $_SESSION['session']['picture_file_name'], $_SESSION['session']['picture_file_ext']) && $_SESSION['session']['picture_file_path'] ? $_SESSION['session']['picture_file_path'] . '/' . $_SESSION['session']['picture_file_name'] . '.' . $_SESSION['session']['picture_file_ext'] : '';
if(!$avatar) {
    $avatar = '0.svg';

$mysuer = array('webmasterid' => $webmasterid, 'password' => $password, 'username' => $_SESSION['session']['username'], 'gender' => $gender, 'role' => 'user', 'image' => $config['base_url'] . 'uploads/' . $avatar);
$encoded = JWT::encode($mysuer, $password);
<!DOCTYPE html>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Html5 chat</title>
	 <meta name="viewport" content="width=device-width, initial-scale=1">
<div class="main">
    <div style="width:100%; height:100%;">
        <script src="https://html5-chat.com/script/<?= $webmasterid ?>/<?= $encoded ?>"></script>

How to integrate html5 chat into phpfox

How to integrate html5 chat into phpfox ?

step 1: download the phpfox module here

step 2 : open file


and edit these lines 16-17

$webmasterid = xxxx; // ENTER your script id (webmasterid) here
$password = 'my secret password'; // ENTER your HTML5 password here

and fill with your own data

step3: open your website https://yourwebsite.com/ws/index.php/html5chat

You will be loggedon with your username, gender, avatar and role


JWT: a quicker and simpler version using the HTML5 service

Here is a quicker and simpler version of integrating  HTML5 chat into an existing website than the JWT version described in that post

The bottom sample is a php sample, but you can easily adapt it to JS or ASP in needed

Step 1: you create an array of your user such as:

$json = json_encode(array('username'=>'myUsername', 'password'=>'myChatAccountPassword', 'gender'=>'male', 'role'=>'user', 
'image'=>base64_encode('https://html5-chat.com/img/malecostume.svg'), 'profile'=>'https://monsite.com/profile/myUserername'));

Step 2 : you encode it using the html5 JWT online service

$encoded = file_get_contents("https://jwt.html5-chat.com/protect/".base64_encode($json));

Step 3 : you inject that encoded string into your JS script

<script src="https://html5-chat.com/script/webmasterid/<?=$encoded?>"></script>

And that’s ALL:

role : can be admin,  user, guest,  dj, custom1, custom2, custom3

avatar is the http:// image of the expected avatar

profile: the link to the user profile (if available)

startRoom : the id of the room where to start in (roomid is an integer number)

Replace the webmasterid in script by your script id (webmasterid, a positive integer you can find in your chatadmin panel)

If you want to use JWT on your server, please refer to this post.

<?php $json = json_encode(array('username'=>'myUsername', 'password'=>'myPassword', 'gender'=>'male', 'role'=>'user', 'profile'=>'https://monsite.com/profile/myUserername', 'image'=>'https://html5-chat.com/img/malecostume.svg'));
$encoded = file_get_contents("https://jwt.html5-chat.com/protect/".base64_encode($json), 'startRoom'=>5);
<!doctype html>
<html lang="en">
    <meta charset="UTF-8">
    <title>HTML5 chat</title>

<div style="width: 1024px;height: 800px;">
    <script src="https://html5-chat.com/script/xxxxx/<?=$encoded?>"></script>


Notice: if file_get_contents is DISABLED on your hosting, you can use the curl

$curl= curl_init();
curl_setopt_array($curl, array(
      CURLOPT_URL => "https://jwt.html5-chat.com/protect/".base64_encode($json)
$encoded = curl_exec($curl);