وربطه على الموقع الخاص بك Google Tag Manager الخطوة الأولى: إنشاء حساب على

My Places - Google My قم بزيارة

ثم قم بالضغط على العلامة باليسار

Create new map قم بالضغط على

قم بالبحث عن موقعك على الخريطة واختيار موقعك من الاختيارات

+ قم بإضافة الموقع من خلال علامة

Rename this layer قم بالضغط على

Save ثم Layer قم بإعادة تسمية ال

Share قم بالضغط على

OK قم بتسمية الخريطة ثم

Close قم بتشغيل الأزرار ثم

Embed on my website قم بالضغط على الثلاث نقاط واختر

قم بحفظ الكود الذي ستحصل عليه

New Tag و اضغط على tagmanager.google.com قم بزيارة

إضافة خاصية حجز موعد على المتجر

Tag Configuration اضغط على

إضافة خاصية حجز موعد على المتجر

Custom HTML اضغط على

إضافة خاصية حجز موعد على المتجر

إضافة خاصية حجز موعد على المتجر

قم بنسخ ولصق الكود التالي

<style>
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1000; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #FEFEFE;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
border-radius:20px;
}
/* The Close Button */
.close {
color: #AAAAAA;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.findme-btn-wrap {
direction: ltr;
position: fixed;
left: auto;
top: auto;
right: 0%;
bottom: 0%;
z-index: 99;
font-family: "Cairo" !important;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 200px;
height: 60px;
margin-right: 20px;
margin-bottom: 16px;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-radius: 99px;
background-color: #B18147;
-webkit-box-shadow: -2px 2px 10px 0px rgba(0,0,0,0.2);
-moz-box-shadow: -2px 2px 10px 0px rgba(0,0,0,0.2);
box-shadow: -2px 2px 10px 0px rgba(0,0,0,0.2);
}
.findme-btn-wrap:hover {
cursor: pointer;
}
.findme-icon-wrap {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 50px;
height: 50px;
margin-right: 5px;
float: right;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-radius: 99px;
background-color: #895C26;
}
.findme-btn-txt {
margin-right: 20px;
float: right;
color: #fff;
font-size: 20px;
}
</style>
<script type="text/javascript" id="" src="https://kit.fontawesome.com/f1bed78758.js"></script>
<!-- Trigger/Open The Modal -->
<div class="findme-btn-wrap" id="myBtn">
<div class="findme-icon-wrap">
<div>
<i class="fas fa-map-marker-alt" style="font-size: 20px; color: #fff;" aria-hidden="true"></i>
</div>
</div>
<div class="findme-btn-txt">
<div>أين تجدنا؟</div>
</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<div><iframe src="https://www.google.com/maps/d/embed?mid=1iR4l9fDjMLAxERrI-Akd5P27CbGSCGlI" width="640" height="480"></iframe></div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// $(document).keyup(function(e) {
// if (e.keyCode == 27) {
// modal.style.display = "none";
// }
// });
document.onkeydown = function (e) {
switch (e.keyCode) {
case 27:
modal.style.display = "none";
break;
default:
return; // Do nothing for the rest
}
};
</script>

Google-Myplaces مع استبدال هذا الجزء من الكود السابق بالكود الذي حصلت عليه من

يمكنك التحكم في لون الويدجت من خلال استبدال هذه الأكواد التي تخص الألوان بأكواد الألوان

التي تختارها لتتماشى مع اللون الأساسي لموقعك

Triggering اضغط على

إضافة خاصية حجز موعد على المتجر

Add و اضغط على All Pages اختر

إضافة خاصية حجز موعد على المتجر

Save و اضغط على Tag Name قم بإعادة تسمية

إضافة خاصية حجز موعد على المتجر

Submit >> Publish >> Continue قم بالضغط على

إضافة خاصية حجز موعد على المتجر
إضافة خاصية حجز موعد على المتجر

و قم بنشر موقعك Wuilt قم بفتح حسابك على

Did this answer your question?