Responsive Chatbox UI using HTML, CSS, and JavaScript Source Code

Submitted by oretnom23 on Friday, March 31, 2023 - 17:42.

Language

In this article, I will be providing a simple Mobile Responsive Chatbox UI Template. The Chatbox UI Template is written in HTML, CSS, and JavaScript. The primary purpose of this article is to share a free Chatbox UI Template for students or beginners for their website chat feature or chatbot feature of their projects.

How does this Mobile Responsive Chatbox UI Template work?

This Mobile Responsive Chatbox UI Template contains the relevant component or HTML element that is often implemented in a chatbox for a website. It is a pop-up block or panel that has a conversation box between the sender and receiver. The chatbox is divided into 3 panels which are the Chatbox Header, Body, and Footer. The chatbox's header is the area of the said UI where the chatbox title (username/Chatbot name) and the close button are located. The chatbox's body area contains the conversation of the users. The footer contains the chat form which has a text field and a send button. The chatbox can be triggered to show by clicking the chat icon that is located at the bottom-right corner of the web page.

Features

  • Chatbox Icon Button w/ Animation Effect - (trigger the Chatbox to show)
  • Chatbox Header/Title Bar
  • Chatbox Conversation Area
    Contains:
    • User Avatar
    • Message Bubble
    • Message Content
  • Auto-resizing chat Textfield
  • Send Button

Requirements

This Chatbox UI Template is using Google Icons which means that you are required to load the Google Icons Asset for implementing the template into your own project.

Snapshot

Here are the snapshots of the Responsive Chatbox UI Template:

Chatbox Icon Button on a Web Page

Responsive Chatbox UI Template Free Download

Chatbox on Desktop View

Responsive Chatbox UI Template Free Download

Chatbox on Mobile View

Responsive Chatbox UI Template Free Download

Chatbox Script

Here is the script of the chat box if you want to modify and implement the template to your own project.

HTML

  1. <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
  2. <!-- Chatbox Wrapper -->
  3. <div id="chatbox-wrapper">
  4. 	<div id="chatbox-btn-wrapper">
  5. 		<span class="material-symbols-outlined">chat</span>
  6. 	</div>
  7. 	<div id="chatbox">
  8. 		<div class="chatbox-dialog">
  9. 			<div class="chatbox-header">
  10. 				<div class="chat-title">Site Chatbox</div>
  11. 				<div class="chat-tools">
  12. 					<button class="chatbox-close"><span class="material-symbols-outlined">close</span></button>
  13. 				</div>
  14. 			</div>
  15. 			<div class="chatbox-body">
  16. 					<div class="chatbox-item chatbox-msg-receiver">
  17. 						<div class="chatbox-user-avatar"><span class="material-symbols-outlined">person</span></div>
  18. 						<div class="chatbox-item-content-wrapper">
  19. 							<span class="chatbox-item-content">Donec ac augue sed mauris bibendum scelerisque. Integer pharetra, diam et rutrum sagittis, eros nisl dictum turpis, non mattis lorem metus in massa.</span>
  20. 						</div>
  21. 					</div>
  22. 					<div class="chatbox-item chatbox-msg-sender">
  23. 						<div class="chatbox-user-avatar"><span class="material-symbols-outlined">person</span></div>
  24. 						<div class="chatbox-item-content-wrapper">
  25. 							<span class="chatbox-item-content">Integer ultrices ante massa, vitae bibendum enim tempus et</span>
  26. 						</div>
  27. 					</div>
  28. 				<div class="chatbox-item chatbox-msg-receiver">
  29. 					<div class="chatbox-user-avatar"><span class="material-symbols-outlined">person</span></div>
  30. 					<div class="chatbox-item-content-wrapper">
  31. 						<span class="chatbox-item-content">Nullam maximus erat sed vestibulum egestas. Proin feugiat libero eu auctor condimentum. </span>
  32. 					</div>
  33. 				</div>
  34. 				<div class="chatbox-item chatbox-msg-sender">
  35. 					<div class="chatbox-user-avatar"><span class="material-symbols-outlined">person</span></div>
  36. 					<div class="chatbox-item-content-wrapper">
  37. 						<span class="chatbox-item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
  38. 					</div>
  39. 				</div>
  40. 				<div class="chatbox-item chatbox-msg-receiver">
  41. 					<div class="chatbox-user-avatar"><span class="material-symbols-outlined">person</span></div>
  42. 					<div class="chatbox-item-content-wrapper">
  43. 						<span class="chatbox-item-content">Vivamus varius eleifend interdum. Proin sit amet felis scelerisque</span>
  44. 					</div>
  45. 				</div>
  46. 				<div class="chatbox-item chatbox-msg-sender">
  47. 					<div class="chatbox-user-avatar"><span class="material-symbols-outlined">person</span></div>
  48. 					<div class="chatbox-item-content-wrapper">
  49. 						<span class="chatbox-item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
  50. 					</div>
  51. 				</div>
  52. 				<div class="chatbox-item chatbox-msg-receiver">
  53. 					<div class="chatbox-user-avatar"><span class="material-symbols-outlined">person</span></div>
  54. 					<div class="chatbox-item-content-wrapper">
  55. 						<span class="chatbox-item-content">Hi!</span>
  56. 					</div>
  57. 				</div>
  58. 				<div class="chatbox-item chatbox-msg-sender">
  59. 					<div class="chatbox-user-avatar"><span class="material-symbols-outlined">person</span></div>
  60. 					<div class="chatbox-item-content-wrapper">
  61. 						<span class="chatbox-item-content">Hello =)</span>
  62. 					</div>
  63. 				</div>
  64. 			</div>
  65. 			<div class="chatbox-footer">
  66. 				<div class="chatbox-field-wrapper">
  67. 					<textarea name="message" id="chatbox-message-field" placeholder="Type a message..."></textarea>
  68. 				</div>
  69. 				<div class="chatbox-btn-wrapper">
  70. 					<button id="chatbox-send-btn"><span class="material-symbols-outlined">send</span></button>
  71. 				</div>
  72. 			</div>
  73. 		</div>
  74. 	</div>
  75. </div>
  76. <!-- Chatbox Wrapper -->

