easy

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.

 

theme

New material design themes

Blue and red material design themes

themesHtml5 has now 2 new themes based on material design

Blue and red (that complete the dark and the default light theme)

You can switch between themes in chatadmin panel.

More themes are coming. If you need to customize CSS, you can inject your own CSS and over write the existing theme in

“Link to external CSS to customize your chat ” in your /chatadmin config.

 

 

turn

HTML5 chat goes now TURN for better compatibility

HTML5 now embeds a TURN server

We just added TURN server to out webrtc version.

The goal is to make the traversal of NAT easier for systems behind firewalls and routers (allow port 3478)

The other interesting feature is to make the chat more compatible on IOS and Safari: Safari rules for webrtc are:

“You cannot play webrtc if you don’t publish yourself”

which is very blocking for conferences sessions or just to watch videos without having to allow access to its own webcam.

Thanks to Turn server, we can now bypass that Safari and IOS rule.

 

profile

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 !

 

 

roles-users

New feature: ROLES

HTML5 chat and roles

We recently added roles features so users can define with precision what features and options will be available to each user.

This features gives more flexibility to user rights. For now he have 5 roles:

guest

This should be used as visitor only with no rights at all. Just to discover the chat

user

Normal user with limited rights

dj

Same as user: should be able to lunch some youtube videos or do a broadcast to other users

moderator

Should have all rights, except permanant ban rights

admin

Have All possible rights

custom1, custom2, custom3

These are custom roles that you can use as you want

 

Each role has his own chat rights and features

You are of course free to assign right to each role and assign a role to an user:

Role Role
Can kick
 yes/no
Can ban
  yes/no
Is user visible ?
  yes/no
Can Broadcast
  yes/no
Can Stream
  yes/no
Can watch
  yes/no
Can Send Text
  yes/no
Can send private text
  yes/no
Can post youtube
  yes/no
Can open any webcam
  yes/no
Can whisper
  yes/no
Can quick message
  yes/no
Can ask for private chat
  yes/no
datingscript

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

 

<?php
ini_set('display_errors', 1);
error_reporting(E_ALL);
require '../vendor/autoload.php';
include('../application/config.php');
use \Firebase\JWT\JWT;
session_start();

if (!isset($_SESSION['session']['username'])) {
    header('Location:' . $config['base_url'] . 'users/login');
    exit;
}
$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>
<html>
<head>
	<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">
</head>
<body>
<div class="main">
    <div style="width:100%; height:100%;">
        <script src="https://html5-chat.com/script/<?= $webmasterid ?>/<?= $encoded ?>"></script>
    </div>
</div>	
</body>
</html>
phpfox

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

\PF.Base\module\html5chat\template\default\controller\index.html.php

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