add messenger box phtml file

blopa · Dec 25, 2017 · d91fa17 · d91fa17
1 parent 8cad9ec
commit d91fa17
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 2 deletions.
diff --git a/Magento2/app/code/Werules/Chatbot/view/frontend/layout/default.xml b/Magento2/app/code/Werules/Chatbot/view/frontend/layout/default.xml
@@ -1,10 +1,9 @@
 <?xml version="1.0"?>
 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
     <body>
-        <referenceContainer name="footer">
+        <referenceContainer name="before.body.end">
             <!--<block class='Company\Module\Block\Module' name="company_module" as="company_module" template="Company_Module::tracking.phtml"/>-->
             <block class="Werules\Chatbot\Block\Chatbox\Messenger" name="chatbox.messenger" template="Werules_Chatbot::chatbox/messenger.phtml"/>
         </referenceContainer>
-        <move element="company_module" destination="before.body.end"/>
     </body>
 </page>
diff --git a/Magento2/app/code/Werules/Chatbot/view/frontend/templates/chatbox/messenger.phtml b/Magento2/app/code/Werules/Chatbot/view/frontend/templates/chatbox/messenger.phtml
@@ -0,0 +1,73 @@
+<style>
+    #werules-messenger-box {
+        position: fixed;
+        display: block;
+        z-index: 999;
+        bottom: 20px;
+        right: 30px;
+        cursor: pointer;
+    }
+
+    #werules-messenger-box:hover .werules-messenger-icon img{
+        transform:scale(1.1, 1.1);
+        -webkit-transform:scale(1.1, 1.1);
+        -moz-transform:scale(1.1, 1.1);
+    }
+
+    .werules-messenger-icon img {
+        width: 60px;
+        filter: drop-shadow(2px 6px 4px rgba(0,0,0,.3));
+        -webkit-filter: drop-shadow(2px 6px 4px rgba(0,0,0,.3));
+    }
+
+    .werules-tiptext{
+        width: 120px;
+        background-color: white;
+        color: #2c2c2c; ;
+        text-align: center;
+        padding: 5px 0;
+        border: 1px solid #eeeeee;
+        border-radius: 6px;
+        position: fixed;
+        bottom: 30px;
+        right: 100px;
+        text-transform: uppercase;
+        filter: drop-shadow(2px 6px 4px rgba(0,0,0,.3));
+        -webkit-filter: drop-shadow(2px 6px 4px rgba(0,0,0,.3));
+    }
+
+    .werules-tiptext:after{
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 100%;
+        margin-top: -5px;
+        border-width: 5px;
+        border-style: solid;
+        border-color: transparent transparent transparent #eeeeee;
+    }
+
+    @media (max-width: 480px)
+    {
+        .werules-mobilehidden{
+            display: none;
+        }
+    }
+</style>
+<?php $fbChatUrl = "http://messenger.com"; ?>
+<div id="werules-messenger-box">
+    <!-- code from https://gist.github.com/tomcritchlow/493774b09b02e31d1184d7cda926c659 -->
+    <a href="<?php echo $fbChatUrl; ?>" target="_blank" onclick="OpenChatInNewTab();">
+        <div class="werules-messenger-icon">
+            <img src="<?php echo $this->getViewFileUrl('Werules_Chatbot::image/messenger-icon.png'); ?>"/>
+            <span class="werules-tiptext werules-mobilehidden"><?php echo __("Message us"); ?></span>
+        </div>
+    </a>
+</div>
+<script>
+    function OpenChatInNewTab() {
+        var screenwidth = screen.width;
+        var screenheight = window.innerHeight;
+        window.open('<?php echo $fbChatUrl; ?>', '_blank', "directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=500,height=" + screenheight + ",left=" + (screenwidth - 500));
+    }
+</script>