Viewing Smooch Chat now behind web content

Smooch Chat now behind web content



User: Jahn H. 5 years ago
I’m using Smooch for web chat and it has always been on top of web content. It doesn’t really work if it behind web content.

Smooch is similar to the Hotjar Feedback installed on this forum’s web pages.

Recently, the chat box is behind my web page content.
I’ve followed instructions from Smooch and placed this in Head Code in Everweb:
Script Tag Method
Step 1: Include the Smooch Web Messenger on your web page
Add the following code towards the end of the head section on your page and replace <app-id> with your app ID found in your app settings page.

<script>
!function(e,n,t,r){
function o(){try{var e;if((e="string"==typeof this.response?JSON.parse(this.response):this.response).url){var t=n.getElementsByTagName("script")[0],r=n.createElement("script");r.async=!0,r.src=e.url,t.parentNode.insertBefore(r,t)}}catch(e){}}var s,p,a,i=[],c=[];e[t]={init:function(){s=arguments;var e={then:function(n){return c.push({type:"t",next:n}),e},catch:function(n){return c.push({type:"c",next:n}),e}};return e},on:function(){i.push(arguments)},render:function(){p=arguments},destroy:function(){a=arguments}},e.__onWebMessengerHostReady__=function(n){if(delete e.__onWebMessengerHostReady__,e[t]=n,s)for(var r=n.init.apply(n,s),o=0;o<c.length;o++){var u=c[o];r="t"===u.type?r.then(u.next):r.catch(u.next)}p&&n.render.apply(n,p),a&&n.destroy.apply(n,a);for(o=0;o<i.length;o++)n.on.apply(n,i[o])};var u=new XMLHttpRequest;u.addEventListener("load",o),u.open("GET","https://"+r+".webloader.smooch.io/",!0),u.responseType="json",u.send()
}(window,document,"Smooch","<app-id>");
</script>

Next, I’ve tried pasting in the same Head Code, as an HTML snippet on individual pages, Footer Code. All result in a chat box that is under the web content and basically breaks the Smooth chat box.


Step 2: Initialize Smooch with your new app ID
Once Smooch has been included on your web page, you’re almost done. Simply initialize the Web Messenger using this code snippet

<script>
Smooch.init({appId: '<app-id>'}).then(function() {
// Your code after init is complete
});
</script>

No idea why this used to work as expect but no longer does.

Last edit 5 years ago
User: Paul-RAGESW 5 years ago
Can you share your website URL?

I am guessing it is because of the https secure urls (possibly) but if you share your URL I can confirm.

-------------------------------
Paul
EverWeb Developer
User: Jahn H. 5 years ago
https://www.biggerhammer.org
User: Paul-RAGESW 5 years ago
Seems you are being blocked by the smooch web servers. Here is what I see in Safari's console;

[Error] Failed to load resource: the server responded with a status of 403 (HTTP/2.0 403) (smooch.4.13.1.min.js.map, line 0)
[Error] Failed to load resource: the server responded with a status of 403 (HTTP/2.0 403) (frame.4.13.1.min.js.map, line 0)

Error 403 means you are forbidden from accessing these files for some reason.

I think you need to email smooch chat and ask them why. You can just ask them why those 2 lines above are appearing in your Safari console.

Perhaps you are over your quota for the day or month?

-------------------------------
Paul
EverWeb Developer
User: Jahn H. 5 years ago
This is what I got back from Smooch. How does one would set set z-index value in Everweb.
Quote:
This looks like there is a conflict between the Z index of the Web Messenger and the elements beneath it. The Web Messenger already has a very high z-index of 9998, but to fix this issue you'll either need to increase that value more, or decrease the z-index of the elements that appear on top.

For the former, you can insert this CSS rule on your page and tweak the value to something suitable:

#web-messenger-container {
z-index: 9998;
}
Or write a similar rule targeting the problematic elements and giving them a lower number


I would think using Bring to front on the HMTL widget would keep the widget on top of the other content...
User: Roddy 5 years ago
You have inserted CSS in two places incorrectly ...

#web-messenger-container {
z-index: 50000;
}

<script>
#web-messenger-container {
z-index: 500000;
}
</script>

The first attempt has no style tags which can potentially break the page code and the second one uses script tags which are invalid for CSS.

Try inserting this ...

<style>
#web-messenger-container {
z-index: 49999;
}
</style>

See the info page about Code Insertion.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
✔ Best Answer  
User: Jahn H. 5 years ago
@Roddy. Great, that did the trick. Why doesn't using the EverWeb GUI ‘Always on top’ effectively set a high Z Index for that element (HTML snippet)?
User: Roddy 5 years ago
The #web-messenger-container is actually an iframe. Did you insert the code in th Footer Code box? If you did, then EverWeb can't change its z-index which is why you were told to insert these styles...

<style>
#web-messenger-container {
z-index: 49999;
}
</style>

EverWeb forces us to use high values for z-index because of the navigation menu which I think starts out with about 10000 and increases to over 20000 if "Always On Top" is used. Presumably this is so that the drop downs are above other content and assumes that the user hasn't a clue about stacking order and doesn't know what "Bring to the front" means.

You still have some items in your HTML that have been inserted in the wrong place.
[1] is a link to an external stylesheet which shold be in the document head...

<link rel="stylesheet" href="https://cdn.smooch.io/frame.4.14.0.css" type="text/css">

[2] Is the CSS inserted in <script> tags which I pointed out previously...

<script>
#web-messenger-container {
z-index: 500000;
}
</script>

You should find both of these and delete them.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.


Post Reply
You must login or signup to post.