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

avatars

Avatar libraries

You can now choose between 5 libraries for guest users avatars: when a guest user connects, he’s automatically assigned an avatar. However, it is not possible to choose between 6 different avatar libraries

Default avatar

This is an SVG based library. This library differentiates males and females

Default library

Pixel avatar

This is an SVG based library. This library differentiates males and females

pixel library

Avataars

SVG cool library: no males/females

Avataars library

Griddly avatar

SVG strange library: no males/females

Griddly lib

Botts library

SVG robot like images based library

Botts library

Initials library

SVG library that takes your initial username (google doc like)

Initials lib

You can choose which one of these libraries you want to use inside
/chatadmin/config/ under users management tab

layout

Left layout for chat

We updated our layout system using flex for display elements. This allows to easily change the layout of the chat.

The first layout change you can do is to align the user list on the left. You can swap from left/right layout from you chatadmin console -> config-> design and select between “left” and “right” from the “Display users’ list on the left” select box.

A sample with LEFT layout

Html5 chat and Joomla Full screen (update)

To run the Joomla plugin in full screen mode, you need to edit the plugin located in

/plugins/content/html5chat/html5chat.php

and change the content of $script by

    $script = "<style>
    #iframeChat {
        height: 100%;
        width: 100%;
        border: none;
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 9999;
    }
    </style>";

    $script.= "<script src='https://html5-chat.com/joomla/$webmasterid/$encoded'></script>";
    $script.="<script>
        jQuery('#iframeChat').detach().appendTo('body');
    </script>";

You chat should then appear in FULL screen above all elements.

html5 chat and weebly

You can easily add html5 webcam chat to weebly.
(weebly is a free online website creation tool, wix like)

In weebly, it is extremely simple to integrate the chat:

  1. Create a new page (called “chat” for instance)
  2. Insert a code integration element inside the page
Weebly element to be inserted

insert that :

<div style="width:100%;height:640px">YOUR_HTML5CHAT_SCRIPT</div>

And that’s all: you will have a chat of 100% width and 640px height inside your chat page !

here is the <div> container and the html5 script