Widget not showing

[TectonicKestrel]

I have just installed the chat widget on Magento 2.4.1 but it is not showing. I have installed it using the composer method and i have logged in to Tawk from the magento admin and the widget is setup. I previously used it on magento 2.3.3 no problem. I had it installed the manual way by adding the javascript to a widget/block. When i first upgrade magento i kept the install this way, but it didnt show which i is why i thought i would change the way i installed it to see if that fixes the problem but it hasnt. My browser (Brave, but not visible in Firefox either) console says: (index):711 GET https://embed.tawk.to// net::ERR_ABORTED 400

    s1.setAttribute('crossorigin','*');
    s0.parentNode.insertBefore(s1,s0);
})();

Above is code lines 710-712 and it references line 711 as the issue.

[alvinjohnsonso]

Hi @alexsmith2709, would you be able to provide the full embed script here? Also, some screenshots of the errors gotten from the console would be wonderful 😁.

[TectonicKestrel]

Hi @alvinjohnsonso Attached are 2 screenshots showing what you need. It seems like the full code isnt being added to the page if i am understanding the code correctly. My unique ID is missing. I have logged in on the Tawk.to widget options in the magento admin panel and saved the settings, but when i navigate away from that page and then go back to it, while i am still logged in, the property is no longer showing and i need to select it again. I am guessing this is where the problem is coming from.

[alvinjohnsonso]

Hi again @alexsmith2709, I was trying to recreate the issue but sadly I wasn't able to. I did think of one thing. You said when you installed it manually by adding the javascript code block, it still didn't work right? Did it have the same error like the one you sent ?

Would it be alright for you to provide the code block you were inserting?

[TectonicKestrel]

Hi @alvinjohnsonso I honestly cannot remember if the error was the same, i saw that i was using the "alternative" way so thought maybe the "proper" way would fix any issue. At first i followed the "Alternative way to use Tawk.to Widget" on this page https://www.tawk.to/knowledgebase/plugins-and-modules/magento-2-integration/ The widget code was copied directly from my dashboard, no retyping and was exactly the way i used it on magento 2.3.3. It is only since moving server and upgrading to 2.4.1 that has stopped it working. For magento 2.4.1 i also added my own csp_whitelist.xml to allow *.tawk.to The code i used is: `

