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>

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 !
ad

How to insert ad into chat ?

There are many ways to insert ads into chat. This is especially easy when you know some JS.

Remember: you can your OWN javascript into the chat.

If you want to insert ads inside the text chat, then you should use the news managements.

If you want some visual ad, there is a <div id=”ad”></div> present on the chat (on top right) when you can insert your ads. The best way to do that is also to insert your OWN javascript into the chat and with some code display the ads.

Here is a sample of how to randomly display 3 ads every 30 seconds:

$(document).ready(function () {
// list of ads !
let ads = [
"<a href='https://www.yoursite.com' target='_blank'><img src='https://www.yoursite.com/img/ad1.png'></a>",
"<a href='https://www.yoursite.com' target='_blank'><img src='https://www.yoursite.com/img/ad2.png'></a>",
"<a href='https://www.yoursite.com' target='_blank'><img src='https://www.yoursite.com/img/ad3.png'></a>",
];
setTimeout(function() {
let ad = randomAd = ads[Math.floor(Math.random() * ads.length)]; // pick a random ad
$('#ad').empty().append(ad);

} , 30 *1000); // loop every 30 seconds
});
hosting

How to host your chat on YOUR server ?

We have 2 formulas to allow you to host your chat on YOUR servers

Purchase the code source and we install it to your server.


This formula is expensive but you are totally independent. You can re-install it if needed, modify the source code. This is adequate for high trafic chat websites.

We now have a new intermediate formula

The chat remains on our server but you host media streams and sockets.
We can install the media server part (streaming) and the sockets (chat text) on your server.

What are the advantages of hosting that on your server ?

  • You have 100% bandwidth of your server
  • You have 100% CPU power of your server
  • you have 100% CPU control of your server
  • You are independent

Ready to go ?

  • You still got updates automatically since the chat is hosted on our servers except the webcam and the sockets !
  • You still have to pay subscription since the chat script part is still hosted on our servers
  • Generally it takes 24-48 hours so we set it up on your server
  • You need a dedicated server with ROOT access
  • We recommend 4 Giga RAM, 4 cores and root access. It must be LINUX. We recommend DEBIAN 9 distribution (but centos/ubuntu… are ok)
  • We need a ROOT access to your server
  • Of course you can still use your server for other tasks like hosting your sites
  • Price is 199€. It is JUST ONE time price. No recurrent payment
socialENgine

SocialEngine chat integration

Social engine is a php commercial dating script.

UPDATE

Download html5-chat plugin from this link

Edit application\modules\Html5Chat\controllers\indexController.php
And insert that script

<?php

class Html5Chat_IndexController extends Core_Controller_Action_Standard
{
  public function indexAction()
  {
      $webmasterid = 'xxxxxx'; // change that
      $password = 'yyyyyy'; // change that

      
      $viewer = Engine_Api::_()->user()->getViewer();
      $userid = $viewer->getIdentity();
      $username = $viewer->getTitle();
      $fields = Engine_Api::_()->fields()->getFieldsValuesByAlias($viewer);
      $user = Engine_Api::_()->getItem('user', $userid);
      $avatar = $user->getPhotoUrl('thumb.profile');
      $profileLink = $viewer->getHref();
      $gender = 'male';
      $role = $user_level = Engine_Api::_()->user()->getViewer()->level_id;
      $roleLabel = Engine_Api::_()->getItem('authorization_level', $role)->getTitle();
      switch($fields['gender']) {
          case 1:
              $gender = 'male';
              break;
          case 2:
              $gender = 'female';
              break;
          case 3:
              $gender = 'couple';
              break;
      }
      switch($roleLabel) {
          case 'Superadmins':
              $role = 'admin';
              break;
          case 'Admins':
              $role = 'admin';
              break;
          case 'Moderators':
              $role = 'moderator';
              break;
          case 'Default Level':
              $role = 'guest';
              break;
          case 'Public':
              $role = 'guest';
              break;
          case 'Monthly Member':
              $role = 'user';
              break;
          case '6 Month Member':
              $role = 'user';
              break;
          case 'Yearly Member':
              $role = 'user';
              break;
          case '15 Day Free Membership Trial':
              $role = 'guest';
              break;
          default:
              $role = 'user';
              break;
      }

      $json = json_encode(array(
              'id'=>$userid,
              'username'=>$username,
              'password'=>$password,
              'gender'=>$gender,
              'role'=>$role,
              'image'=>'//'.$_SERVER['HTTP_HOST'].$avatar,
              'profile'=>'//'.$_SERVER['HTTP_HOST'].$profileLink
          )
      );
      $encoded = file_get_contents("https://jwt.html5-chat.com/protect/".base64_encode($json));
      $this->view->script = "https://html5-chat.com/script/$webmasterid/$encoded";
      $this->_helper->layout->disableLayout();
  }
}

