update verison: 0.8.3

package.json

 {
 	"name": "boxdialer",
-	"version": "0.8.2",
+	"version": "0.8.3",
 	"description": "",
 	"main": "src/boxDialer.js",
 	"scripts": {

src/components/BxMiniWidjetUi/index.jsx

+/** @format */
+
+import React from 'react';
+import BxMiniWidjetUiStyle, { DialPadIcon } from './style';
+import TimerUi from '../TimerUi';
+
+const BxMiniWidjetUi = ({
+	widjetState,
+	phoneNumber,
+	reason,
+	widjetVersion,
+	leftTime,
+	onClick,
+	position,
+}) => {
+	return (
+		<BxMiniWidjetUiStyle
+			status={widjetState}
+			onClick={onClick}
+			position={position}>
+			<div className='left'>
+				<p className='title'>{phoneNumber}</p>
+				<p>
+					<span className='status'>{widjetState}</span>
+					<TimerUi reason={reason} time={leftTime} />
+				</p>
+			</div>
+			<div className='bottom'>
+				<BxMiniWidjetUiStyle.StatusLine status={widjetState}>
+					<p className='verison'>v {widjetVersion}</p>
+				</BxMiniWidjetUiStyle.StatusLine>
+			</div>
+		</BxMiniWidjetUiStyle>
+	);
+};
+
+export default BxMiniWidjetUi;

src/components/BxMiniWidjetUi/style.js

+/** @format */
+
+import styled from 'styled-components';
+import CallIcon from '@mui/icons-material/Dialpad';
+import { boxDialerWidjetPosition } from '../../lib/boxDialerWidjetPosition';
+
+const BxMiniWidjetUiStyle = styled.div`
+	* {
+		margin: 0;
+		padding: 0;
+		box-sizing: border-box;
+	}
+
+	height: 70px;
+	width: 80px;
+	border-radius: 13px;
+	background-color: #164e63e6;
+	cursor: pointer;
+	color: white;
+	z-index: 999;
+	position: fixed;
+	display: grid;
+	align-items: center;
+	grid-template-columns: 1fr;
+	grid-template-rows: 1fr 10px;
+
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+	${({ position }) => boxDialerWidjetPosition[position].block}
+
+	.left {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+	.right {
+	}
+	.title {
+		font-size: 20px;
+		font-weight: 600;
+	}
+	.bottom {
+		height: 100%;
+		grid-column: 1/3;
+		grid-row: 2/3;
+	}
+	.status {
+		border-radius: 10px;
+		padding: 0 3px;
+		margin: 0 5px;
+		font-size: 12px;
+		background-color: ${({ status }) =>
+			status === 'pending'
+				? 'orange'
+				: status === 'connected'
+				? '#a0c13d'
+				: '#ccc'};
+		color: ${({ status }) =>
+			status === 'pending' ? '#fff' : status === 'connected' ? '#333' : '#ccc'};
+	}
+`;
+BxMiniWidjetUiStyle.StatusLine = styled.div`
+	height: 100%;
+	background-color: ${({ backColor }) => backColor};
+	border-bottom-left-radius: 30px;
+	border-bottom-right-radius: 30px;
+	background-color: ${({ status }) =>
+		status === 'pending'
+			? 'orange'
+			: status === 'connected'
+			? '#a0c13d'
+			: '#ccc'};
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	padding: 0 10px 0 0;
+	color: green;
+	.verison {
+		font-size: 10px;
+		font-weight: bold;
+		float: right;
+	}
+`;
+const DialPadIcon = styled(CallIcon)`
+	font-size: 26px;
+`;
+
+export { DialPadIcon };
+export default BxMiniWidjetUiStyle;

src/components/DefaultWidjetUi/index.jsx

@@ -4,16 +4,20 @@ import React from 'react';
 import DefaultWidjetStyle, { DialPadIcon } from './style';
 import TimerUi from '../TimerUi';
 
-const DefaultWidjet = ({
+const DefaultWidjetUi = ({
 	widjetState,
 	phoneNumber,
 	reason,
 	widjetVersion,
 	leftTime,
 	onClick,
+	position,
 }) => {
 	return (
-		<DefaultWidjetStyle status={widjetState} onClick={onClick}>
+		<DefaultWidjetStyle
+			status={widjetState}
+			onClick={onClick}
+			position={position}>
 			<div className='left'>
 				<p className='title'>{phoneNumber}</p>
 				<p>
@@ -33,4 +37,4 @@ const DefaultWidjet = ({
 	);
 };
 
-export default DefaultWidjet;
+export default DefaultWidjetUi;

src/components/DefaultWidjetUi/style.js

@@ -2,6 +2,7 @@
 
 import styled from 'styled-components';
 import CallIcon from '@mui/icons-material/Dialpad';
+import { boxDialerWidjetPosition } from '../../lib/boxDialerWidjetPosition';
 
 const DefaultWidjetStyle = styled.div`
 	* {
@@ -20,9 +21,7 @@ const DefaultWidjetStyle = styled.div`
 	z-index: 999;
 
 	position: fixed;
-	bottom: 30px;
-	left: 50px;
-
+	${({ position }) => boxDialerWidjetPosition[position].block}
 	display: grid;
 	align-items: center;
 	grid-template-columns: 1fr 30px;

src/components/ModalPhoneNumpad/style.js

-import styled from 'styled-components'
-import KeyboardBackspaceIcon from "@mui/icons-material/KeyboardBackspace"
+/** @format */
+
+import styled from 'styled-components';
+import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace';
+import { boxDialerWidjetPosition } from '../../lib/boxDialerWidjetPosition';
 
 const ModalPhoneNumpadStyle = styled.div`
-  width: 230px;
-  position: fixed;
-  bottom: 120px;
-  transition: 0.2s;
-  z-index: 999;
-  transform: translate(${({hidden}) => (hidden ? '-300px' : '325px')}, 0%);
-  left: -300px;
-  background-color: #c9d5d9;
-  border-radius: 20px;
-  padding: 15px;
-  display: grid;
-  grid-template-rows: 40px 1fr;
-  grid-gap: 15px;
-  cursor: default;
+	width: 230px;
+	position: fixed;
+	bottom: 120px;
+	transition: 0.2s;
+	z-index: 999;
+	${({ hidden, position }) =>
+		hidden
+			? boxDialerWidjetPosition[position].numpad.hidden
+			: boxDialerWidjetPosition[position].numpad.seen}
+
+	background-color: #c9d5d9;
+	border-radius: 20px;
+	padding: 15px;
+	display: grid;
+	grid-template-rows: 40px 1fr;
+	grid-gap: 15px;
+	cursor: default;
 `;
 ModalPhoneNumpadStyle.InputArea = styled.div`
-  position: relative;
+	position: relative;
 `;
 ModalPhoneNumpadStyle.ButtonArea = styled.div`
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  grid-gap: 8px;
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr;
+	grid-gap: 8px;
 `;
 const Input = styled.input`
-  width: 100%;
-  height: 100%;
-  border-radius: 3px;
-  background-color: #fff;
-  border: 0;
-  padding: 0 35px 0 10px;
-  font-size: 22px;
-  color: #000;
+	width: 100%;
+	height: 100%;
+	border-radius: 3px;
+	background-color: #fff;
+	border: 0;
+	padding: 0 35px 0 10px;
+	font-size: 22px;
+	color: #000;
 
-  :focus {
-    border-color: inherit;
-    -webkit-box-shadow: none;
-    box-shadow: none;
-    padding: 0 10px;
-    font-size: 24px;
-    outline: 0 none;
-  }
+	:focus {
+		border-color: inherit;
+		-webkit-box-shadow: none;
+		box-shadow: none;
+		padding: 0 10px;
+		font-size: 24px;
+		outline: 0 none;
+	}
 
-  position: relative;
-  display: inline-block;
-  margin: 0;
-  outline: none;
+	position: relative;
+	display: inline-block;
+	margin: 0;
+	outline: none;
 
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
+	&::-webkit-outer-spin-button,
+	&::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
 
-  /* Firefox */
+	/* Firefox */
 
-  &[type='number'] {
-    -moz-appearance: textfield;
-  }
+	&[type='number'] {
+		-moz-appearance: textfield;
+	}
 `;
 Input.BackSpaceIcon = styled(KeyboardBackspaceIcon)`
-  color: black;
-  position: absolute;
-  right: 5px;
-  cursor: pointer;
-  top: 50%;
-  transform: translate(0, -50%);
+	color: black;
+	position: absolute;
+	right: 5px;
+	cursor: pointer;
+	top: 50%;
+	transform: translate(0, -50%);
 `;
 
 const NumberButton = styled.div`
-  color: #fff;
-  font-weight: bold;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 7px;
-  font-size: 22px;
-  cursor: pointer;
-  height: 33px;
-  background-color: ${({
-                         status, type
-                       }) => type === 'call_button' ? status === 'pending' ? 'orange' : status === 'connected' && '#a0c13d' : '#5e5e5e'};
+	color: #fff;
+	font-weight: bold;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-radius: 7px;
+	font-size: 22px;
+	cursor: pointer;
+	height: 33px;
+	background-color: ${({ status, type }) =>
+		type === 'call_button'
+			? status === 'pending'
+				? 'orange'
+				: status === 'connected' && '#a0c13d'
+			: '#5e5e5e'};
 `;
 NumberButton.Icon = styled.div`
-  font-size: 20px;
+	font-size: 20px;
 `;
 
-export {NumberButton, Input}
-export default ModalPhoneNumpadStyle
+export { NumberButton, Input };
+export default ModalPhoneNumpadStyle;

src/lib/boxDialerWidjetPosition.js

+/** @format */
+
+export const boxDialerWidjetPosition = {
+	bottomLeft: {
+		block: {
+			bottom: '30px',
+			left: '50px',
+		},
+		numpad: {
+			hidden: {
+				left: '-300px',
+			},
+			seen: {
+				left: '25px',
+			},
+		},
+	},
+	bottomCenter: {
+		block: {
+			transform: 'translate(-50%, 0)',
+			bottom: '30px',
+			left: '50%',
+		},
+		numpad: {
+			hidden: {
+				bottom: '-300px',
+				left: '50%',
+				transform: 'translate(-50%, 0)',
+			},
+			seen: {
+				bottom: '120px',
+				left: '50%',
+				transform: 'translate(-50%, 0)',
+			},
+		},
+	},
+	bottomRight: {
+		block: {
+			bottom: '30px',
+			left: 'auto',
+			right: '50px',
+		},
+		numpad: {
+			hidden: {
+				left: 'auto',
+				right: '-300px',
+			},
+			seen: {
+				left: 'auto',
+				right: '25px',
+			},
+		},
+	},
+};

src/root/index.jsx

@@ -3,11 +3,12 @@
 import WidjetButton from '../components/WidjetButton';
 import React, { useEffect, useState } from 'react';
 import packageJson from '../../package.json';
-import DefaultWidjet from '../components/DefaultWidjetUi';
+import DefaultWidjetUi from '../components/DefaultWidjetUi';
 import ModalPhoneNumpad from '../components/ModalPhoneNumpad';
 import Modal from '../components/Modal';
+import BxMiniWidjetUi from '../components/BxMiniWidjetUi';
 
-const Root = ({ data, onSetDnd, position }) => {
+const Root = ({ data, onSetDnd }) => {
 	if (!data) {
 		data = {
 			iscloud: true,
@@ -19,6 +20,7 @@ const Root = ({ data, onSetDnd, position }) => {
 			lefttime: 231461,
 			reasons: ['free', 'outcalls', 'home', 'totop'],
 			variant: 'bxmini',
+			position: 'bottomRight',
 		};
 	}
 
@@ -45,20 +47,50 @@ const Root = ({ data, onSetDnd, position }) => {
 		boxDialer.hangupButtonClick();
 	};
 
-	if (!data || !data?.number) return;
+	const selectWidjetType = (type) => {
+		switch (type) {
+			case 'bxmini':
+				return (
+					<BxMiniWidjetUi
+						widjetState={dynamicValue}
+						phoneNumber={data?.number}
+						reason={data?.reason}
+						widjetVersion={packageJson?.version}
+						leftTime={data.lefttime}
+						position={data.position || 'bottomLeft'}
+						onClick={() => {
+							phoneModal ? setPhoneModal(false) : setPhoneModal(true);
+						}}
+					/>
+				);
+			default:
+				return (
+					<DefaultWidjetUi
+						widjetState={dynamicValue}
+						phoneNumber={data?.number}
+						reason={data?.reason}
+						widjetVersion={packageJson?.version}
+						leftTime={data.lefttime}
+						position={data.position || 'bottomLeft'}
+						onClick={() => {
+							phoneModal ? setPhoneModal(false) : setPhoneModal(true);
+						}}
+					/>
+				);
+		}
+	};
+
+	if (
+		!data ||
+		!data?.number
+		// || !data?.position
+	)
+		return;
 
 	return (
 		<>
-			<DefaultWidjet
-				widjetState={dynamicValue}
-				phoneNumber={data?.number}
-				reason={data?.reason}
-				widjetVersion={packageJson?.version}
-				leftTime={data.lefttime}
-				onClick={() => {
-					phoneModal ? setPhoneModal(false) : setPhoneModal(true);
-				}}
-			/>
+			{selectWidjetType(data.variant)}
+
 			<ModalPhoneNumpad
 				modalState={modalState}
 				phoneModal={phoneModal}
@@ -67,7 +99,9 @@ const Root = ({ data, onSetDnd, position }) => {
 				onClick={(e) => e.stopPropagation()}
 				dynamicValue={dynamicValue}
 				onSetDnd={onSetDnd}
+				position={data.position || 'bottomLeft'}
 			/>
+
 			<Modal
 				className='tailwindGlobalCss'
 				callAnswerType={modalState.callType}