BUSINESS Documentation

component.widget-chat

widget-chat

Live Example

Chat

Martin
Image
just now

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae accumsan mauris. Donec vitae nibh felis, facilisis bibendum sapien.

John Doe
Image
15 seconds ago

In ultricies ante eget tortor euismod vitae molestie eros hendrerit. Cras tristique, orci ac lacinia aliquet, velit risus laoreet lectus, eget sollicitudin metus orci non nulla.

Ricky
Image
5 minutes ago

Pellentesque ac turpis turpis. Aliquam erat volutpat. Proin semper auctor mauris vel tempor. Ut eget turpis neque. Nam ultricies tortor eu odio ultricies euismod.

<!-- Chat -->
<div class="widget widget-heading-simple widget-body-white widget-chat" data-builder-exclude>

	<div class="widget-head">
		<h4 class="heading glyphicons chat"><i></i>Chat</h4>
	</div>
	<div class="widget-body">
	
	<!-- Slim Scroll -->
	<div class="slim-scroll chat-items" data-scroll-height="190px" data-scroll-size="0">
		
		<!-- Media item -->
		<div class="media">
			<small class="author"><a href="#" title="" class="strong">Martin</a></small>
			<div class="media-object pull-left thumb"><img src="../assets//images/avatar-51x51.jpg" alt="Image" /></div>
			<div class="media-body">
				<blockquote>
					<small class="date"><cite>just now</cite></small>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae accumsan mauris. Donec vitae nibh felis, facilisis bibendum sapien.</p>
				</blockquote>
			</div>
		</div>
		<!-- // Media item END -->
		
		<!-- Media item -->
		<div class="media right">
			<small class="author"><a href="#" title="" class="strong">John Doe</a></small>
			<div class="media-object pull-right thumb"><img src="../assets//images/avatar-51x51.jpg" alt="Image" /></div>
			<div class="media-body">
				<blockquote class="pull-right">
					<small class="date"><cite>15 seconds ago</cite></small>
					<p>In ultricies ante eget tortor euismod vitae molestie eros hendrerit. Cras tristique, orci ac lacinia aliquet, velit risus laoreet lectus, eget sollicitudin metus orci non nulla.</p>
				</blockquote>
			</div>
		</div>
		<!-- // Media item END -->
		
		<!-- Media item -->
		<div class="media">
			<small class="author"><a href="#" title="" class="strong">Ricky</a></small>
			<div class="media-object pull-left thumb"><img src="../assets//images/avatar-51x51.jpg" alt="Image" /></div>
			<div class="media-body">
				<blockquote>
					<small class="date"><cite>5 minutes ago</cite></small>
					<p>Pellentesque ac turpis turpis. Aliquam erat volutpat. Proin semper auctor mauris vel tempor. Ut eget turpis neque. Nam ultricies tortor eu odio ultricies euismod.</p>
				</blockquote>
			</div>
		</div>
		<!-- // Media item END -->
		
	</div>
	<!-- // Slim Scroll END -->
	
	</div>
	
	<div class="chat-controls">
		<div class="innerLR">
			<form class="margin-none">
				<div class="row">
					<div class="col-md-10 col-xs-10">
						<input type="text" name="message" class="form-control" placeholder="Type your message .." />
					</div>
					<div class="col-md-2 col-xs-2">
						<button type="submit" class="btn btn-block btn-primary">Send</button>
					</div>
				</div>
			</form>
		</div>
	</div>
	
</div>
<!-- // Chat END -->

Code

@import "http://localhost/shared/components/modules/admin/widgets/widget-chat/assets/less/widget-chat.less";
@import "assets/components/core/less/widgets.less";
@import "assets/components/common/ui/buttons/assets/buttons.less";
@import "assets/components/core/less/forms.less";
@import "http://localhost/shared/components/library/jquery-ui/css/jquery-ui.min.css";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files: 

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

Scripts

HEAD You should include the following scripts in the head section of the document, right before the closing </head> tag, after styles.

<script src="assets/components/library/jquery-ui/js/jquery-ui.min.js?v=v1.0.2&sv=v0.0.1"></script>
<script src="assets/components/plugins/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js?v=v1.0.2&sv=v0.0.1"></script>

Scripts

BODY You should include the following scripts at the end of the HTML document, right before the closing </body> tag.

<script src="assets/components/modules/admin/widgets/widget-chat/assets/js/widget-chat.js?v=v1.0.2&sv=v0.0.1"></script>
<script src="assets/components/plugins/slimscroll/jquery.slimscroll.js?v=v1.0.2&sv=v0.0.1"></script>