CSS

  1. /* Chatbox elements styles */
  2. #chatbox-wrapper #chatbox-btn-wrapper{
  3. 	width: 50px;
  4. 	height: 50px;
  5. 	border-radius: 50% 50%;
  6. 	border: 2px solid black;
  7. 	background: black;
  8. 	display: flex;
  9. 	align-items:center;
  10. 	justify-content:center;
  11. 	position:absolute;
  12. 	right: 1em;
  13. 	bottom:2em;
  14. 	animation: IconAnimation 5s ease-in-out infinite;
  15. 	cursor: pointer;
  16. 	z-index: 99;
  17. }
  18. #chatbox-wrapper #chatbox-btn-wrapper span{
  19. 	color:#fff;
  20.  
  21. }
  22. #chatbox-wrapper #chatbox-btn-wrapper:hover{
  23. 	animation: unset !important;
  24. 	transform:scale(1.2);
  25. }
  26. @keyframes IconAnimation {
  27. 	0%{
  28. 		rotate:0deg;
  29. 		transform:scale(1);
  30. 	}
  31. 	25%{
  32. 		rotate:360deg;
  33. 		transform:scale(1.2);
  34. 	}
  35. 	50%,100%{
  36. 		rotate:720deg;
  37. 		transform:scale(1);
  38. 	}
  39. }
  40. #chatbox-wrapper #chatbox{
  41. 	--chatbox-height:380px;
  42. 	--chatbox-width:280px;
  43. 	position: absolute;
  44. 	width: 0;
  45. 	height: 0;
  46. 	z-index: 100;
  47. 	right: 1em;
  48. 	bottom: 2em;
  49. 	overflow: hidden;
  50. }
  51. @media (max-width:480px) {
  52. 	#chatbox-wrapper #chatbox{
  53. 		--chatbox-height:100%;
  54. 		--chatbox-width:100%;
  55. 		top:0;
  56. 		left:0;
  57. 		bottom: unset;
  58. 		right: unset;
  59. 	}
  60. }
  61.  
  62. #chatbox-wrapper #chatbox.show{
  63. 	width: var(--chatbox-width);
  64. 	height: var(--chatbox-height);
  65. }
  66. #chatbox-wrapper #chatbox.closing{
  67. 	width: var(--chatbox-width);
  68. 	height: var(--chatbox-height);
  69. }
  70.  
  71. #chatbox-wrapper #chatbox .chatbox-dialog{
  72. 	width: 100%;
  73. 	height: 100%;
  74. 	display: flex;
  75. 	flex-direction: column;
  76. 	transform: translateY(100%);
  77. 	transition: transform ease-in-out .5s;
  78. }
  79. #chatbox-wrapper #chatbox.show .chatbox-dialog{
  80. 	transform: translateY(0%);
  81. }
  82. #chatbox-wrapper #chatbox.closing .chatbox-dialog{
  83. 	transform: translateY(100%);
  84. }
  85. #chatbox-wrapper #chatbox .chatbox-header{
  86. 	flex-shrink: 1;
  87. 	padding: .5em .75em;
  88. 	display: flex;
  89. 	justify-content: space-between;
  90. 	align-items: center;
  91. 	background: #0da0f5;
  92. 	color:#fff;
  93. }
  94. #chatbox-wrapper #chatbox .chatbox-close{
  95. 	background: transparent;
  96. 	outline: unset;
  97. 	border: none;
  98. 	padding: 5px;
  99. 	line-height: 10px;
  100. }
  101. #chatbox-wrapper #chatbox .chatbox-close span{
  102. 	font-size: 10px;
  103. 	font-weight: 600;
  104. 	color:#fff;
  105. }
  106. #chatbox-wrapper #chatbox .chatbox-body{
  107. 	flex-grow: 1;
  108. 	padding: .5em .75em;
  109. 	height: calc(100%);
  110. 	width: 100%;
  111. 	overflow-x: hidden;
  112. 	overflow-y: auto;
  113. 	display: flex;
  114. 	flex-direction:column-reverse;
  115. 	justify-content: end;
  116. 	align-items: center;
  117. 	background: #fff;
  118. 	color:#fff;
  119. }
  120. #chatbox-wrapper #chatbox .chatbox-item{
  121. 	width: 100%;
  122. 	display: flex;
  123. 	align-items: start;
  124. 	justify-content: start;
  125. 	color:#000;
  126. }
  127. #chatbox-wrapper #chatbox .chatbox-item .chatbox-user-avatar{
  128. 	width: 20px;
  129. 	height: 20px;
  130. 	border: 1px solid #0da0f5;
  131. 	border-radius: 50% 50%;
  132. 	display: flex;
  133. 	align-items: center;
  134. 	justify-content: center;
  135. 	background-color: #0da0f5;
  136. 	box-shadow: 1px 1px 3px #00000075;
  137. 	margin-top:.5em;
  138. }
  139. #chatbox-wrapper #chatbox .chatbox-item .chatbox-user-avatar span{
  140. 	font-size: 15px;
  141. 	font-weight: 500;
  142. 	color: #fff;
  143. }
  144. #chatbox-wrapper #chatbox .chatbox-item .chatbox-item-content-wrapper{
  145. 	width: 80%;
  146. 	padding: .35em;
  147. 	position: relative;
  148. 	display: flex;
  149. 	flex-direction: column;
  150. }
  151. #chatbox-wrapper #chatbox .chatbox-item .chatbox-item-content{
  152. 	flex-shrink: 1;
  153. 	max-width: 100%;
  154. 	color: #363636;
  155. 	background: #dddddd;
  156. 	font-size: .8rem;
  157. 	padding: .35em;
  158. 	border-radius: .35em;
  159. 	align-self: flex-start;
  160. }
  161. #chatbox-wrapper #chatbox .chatbox-item.chatbox-msg-receiver{
  162. 	flex-direction: row-reverse;
  163. 	justify-content: end;
  164. }
  165. #chatbox-wrapper #chatbox .chatbox-item.chatbox-msg-receiver .chatbox-item-content{
  166. 	align-self: flex-end;
  167. 	background: #81cffd;
  168. 	color: #363636;
  169. }
  170. #chatbox-wrapper #chatbox .chatbox-item.chatbox-msg-receiver .chatbox-user-avatar{
  171. 	border-color: #cecece;
  172. 	background: #cecece;
  173. }
  174. #chatbox-wrapper #chatbox .chatbox-item.chatbox-msg-receiver .chatbox-user-avatar span{
  175. 	color: #363636;
  176. }
  177. #chatbox-wrapper #chatbox .chatbox-footer{
  178. 	flex-shrink: 1;
  179. 	padding: .35em;
  180. 	background-color: #efeeee;
  181. 	display: flex;
  182. 	width: 100%;
  183. }
  184. #chatbox-wrapper #chatbox .chatbox-footer .chatbox-field-wrapper{
  185. 	width: 85%;
  186. 	line-height: 12px;
  187. }
  188. #chatbox-wrapper #chatbox .chatbox-footer .chatbox-field-wrapper textarea{
  189. 	--chatbox-max-height: 55;
  190. 	resize: none;
  191. 	height: 32px;
  192. 	padding: 0.65em 0.35em;
  193. 	font-size: .8rem;
  194. 	width: 100%;
  195. }
  196. #chatbox-wrapper #chatbox .chatbox-footer .chatbox-field-wrapper textarea:focus{
  197. 	border-color:#2ea8ee;
  198. 	outline-color: #2ea8ee;
  199. }
  200. #chatbox-wrapper #chatbox .chatbox-footer .chatbox-btn-wrapper{
  201. 	width: 15%;
  202. 	overflow: hidden;
  203. 	padding: 0 .35em;
  204. 	display: flex;
  205. 	justify-content: center;
  206. 	align-items: center;
  207. }
  208. #chatbox-wrapper #chatbox .chatbox-footer .chatbox-btn-wrapper #chatbox-send-btn{
  209. 	flex-grow:1;
  210. 	width: 100%;
  211. 	height:100%;
  212. 	background-color: #0da0f5;
  213. 	padding: .35em;
  214. 	line-height: 12px;
  215. 	border: none;
  216. }
  217. #chatbox-wrapper #chatbox .chatbox-footer .chatbox-btn-wrapper #chatbox-send-btn span{
  218. 	font-size: .8rem;
  219. 	color: #fff;
  220. }
  221.  

