Customer Chat Plugin - hide on mobile and tablets?
-
-
- Web Tech Plus
- Sr. Rocketeer
- Posts: 100
- Thanks: 0
- Web Designer / Small Business Owner
-
Good afternoon,
We are currently getting a load of customers who are wanting to load a messanger system on their site to make it easier for customers to reach out and ask questions or general support.
Two options we are offering are;
1 - Facebook Customer Chat Plugin - developers.facebook.com/docs/messenger-p...customer-chat-plugin
2 - Drift Chat - www.drift.com/pricing
Both oth these options get you top load a script in the template'Insert it directly after the opening <body> tag on each page where you want the plugin to appear.'
Now this for some sites is fin loading in the bottom right hand corner, but the issue we are having is that on one of our clients sites this sites on either the Google Ads, or an advertising banner, this is because its a site which has a load of advertising that is embeded down the left hand and right hand side of the site.
So what we would love to be able to do is hide it on a mobile and tablet platform so its not interferring with these banners, or when on a smaller screen sitting on top of what little screen space we have.
Here is an example site for Facebook messanger;
www.joyofwater.com.au - This is our Web Tech Plus Team account. Advice, design and other things are what we do, thanks for your help and understanding.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
Sorry I don't see chat on that page? Where is it?
But the answer is to use custom CSS to hide the chat container using media queries.
// Gantry 5 custom CSS file // import breakpoints @import "dependencies"; // Typical values are the default breakpoints set in Gantry 5 // but these values are user definable in style settings // so that is why the code below uses mixins to get the actual // values from Gantry 5 template. // commonly used media queries // typically min 75rem @include breakpoint(large-desktop-range) { } // typically range 60rem to 74.938rem @include breakpoint(desktop-range) { } // typically 48rem to 59.938rem @include breakpoint(tablet-range) { } // typically 30rem to 47.938rem @include breakpoint(large-mobile-range) { } // typically max 30rem @include breakpoint(small-mobile-range) { } // Less commonly used media queries // typically min 60rem @include breakpoint(desktop-only) { } // typically min 48rem @include breakpoint(no-mobile) { } // typically max 47.938 rem @include breakpoint(mobile-only) { } // typically max 59.938rem @include breakpoint(no-desktop) { } // Mobile Menu Breakpoint @media only all and (max-width: $breakpoints-mobile-menu-breakpoint) { } @import "nucleus/mixins/breakpoints";
Media queries work like this:
if the viewport size is xxxxx then
use this css
endif
To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .
Remember to recompile CSS from base outline too.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.049 seconds