{"id":1136,"date":"2020-12-27T12:47:55","date_gmt":"2020-12-27T12:47:55","guid":{"rendered":"https:\/\/html5-chat.com\/blog\/?p=1136"},"modified":"2020-12-27T18:41:24","modified_gmt":"2020-12-27T18:41:24","slug":"drupal8-and-html5-chat","status":"publish","type":"post","link":"https:\/\/html5-chat.com\/blog\/drupal8-and-html5-chat\/","title":{"rendered":"Drupal8\/9 and html5-chat"},"content":{"rendered":"\n<p>Here is a quick guide on how to install html5-chat with Drupal8\/9<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Create a <strong>gender<\/strong> user field in configuration \/ Account Settings<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"730\" height=\"396\" src=\"https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/00.jpg\" alt=\"\" class=\"wp-image-1156\" srcset=\"https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/00.jpg 730w, https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/00-300x163.jpg 300w\" sizes=\"auto, (max-width: 730px) 100vw, 730px\" \/><figcaption><br><\/figcaption><\/figure>\n\n\n\n<p>Add a new field<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"556\" height=\"401\" src=\"https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/01.jpg\" alt=\"\" class=\"wp-image-1157\" srcset=\"https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/01.jpg 556w, https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/01-300x216.jpg 300w\" sizes=\"auto, (max-width: 556px) 100vw, 556px\" \/><\/figure>\n\n\n\n<p>called <strong>gender<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"390\" height=\"280\" src=\"https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/03.jpg\" alt=\"\" class=\"wp-image-1158\" srcset=\"https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/03.jpg 390w, https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/03-300x215.jpg 300w\" sizes=\"auto, (max-width: 390px) 100vw, 390px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"238\" height=\"177\" src=\"https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/04.jpg\" alt=\"\" class=\"wp-image-1159\"\/><figcaption>Add values like: male, female, couple<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/www.html5-chat.com\/drupal8\/html5chat.zip\">Download <\/a>and install the plugin for <strong>Drupal8\/9<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"994\" height=\"436\" src=\"https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/step1.jpg\" alt=\"\" class=\"wp-image-1140\" srcset=\"https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/step1.jpg 994w, https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/step1-300x132.jpg 300w, https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/step1-768x337.jpg 768w\" sizes=\"auto, (max-width: 994px) 100vw, 994px\" \/><figcaption>install plugin for drupal<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Go to structure &#8211; > block layout<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"665\" height=\"254\" src=\"https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/step2.jpg\" alt=\"\" class=\"wp-image-1142\" srcset=\"https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/step2.jpg 665w, https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/step2-300x115.jpg 300w\" sizes=\"auto, (max-width: 665px) 100vw, 665px\" \/><figcaption>structure \/ block layout<\/figcaption><\/figure>\n\n\n\n<p>Go to content, click on Place bloc, search for htmlchat and click place block in the modal window<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"411\" src=\"https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/step3-1024x411.jpg\" alt=\"\" class=\"wp-image-1144\" srcset=\"https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/step3-1024x411.jpg 1024w, https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/step3-300x120.jpg 300w, https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/step3-768x308.jpg 768w, https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/step3.jpg 1309w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>step3<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">fill the data: <\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>webmasterid<\/li><li>token<\/li><li>password<\/li><li>height<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">You will find ALL these data from your <a rel=\"noreferrer noopener\" href=\"\/chatadmin\" target=\"_blank\">chatadmin <\/a>panel <br><\/h3>\n\n\n\n<p><br>Go to the Pages vertical tab and enter \/chat<\/p>\n\n\n\n<p>that means that the page named &#8220;chat&#8221; will contain your html5-chat<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"692\" height=\"764\" src=\"https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/step5.jpg\" alt=\"\" class=\"wp-image-1145\" srcset=\"https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/step5.jpg 692w, https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/step5-272x300.jpg 272w\" sizes=\"auto, (max-width: 692px) 100vw, 692px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Go to content-> add content<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"348\" height=\"282\" src=\"https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/step6.jpg\" alt=\"\" class=\"wp-image-1147\" srcset=\"https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/step6.jpg 348w, https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/step6-300x243.jpg 300w\" sizes=\"auto, (max-width: 348px) 100vw, 348px\" \/><figcaption>Add new content<\/figcaption><\/figure>\n\n\n\n<p>and choose <strong>&#8220;Basic page&#8221;<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Enter a title for the basic page and enter <strong>\/chat<\/strong> in  URL ALIAS<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"939\" height=\"552\" src=\"https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/step7.jpg\" alt=\"\" class=\"wp-image-1148\" srcset=\"https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/step7.jpg 939w, https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/step7-300x176.jpg 300w, https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/step7-768x451.jpg 768w\" sizes=\"auto, (max-width: 939px) 100vw, 939px\" \/><\/figure>\n\n\n\n<p>And that&#8217;s ALL. Save all (clear cache from Configuration-&gt;performance) and go to yoursite.com\/chat and your html5-chat chat will appear there !<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"469\" src=\"https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/step8-1024x469.jpg\" alt=\"\" class=\"wp-image-1149\" srcset=\"https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/step8-1024x469.jpg 1024w, https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/step8-300x137.jpg 300w, https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/step8-768x352.jpg 768w, https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2020\/12\/step8.jpg 1478w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>All done  ! congratuilations !<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Here is a quick guide on how to install html5-chat with Drupal8\/9 Create a gender user field in configuration \/ Account Settings Add a new field called gender Download and install the plugin for Drupal8\/9 Go to structure &#8211; > block layout Go to content, click on Place bloc, search for htmlchat and click place [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1152,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[32],"tags":[],"class_list":["post-1136","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-integration"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/posts\/1136","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=1136"}],"version-history":[{"count":10,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/posts\/1136\/revisions"}],"predecessor-version":[{"id":1163,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/posts\/1136\/revisions\/1163"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/media\/1152"}],"wp:attachment":[{"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/media?parent=1136"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/categories?post=1136"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/tags?post=1136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}