Upload the files to your site with FTP Both folders: (modules and packages)
Go to your social Engine admin panel and go to menu
manage->Packages & plugins and enable html5-chat plugin

Congratulations:
Your chat is not available at url : https://yoursite.com/html5-chat


OLD (BAD) WAY

We will add the link chat into /groups/chat so your chat link will be
https://yoursite.com/groups/chat

edit /application/modules/Group/controllers/IndexController.php
And add this function

public function chatAction() {
    $webmasterid = xxxx;
    $password = 'yyyy';
    $viewer = Engine_Api::_()->user()->getViewer();
    $userid = $viewer->getIdentity();
    $fields = Engine_Api::_()->fields()->getFieldsValuesByAlias($viewer);
    $user = Engine_Api::_()->getItem('user', $userid);
    $avatar = $user->getPhotoUrl('thumb.profile');
    $profileLink = $viewer->getHref();
    $gender = 'male';
    $role = $user_level = Engine_Api::_()->user()->getViewer()->level_id;
    $roleLabel = Engine_Api::_()->getItem('authorization_level', $role)->getTitle();
    switch($fields['gender']) {
        case 1:
            $gender = 'male';
            break;
        case 2:
            $gender = 'female';
            break;
        case 3:
            $gender = 'couple';
            break;
    }
    switch($roleLabel) {
        case 'Superadmins':
            $role = 'admin';
            break;
        case 'Admins':
            $role = 'admin';
            break;
        case 'Moderators':
            $role = 'moderator';
            break;
        case 'Default Level':
            $role = 'guest';
            break;
        case 'Public':
            $role = 'guest';
            break;
        case 'Monthly Member':
            $role = 'user';
            break;
        case '6 Month Member':
            $role = 'user';
            break;
        case 'Yearly Member':
            $role = 'user';
            break;
        case '15 Day Free Membership Trial':
            $role = 'guest';
            break;
        default:
            $role = 'user';
            break;
    }

    $json = json_encode(array(
            'id'=>$userid,
            'username'=>$fields['first_name'],
            'password'=>$password,
            'gender'=>$gender,
            'role'=>$role,
            'image'=>'//'.$_SERVER['HTTP_HOST'].$avatar,
            'profile'=>'//'.$_SERVER['HTTP_HOST'].$profileLink
        )
    );
    $encoded = file_get_contents("https://jwt.html5-chat.com/protect/".base64_encode($json));
    $this->view->script = "https://html5-chat.com/script/$webmasterid/$encoded";
    $this->_helper->layout->disableLayout();
}

replace xxxx by your webmasterid and yyyy with your html5-chat password

You can get values profil type from table engine4_authorization_levels

create chat.tpl in application/modules/Group/views/scripts/index/

<!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>Chat</title>
</head>
<body>
<script src="<?=$this->script?>"></script>
</body>
</html>

and you will get your own chat on /groups/chat

css

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.
Ex:
https://www.mywebsite.com/myCss.css

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 !
start

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)

https://html5-chat.com/chat/54/?startRoom=1620

 

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

 

so for room : 1620, you just need to add

'startRoom'=>1620

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)

 

phpfox

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

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.