Type of of chat in Mobile

We have added a new feature to HTML5 chat that allows to change the type of of chat for mobile: if you use draggable webcam or draggable windows on desktop version, you will notice that for mobile, this is not really user friendly : draggable cams take a lot of space and prevents you to open more than 1 webcam at once.

We have added 1 new tab that regroups 3 different properties for mobile:

My webcam is draggable : should be set to false: that way the cam is small and stays docked into the users list

Type of chat : we recommend wall or vertical wall or zoom: that way cams does not take too much space

Private text opens in new windows: we recommend to set to False : that way private chats will open in tabs and you will have more space

mobile css
New mobile tab
youtubeSEarch

Using youtube Search API

You can now enable Youtube Search API to add youtube searching.

First you need to get your personal youtube API key from : https://developers.google.com/youtube/v3/getting-started

Once you got that key (ex: AIzaSyBsdbcJ1YhvG64t9n541CqOHcXiXXXXXX), you can update your chat config and set that key.

Now, anytime you press the youtube button, you will be prompted to enter the search keyword.

Input search modal
Youtube search
Results of the youtube search.

Intergration with youdate.website

Youdate.website is a small CRM for dating written with Yii framework

Here is a quick way to integrate html5-chat with youdate





<?php
require(__DIR__ . '/application/bootstrap.php');
require(__DIR__ . '/application/vendor/autoload.php');
require(__DIR__ . '/application/environment.php');
require(__DIR__ . '/application/vendor/yiisoft/yii2/Yii.php');
require(__DIR__ . '/application/controllers/PhotoController.php');
$config = require(__DIR__ . '/application/config/web.php');
$application = new yii\web\Application($config);
$user = Yii::$app->user;
if (!$user) {
   exit();
}
$username = Yii::$app->user->identity->profile->name;
$photo_id = Yii::$app->user->identity->profile->photo_id;
$sex = Yii::$app->user->identity->profile->sex;
$role = Yii::$app->user->identity->profile->status;
$photo = (new \yii\db\Query())
->select(['id', 'source'])
->from('photo')
->where(['id' => $photo_id])
->one();
$image = ($photo) ? "http://yoursitehere.com/content/photos/{$photo['source']}" : '';
$webmasterid = XXXXXXX;
$gender = 'male';
switch ($sex) {
   case 2:
      $gender = 'female';
      break;
   case 11:
      $gender = 'couple';
      break;
   case 12:
      $gender = 'trans';
      break;
}
$myuser = [
   'username' => $username,
   'gender' => $gender,
   'role' => 'user',
   'image' => base64_encode($image),
   'password' => 'YourHTML5ChatPassword',
];
$json = json_encode($myuser);
$encoded = file_get_contents("https://jwt.html5-chat.com/protect/" . base64_encode($json));
?>
<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Webcam chat</title>
   <style>
      body, html, #chatContainer {
         width: 100%;
         height: 100%;
      }
   </style>
</head>
<body>
<div id="chatContainer">
   <script src="https://html5-chat.com/script/<?= $webmasterid ?>/<?= $encoded ?>"></script>
</div>
</body>
</html>
background image

Custom backgrounds

We have added a new feature: custom backgrounds.

You can now add your OWN backgrounds images so your chatter can change themselves the look&feel of your chat.

To add that your own backgrounds images: go to chatadmin panel.

You will find the new background button block. You just have to upload your own backgrounds there.

Chatters will be able to switch between these uploaded backgrounds in the chat (chat settings button).

background photo

html5 with Drupal7

This is very similar to Drupa8/9 plugin

you can download it from this link

Create a new field called “gender”

go to : configuration->Account setting, Managed field

Add new field called “gender” (list text)

and put them values : male female

Install the plugin

Go to structures/blocks

and enable Content / html5chat

then edit the chat parameters with your own html5 chat account data

Restrict that block to chat page

Create a new page

and set the URL alias as chat

Congratulations: you just created your html5-chat inside yoursite.com/chat page

Drupal8/9 and html5-chat

Here is a quick guide on how to install html5-chat with Drupal8/9

Create a gender user field in configuration / Account Settings


Add a new field

called gender

Add values like: male, female, couple

Download and install the plugin for Drupal8/9

install plugin for drupal

Go to structure – > block layout

structure / block layout

Go to content, click on Place bloc, search for htmlchat and click place block in the modal window

step3

fill the data:

  • webmasterid
  • token
  • password
  • height

You will find ALL these data from your chatadmin panel


Go to the Pages vertical tab and enter /chat

that means that the page named “chat” will contain your html5-chat

Go to content-> add content

Add new content

and choose “Basic page”

Enter a title for the basic page and enter /chat in URL ALIAS

And that’s ALL. Save all (clear cache from Configuration->performance) and go to yoursite.com/chat and your html5-chat chat will appear there !

All done ! congratuilations !

How to add html5-chat into Vbulletin ?

Vbulletin is a very popular forum system for your website.
Here are the steps to integrate Html5-cjat into vbulletin

<?php
session_start();
require_once('./global.php'); 
$user = array(
   'id'      =>$vbulletin->userinfo['userid'],
   'username' =>$vbulletin->userinfo['username'],
   'gender'   =>strtolower($vbulletin->userinfo['field5']),
   'country'  =>$vbulletin->userinfo['field2'],
   'birthday' =>$vbulletin->userinfo['birthday'],
   'role'    =>$vbulletin->userinfo['usergroupid'],
);
//die($user['role']);
if ($vbulletin->userinfo['avatarrevision']>0) {
   $user['image'] = "https://exbb.redclouds.com/customavatars/avatar".$vbulletin->userinfo['userid']."_".$vbulletin->userinfo['avatarrevision'].".gif";
}

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

you inject that encoded string into your JS script

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

And that’s ALL. You can read more about full JWT integration:
https://html5-chat.com/blog/jwt-a-quicker-and-simpler-version-using-the-html5-service/