Создаем выезжающую боковую панель

Вариант первый

С двумя QR кодами и выезжающая как по времени, так и по нажатию на кнопку вызова панели.

HTML

<!--БОКОВАЯ ПАНЕЛЬ-->
<div class="startpanel">
	<a class="startpanel-link" href="#modal_Panel">
		<p class="startpanel-text">Оценка за<br>одну минуту</p> 
	</a>
</div>

<div class="panel" id="modal_Panel">
	<a class="close-block" href="#close-block">X</a>
	<div class="panelcontent">
	<div class="panel__title">
		<p class="panel__title-text">
			Оценка за одну минуту
		</p>
	</div>
	<div class="panel__body">

		<p class="panel__body-maintext">Наведите камеру Вашего смартфона на QR-код</p>

		<div class="panel__body-qritem">
		<img class="panel__body-code" src="/images/qr-whatsapp.png" alt="">
		<p class="panel__body-text">Откроется WhatsApp диалог с нами</p>
		<a class="panel__body-link" href="">
			<div class="block-circle">
			<img class="panel__body-link-img" src="/images/whatsapp.png" alt="">
			</div>
		</a>
		</div>

		<div class="panel__body-qritem">
		<img class="panel__body-code" src="/images/qr-telegramm.png" alt="">
		<p class="panel__body-text">Откроется Telegramm диалог с нами</p>
		<a class="panel__body-link" href="">
			<div class="block-circle">
			<img class="panel__body-link-img" src="/images/telegramm.png" alt="">
			</div>
		</a>
		</div>

	</div>
	</div>
</div>

CSS

/*СТИЛИ ВЫПЛВАЮЩЕЙ ПАНЕЛИ*/
.overlay-black-modal {
    position: relative;}
.overlay-black-modal:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(#000000 10%, #000000 60%);
    opacity: 0.5;
    z-index: 99999;}
    
.startpanel a.startpanel-link {
    text-decoration: none;
    position: fixed;
    right: 10px;
    bottom: 240px;
    background-color: #ffc107;
    padding: 10px;
    border-radius: 10px;}
.startpanel p.startpanel-text {
    margin: 0;
    color: #000000;
    line-height: 1;
    font-size: 15px;
    font-weight: 700;
    text-align: center;}
    
#modal_Panel:target{
    right:0;}
