{"id":1376739,"date":"2026-09-29T12:16:28","date_gmt":"2026-09-29T12:16:28","guid":{"rendered":"https:\/\/wordpress.org\/patterns\/?post_type=wporg-pattern&#038;p=1376739"},"modified":"2026-09-29T12:16:28","modified_gmt":"2026-09-29T12:16:28","slug":"chat-box","status":"publish","type":"wporg-pattern","link":"https:\/\/wordpress.org\/patterns\/pattern\/chat-box\/","title":{"rendered":"Chat Box"},"content":{"rendered":"\n<div class=\"wp-block-group has-background is-layout-constrained wp-container-core-group-is-layout-523ec289 wp-block-group-is-layout-constrained\" style=\"border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;background-color:#283b8f;padding-top:60px;padding-right:40px;padding-bottom:60px;padding-left:40px\">\n<h1 class=\"wp-block-heading has-text-align-center has-white-color has-text-color has-link-color has-inter-font-family wp-elements-1\" style=\"margin-bottom:30px;font-size:42px\"><strong>Chat Window<\/strong><\/h1>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns are-vertically-aligned-center is-not-stacked-on-mobile is-layout-flex wp-container-core-columns-is-layout-0e47273b wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:70px\">\n<figure class=\"wp-block-image size-full is-resized has-custom-border\"><img decoding=\"async\" src=\"https:\/\/images.rawpixel.com\/editor_1024\/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvZnJiaXJkX3BhcnJvdF90b3VjYW5fMTI4MTg4Ni1pbWFnZS1reWJlNjBiaC5qcGc.jpg\" alt=\"\" style=\"border-top-left-radius:100px;border-top-right-radius:100px;border-bottom-left-radius:100px;border-bottom-right-radius:100px;object-fit:cover;object-position:23% 0%;width:70px;height:70px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"border-top-left-radius:30px;border-top-right-radius:30px;border-bottom-left-radius:30px;border-bottom-right-radius:30px;background-color:#8aade5;padding-top:21px;padding-right:21px;padding-bottom:21px;padding-left:21px\">\n<h6 class=\"wp-block-heading has-white-color has-text-color has-link-color wp-elements-2\">Hi, How are you?<\/h6>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center is-not-stacked-on-mobile is-layout-flex wp-container-core-columns-is-layout-0e47273b wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center has-vivid-purple-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"border-top-left-radius:30px;border-top-right-radius:30px;border-bottom-left-radius:30px;border-bottom-right-radius:30px;padding-top:21px;padding-right:21px;padding-bottom:21px;padding-left:21px\">\n<h6 class=\"wp-block-heading has-text-align-right has-white-color has-text-color has-link-color wp-elements-3\">Hi, i am fine?<\/h6>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:70px\">\n<figure class=\"wp-block-image is-resized has-custom-border\"><img decoding=\"async\" src=\"https:\/\/images.rawpixel.com\/editor_1024\/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvbnMxMTE4Ni1pbWFnZS1rd3Z3cTFtNS5qcGc.jpg\" alt=\"\" style=\"border-top-left-radius:100px;border-top-right-radius:100px;border-bottom-left-radius:100px;border-bottom-right-radius:100px;object-fit:cover;width:70px;height:70px\" \/><\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":23434748,"parent":0,"template":"","meta":{"wpop_keywords":"Chat, chatting room, chat box","wpop_description":"Chatting box design","wpop_viewport_width":1200,"wpop_block_types":[],"wpop_locale":"en_US","wpop_wp_version":"","wpop_contains_block_types":"core\/column,core\/columns,core\/group,core\/heading,core\/image","footnotes":""},"pattern-categories":[42,4,82,61,6,39],"pattern-keywords":[],"wporg-pattern-flag-reason":[],"class_list":["post-1376739","wporg-pattern","type-wporg-pattern","status-publish","hentry","wporg-pattern-category-call-to-action","wporg-pattern-category-gallery","wporg-pattern-category-intro","wporg-pattern-category-team","wporg-pattern-category-text","wporg-pattern-category-wireframe"],"category_slugs":["call-to-action","gallery","intro","team","text","wireframe"],"keyword_slugs":[],"pattern_content":"<!-- wp:group {\"style\":{\"color\":{\"background\":\"#283b8f\"},\"spacing\":{\"padding\":{\"top\":\"60px\",\"bottom\":\"60px\",\"left\":\"40px\",\"right\":\"40px\"}},\"border\":{\"radius\":{\"topLeft\":\"10px\",\"topRight\":\"10px\",\"bottomLeft\":\"10px\",\"bottomRight\":\"10px\"}}},\"layout\":{\"type\":\"constrained\",\"wideSize\":\"1200px\"}} -->\n<div class=\"wp-block-group has-background\" style=\"border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;background-color:#283b8f;padding-top:60px;padding-right:40px;padding-bottom:60px;padding-left:40px\"><!-- wp:heading {\"level\":1,\"style\":{\"typography\":{\"textAlign\":\"center\",\"fontSize\":\"42px\"},\"elements\":{\"link\":{\"color\":{\"text\":\"var:preset|color|white\"}}},\"spacing\":{\"margin\":{\"bottom\":\"30px\"}}},\"textColor\":\"white\",\"fontFamily\":\"inter\"} -->\n<h1 class=\"wp-block-heading has-text-align-center has-white-color has-text-color has-link-color has-inter-font-family\" style=\"margin-bottom:30px;font-size:42px\"><strong>Chat Window<\/strong><\/h1>\n<!-- \/wp:heading -->\n\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\n<div class=\"wp-block-group\"><!-- wp:columns {\"verticalAlignment\":\"center\",\"isStackedOnMobile\":false} -->\n<div class=\"wp-block-columns are-vertically-aligned-center is-not-stacked-on-mobile\"><!-- wp:column {\"verticalAlignment\":\"center\",\"width\":\"70px\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\" style=\"flex-basis:70px\"><!-- wp:image {\"id\":null,\"width\":\"70px\",\"height\":\"70px\",\"scale\":\"cover\",\"focalPoint\":{\"x\":0.23,\"y\":0},\"sizeSlug\":\"full\",\"linkDestination\":\"none\",\"style\":{\"border\":{\"radius\":{\"topLeft\":\"100px\",\"topRight\":\"100px\",\"bottomLeft\":\"100px\",\"bottomRight\":\"100px\"}}}} -->\n<figure class=\"wp-block-image size-full is-resized has-custom-border\"><img src=\"https:\/\/images.rawpixel.com\/editor_1024\/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvZnJiaXJkX3BhcnJvdF90b3VjYW5fMTI4MTg4Ni1pbWFnZS1reWJlNjBiaC5qcGc.jpg\" alt=\"\" style=\"border-top-left-radius:100px;border-top-right-radius:100px;border-bottom-left-radius:100px;border-bottom-right-radius:100px;object-fit:cover;object-position:23% 0%;width:70px;height:70px\" \/><\/figure>\n<!-- \/wp:image --><\/div>\n<!-- \/wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\",\"style\":{\"spacing\":{\"padding\":{\"top\":\"21px\",\"bottom\":\"21px\",\"left\":\"21px\",\"right\":\"21px\"}},\"border\":{\"radius\":{\"topLeft\":\"30px\",\"topRight\":\"30px\",\"bottomLeft\":\"30px\",\"bottomRight\":\"30px\"}},\"color\":{\"background\":\"#8aade5\"}}} -->\n<div class=\"wp-block-column is-vertically-aligned-center has-background\" style=\"border-top-left-radius:30px;border-top-right-radius:30px;border-bottom-left-radius:30px;border-bottom-right-radius:30px;background-color:#8aade5;padding-top:21px;padding-right:21px;padding-bottom:21px;padding-left:21px\"><!-- wp:heading {\"level\":6,\"style\":{\"elements\":{\"link\":{\"color\":{\"text\":\"var:preset|color|white\"}}}},\"textColor\":\"white\"} -->\n<h6 class=\"wp-block-heading has-white-color has-text-color has-link-color\">Hi, How are you?<\/h6>\n<!-- \/wp:heading --><\/div>\n<!-- \/wp:column --><\/div>\n<!-- \/wp:columns -->\n\n<!-- wp:columns {\"verticalAlignment\":\"center\",\"isStackedOnMobile\":false} -->\n<div class=\"wp-block-columns are-vertically-aligned-center is-not-stacked-on-mobile\"><!-- wp:column {\"verticalAlignment\":\"center\",\"style\":{\"spacing\":{\"padding\":{\"top\":\"21px\",\"bottom\":\"21px\",\"left\":\"21px\",\"right\":\"21px\"}},\"border\":{\"radius\":{\"topLeft\":\"30px\",\"topRight\":\"30px\",\"bottomLeft\":\"30px\",\"bottomRight\":\"30px\"}}},\"backgroundColor\":\"vivid-purple\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center has-vivid-purple-background-color has-background\" style=\"border-top-left-radius:30px;border-top-right-radius:30px;border-bottom-left-radius:30px;border-bottom-right-radius:30px;padding-top:21px;padding-right:21px;padding-bottom:21px;padding-left:21px\"><!-- wp:heading {\"level\":6,\"style\":{\"typography\":{\"textAlign\":\"right\"},\"elements\":{\"link\":{\"color\":{\"text\":\"var:preset|color|white\"}}}},\"textColor\":\"white\"} -->\n<h6 class=\"wp-block-heading has-text-align-right has-white-color has-text-color has-link-color\">Hi, i am fine?<\/h6>\n<!-- \/wp:heading --><\/div>\n<!-- \/wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\",\"width\":\"70px\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\" style=\"flex-basis:70px\"><!-- wp:image {\"id\":null,\"width\":\"70px\",\"height\":\"70px\",\"scale\":\"cover\",\"style\":{\"border\":{\"radius\":{\"topLeft\":\"100px\",\"topRight\":\"100px\",\"bottomLeft\":\"100px\",\"bottomRight\":\"100px\"}}}} -->\n<figure class=\"wp-block-image is-resized has-custom-border\"><img src=\"https:\/\/images.rawpixel.com\/editor_1024\/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvbnMxMTE4Ni1pbWFnZS1rd3Z3cTFtNS5qcGc.jpg\" alt=\"\" style=\"border-top-left-radius:100px;border-top-right-radius:100px;border-bottom-left-radius:100px;border-bottom-right-radius:100px;object-fit:cover;width:70px;height:70px\" \/><\/figure>\n<!-- \/wp:image --><\/div>\n<!-- \/wp:column --><\/div>\n<!-- \/wp:columns --><\/div>\n<!-- \/wp:group --><\/div>\n<!-- \/wp:group -->","favorite_count":0,"author_meta":{"name":"Rakesh Nagar","url":"https:\/\/wordpress.org\/patterns\/author\/rakeshnagar10","avatar":"https:\/\/secure.gravatar.com\/avatar\/9ebab71cbcf2c52a3947e288720479ef4866cf27a9471061dd866c60796de73d?s=64&d=mm&r=g"},"unlisted_reason":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/1376739","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern"}],"about":[{"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/types\/wporg-pattern"}],"version-history":[{"count":13,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/1376739\/revisions"}],"predecessor-version":[{"id":1376772,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/1376739\/revisions\/1376772"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wporg\/v1\/users\/rakeshnagar10"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/media?parent=1376739"}],"wp:term":[{"taxonomy":"wporg-pattern-category","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/pattern-categories?post=1376739"},{"taxonomy":"wporg-pattern-keyword","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/pattern-keywords?post=1376739"},{"taxonomy":"wporg-pattern-flag-reason","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern-flag-reason?post=1376739"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}