0

I added script file to view/templates/chat.phtml its not reflect for me,

This is My Layout File view/frontend/layout/default.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <body>

        <referenceContainer name="tawk.chat">
            <block class="Chennaibox\Tawk\Block\chat"  template="Chennaibox_Tawk::chat.phtml"/>
        </referenceContainer>
    </body>
</page>

This is My Block File:

/**
 * Backend form key content block
 */
namespace Chennaibox\Tawk\Block;

class Chat extends \Magento\Framework\View\Element\Template
{

}

This is Phtml File: view/templates/chat.phtml

<!--Start of Tawk.to Script-->
<script type="text/javascript">
    var $_Tawk_API={},$_Tawk_LoadStart=new Date();
    (function(){
        var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
        s1.async=true;
        s1.src='https://embed.tawk.to/573e8d5d9ac6de9e4f917161/default';
        s1.charset='UTF-8';
        s1.setAttribute('crossorigin','*');
        s0.parentNode.insertBefore(s1,s0);
    })();
</script>
<!--End of Tawk.to Script-->

chat.phtml file not reflect in front end suggest me how to do this.

2

The most important thing we need to know that Magento uses Require Js to asynchronously load js files. So, our custom js should be called via Require Js.

First, we should create our module:

enter image description here

app/code/Chennaibox/Tawk/etc/module.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Chennaibox_Tawk" setup_version="1.0.0"/>
</config>

app/code/Chennaibox/Tawk/Block/Chat.php

<?php

namespace Chennaibox\Tawk\Block;

class Chat extends \Magento\Framework\View\Element\Template
{

}

app/code/Chennaibox/Tawk/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Chennaibox_Tawk',
    __DIR__
);

app/code/Chennaibox/Tawk/view/frontend/templates/chat.phtml

<script>
    require([
        'jquery'
    ], function ($) {
        //Your code lines should be here
        $(document).ready(function () {
            var $_Tawk_API={},$_Tawk_LoadStart=new Date();
            var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
            s1.async=true;
            s1.src='https://embed.tawk.to/573e8d5d9ac6de9e4f917161/default';
            s1.charset='UTF-8';
            s1.setAttribute('crossorigin','*');
            s0.parentNode.insertBefore(s1,s0);
        });
    });
</script>

Now, in your custom theme:

enter image description here

app/design/frontend/{Vendor theme}/{Theme}/Magento_Theme/layout/default.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Chennaibox\Tawk\Block\Chat"  template="Chennaibox_Tawk::chat.phtml"/>
        </referenceContainer>
    </body>
</page>

The result:

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.