diff --git a/.loki/reference/chrome_Components_Icons_all.png b/.loki/reference/chrome_Components_Icons_all.png
index 9ee15f4ff..3f27dfcbc 100644
Binary files a/.loki/reference/chrome_Components_Icons_all.png and b/.loki/reference/chrome_Components_Icons_all.png differ
diff --git a/.loki/reference/chrome_Components_Icons_phone.png b/.loki/reference/chrome_Components_Icons_phone.png
new file mode 100644
index 000000000..ea142fac6
Binary files /dev/null and b/.loki/reference/chrome_Components_Icons_phone.png differ
diff --git a/.loki/reference/chrome_Components_Icons_phoneOff.png b/.loki/reference/chrome_Components_Icons_phoneOff.png
new file mode 100644
index 000000000..d621a0f3a
Binary files /dev/null and b/.loki/reference/chrome_Components_Icons_phoneOff.png differ
diff --git a/.loki/reference/chrome_Components_Icons_video.png b/.loki/reference/chrome_Components_Icons_video.png
new file mode 100644
index 000000000..5c8c71d51
Binary files /dev/null and b/.loki/reference/chrome_Components_Icons_video.png differ
diff --git a/.loki/reference/chrome_Components_Icons_videoIcon.png b/.loki/reference/chrome_Components_Icons_videoIcon.png
new file mode 100644
index 000000000..5c8c71d51
Binary files /dev/null and b/.loki/reference/chrome_Components_Icons_videoIcon.png differ
diff --git a/package.json b/package.json
index eea0f8041..6db73a542 100644
--- a/package.json
+++ b/package.json
@@ -85,7 +85,7 @@
 	},
 	"dependencies": {
 		"@kossnocorp/desvg": "^0.2.0",
-		"@rocket.chat/sdk": "^1.0.0-alpha.41",
+		"@rocket.chat/sdk": "^1.0.0-alpha.42",
 		"@rocket.chat/ui-kit": "^0.14.1",
 		"css-vars-ponyfill": "^2.3.2",
 		"date-fns": "^2.15.0",
diff --git a/src/components/Calls/CallIFrame.js b/src/components/Calls/CallIFrame.js
new file mode 100644
index 000000000..cc943eb39
--- /dev/null
+++ b/src/components/Calls/CallIFrame.js
@@ -0,0 +1,32 @@
+import { h } from 'preact';
+
+import { Livechat } from '../../api';
+import store from '../../store';
+import { createClassName } from '../helpers';
+import { CallStatus } from './CallStatus';
+import styles from './styles.scss';
+
+
+export const CallIframe = () => {
+	const { token, room, incomingCallAlert, ongoingCall } = store.state;
+	const url = `${ Livechat.client.host }/meet/${ room._id }?token=${ token }&layout=embedded`;
+	window.handleIframeClose = () => store.setState({ incomingCallAlert: { ...incomingCallAlert, show: false } });
+	window.expandCall = () => {
+		window.open(
+			`${ Livechat.client.host }/meet/${ room._id }?token=${ token }`,
+			room._id,
+		);
+		return store.setState({
+			incomingCallAlert: { ...incomingCallAlert, show: false },
+			ongoingCall: {
+				...ongoingCall,
+				callStatus: CallStatus.IN_PROGRESS_DIFFERENT_TAB,
+			},
+		});
+	};
+	return (
+		<div className={createClassName(styles, 'call-iframe')}>
+			<iframe className={createClassName(styles, 'call-iframe__content')} allow='camera;microphone' src={url} />
+		</div>
+	);
+};
diff --git a/src/components/Calls/CallNotification.js b/src/components/Calls/CallNotification.js
new file mode 100644
index 000000000..767824304
--- /dev/null
+++ b/src/components/Calls/CallNotification.js
@@ -0,0 +1,111 @@
+import { h } from 'preact';
+import { useState } from 'preact/compat';
+
+import { Livechat } from '../../api';
+import I18n from '../../i18n';
+import PhoneAccept from '../../icons/phone.svg';
+import PhoneDecline from '../../icons/phoneOff.svg';
+import constants from '../../lib/constants';
+import store from '../../store';
+import { Avatar } from '../Avatar';
+import { Button } from '../Button';
+import { createClassName, getAvatarUrl, isMobileDevice } from '../helpers';
+import { CallStatus } from './CallStatus';
+import styles from './styles.scss';
+
+
+export const CallNotification = ({
+	callProvider,
+	callerUsername,
+	url,
+	dispatch,
+	time,
+	rid,
+	callId,
+}) => {
+	const [show, setShow] = useState(true);
+
+	const callInNewTab = async () => {
+		const { token } = store.state;
+		const url = `${ Livechat.client.host }/meet/${ rid }?token=${ token }`;
+		await dispatch({
+			ongoingCall: {
+				callStatus: CallStatus.IN_PROGRESS_DIFFERENT_TAB,
+				time: { time },
+			},
+			incomingCallAlert: {
+				show: false,
+				callProvider,
+			},
+		});
+		window.open(url, rid);
+	};
+
+	const acceptClick = async () => {
+		setShow(!{ show });
+		switch (callProvider) {
+			case constants.jitsiCallStartedMessageType: {
+				window.open(url, rid);
+				await dispatch({
+					incomingCallAlert: { show: false, url, callProvider },
+					ongoingCall: {
+						callStatus: CallStatus.IN_PROGRESS_DIFFERENT_TAB,
+						time: { time },
+					},
+				});
+				break;
+			}
+			case constants.webRTCCallStartedMessageType: {
+				await Livechat.updateCallStatus(CallStatus.IN_PROGRESS, rid, callId);
+				if (isMobileDevice()) {
+					callInNewTab();
+					break;
+				}
+				await dispatch({ ongoingCall: { callStatus: CallStatus.IN_PROGRESS_SAME_TAB, time: { time } } });
+				break;
+			}
+		}
+	};
+
+	const declineClick = async () => {
+		await Livechat.updateCallStatus(CallStatus.DECLINED, rid, callId);
+		await Livechat.notifyCallDeclined(rid);
+		await dispatch({
+			incomingCallAlert: null,
+			ongoingCall: {
+				callStatus: CallStatus.DECLINED,
+				time: { time },
+			},
+		});
+	};
+
+	return (
+		<div className={createClassName(styles, 'call-notification')}>
+			{
+				show && (
+					<div className = { createClassName(styles, 'call-notification__content') }>
+						<div className = { createClassName(styles, 'call-notification__content-avatar') }>
+							<Avatar src = { getAvatarUrl(callerUsername) } large />
+						</div>
+						<div className = { createClassName(styles, 'call-notification__content-message') }>
+							{ I18n.t('Incoming video Call') }
+						</div>
+						<div className = { createClassName(styles, 'call-notification__content-actions') }>
+							<Button
+								onClick = { declineClick }
+								className = { createClassName(styles, 'call-notification__content-actions-decline') }>
+								<PhoneDecline width = {	20 } height = { 20 } />
+								<span style='margin-left:5px'> {I18n.t('Decline')} </span >
+							</Button>
+							<Button onClick = { acceptClick }
+								className = {createClassName(styles, 'call-notification__content-actions-accept') }>
+								<PhoneAccept width = { 20 } height = { 20} />
+								<span style='margin-left:5px'> {I18n.t('Accept')} </span >
+							</Button>
+						</div>
+					</div>
+				)
+			}
+		</div>
+	);
+};
diff --git a/src/components/Calls/CallStatus.js b/src/components/Calls/CallStatus.js
new file mode 100644
index 000000000..d5f4ad851
--- /dev/null
+++ b/src/components/Calls/CallStatus.js
@@ -0,0 +1,12 @@
+export const CallStatus = {
+	RINGING: 'ringing',
+	DECLINED: 'declined',
+	IN_PROGRESS: 'inProgress', // although on Livechat we only use "IN_PROGRESS_SAME_TAB" and "IN_PROGRESS_DIFFERENT_TAB", we still need this status since on Rocket.Chat core, this is the status of ongoing calls
+	IN_PROGRESS_SAME_TAB: 'inProgressSameTab',
+	IN_PROGRESS_DIFFERENT_TAB: 'inProgressDifferentTab',
+	ENDED: 'ended',
+};
+
+export const isCallOngoing = (callStatus) => callStatus === CallStatus.IN_PROGRESS
+	|| callStatus === CallStatus.IN_PROGRESS_DIFFERENT_TAB
+	|| callStatus === CallStatus.IN_PROGRESS_SAME_TAB;
diff --git a/src/components/Calls/JoinCallButton.js b/src/components/Calls/JoinCallButton.js
new file mode 100644
index 000000000..a24ca88a3
--- /dev/null
+++ b/src/components/Calls/JoinCallButton.js
@@ -0,0 +1,50 @@
+import { h } from 'preact';
+
+import { Livechat } from '../../api';
+import I18n from '../../i18n';
+import VideoIcon from '../../icons/video.svg';
+import constants from '../../lib/constants';
+import store from '../../store';
+import { Button } from '../Button';
+import { createClassName } from '../helpers';
+import { isCallOngoing } from './CallStatus';
+import styles from './styles.scss';
+
+
+export const JoinCallButton = (props) => {
+	const { token, room } = store.state;
+
+	const clickJoinCall = () => {
+		switch (props.callProvider) {
+			case constants.jitsiCallStartedMessageType: {
+				window.open(props.url, room._id);
+				break;
+			}
+			case constants.webRTCCallStartedMessageType: {
+				window.open(`${ Livechat.client.host }/meet/${ room._id }?token=${ token }`, room._id);
+				break;
+			}
+		}
+	};
+	return (
+		<div className={createClassName(styles, 'joinCall')}>
+			{
+				isCallOngoing(props.callStatus)
+				&& (
+					<div>
+						<div className={createClassName(styles, 'joinCall__content')} >
+							<div className={createClassName(styles, 'joinCall__content-videoIcon')} >
+								<VideoIcon width={20} height={20} />
+							</div>
+							{ I18n.t('Join my room to start the video call') }
+						</div>
+						<Button onClick={clickJoinCall} className={createClassName(styles, 'joinCall__content-action')}>
+							<VideoIcon width={20} height={20} />
+							{I18n.t('Join Call')}
+						</Button>
+					</div>
+				)
+			}
+		</div>
+	);
+};
diff --git a/src/components/Calls/styles.scss b/src/components/Calls/styles.scss
new file mode 100644
index 000000000..333655e58
--- /dev/null
+++ b/src/components/Calls/styles.scss
@@ -0,0 +1,128 @@
+@import '../../styles/colors';
+@import '../../styles/variables';
+
+.call-notification {
+	position: relative;
+
+	display: flex;
+
+	width: 100%;
+	height: 50%;
+
+	&__content {
+		display: flex;
+		flex-direction: column;
+
+		width: 100%;
+		height: 100%;
+
+		background: #1f2329;
+
+		font-weight: 600;
+		justify-content: space-evenly;
+
+		&-avatar {
+			display: flex;
+
+			margin: 0 auto;
+			align-self: flex-end;
+		}
+
+		&-message {
+			margin: 0 auto;
+
+			color: #ffffff;
+		}
+
+		&-actions {
+			display: flex;
+			flex-direction: row;
+
+			margin: 0 auto;
+			margin-bottom: 15px;
+
+			color: white;
+
+			align-items: flex-end;
+
+			> button {
+				margin-bottom: 0;
+				margin-left: 10px;
+			}
+
+			&-accept {
+				border-color: green;
+				background-color: #2de0a5;
+			}
+
+			&-decline {
+				border-color: red;
+				background-color: #f5455c;
+			}
+		}
+	}
+}
+
+.call-iframe {
+	position: absolute;
+	top: 0;
+
+	width: 100%;
+	height: 41%;
+
+	&__content {
+		width: 100%;
+		height: 100%;
+	}
+}
+
+.joinCall {
+	width: 300px;
+	margin: 15px;
+
+	padding: 5px;
+
+	border: 1px solid #e4e7ea;
+
+	&__content {
+		display: flex;
+		flex-direction: row;
+
+		padding: 15px;
+
+		line-height: 16px;
+		justify-content: space-around;
+
+		&-videoIcon {
+			display: flex;
+
+			height: 7%;
+			margin-right: 10px;
+
+			padding: 5px;
+
+			border: 1px solid white;
+			background-color: #d1ebfe;
+		}
+
+		&-action {
+			display: block;
+
+			width: 120px;
+			margin-top: 0;
+			margin-bottom: 3%;
+			margin-left: 20%;
+			padding: 5px;
+
+			color: white;
+			border: 1px solid  blue;
+			background-color: #1d74f5;
+		}
+	}
+}
+
+@media screen and (min-width: 410px) {
+	.joinCall {
+		margin-left: 3%;
+	}
+}
diff --git a/src/components/Messages/Message/index.js b/src/components/Messages/Message/index.js
index 582b9e167..6bb44ee32 100644
--- a/src/components/Messages/Message/index.js
+++ b/src/components/Messages/Message/index.js
@@ -1,7 +1,10 @@
+import { formatDistance } from 'date-fns';
+import format from 'date-fns/format';
+import isToday from 'date-fns/isToday';
 import { h } from 'preact';
 
 import I18n from '../../../i18n';
-import { getAttachmentUrl, memo, normalizeTransferHistoryMessage } from '../../helpers';
+import { getAttachmentUrl, memo, normalizeTransferHistoryMessage, resolveDate } from '../../helpers';
 import { AudioAttachment } from '../AudioAttachment';
 import { FileAttachment } from '../FileAttachment';
 import { ImageAttachment } from '../ImageAttachment';
@@ -23,6 +26,7 @@ import {
 	MESSAGE_TYPE_LIVECHAT_CLOSED,
 	MESSAGE_TYPE_LIVECHAT_STARTED,
 	MESSAGE_TYPE_LIVECHAT_TRANSFER_HISTORY,
+	MESSAGE_WEBRTC_CALL,
 } from '../constants';
 
 const renderContent = ({
@@ -80,7 +84,16 @@ const renderContent = ({
 	),
 ].filter(Boolean);
 
-const getSystemMessageText = ({ t, conversationFinishedMessage, transferData, u }) =>
+
+const resolveWebRTCEndCallMessage = ({ webRtcCallEndTs, ts }) => {
+	const callEndTime = resolveDate(webRtcCallEndTs);
+	const callStartTime = resolveDate(ts);
+	const callDuration = formatDistance(callEndTime, callStartTime);
+	const time = format(callEndTime, isToday(callEndTime) ? 'HH:mm' : 'dddd HH:mm');
+	return `${ I18n.t('Call ended at %{time}', { time }) } ${ I18n.t(' - Lasted %{callDuration}', { callDuration }) }`;
+};
+
+const getSystemMessageText = ({ t, conversationFinishedMessage, transferData, u, webRtcCallEndTs, ts }) =>
 	(t === MESSAGE_TYPE_ROOM_NAME_CHANGED && I18n.t('Room name changed'))
 	|| (t === MESSAGE_TYPE_USER_ADDED && I18n.t('User added by'))
 	|| (t === MESSAGE_TYPE_USER_REMOVED && I18n.t('User removed by'))
@@ -89,7 +102,8 @@ const getSystemMessageText = ({ t, conversationFinishedMessage, transferData, u
 	|| (t === MESSAGE_TYPE_WELCOME && I18n.t('Welcome'))
 	|| (t === MESSAGE_TYPE_LIVECHAT_CLOSED && (conversationFinishedMessage || I18n.t('Conversation finished')))
 	|| (t === MESSAGE_TYPE_LIVECHAT_STARTED && I18n.t('Chat started'))
-	|| (t === MESSAGE_TYPE_LIVECHAT_TRANSFER_HISTORY && normalizeTransferHistoryMessage(transferData, u));
+	|| (t === MESSAGE_TYPE_LIVECHAT_TRANSFER_HISTORY && normalizeTransferHistoryMessage(transferData, u))
+	|| (t === MESSAGE_WEBRTC_CALL && webRtcCallEndTs && ts && resolveWebRTCEndCallMessage({ webRtcCallEndTs, ts }));
 
 const getMessageUsernames = (compact, message) => {
 	if (compact || !message.u) {
@@ -108,7 +122,6 @@ export const Message = memo(({
 	avatarResolver,
 	attachmentResolver = getAttachmentUrl,
 	use,
-	ts,
 	me,
 	compact,
 	className,
@@ -140,6 +153,6 @@ export const Message = memo(({
 				attachmentResolver,
 			})}
 		</MessageContent>
-		{!compact && !message.t && <MessageTime normal={!me} inverse={me} ts={ts} />}
+		{!compact && !message.t && <MessageTime normal={!me} inverse={me} ts={message.ts} />}
 	</MessageContainer>
 ));
diff --git a/src/components/Messages/MessageList/index.js b/src/components/Messages/MessageList/index.js
index ff5f8ddce..914200780 100644
--- a/src/components/Messages/MessageList/index.js
+++ b/src/components/Messages/MessageList/index.js
@@ -2,13 +2,16 @@ import { parseISO } from 'date-fns/fp';
 import isSameDay from 'date-fns/isSameDay';
 import { h } from 'preact';
 
+import constants from '../../../lib/constants';
+import store from '../../../store';
+import { isCallOngoing } from '../../Calls/CallStatus';
+import { JoinCallButton } from '../../Calls/JoinCallButton';
 import { createClassName, getAttachmentUrl, MemoizedComponent } from '../../helpers';
 import { Message } from '../Message';
 import { MessageSeparator } from '../MessageSeparator';
 import { TypingIndicator } from '../TypingIndicator';
 import styles from './styles.scss';
 
-
 export class MessageList extends MemoizedComponent {
 	static defaultProps = {
 		typingUsernames: [],
@@ -106,12 +109,25 @@ export class MessageList extends MemoizedComponent {
 		typingUsernames,
 	}) => {
 		const items = [];
+		const { incomingCallAlert } = store.state;
+		const { ongoingCall } = store.state;
 
 		for (let i = 0; i < messages.length; ++i) {
 			const previousMessage = messages[i - 1];
 			const message = messages[i];
 			const nextMessage = messages[i + 1];
 
+			if ((message.t === constants.webRTCCallStartedMessageType || message.t === constants.jitsiCallStartedMessageType)
+				&& message.actionLinks && message.actionLinks.length
+				&& ongoingCall && isCallOngoing(ongoingCall.callStatus)
+				&& !message.webRtcCallEndTs) {
+				const { url, callProvider, rid } = incomingCallAlert || {};
+				items.push(
+					<JoinCallButton callStatus={ongoingCall.callStatus} url={url} callProvider={callProvider} rid={rid} />,
+				);
+				continue;
+			}
+
 			const showDateSeparator = !previousMessage || !isSameDay(parseISO(message.ts), parseISO(previousMessage.ts));
 			if (showDateSeparator) {
 				items.push(
diff --git a/src/components/Messages/constants.js b/src/components/Messages/constants.js
index 94be2ca13..e4a0d92f5 100644
--- a/src/components/Messages/constants.js
+++ b/src/components/Messages/constants.js
@@ -7,3 +7,5 @@ export const MESSAGE_TYPE_WELCOME = 'wm';
 export const MESSAGE_TYPE_LIVECHAT_CLOSED = 'livechat-close';
 export const MESSAGE_TYPE_LIVECHAT_STARTED = 'livechat-started';
 export const MESSAGE_TYPE_LIVECHAT_TRANSFER_HISTORY = 'livechat_transfer_history';
+export const MESSAGE_JITSI_CALL = 'jitsi_call_started';
+export const MESSAGE_WEBRTC_CALL = 'livechat_webrtc_video_call';
diff --git a/src/components/helpers.js b/src/components/helpers.js
index 06d1d040b..57f467b00 100644
--- a/src/components/helpers.js
+++ b/src/components/helpers.js
@@ -1,3 +1,4 @@
+import parseISO from 'date-fns/parseISO';
 import { Component } from 'preact';
 
 import { Livechat, useSsl } from '../api';
@@ -136,6 +137,7 @@ export const sortArrayByColumn = (array, column, inverted) => array.sort((a, b)
 	return 1;
 });
 
+
 export const normalizeTransferHistoryMessage = (transferData, sender) => {
 	if (!transferData) {
 		return;
@@ -173,7 +175,6 @@ export const parseOfflineMessage = (fields = {}) => {
 };
 export const normalizeDOMRect = ({ left, top, right, bottom }) => ({ left, top, right, bottom });
 
-
 export const visibility = (() => {
 	if (typeof document.hidden !== 'undefined') {
 		return {
@@ -244,3 +245,22 @@ export const isActiveSession = () => {
 
 	return sessionId === firstSessionId;
 };
+
+export const isMobileDevice = () => window.innerWidth <= 800 && window.innerHeight >= 630;
+
+export const resolveDate = (dateInput) => {
+	switch (typeof dateInput) {
+		case Date: {
+			return dateInput;
+		}
+		case 'object': {
+			return new Date(dateInput.$date);
+		}
+		case 'string': {
+			return parseISO(dateInput);
+		}
+		default: {
+			return new Date(dateInput);
+		}
+	}
+};
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 8df1c29eb..77138ed2c 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -24,6 +24,7 @@
     "drop_here_to_upload_a_file_e5f4dd60": "Drop here to upload a file",
     "email_22a7d52d": "Email",
     "enable_notifications_a3daf4b1": "Enable notifications",
+    "error_getting_call_alert": "Error occurred while receiving a call notification",
     "error_closing_chat_4c5e29d7": "Error closing chat.",
     "error_removing_user_data_ce507478": "Error removing user data.",
     "error_starting_a_new_conversation_reason_a1b491a1": "Error starting a new conversation: %{reason}",
@@ -37,6 +38,8 @@
     "from_transferred_the_chat_to_the_department_to_752ab298": "%{from} transferred the chat to the department %{to}",
     "from_transferred_the_chat_to_to_15bdcb11": "%{from} transferred the chat to %{to}",
     "gdpr_8b366c2b": "GDPR",
+    "call_start_time": "Call Started at %{time}",
+    "call_end_time": "Call Ended at %{time}",
     "go_to_menu_options_forget_remove_my_personal_data__99c40934": "Go to **menu options → Forget/Remove my personal data** to request the immediate removal of your data.",
     "hiddenelementscount_more_c017d614": "+ %{hiddenElementsCount} more",
     "i_agree_df2ecbd4": "I Agree",
@@ -88,4 +91,4 @@
     "your_spot_is_spot_a35cd288": "Your spot is #%{spot}",
     "your_spot_is_spot_estimated_wait_time_estimatedwai_d0ff46e0": "Your spot is #%{spot} (Estimated wait time: %{estimatedWaitTime})"
   }
-}
\ No newline at end of file
+}
diff --git a/src/icons/phone.svg b/src/icons/phone.svg
new file mode 100644
index 000000000..074a7c13c
--- /dev/null
+++ b/src/icons/phone.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="268.000000pt" height="248.000000pt" viewBox="0 0 268.000000 248.000000" preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,248.000000) scale(0.100000,-0.100000)" fill="currentColor" stroke="none">
+<path d="M832 2174 c-201 -54 -376 -180 -434 -314 -54 -124 -42 -227 47 -407 154 -310 457 -681 740 -907 242 -193 543 -369 679 -396 222 -45 432 128 525 434 37 120 26 195 -38 249 -17 14 -119 69 -228 122 -267 132 -277 132 -430 35 l-53 -33 -56 37 c-66 44 -277 246 -332 319 -80 105 -78 92 -22 187 75 127 74 135 -51 395 -55 116 -112 223 -127 239 -53 56 -118 68 -220 40z m173 -350 c47 -97 85 -180 85 -185 0 -5 -15 -32 -33 -61 -18 -29 -38 -66 -45 -81 -18 -41 -14 -126 7 -172 64 -139 373 -449 525 -527 75 -38 186 -19 273 48 41 31 32 33 256 -77 l149 -73 -6 -35 c-9 -57 -81 -196 -127 -246 -96 -104 -158 -108 -331 -22 -280 140 -599 395 -806 646 -257 310 -416 593 -395 704 17 92 118 179 271 233 37 13 73 24 80 24 6 0 50 -79 97 -176z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/src/icons/phoneOff.svg b/src/icons/phoneOff.svg
new file mode 100644
index 000000000..a92af93a4
--- /dev/null
+++ b/src/icons/phoneOff.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+<g stroke="none" fill="currentColor" fill-rule="evenodd">
+    <path d="M25.0351 20.5497C25.7374 20.7914 26.6274 20.6304 27.1415 19.9077C27.8415 18.9237 28.5476 17.3882 28.6704 15.8571C28.7326 15.0809 28.6487 14.2526 28.2839 13.4927C27.9105 12.7149 27.2739 12.0755 26.3552 11.6562C24.6313 10.8693 22.4226 10.398 20.499 10.1204C18.5632 9.84115 16.8273 9.74603 16 9.74603V11.6982C16.725 11.6982 18.3674 11.7853 20.2202 12.0526C22.085 12.3217 24.0752 12.7614 25.5445 13.4321C26.0679 13.671 26.3578 13.9913 26.524 14.3375C26.6988 14.7016 26.7677 15.1616 26.7244 15.7011C26.6396 16.7587 26.1394 17.9131 25.6145 18.6845L21.6332 17.3141C21.6312 17.3128 21.6259 17.3088 21.6183 17.2986C21.6042 17.2796 21.589 17.247 21.5842 17.2052C21.5438 16.8501 21.4716 16.434 21.3456 16.041C21.2274 15.672 21.0245 15.2022 20.6497 14.86C20.3231 14.5619 19.8645 14.4178 19.5405 14.3352C19.1682 14.2402 18.7415 14.1733 18.3234 14.1253C17.4841 14.0288 16.5806 13.9974 16 13.9974V15.9496C16.5281 15.9496 17.3543 15.9789 18.1006 16.0647C18.4752 16.1078 18.8053 16.1623 19.058 16.2268C19.2284 16.2702 19.3135 16.3062 19.3443 16.3192L19.3472 16.3204C19.3719 16.3568 19.4268 16.4502 19.4866 16.6368C19.5606 16.8678 19.6129 17.1485 19.6446 17.4264C19.7278 18.1553 20.195 18.8836 20.9975 19.1598L25.0351 20.5497ZM6.96482 20.5495C6.26251 20.7913 5.37252 20.6303 4.85836 19.9075C4.15836 18.9236 3.45233 17.3881 3.32956 15.857C3.26731 15.0808 3.35116 14.2525 3.71601 13.4925C4.0894 12.7148 4.72604 12.0754 5.64471 11.6561C7.36862 10.8692 9.57726 10.3979 11.5009 10.1203C13.4367 9.84102 15.1726 9.74591 15.9999 9.74591V11.6981C15.2749 11.6981 13.6325 11.7852 11.7797 12.0525C9.91486 12.3215 7.92472 12.7613 6.45536 13.432C5.93197 13.6709 5.6421 13.9912 5.47588 14.3374C5.30111 14.7015 5.23223 15.1615 5.27549 15.701C5.36029 16.7586 5.86053 17.913 6.38542 18.6844L10.3667 17.3139C10.3687 17.3127 10.374 17.3087 10.3816 17.2985C10.3957 17.2794 10.4109 17.2469 10.4157 17.2051C10.4562 16.85 10.5283 16.4338 10.6543 16.0409C10.7725 15.6719 10.9754 15.2021 11.3502 14.8599C11.6768 14.5617 12.1354 14.4177 12.4594 14.3351C12.8318 14.2401 13.2584 14.1732 13.6765 14.1252C14.5158 14.0287 15.4193 13.9973 15.9999 13.9973V15.9495C15.4718 15.9495 14.6456 15.9788 13.8993 16.0646C13.5247 16.1076 13.1946 16.1622 12.9419 16.2267C12.7715 16.2701 12.6864 16.3061 12.6556 16.3191L12.6527 16.3203C12.628 16.3566 12.5731 16.4501 12.5133 16.6367C12.4393 16.8676 12.387 17.1483 12.3553 17.4263C12.2721 18.1551 11.8049 18.8834 11.0024 19.1597L6.96482 20.5495Z"/>
+    </g>
+</svg>
diff --git a/src/icons/video.svg b/src/icons/video.svg
new file mode 100644
index 000000000..e735cfab1
--- /dev/null
+++ b/src/icons/video.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+<g stroke="none" fill="currentColor" fill-rule="evenodd">
+  <path d="M8 6.3335C8 5.78121 8.59695 5.3335 9.33333 5.3335H17.3333C18.0697 5.3335 18.6667 5.78121 18.6667 6.3335C18.6667 6.88578 18.0697 7.3335 17.3333 7.3335H9.33333C8.59695 7.3335 8 6.88578 8 6.3335ZM5 11.9998V23.9998C5 24.1839 5.14924 24.3332 5.33333 24.3332H21.3333C21.5174 24.3332 21.6667 24.1839 21.6667 23.9998V21.3332C21.6667 20.9777 21.8554 20.649 22.1623 20.4697C22.4692 20.2904 22.8482 20.2875 23.1578 20.4621L26.215 22.186C26.2941 22.2306 26.3668 22.2857 26.431 22.3499C26.641 22.5599 27 22.4112 27 22.1142V13.8855C27 13.5885 26.641 13.4398 26.431 13.6498C26.3668 13.714 26.2941 13.7691 26.215 13.8137L23.1578 15.5376C22.8482 15.7122 22.4692 15.7093 22.1623 15.53C21.8554 15.3507 21.6667 15.022 21.6667 14.6665V11.9998C21.6667 11.8157 21.5174 11.6665 21.3333 11.6665H5.33333C5.14924 11.6665 5 11.8157 5 11.9998ZM5.33333 9.6665H21.3333C22.622 9.6665 23.6667 10.7112 23.6667 11.9998V12.9546L25.1285 12.1303C26.6103 10.8181 29 11.8585 29 13.8855V22.1142C29 24.1412 26.6103 25.1815 25.1285 23.8693L23.6667 23.0451V23.9998C23.6667 25.2885 22.622 26.3332 21.3333 26.3332H5.33333C4.04467 26.3332 3 25.2885 3 23.9998V11.9998C3 10.7112 4.04467 9.6665 5.33333 9.6665Z"/>
+</g>
+</svg>
diff --git a/src/icons/videoIcon.svg b/src/icons/videoIcon.svg
new file mode 100644
index 000000000..e735cfab1
--- /dev/null
+++ b/src/icons/videoIcon.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+<g stroke="none" fill="currentColor" fill-rule="evenodd">
+  <path d="M8 6.3335C8 5.78121 8.59695 5.3335 9.33333 5.3335H17.3333C18.0697 5.3335 18.6667 5.78121 18.6667 6.3335C18.6667 6.88578 18.0697 7.3335 17.3333 7.3335H9.33333C8.59695 7.3335 8 6.88578 8 6.3335ZM5 11.9998V23.9998C5 24.1839 5.14924 24.3332 5.33333 24.3332H21.3333C21.5174 24.3332 21.6667 24.1839 21.6667 23.9998V21.3332C21.6667 20.9777 21.8554 20.649 22.1623 20.4697C22.4692 20.2904 22.8482 20.2875 23.1578 20.4621L26.215 22.186C26.2941 22.2306 26.3668 22.2857 26.431 22.3499C26.641 22.5599 27 22.4112 27 22.1142V13.8855C27 13.5885 26.641 13.4398 26.431 13.6498C26.3668 13.714 26.2941 13.7691 26.215 13.8137L23.1578 15.5376C22.8482 15.7122 22.4692 15.7093 22.1623 15.53C21.8554 15.3507 21.6667 15.022 21.6667 14.6665V11.9998C21.6667 11.8157 21.5174 11.6665 21.3333 11.6665H5.33333C5.14924 11.6665 5 11.8157 5 11.9998ZM5.33333 9.6665H21.3333C22.622 9.6665 23.6667 10.7112 23.6667 11.9998V12.9546L25.1285 12.1303C26.6103 10.8181 29 11.8585 29 13.8855V22.1142C29 24.1412 26.6103 25.1815 25.1285 23.8693L23.6667 23.0451V23.9998C23.6667 25.2885 22.622 26.3332 21.3333 26.3332H5.33333C4.04467 26.3332 3 25.2885 3 23.9998V11.9998C3 10.7112 4.04467 9.6665 5.33333 9.6665Z"/>
+</g>
+</svg>
diff --git a/src/lib/constants.js b/src/lib/constants.js
index 014215c02..717175546 100644
--- a/src/lib/constants.js
+++ b/src/lib/constants.js
@@ -4,4 +4,6 @@ export default {
 	livechatConnectedAlertId: 'LIVECHAT_CONNECTED',
 	livechatDisconnectedAlertId: 'LIVECHAT_DISCONNECTED',
 	livechatQueueMessageId: 'LIVECHAT_QUEUE_MESSAGE',
+	webRTCCallStartedMessageType: 'livechat_webrtc_video_call',
+	jitsiCallStartedMessageType: 'jitsi_call_started',
 };
diff --git a/src/lib/room.js b/src/lib/room.js
index e4e6c0e0b..6d742d947 100644
--- a/src/lib/room.js
+++ b/src/lib/room.js
@@ -1,15 +1,19 @@
 import { route } from 'preact-router';
 
 import { Livechat } from '../api';
-import { setCookies, upsert, canRenderMessage } from '../components/helpers';
+import { CallStatus, isCallOngoing } from '../components/Calls/CallStatus';
+import { setCookies, upsert, canRenderMessage, createToken } from '../components/helpers';
+import I18n from '../i18n';
 import { store } from '../store';
 import { normalizeAgent } from './api';
 import Commands from './commands';
+import constants from './constants';
 import { loadConfig, processUnread } from './main';
 import { parentCall } from './parentCall';
 import { normalizeMessage, normalizeMessages } from './threads';
 import { handleTranscript } from './transcript';
 
+
 const commands = new Commands();
 
 export const closeChat = async ({ transcriptRequested } = {}) => {
@@ -22,11 +26,41 @@ export const closeChat = async ({ transcriptRequested } = {}) => {
 	route('/chat-finished');
 };
 
+// TODO: use a separate event to listen to call start event. Listening on the message type isn't a good solution
+export const processIncomingCallMessage = async (message) => {
+	const { alerts } = store.state;
+	try {
+		await store.setState({
+			incomingCallAlert: {
+				show: true,
+				callProvider: message.t,
+				callerUsername: message.u.username,
+				rid: message.rid,
+				time: message.ts,
+				callId: message._id,
+				url: message.t === constants.jitsiCallStartedMessageType ? message.customFields.jitsiCallUrl : '',
+			},
+			ongoingCall: {
+				callStatus: CallStatus.RINGING,
+				time: message.ts,
+			},
+		});
+	} catch (err) {
+		console.error(err);
+		const alert = { id: createToken(), children: I18n.t('error_getting_call_alert'), error: true, timeout: 5000 };
+		await store.setState({ alerts: (alerts.push(alert), alerts) });
+	}
+};
+
 const processMessage = async (message) => {
 	if (message.t === 'livechat-close') {
 		closeChat(message);
 	} else if (message.t === 'command') {
 		commands[message.msg] && commands[message.msg]();
+	} else if (message.webRtcCallEndTs) {
+		await store.setState({ ongoingCall: { callStatus: CallStatus.ENDED, time: message.ts }, incomingCallAlert: null });
+	} else if (message.t === constants.webRTCCallStartedMessageType || message.t === constants.jitsiCallStartedMessageType) {
+		await processIncomingCallMessage(message);
 	}
 };
 
@@ -152,11 +186,13 @@ Livechat.onMessage(async (message) => {
 });
 
 export const getGreetingMessages = (messages) => messages && messages.filter((msg) => msg.trigger);
+export const getLatestCallMessage = (messages) => messages && messages.filter((msg) => msg.t === constants.webRTCCallStartedMessageType || msg.t === constants.jitsiCallStartedMessageType).pop();
 
 export const loadMessages = async () => {
-	const { messages: storedMessages, room: { _id: rid } = {} } = store.state;
-	const previousMessages = getGreetingMessages(storedMessages);
+	const { ongoingCall } = store.state;
 
+	const { messages: storedMessages, room: { _id: rid, callStatus } = {} } = store.state;
+	const previousMessages = getGreetingMessages(storedMessages);
 	if (!rid) {
 		return;
 	}
@@ -172,6 +208,48 @@ export const loadMessages = async () => {
 		const lastMessage = messages[messages.length - 1];
 		await store.setState({ lastReadMessageId: lastMessage && lastMessage._id });
 	}
+
+	if (ongoingCall && isCallOngoing(ongoingCall.callStatus)) {
+		return;
+	}
+
+	const latestCallMessage = getLatestCallMessage(messages);
+	if (!latestCallMessage) {
+		return;
+	}
+	if (latestCallMessage.t === constants.jitsiCallStartedMessageType) {
+		await store.setState({
+			ongoingCall: {
+				callStatus: CallStatus.IN_PROGRESS_DIFFERENT_TAB,
+				time: latestCallMessage.ts,
+			},
+			incomingCallAlert: {
+				show: false,
+				callProvider:
+				latestCallMessage.t,
+				url: latestCallMessage.customFields.jitsiCallUrl,
+			},
+		});
+		return;
+	}
+	switch (callStatus) {
+		case CallStatus.IN_PROGRESS: {
+			await store.setState({
+				ongoingCall: {
+					callStatus: CallStatus.IN_PROGRESS_DIFFERENT_TAB,
+					time: latestCallMessage.ts,
+				},
+				incomingCallAlert: {
+					show: false,
+					callProvider: latestCallMessage.t,
+				},
+			});
+			break;
+		}
+		case CallStatus.RINGING: {
+			processIncomingCallMessage(latestCallMessage);
+		}
+	}
 };
 
 export const loadMoreMessages = async () => {
diff --git a/src/routes/Chat/component.js b/src/routes/Chat/component.js
index 0fa0774b3..dfc3cf196 100644
--- a/src/routes/Chat/component.js
+++ b/src/routes/Chat/component.js
@@ -2,6 +2,9 @@ import { Picker } from 'emoji-mart';
 import { h, Component } from 'preact';
 
 import { Button } from '../../components/Button';
+import { CallIframe } from '../../components/Calls/CallIFrame';
+import { CallNotification } from '../../components/Calls/CallNotification';
+import { CallStatus } from '../../components/Calls/CallStatus';
 import { Composer, ComposerAction, ComposerActions } from '../../components/Composer';
 import { FilesDropTarget } from '../../components/FilesDropTarget';
 import { FooterOptions, CharCounter } from '../../components/Footer';
@@ -118,6 +121,9 @@ export default class Chat extends Component {
 		registrationRequired,
 		onRegisterUser,
 		limitTextLength,
+		incomingCallAlert,
+		ongoingCall,
+		dispatch,
 		...props
 	}, {
 		atBottom = true,
@@ -144,6 +150,8 @@ export default class Chat extends Component {
 				onUpload={onUpload}
 			>
 				<Screen.Content nopadding>
+					{ incomingCallAlert && !!incomingCallAlert.show && <CallNotification { ...incomingCallAlert } dispatch={dispatch} />}
+					{ incomingCallAlert?.show && ongoingCall && ongoingCall.callStatus === CallStatus.IN_PROGRESS_SAME_TAB ? <CallIframe { ...incomingCallAlert } /> : null }
 					<div className={createClassName(styles, 'chat__messages', { atBottom, loading })}>
 						<MessageList
 							ref={this.handleMessagesContainerRef}
diff --git a/src/routes/Chat/container.js b/src/routes/Chat/container.js
index d9755fc1b..3e3bf60af 100644
--- a/src/routes/Chat/container.js
+++ b/src/routes/Chat/container.js
@@ -401,6 +401,8 @@ export const ChatConnector = ({ ref, ...props }) => (
 			lastReadMessageId,
 			triggerAgent,
 			queueInfo,
+			incomingCallAlert,
+			ongoingCall,
 		}) => (
 			<ChatContainer
 				ref={ref}
@@ -456,6 +458,8 @@ export const ChatConnector = ({ ref, ...props }) => (
 				nameFieldRegistrationForm={nameFieldRegistrationForm}
 				emailFieldRegistrationForm={emailFieldRegistrationForm}
 				limitTextLength={limitTextLength}
+				incomingCallAlert={incomingCallAlert}
+				ongoingCall={ongoingCall}
 			/>
 		)}
 	</Consumer>
diff --git a/src/store/index.js b/src/store/index.js
index 47d031d06..fdbc7b13e 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -34,9 +34,11 @@ const initialState = {
 	visible: true,
 	minimized: true,
 	unread: null,
+	incomingCallAlert: null,
+	ongoingCall: null,	// TODO: store call info like url, startTime, timeout, etc here
 };
 
-const dontPersist = ['messages', 'typing', 'loading', 'alerts', 'unread', 'noMoreMessages', 'modal'];
+const dontPersist = ['messages', 'typing', 'loading', 'alerts', 'unread', 'noMoreMessages', 'modal', 'incomingCallAlert', 'ongoingCall'];
 export const store = new Store(initialState, { dontPersist });
 
 if (process.env.NODE_ENV === 'development') {
diff --git a/yarn.lock b/yarn.lock
index e56d84160..438d8b101 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1598,10 +1598,10 @@
   dependencies:
     eslint-plugin-import "^2.17.2"
 
-"@rocket.chat/sdk@^1.0.0-alpha.41":
-  version "1.0.0-alpha.41"
-  resolved "https://registry.yarnpkg.com/@rocket.chat/sdk/-/sdk-1.0.0-alpha.41.tgz#8fcae2885786bec56a56b6d9a8cccaa365b77364"
-  integrity sha512-jQ+/exEQMOv+bwH+yzPTC0oJGIKj/AlMc95IvWAn/vHDLjjS3aGzpIpZhBwsMOBVvb/5N8rnq6kEleCkEJk28g==
+"@rocket.chat/sdk@^1.0.0-alpha.42":
+  version "1.0.0-alpha.42"
+  resolved "https://registry.yarnpkg.com/@rocket.chat/sdk/-/sdk-1.0.0-alpha.42.tgz#e3adc7ee245c6947fe368c0d3b8494c5a97c0673"
+  integrity sha512-e3roTprM3UhlXOym2kN8o2doN1vBBS23obZgupPitecZWpK8eQghLk78a4L4uDAqBwFZ65Xphs3L1gaPSZJARQ==
   dependencies:
     js-sha256 "^0.9.0"
     lru-cache "^4.1.1"