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
});
Sorting

Initially sorting users

You can now decide how your users will appear in your user list.
They can initially be sorted by:

  • None : this is the default state: users will appear by history: the latest ones will be appended to the end of the list
  • username : users will be A-Z sorted by their username
  • webcams: those who have webcams will appear at the top of the lits
  • usernames and webcam : webcams first and then by username

You can set the initial sorting in your Chatadmin panel -> config -> Users Management

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.