{"id":784,"date":"2019-11-13T10:23:47","date_gmt":"2019-11-13T10:23:47","guid":{"rendered":"https:\/\/html5-chat.com\/blog\/?p=784"},"modified":"2019-11-23T12:33:29","modified_gmt":"2019-11-23T12:33:29","slug":"messenger-mode","status":"publish","type":"post","link":"https:\/\/html5-chat.com\/blog\/messenger-mode\/","title":{"rendered":"Messenger mode"},"content":{"rendered":"\n<p>Html5 chat has now a new mode : the &#8220;messenger&#8221; mode<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is the messenger mode chat like ?<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"937\" height=\"744\" src=\"https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2019\/11\/MessengerScreeshot.jpg\" alt=\"\" class=\"wp-image-793\" srcset=\"https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2019\/11\/MessengerScreeshot.jpg 937w, https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2019\/11\/MessengerScreeshot-300x238.jpg 300w, https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2019\/11\/MessengerScreeshot-768x610.jpg 768w\" sizes=\"auto, (max-width: 937px) 100vw, 937px\" \/><\/figure>\n\n\n\n<p>The messenger mode like has these features: <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>it embeds inside an existing website<\/li><li>the page is not exclusive to the chat. In fact chats inserts inside the page<\/li><li>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<\/li><li>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<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to set up the messenger mode on my site ?<\/h2>\n\n\n\n<p>Go to chat admin and choose &#8220;Messenger mode&#8221;<\/p>\n\n\n\n<p>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 <strong>footer.php<\/strong><\/p>\n\n\n\n<p> <code>&lt;script src='https:\/\/html5-chat.com\/script\/<strong>webmasterid<\/strong>\/<strong>token<\/strong>'&gt;&lt;\/script&gt;<\/code> <\/p>\n\n\n\n<p>Replace <strong>webmasterid<\/strong> and <strong>token<\/strong> by your webmasterid and your token. You can find that inside your <a href=\"\/chatadmin\">chatadmin<\/a> panel<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to pass user parameters to the chat ?<\/h2>\n\n\n\n<p>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.<br>If you want to specify an username, id and avatar, you need to pass some extra parameters to the script. Use <strong>JWT <\/strong>to encode these parameters and pass them to the chat  as shown in this sample:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;?php\n$json = <em>json_encode<\/em>(array(\n        'id'        =>xxx,\n        'username'  =>'yourUsername',\n        'password'  =>'password of your html5-chat account',\n        'avatar'    =>'https:\/\/html5-chat.com\/img\/malecostume.svg'\n));\n$encoded = <em>file_get_contents<\/em>(\"https:\/\/jwt.html5-chat.com\/protect\/\".<em>base64_encode<\/em>($json));\n?>\n &lt;script src='https:\/\/html5-chat.com\/script\/<strong>webmasterid<\/strong>\/$encoded '>&lt;\/script> <\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>xxx <\/strong>is an unique id user<\/li><li><strong>username <\/strong>: is an unique username for user<\/li><li><strong>password<\/strong>: is your html5 chat password account<\/li><li><strong>avatar <\/strong>is the url of the user avatar<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" href=\"https:\/\/html5-chat.com\/messengerDemo\">Here is the demo of the messenger mode<\/a><\/div>\n\n\n\n<p>You should test  the demo, with  2 browsers.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The messenger mode is now available on html5 chat.<\/p>\n","protected":false},"author":1,"featured_media":787,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[151,152],"class_list":["post-784","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-features","tag-messenger","tag-mode"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/posts\/784","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/comments?post=784"}],"version-history":[{"count":19,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/posts\/784\/revisions"}],"predecessor-version":[{"id":810,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/posts\/784\/revisions\/810"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/media\/787"}],"wp:attachment":[{"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/media?parent=784"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/categories?post=784"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/tags?post=784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}