JavaScript

  1. const chatBoxIcon = document.getElementById('chatbox-btn-wrapper')
  2. const chatBoxCloseBtn = document.querySelector('#chatbox .chatbox-close')
  3. const chatBoxWrapper = document.getElementById('chatbox')
  4. const chatBoxTextField = document.getElementById('chatbox-message-field')
  5.  
  6. chatBoxIcon.addEventListener('click', e =>{
  7. 	e.preventDefault()
  8. 	if(chatBoxWrapper.classList.contains('show')){
  9. 		chatBoxWrapper.classList.remove('show')
  10. 	}else{
  11. 		chatBoxWrapper.classList.add('show')
  12. 		chatBoxIcon.style.display = `none`
  13. 	}
  14. })
  15.  
  16. chatBoxCloseBtn.addEventListener('click', e => {
  17. 	e.preventDefault()
  18. 	if(chatBoxWrapper.classList.contains('show')){
  19. 		if(!chatBoxWrapper.classList.contains('closing'))
  20. 			chatBoxWrapper.classList.add('closing');
  21. 			setTimeout(()=>{
  22. 			chatBoxWrapper.classList.remove('show');
  23. 			chatBoxWrapper.classList.remove('closing');
  24. 			}, 500)
  25. 	}
  26. 	chatBoxIcon.removeAttribute('style')
  27. })
  28.  
  29. const chatBoxTextFieldHeight = chatBoxTextField.clientHeight
  30. chatBoxTextField.addEventListener('keyup', e=>{
  31. 	var maxHeight = getComputedStyle(chatBoxTextField).getPropertyValue('--chatbox-max-height')
  32. 	chatBoxTextField.removeAttribute('style')
  33. 	setTimeout(()=>{
  34. 		if(chatBoxTextField.scrollHeight > maxHeight){
  35. 			chatBoxTextField.style.height = `${maxHeight}px`
  36. 		}else{
  37. 			chatBoxTextField.style.height = `${chatBoxTextField.scrollHeight}px`
  38. 		}
  39. 	},0)
  40. })

I have provided also the complete source code zip file of a sample web page that uses the scripts I provided above to demonstrate the Responsive Chatbox UI template in an actual web page. The download button is located below this article's content. Feel free to download and modify it.

That's it! I hope this Mobile Responsive Chatbox UI Template Source Code in HTML, CSS, and JS will be useful for what you are looking for and will be useful for your current and future web application projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding =)

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Tags

Comments

Submitted byFenan (not verified)on Sat, 07/29/2023 - 12:16

Perfect

Add new comment

About text formats