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
avatars

Avatar upload

It is now possible to upload avatar for guest roles.

This is a new feature: guests are not authenticated users: it was impossible to associate an avatar to a no permanent user whose id changes all the time.

Thanks to fingerprinting, we generate now an unique permanent id for guest and avatars are correctly associated to that id.

You can test that new feature on your own chat

Messenger mode

Html5 chat has now a new mode : the “messenger” mode

What is the messenger mode chat like ?

The messenger mode like has these features:

  • it embeds inside an existing website
  • the page is not exclusive to the chat. In fact chats inserts inside the page
  • it is one to one chat only, with exclusive video/audio calls when you can choose users between list of connected users and users who already sent you messages: it works with online and offline users
  • when user or you change the page, all chats are restores. So it is suitable with any websites, including websites that are not Single Application Pages

How to set up the messenger mode on my site ?

Go to chat admin and choose “Messenger mode”

Make sure you add the script to ANY page where you want the script to be present. A good technique is to use a common page to all you site like inside footer.php

<script src='https://html5-chat.com/script/webmasterid/token'></script>

Replace webmasterid and token by your webmasterid and your token. You can find that inside your chatadmin panel

How to pass user parameters to the chat ?

If you just use the script like, you user is not identified by the chat: he will need to input his username and will be assigned a random id and random avatar.
If you want to specify an username, id and avatar, you need to pass some extra parameters to the script. Use JWT to encode these parameters and pass them to the chat as shown in this sample:

<?php
$json = json_encode(array(
        'id'        =>xxx,
        'username'  =>'yourUsername',
        'password'  =>'password of your html5-chat account',
        'avatar'    =>'https://html5-chat.com/img/malecostume.svg'
));
$encoded = file_get_contents("https://jwt.html5-chat.com/protect/".base64_encode($json));
?>
 <script src='https://html5-chat.com/script/webmasterid/$encoded '></script> 
  • xxx is an unique id user
  • username : is an unique username for user
  • password: is your html5 chat password account
  • avatar is the url of the user avatar

You should test the demo, with 2 browsers.

HTML5 and Payperview

A new exciting feature: Pay per view mode with HTML5 chat is now available for paid (registered users)

What is “Pay Per View” ?

Pay per view is a special kind of chat where a performer displays his webcam to watchers. This is 1 to many chat : indeed a conference mode chat.

Public and private chat

A watcher can request a private chat to performer. If the performer accepts, other users will be ejected from the room and private chat between the performer and requester starts.
During the private chat, credits from user are decremented and private session data records duration of the private chat. This is why it is called : pay per view: as long as user stays in private chat, he pays (credits) for the show.

Pay per view video chat : what for ?

This pay per view mode is suitable for:

  • E-learning sessions, teachers
  • Erotic pay per view shows (livejasmin like)
  • Clairvoyance site, astrologists
  • Consultants, lawyers
  • Any kind of chat when you need user to pay to watch private cam

How does it work ?

A webmaster can have many performers. When user arrives to the performers wall, he will see performers photo avatars and status: online, offline or busy (already in private chat). He clicks on the performer’s picture and enter the performer’s avatar. If he has credits, he can request a private chat and private chat will start as soon as performer accepts it.

2 different pay per view modes

We have 2 different pay per view mode integration:

  • Embed mode: no coding knowledge is required at all. You just defines prices, performers, insert your paypal email to receive payments and you are ready to go: this is a 5 minutes process.
    This is suitable for people with no coding knowledge at all. All data, records, reports, and performers data are stored on html5 chat servers.
    Here are details about how to setup the payperview in embed mode
  • External mode: you need some coding knowledge such as calling REST API, JSON encoding. This is suitable when you want all payment process and data to be stored on your own servers. This mode is suitable for people who owns already a website and have serious coding knowledge. This is a 2 – 4 hours process.
    Here are details about how to setup the payperview in external mode.
    Here are details about how to setup the payperview in external mode

If you need the external mode but do not have enough coding knowledge, we can do the job for extra cost. Please contact us by skype: proxymis