Mobile

Html5 chat: better mobile support

For a long time, HTML5 “mobile compatible” was just a marketing directive because we did not focus enough on the mobile version and we just made mobile and responsive tests without really focusing on real user experience. That was a mistake.

It was of course compatible with mobile, but interface was not really user friendly. We believe now that mobile is future of Internet and we decided to improve the user experience with mobile devices:

  • better layout
  • keyboard auto hides after sending message
  • H264 for ios and android so both iphones and Androids are able to send streams and watch streams
  • speed optimisation
  • Many CSS fixing for readability (change size, paddings, margins)
  • Synch uploading of photos to avoid bugs on Iphone while uploading

And much more…

 

Chat HTML5 is FLEX

Why using FLEX ?

We changed the CSS layout to FLEX instead of using old layout techniques like floating, margins, paddings.

Q) What does it change for me ?

A) Nothing.


Q) So what’s the point ?

A) Using Flex layout allows us to make the layout .. more flexible


Q) I still don’t understand what’s the point !

A) It will allow many different layout like for conferences, webinars.
Ex: you want the user’s list to be on the LEFT side,  Just add 1 line of CSS  and that’s all

#chatContainer {
   order:2
}

 

if you don’t know how to change the CSS of your layout, please refer to that post

 

rest

REST API for HTML5 chat (updated)

New HTML5 features REST API available (updated Nov 2020)

These features are only for SUBSCRIBED ussers.

-> Log in into your chatadmin / developers panel to get your REST API URL.

We are adding new REST interfaces that allow users to get some informations about their chat.

The pattern is:

https://YOUR_REST_API_LINK:2083/{action}/{webmasterid}/{token}

For now we added these REST APIs:


getNumberUsers: allows to get the number of users in all rooms in chat!

This example is for : webmasterid = 1 token = 999

https://YOUR_REST_API_LINK:2083/getNumberUsers/1/999


getUsers : get all users in all rooms in chat

This example is for : webmasterid = 1 token = 999

https://YOUR_REST_API_LINK:2083/getUsers/1/999


getPerformers : get all performers in a namespace webmasterid (performers = users whose role = ‘performer’)

This example is for : webmasterid = 1 token = 999

https://YOUR_REST_API_LINK:2083/getPerformers/1/999



getOnlinePerformers : get all online performers in a namespace webmasterid (performers = users whose role = ‘performer’)

This example is for : webmasterid = 1 token = 999

https://YOUR_REST_API_LINK:2083/getOnlinePerformers /1/999


getUserStatus: get the status of userid in a namespace webmasterid  (returns: “online” or “offline”  or “busy”)

This example is for : webmasterid = 1 userid= 300

https://YOUR_REST_API_LINK:2083/getUserStatus/1/300


getUsersInRoom: get all users in a room roomid of namespace webmasterid

This example is for : webmasterid = 1 roomid = 50

https://YOUR_REST_API_LINK:2083/getUsersInRoom/1/50/token


getNumberUsersInRoom: return the number of users of a room roomid in namespace webmasterid

This example is for : webmasterid = 1 roomid = 50, token=999

https://YOUR_REST_API_LINK:2083/getNumberUsersInRoom/1/50/999


How to use that in php for instance: (we suppose your YOUR_REST_API_LINK is https://chat.html5-chat.com which can be DIFFERENT on your website: connect to chatadmin -> developers  to get yours)

$numberOfUsers = file_get_contents("https://chat.html5-chat.com:2083/getNumberUsers/1/50/999");

getRooms: return your chat rooms.

This example is for : webmasterid = 1, token=999

https://YOUR_REST_API_LINK:2083/getRooms/1/999


How to use that in php for instance: (we suppose your YOUR_REST_API_LINK is https://chat.html5-chat.com which can be DIFFERENT on your website: connect to chatadmin -> developers  to get yours)

$rooms = json_decode(file_get_contents("https://chat.html5-chat.com:2083/getRooms/1/999"));
print_r($rooms)
award

Promote users in real time and assign roles per room

Promote users in real time and assign roles per room

you can assign roles per user AND per room and you can even do that in real time and be permanent or temporary.

roles-usersWhat you need to know

  1. be sure guest users are disabled. (You cannot assign to guest users since they are temporary users !)
  2. Be sure in your role, you configure the 2 fields:
    “canPromote”: this fields gives the opportunity to that role to assign roles in real time (ex: admin and moderator can promote by default. Other roles should not be able to promote)
    “canBePromoted”: only these roles are eligible to be promoted (ex: admin user should not be promoted : it has already the highest possible rank !)
  3. You can now set a role to a specific user :
    – you can do that within your chatadmin , in users panel
    – You can do that in real time: click on user : you will get the contextual menu. Choose “Promote user” menu item.
    you will get the modal Box that allows to choose the user to be promoted and the list of available roles.promoteUser2promoteUser
ladiesOnly

Ladies welcome

Allow specific room entrance by gender

ladiesHTml5 chat new features allows now to restrict the entrance to a specific room by gender.

Scenario: you want to restrict a room “ladies only”. You can do that thanks to the rooms panel in your chatadmin.

Select the gender (or leave to no restrictions) :

only these genders will have the permission to access that particular room.

 

 

css3

Customize your design

How to customize HTML5 chat design ?

Many users do write to us asking if we can send them the CSS file so they can modify it.

An answer is NO: the CSS file is Global and stored on our servers. So people think they are unable to change the design of the chat, which of course is untrue.

The CSS allows to override the existing CSS. So instead of change the CSS, you need to ADD your own to OVERRIDE the exiting.
And here is how to do that:

  1. As usual go to your chatadmin and choose the config  -> design tab:
  2. You will find the property : “Link to external CSS to customize your chat”
  3. you will insert the LINK to your OWN css : It must be http, like
    http://myownsite.com/myCustomizedCss.css
  4.  in your myCustomizedCss you will override the existing CSS
    If for instance you want the send Button to be red, you will create something like

 

#send-msg-btn {
background-color: red;
}

That will over ride the existing CSS for the #send-msg-btn

 

and as result, you will get a red send button.

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)

 

jail

New feature: jail (or mute) an user

New feature: Jail an user

In roles, you can now set up who can jail an user.
Jailing an user is making him mute: he will be able to enter the chat, but will not be able to interact on the site: he will be simply a spectator of the chat.

You can jail an user for N minutes. You can also choose to warn an user when he’s jailed.

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
create rooms

dynamic room creation

New feature : dynamic room creation

dynamicRooms

You will find that features in roles tab. You can indicate per role, how many dynamic rooms an user can create (if non, leave 0)

You can now define if a particular role can create dynamic rooms in real time.

These rooms are temporary rooms : they are created meanwhile the creator of the room (the owner of the room) is on the chat.

If the creator of the room leaves the chat, the room is deleted in real time and all users are kicked from the chat.

A temporary room can be password protected. The owner of the room, can invite other members to join his room (direct access without having to provide the password)

The admin role can however get the rights to access any room, even password protected : there are full of new ideas with these exciting new feature. You must define in roles, what user has rights to create these dynamic rooms.

dynamic room