` Are you testing on magento 2.4.1 or another version?

[alvinjohnsonso]

Yup. I was testing on both Magento 2.4.1 and 2.4.2. But from the looks of the code block that you're inserting before, I think there's an issue with your property since the src URL being passed is https://embed.tawk.to//default and would be best if you contact tawk.to's support 😁.

tawk.to offers 24×7-365 live support, visit https://www.tawk.to and initiate a chat or send an email at support@tawk.to.

[alvinjohnsonso]

Hi @alexsmith2709, just wanted to ask if you were able to resolve this? 😁

[TectonicKestrel]

Hi @alvinjohnsonso, Not yet, i havent had chance to contact support. Its on my to-do list but keeps being pushed further down the list!

Alex

[alvinjohnsonso]

Hi @alexsmith2709, just wanted to confirm if the error you got was from a fresh install of the plugin? I'm trying to figure out that maybe it is a plugin issue. Also if you can, can you confirm if the pageId and widgetId from the form data submitted has value after clicking the Use selected widget button? It can be found in the networks tab of the developer's tool.

[TectonicKestrel]

Hi @alvinjohnsonso, Sorry i havent actually contacted support yet, but thanks for still trying to help. I have attached a screenshot showing that nothing is submitted and it looks like the resource is blocked by the red text.

[alvinjohnsonso]

Can you post what's in the response tab? 😁

[TectonicKestrel]

For that resource, nothing, it says failed to load. On the page resource i found this:

jQuery(".savesettingsbtn" ).click(function(e) {
                e.preventDefault();
                alwaysdisplay = jQuery('#alwaysdisplay').is(":checked");
                var alwaysdisplayvalue = alwaysdisplay ? 1 : 0;

                donotdisplay = jQuery('#donotdisplay').is(":checked");
                var donotdisplayvalue = donotdisplay ? 1 : 0;

                jQuery.post('https://www.mydomain.com/myadminurl/widget/savewidget/index/key/somenumbersandletters/', {
                    pageId     : "-1",
                    widgetId   : "-1",
                    id         : jQuery('#websiteids').val(),
                    excludeurl : jQuery('#excludeurl').val(),
                    includeurl : jQuery('#includeurl').val(),
                    alwaysdisplay : alwaysdisplayvalue,
                    donotdisplay: donotdisplayvalue,
                    enableVisitorRecognition : jQuery('#enable_visitor_recognition').is(":checked") ? 1 : 0,
                    form_key : 'formkey'
                }, function() {
                    alert('Visibility options Saved');
                });
            });

[alvinjohnsonso]

Hi @alexsmith2709, sorry for the late reply, I think I've figured out the issue. I was able to recreate the issue. I think you weren't able to click the Use selected widget button before you pressed Save Settings. The Save Settings button is intended for the Visibility Options form below. For the system to be able to save your selected widget, you'll need to press the Use selected widget button shown in the Select your widget section. Of which will only show when you've selected the property and widget.

[alvinjohnsonso]

To make sure it reflects immediately, go to System -> Cache Management and Flush Magento Cache.

[TectonicKestrel]

Hi @alvinjohnsonso, i have always been able to click on the "Use Selected Widget", that doesnt appear to be the issue. The issue is, that button doesnt actually save that setting, navigating away from that admin page and back again and the widget hasnt been saved and nor is it visible on the site. The "Use Selected Widget" button, goes a different shade of green and is no longer clickable after i click on it once, just like i would expect if the setting is saved, but it doesnt appear like it is.

[JackWormUK]

I have just come across this problem as well. I tried an old version (1.3.1) that i have working on another shop and the current version 1.5.1

It appears that it isnt saving the required data when you set it up in the magento admin area.

I overwrote the file in view/frontend/templates/embed.phtml and hard coded the s1.src='' section with the code given to me from the website i.e. s1.src='https://embed.tawk.to/cs7dscsdcdsc/123456';

Now it works correctly

[TectonicKestrel]

@JackWormUK Thanks for the suggestion. I was hoping we didnt have to revert to that option, but i have now done the same as well as needing to add <value id="tawkto" type="host">*.tawk.to</value> to the style-src section of the csp_whitelist.xml file.

[alvinjohnsonso]

Hi @alexsmith2709 @JackWormUK, I'm taking a look at this issue again and would like to get additional information from you guys. I still can't replicate the issue on my end (might be because I'm doing the testing locally). Could I possibly verify this with you guys?

When loading the widget selection iframe, the URL in the iframe has the parentDomain query parameter. That query parameter is being used for posting messages from the iframe to the parent website (which triggers the setWidget and removeWidget functions). What I wanted to ask is that if the value on the parentDomain query parameter for you guys has the same value of your current website's domain? If not, that may be the issue why the button is stuck on a disabled state because the iframe wasn't able to send a message back to parent website.

[TectonicKestrel]

Hi @alvinjohnsonso, it is set to my domain, but it is the http, not https so i dont know if this is causing it?

[JackWormUK]

@alvinjohnsonso I can confirm that mine is the same as alexsmiths. It is set as per your screen shot, except to my domain and its http not https

Edit. I also looked at the widget response code. i can see you have a message container;

<div id='alertContainer' class="my-1">
<div id="failedRetryMessage" class="alert alert-danger"><strong>Failed! Please try again!</strong></div>
<div id="successMessage" class="alert alert-success"><strong>Success!</strong></div>

However these do not fire when the widget is setup and you click "Use Selected Widget"

[alvinjohnsonso]

@alexsmith2709 @JackWormUK thanks for responding to my request!

Tested it out and that seems to be the issue if your current URL is using https and the one in the parentDomain is http. It can also happen vice versa.

The thing is that the plugin should be able to determine if the request is using an http or https protocol. Here's the code that's generating the value for parentDomain. Would you guys happen to know if there's something wrong with the checking?

[TectonicKestrel]

@alvinjohnsonso I'm afraid that is above my level of knowledge.

[JackWormUK]

@alvinjohnsonso I have had a look at this.

To begin with I overwrote your code so that $protocol was always set to https. This seemed to get everything working.

I then went further into the code. Its seems the ZEND object array for getServer() is working on the varnish side which is obviously http and not https

$this->request->getServer('HTTPS');

This actually returns NULL.

for this line

if (isset($httpsServer) && $httpsServer != 'off') {

Wouldn't $httpServer always be set as it is a variable where you always make a call to a function?

Anyway, I have modified your function to this;

    public function mainurl()
    {
        $httpsServer = $this->request->getServer('HTTPS');
        $serverishttps = $this->request->getServer('HTTP_X_FORWARDED_PROTO');

        if (isset($httpsServer) && $httpsServer != 'off') {
            $protocol = "https";
        } else {
            $protocol = 'http';
        }
        if (($httpsServer == null)&& $serverishttps == 'https') {
            $protocol = "https";        
        }
        return $protocol . "://" . $this->request->getServer('HTTP_HOST');
    }

This uses the HTTP_X_FORWARD_PROTO variable saved in the getServer() object array to do a secondary check for the https protocol. This should work correctly for those who are offloading to VARNISH

This code now returns the correct HTTP/HTTPS configuration (for me anyway).

EDIT This is the Magento config for the header setup Headers

It seems older versions also used 'SSL_OFFLOADED' (would return http or https) headers, so you might want to check for that as well, although HTTP_UPGRADE_INSECURE_REQUESTS (returns 0 or 1) header might be more universal to all versions.

[JackWormUK]

@alvinjohnsonso For your reference, here is dump of the getServer() array for my server in case it is useful;

  ["storage":"ArrayObject":private]=>
  array(69) {
    ["USER"]=>
    string(6) "NAMEREDACTED"
    ["HOME"]=>
    string(12) "/home/NAMEREDACTED"
    ["SCRIPT_NAME"]=>
    string(10) "/index.php"
    ["REQUEST_URI"]=>
    string(109) "/admin_XXXXXX/widget/selectwidget/index/key/123456789123456789123456789123456789123456789/"
    ["QUERY_STRING"]=>
    string(0) ""
    ["REQUEST_METHOD"]=>
    string(3) "GET"
    ["SERVER_PROTOCOL"]=>
    string(8) "HTTP/1.1"
    ["GATEWAY_INTERFACE"]=>
    string(7) "CGI/1.1"
    ["REDIRECT_URL"]=>
    string(109) "/admin_XXXXXX/widget/selectwidget/index/key/123456789123456789123456789123456789123456789/"
    ["REMOTE_PORT"]=>
    string(5) "34394"
    ["SCRIPT_FILENAME"]=>
    string(43) "/home/NAMEREDACTED/public_html/shop/pub/index.php"
    ["SERVER_ADMIN"]=>
    string(33) "webmaster@shop.MYWEBSITE.COM"
    ["CONTEXT_DOCUMENT_ROOT"]=>
    string(33) "/home/NAMEREDACTED/public_html/shop/pub"
    ["CONTEXT_PREFIX"]=>
    string(0) ""
    ["REQUEST_SCHEME"]=>
    string(4) "http"
    ["DOCUMENT_ROOT"]=>
    string(33) "/home/NAMEREDACTED/public_html/shop/pub"
    ["REMOTE_ADDR"]=>
    string(12) "11.111.11.11"
    ["SERVER_PORT"]=>
    string(2) "80"
    ["SERVER_ADDR"]=>
    string(12) "11.111.11.11"
    ["SERVER_NAME"]=>
    string(23) "shop.MYWEBSITE.COM"
    ["SERVER_SOFTWARE"]=>
    string(6) "Apache"
    ["SERVER_SIGNATURE"]=>
    string(0) ""
    ["PATH"]=>
    string(180) "/usr/local/jdk/bin:/usr/kerberos/sbin:/usr/kerberos/bin:/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin:/usr/X11R6/bin:/usr/local/bin:/usr/X11R6/bin:/root/bin:/opt/bin"
    ["HTTP_X_VARNISH"]=>
    string(7) "5571717"
    ["HTTP_ACCEPT_ENCODING"]=>
    string(4) "gzip"
    ["HTTP_GRACE"]=>
    string(4) "none"
    ["HTTP_X_FORWARDED_FOR"]=>
    string(34) "::ffff:11.111.11.11, 11.111.11.11"
    ["HTTP_COOKIE"]=>
    string(386) "DATA REDACTED"
    ["HTTP_ACCEPT_LANGUAGE"]=>
    string(14) "en-US,en;q=0.9"
    ["HTTP_SEC_FETCH_DEST"]=>
    string(8) "document"
    ["HTTP_SEC_FETCH_USER"]=>
    string(2) "?1"
    ["HTTP_SEC_FETCH_MODE"]=>
    string(8) "navigate"
    ["HTTP_SEC_FETCH_SITE"]=>
    string(4) "none"
    ["HTTP_ACCEPT"]=>
    string(135) "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9"
    ["HTTP_USER_AGENT"]=>
    string(114) "Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36"
    ["HTTP_UPGRADE_INSECURE_REQUESTS"]=>
    string(1) "1"
    ["HTTP_SEC_CH_UA_MOBILE"]=>
    string(2) "?0"
    ["HTTP_SEC_CH_UA"]=>
    string(64) "" Not;A Brand";v="99", "Google Chrome";v="91", "Chromium";v="91""
    ["HTTP_PRAGMA"]=>
    string(8) "no-cache"
    ["HTTP_X_REAL_IP"]=>
    string(20) "::ffff:11.111.11.11"
    ["HTTP_X_FORWARDED_SERVER"]=>
    string(23) "shop.MYWEBSITE.COM"
    ["HTTP_X_FORWARDED_PROTO"]=>
    string(5) "https"
    ["HTTP_X_FORWARDED_PORT"]=>
    string(3) "443"
    ["HTTP_X_FORWARDED_HOST"]=>
    string(23) "shop.MYWEBSITE.COM"
    ["HTTP_HOST"]=>
    string(23) "shop.MYWEBSITE.COM"
    ["proxy-nokeepalive"]=>
    string(1) "1"
    ["HTTP_AUTHORIZATION"]=>
    string(0) ""
    ["MAGE_DEBUG_SHOW_ARGS"]=>
    string(1) "1"
    ["MAGE_MODE"]=>
    string(9) "developer"
    ["MAGE_RUN_TYPE"]=>
    string(5) "store"
    ["MAGE_RUN_CODE"]=>
    string(5) "cn_en"
    ["SCRIPT_URI"]=>
    string(139) "http://shop.MYWEBSITE.COM/admin_XXXXXX/widget/selectwidget/index/key/123456789123456789123456789123456789123456789/"
    ["SCRIPT_URL"]=>
    string(109) "/admin_XXXXXX/widget/selectwidget/index/key/123456789123456789123456789123456789123456789/"
    ["UNIQUE_ID"]=>
    string(27) "YOJUZfkgFW8cHGcN1PDFtgAAARA"
    ["REDIRECT_STATUS"]=>
    string(3) "200"
    ["REDIRECT_HTTP_AUTHORIZATION"]=>
    string(0) ""
    ["REDIRECT_MAGE_DEBUG_SHOW_ARGS"]=>
    string(1) "1"
    ["REDIRECT_MAGE_MODE"]=>
    string(9) "developer"
    ["REDIRECT_MAGE_RUN_TYPE"]=>
    string(5) "store"
    ["REDIRECT_MAGE_RUN_CODE"]=>
    string(5) "cn_en"
    ["REDIRECT_SCRIPT_URI"]=>
    string(139) "http://shop.MYWEBSITE.COM/admin_XXXXXX/widget/selectwidget/index/key/123456789123456789123456789123456789123456789/"
    ["REDIRECT_SCRIPT_URL"]=>
    string(109) "/admin_XXXXXX/widget/selectwidget/index/key/123456789123456789123456789123456789123456789/"
    ["REDIRECT_UNIQUE_ID"]=>
    string(27) "ABC123ABC123ABC123ABC123"
    ["FCGI_ROLE"]=>
    string(9) "RESPONDER"
    ["PHP_SELF"]=>
    string(10) "/index.php"
    ["REQUEST_TIME_FLOAT"]=>
    float(1625445477.4474)
    ["REQUEST_TIME"]=>
    int(1625445477)
    ["argv"]=>
    array(0) {
    }
    ["argc"]=>
    int(0)
  }
}

[alvinjohnsonso]

Hi @JackWormUK, thanks for taking a look at this!

I took a look at the request class trying to search for a similar function that does a similar checking that you provided. And luckily, I found this function. isSecure

From what I understood, it first looks up if the HTTPS is turned on and if the request came from the port 443. If not, it'll do some additional checking on the request header, which also checks for the SSL offloaded header.

Would it be alright to ask you to try the function on your end? I wasn't able to replicate the server setup that you have. Or rather, I don't know how to 😅.

Here's the function I used on my end.

public function mainurl()
{
    $protocol = 'http';
    if ($this->request->isSecure()) {
        $protocol = 'https';
    }
    return $protocol . "://" . $this->request->getServer('HTTP_HOST');
}

[JackWormUK]

@alvinjohnsonso

That's a much neater solution! Tested on my server and its working correctly :)

[alvinjohnsonso]

Hi @JackWormUK @alexsmith2709, there's a new release for the updated protocol checking.

https://github.com/tawk/tawk-magento-2/releases/tag/v1.5.2

[JackWormUK]

@alvinjohnsonso

Thanks for letting us both know!