.panelcontent {
    width: 290px;
    height: 100%;
    background-color: #ffffff;}
.panel {
    position: fixed;
    right: -320px;
    top: 0;
    width: 320px;
    height: 100%;
    background-color: transparent;
    display: flex;
    justify-content: end;
    align-items: flex-start;
    z-index: 99999;
    transition: 1s;}
.panel-show {
    right:0;}
.panel a.close-block {
    margin: 5px 5px 0 0px;
    color: #000000;
    background-color: #f2f2f2;
    padding: 0px 5px;
    border-radius: 50%;
    border: 1px solid #ffc107;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;}
.panel__title {
    padding: 15px;
    background-color: #ffc107;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;}
.panel__title p.panel__title-text {
    margin: 0;
    color: #000000;
    line-height: 1.2;
    font-size: 22px;
    font-weight: 700;
    text-align: center;}
.panel__body {
    padding: 15px;}
.panel__body p.panel__body-maintext {
    margin: 0;
    color: #000000;
    line-height: 1.2;
    font-size: 20px;
    text-align: center;}
.panel__body-qritem {
    margin: 20px 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;}
.panel__body-qritem p.panel__body-text {
    margin: 0 0 10px 0;
    color: #62687f;
    line-height: 1.2;
    font-size: 14px;
    text-align: center;}
.panel__body-qritem img.panel__body-code {
    width: 200px;
    height: auto;}
.block-circle {
    padding: 20px;
    background-color: #f2f2f2;
    border-radius: 50%;}
.panel__body-qritem img.panel__body-link-img {
    width: 50px;
    height: auto;}

SCRIPTS

<!--СКРИПТЫ ДЛЯ БОКОВОЙ ПАНЕЛИ-->
<script src="https://code.jquery.com/jquery-3.6.2.min.js" integrity="sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA=" crossorigin="anonymous"></script>
<script>
$("a.startpanel-link").click(function() {
	$("body").addClass('overlay-black-modal');
});	

$("a.close-block").click(function() {
	$(".panel").removeClass('panel-show');
	$("body").removeClass('overlay-black-modal');
});

$(document).ready(function() {
    
	setTimeout(function() {
        $(".panel").addClass('panel-show');
		$("body").addClass('overlay-black-modal');
    }, 15000);

});
</script>

Вариант второй

С одним QR кодом и выезжающая только по нажатию на кнопку вызова панели.

HTML

<!--БОКОВАЯ ПАНЕЛЬ-->
    <div class="startpanel">
    	<a class="startpanel-link" href="#modal_Panel">
    		<p class="startpanel-text"><i class="fa-solid fa-envelope"></i></p> 
    	</a>
    </div>
    
    <div class="panel" id="modal_Panel">
    	<a class="close-block" href="#close-block">X</a>
    	<div class="panelcontent">
    	<div class="panel__title">
    		<p class="panel__title-text">
    			Связаться с нами
    		</p>
    	</div>
    	<div class="panel__body">
    
    		<p class="panel__body-maintext">Наведите камеру Вашего смартфона на QR-код</p>
    
    		<div class="panel__body-qritem">
    		<img class="panel__body-code" src="assets/images/qr-whatsapp.png" alt="">
    		<p class="panel__body-text">Откроется WhatsApp диалог с нами</p>
    		<a class="panel__body-link" href="https://wa.me/79250145426?text=" target="_blank">
    			<div class="block-circle">
    			<img class="panel__body-link-img" src="assets/images/whatsapp.png" alt="">
    			</div>
    		</a>
    		</div>
    		
    		<br>
    		<p class="panel__body-maintext">Или воспользуйтесь формой обратной связи</p>
    		
    		<div class="panel__body-button">
				<a class="panel__body-button-lnk" href="">Написать нам</a>
			</div>
    
    	</div>
    	</div>
    </div>

CSS

/*СТИЛИ ВЫПЛВАЮЩЕЙ ПАНЕЛИ*/
.overlay-black-modal {
    position: relative;}
.overlay-black-modal:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(#000000 10%, #000000 60%);
    opacity: 0.5;
    z-index: 99999;}
    
.startpanel a.startpanel-link {
    text-decoration: none;
    position: fixed;
    right: 10px;
    bottom: 60px;
    background-color: #007dc0;
    border: 2px solid #ffffff;
    padding: 7px;
    border-radius: 10px;}
.startpanel p.startpanel-text {
    margin: 0;
    color: #ffffff;
    line-height: 1;
    font-size: 25px;
    text-align: center;}
    
#modal_Panel:target{
    right:0;}
.panelcontent {
    width: 290px;
    height: 100%;
    background-color: #ffffff;}
.panel {
    position: fixed;
    right: -320px;
    top: 0;
    width: 320px;
    height: 100%;
    background-color: transparent;
    display: flex;
    justify-content: end;
    align-items: flex-start;
    z-index: 99999;
    transition: 1s;}
.panel-show {
    right:0;}
.panel a.close-block {
    margin: 5px 5px 0 0px;
    color: #000000;
    background-color: #f2f2f2;
    padding: 0px 6px;
    border-radius: 50%;
    border: 1px solid #007dc0;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;}
.panel__title {
    padding: 15px;
    background-color: #007dc0;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;}
.panel__title p.panel__title-text {
    margin: 0;
    color: #ffffff;
    font-family: VerdanaBold;
    line-height: 1.2;
    font-size: 22px;
    font-weight: 700;
    text-align: center;}
.panel__body {
    padding: 15px;}
.panel__body p.panel__body-maintext {
    margin: 0;
    color: #000000;
    line-height: 1.2;
    font-size: 20px;
    text-align: center;}
.panel__body-qritem {
    margin: 20px 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;}
.panel__body-qritem p.panel__body-text {
    margin: 0 0 10px 0;
    color: #62687f;
    line-height: 1.2;
    font-size: 14px;
    text-align: center;}
.panel__body-qritem img.panel__body-code {
    width: 200px;
    height: auto;}
.block-circle {
    padding: 20px;
    background-color: #f2f2f2;
    border-radius: 50%;}
.panel__body-qritem img.panel__body-link-img {
    width: 50px;
    height: auto;}
.panel__body-button {
    margin: 30px 0 0 0;
    display: flex;
    justify-content: center;}
.panel__body-button a.panel__body-button-lnk {
    text-decoration: none;
    margin: 0;
    font-family: Verdana;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    border: 2px solid #007dc0;
    background-color: #007dc0;
    color: #ffffff;
    padding: 10px 20px;
    transition: 0.5s;}
.panel__body-button a.panel__body-button-lnk:hover {
    background-color: #ffffff;
    color: #000000;
    transition: 0.5s;}

SCRIPTS

<!--СКРИПТЫ ДЛЯ БОКОВОЙ ПАНЕЛИ-->
<script>
$("a.startpanel-link").click(function() {
	$("body").addClass('overlay-black-modal');
});	

$("a.close-block").click(function() {
	$(".panel").removeClass('panel-show');
	$("body").removeClass('overlay-black-modal');
});
</script>