delete messages

Delete individual message from chat

You can now delete messages in real time directly from the chat

  • delete all messages from an user
  • delete an individual message from an user

Go to roles and check (admin or moderator role for instance)

  • canDeleteMessage: this allow to delete all user’s messages
  • canDeleteIndividualMessage: this allow to delete any message

Also make sure that the role can delete other user’s messages
ex: a moderator should not be able to delete admin’s messages
This can be done with canUserMessagesDeleted

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

Html5 chat, SVG drawing feature

We added a new tool, called SVG drawing.
You can now easily drawn and append some Vector – SVG – pictures inside the chat. The Drawing tool has most of tools you need such as:

  • Hand writing
  • Curves drawing
  • Lines drawing
  • Shapes (rectangle, circle…)
  • Predefined shapes
  • Text
  • Transformations: scale, rotations
  • Alignements
  • Z-ordering

You need to enable the property called “can Draw” that in roles to add a new button in the chat bar.

HTML5 chat SVG editor.
HTML5 chat SVG editor.
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();
      $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'=>$user['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

Sngine : Social Network PHP script

Sngine – The Ultimate PHP Social Network Platform is a cool php script.
How to integrate html5 chat into that script ?

Edit the .htaccess file and add these lines:

# Chat
RewriteRule ^chat/?$ chat.php [L,QSA]

Create chat.php file and paste this code:

<?php
$webmasterid = xxxx; // your webmasterid html5chat account
$password = 'yyyy'; // your html5 chat password
require('bootloader.php');
if (!isset($user) || !isset($user->_data) || !isset($user->_data) || !isset($user->_data['user_id'])) {
    header('Location:/');
}
if ($user->_is_admin) {
    $role = 'admin';
} else if ($user->_is_moderator) {
    $role = 'moderator';
} else {
    $role ='user';
}
$user = $user->_data;
$json = json_encode(array(
        'id' => $user['user_id'],
        'username' => $user['user_name'],
        'password' => $password,
        'gender' => $user['user_gender'],
        'role' => $role,
        'image' => base64_encode($user['user_picture']),
        'profile' => "https://yoursite.com/{user['user_name']}"
    )
);
$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>Chat</title>
    <style>
        html, body, #chatContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<div id="chatContainer">
    <script src="https://html5-chat.com/script/<?= $webmasterid ?>/<?= $encoded ?>"></script>
</div>
</body>
</html>

Edit the first lines and put your own data

$webmasterid = xxxx;
$password = 'yyyy'; 

Then navigate to yourSite.com/chat

and you should see WHOLE page html5 chat

web radio

html5 chat and webradio (updated)

Set a global radio for your chat

You can set a global webradio player for whole site. Just go to your chatadmin / config and specify a valid https resource for your radio

or set a radio per room !

You can now specify a webradio per room. Just go your chatadmin/room and specify (or leave blank) a web radio url for each room

Audio restrictions

How to customize the radio look&feel ?

In fact the webradio is just a html <audio> element.
So it is quite limited to make some customizations. However we will add some better player soon like: https://www.mediaelementjs.com/

Where to find Radio streams ?

Google is your friend: You can easily find thousands of free radios
ex: http://dir.xiph.org/

But.. make sure they are playable inside the html5 <audio>element (mostly of time they should be .mp3 files)

How to start webcams muted ?

This is also a frequent question. You can now start webcam muted in a room. (go to your chatadmin ->rooms)

But you can also assign muted webcam per role.
(go to chatadmin->roles->advanced)

Ex: admin And DJ roles will have webcam no muted, whereas roles like guest and user will have their webcam muted

background

How to add picture to background ?

This is a common question we receive. The answer is obvious to who knows some CSS.
I recommend to read the post about customizing the design with CSS.

For people who do not have CSS knowledge

First, it is really important you learn CSS since design on web is totally related to CSS. Let add a background image for you chat step by step

  1. Prepare Picture
    You background picture should have a good size (ex: 1024x800px) and should be available somewhere on the web accessible through HTTPS
    ex:
    https://c.pxhere.com/images/d1/a4/ccfdcc5bc5f116abc867b0e9c7f7-1458005.jpg!d
  2. With your editor (notepad for instance) create a file with .css extension ex: myCss.css
  3. Edit this file and insert that code inside
#container {
background-image: url("https://c.pxhere.com/images/d1/a4/ccfdcc5bc5f116abc867b0e9c7f7-1458005.jpg!d");
background-size: cover;
}
#tabs .nav-tabs {
background-color: inherit;
}
#roomsContainer2, #usersContainer2, #friendsContainer2 {
background-color: inherit;
}

#footer {
background-color: inherit;
}

#tabs .tab-pane {
background-color: inherit;
}

#tabs {
background-color: inherit;
}
#usersContainer {
background-color: inherit!important;
}
  1. Save that file and upload it to YOUR server so it is accessible with HTTPS
    ex: https://www.mysite.com/myCss.css
  2. Go to you chatadmin, go to config and then choose design/layout tab and insert that link ( https://www.mysite.com/myCss.css) in the Link to external CSS to customize your chat  field
inside config

6. and that’s all: the background image should be inside your chat

This is also the procedure to change the design of any element of your chat. With CSS you can customize EVERYTHING you want, including the layout.

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 !
tab mode

New Tab mode

The tab mode in html5 chat has now two new features. (the tab mode is one of the display mode available in chat). It displays webcams on top of the screen. These webcams are sortable

Splitter to resize webcams

You can use the splitter to resize the webcams.

Resizable webcams

Pop in and pop out webcams

You can pop out the windows from the tab and make them independent draggable and resizable windows and pop them back to the stack.

pop out and pop back the windows

To enable the tab mode, just go to your chatadmin and set the display mode as “tab