Before setting up the tool, you need to create an account on Google Tag Manager And link it to your Store, Click on the button below to learn how

  • Go to My Places - Google My Maps by using your Google account, then press on the button in the left

  • Click on Create new map

  • Search for your location and choose it from the options

  • Add your location by pressing on the + Sign

  • Press on the 3 dots and choose Rename this layer

  • Rename the layer, then Save

  • Click on Share

  • Name the map, then OK

  • Toggle on the 2 buttons, then close

  • Click on the 3 dots above, choose Embed on my website

  • Save the link you got

  • Visit tagmanager.google.com and click on New Tag

  • Click on Tag Configuration

  • Click on Custom HTML

إضافة خاصية حجز موعد على المتجر
  • Copy and paste the following code

    <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;
    }
    #myBtn{
    z-index:101
    }
    </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: 22px; 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/u/0/embed?mid=1ti9mMYFsEaPCCpCsHL9QBjhHQTuWJ6KY&z=5" width="100%" 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>

  • Replace this part in the previous code with the code you got from Google my places

  • You can control the color of the widget as well by replacing the written color code with the colors codes you prefer to fit your website colors

  • Click on Triggering

    • Select All Pages and click Add

      • Rename the Tag Name and click Save

    • Click on Submit, Publish then Continue

  • Log in to your Wuilt account and preview your store outside

Did this answer your question?