Hi All,

I am trying out to install a chatbot. But after installation, the chatbot icon overlaps with my scroll-up button.


I'm using Tidio chatbot and the helpdesk gave me the below and says I should put this in the backend, which I assume means some CSS?

<style> #tidio-chat-iframe { bottom: 50px !important; } @media only screen and (max-width: 980px) { #tidio-chat-iframe { bottom: 0px !important; } } </style>


But I thought this looks more like HTML than CSS?

I'm not well-versed with either, so hoping if I may get some CSS help from fellow members who have better experience to guide me on how I can shift the chatbot icon above the scroll-up button.

Are there any kind souls who can guide me with this, please?

Thank you.

Regards,
Richard

Join the Discussion
Write something…
Recent messages
AbieAJ Premium Plus
Hi

Siteorigin CSS can possibly help here

https://siteorigin.com/css/
https://wordpress.org/plugins/so-css/

Hope you are able figure it out.
Reply
MarionBlack Premium
Could you put the code into the Insert Headers and Footers plugin?
Reply
OCH3943 Premium Plus
Hi Marion,

I added in Customize --> Additional CSS.

Is there a benefit to insert the code in this plugin?

Thanks!
Reply
MarionBlack Premium
You should be able to choose which pages/posts the chatbot appears on.
Reply
OCH3943 Premium Plus
Hi Marion,

Ok, noted with thanks! I think I will also check with the plugin support to ask if their chatbot has this feature. Cos the control is done via their panel / website.
Reply
RCanty Premium Plus
You should be able to add CSS code under the Customize tab in Appearances.
Reply
Triblu Premium
Yes Ronnie,

Good catch... and that option MIGHT then offer the chat bot on EVERY page. He would definitely need to test it to see what this option will do.

Personally, I'd only want to add a chat bot to the loading page and if you have a price page.
Reply
OCH3943 Premium Plus
Hi Canty,

Thank you!

Yes, I was trying my luck and played around by removing the "Style" tag and copying the rest. It worked.
Reply
OCH3943 Premium Plus
Oh... I think the chatbot is appearing in all my posts and pages. I guess my intent is just to improve social engagement in the website in case my readers have questions they would like to ask.

It seems better to give it another option for people to chat other than to leave a comment?
Reply
Triblu Premium
That's what I thought. Using the Additional CSS textbox under Customize covers the entire website.

Personally, I would not provide a chat bot on all pages and posts BUT... that is JUST ME. So, do follow whichever option YOU want. I only wanted to make it clear to you when using the different options as to what result you would get.
Reply
RCanty Premium Plus
I just learned something new! Didn’t realize it would have that affect.

Canty
Reply
Triblu Premium
By helping others, I too have had the luxury of learning something new. So, you're not alone. One of the many benefits to being an active member here. :-D
Reply
OCH3943 Premium Plus
Noted, I learn something new today. :) Thanks a lot!

Now I am wondering if this chat plugin I installed has the feasibility to make the chatbot appear only in certain posts or pages and not the entire website... that flexibility would be handy.

One thing I find quite useful with this chat plugin is that I get notified whenever someone lands on my site. And I get to know the location and which posts they are reading. Didn't know that a chat plugin can capture all these things so it is pretty cool and interesting to me.
Reply
Triblu Premium
Well, that's what I was explaining in my comment.. and that using Ronnie's suggestion would share it site wide.

If you have a contact page, why not limit the chat bot to that page, then all you'd need to do is to take the CSS back out of Additional CSS and place it on the contact page.

Scroll up to see how to add it to ONE post or page, depending on which WordPress editor you are using.

Well too, perhaps with your chosen chat bot, you may need it on every page / post in order for their scripts to tell you who landed on which page and how many posts / pages they visited, and for how long.

For that you would definitely need to reach out to the chat bot support staff for advise.
Reply
OCH3943 Premium Plus
Thanks for the in-depth thoughts Trish. I will ask the chat bot support staff to understand more on their capabilities.
Reply
Triblu Premium
Hey Richard,

The "style" tag tells a browser that it is CSS.

If your theme does not have an area for you to add CSS code, you can use the Simple CSS plugin. See screen print below. Though I don't believe you would need the style tags for this plugin.

However there are other plugins that you can choose from. See second screen print below.

Which ever pages you want your chat bot to appear on, you will need to add the CSS snippet they gave you.

There is another choice... you could add this entire snippet to the very bottom of any page you want your chat bot to appear on. In THAT way, you wouldn't need a plugin.

If you're using the BLOCK editor - add this code to a HTML block. If you're using the Classic editor - add it using the Text tab NOT the Visual tab.

Hope this helps you.
Reply
OCH3943 Premium Plus
Hi Trish, thanks. I was trying my luck by playing around and... I realised that I could just remove the "Style" tags and add it to the Additional CSS

#tidio-chat-iframe { bottom: 60px !important;} @media only screen and (max-width: 980px) { #tidio-chat-iframe { bottom: 60px !important; padding: 0px 10px}

Added the padding above and it works for me.

Is adding a CSS plugin better or is it ok if I do the above? The code I add in the Additional CSS section won't disappear right?
Reply
Triblu Premium
Depends... if you added the CSS code to your theme... then that is NOT a good idea, as it will be overwritten on your next update of your theme.

BUT... if you only added the script to the pages / posts where your chat bot appears, then that should be fine.

OR... using the area that Ronnie (aka RCanty) suggested is also recommended, as it will NOT be overwritten when updating your theme.
Reply
OCH3943 Premium Plus
Hi Trish,

I add it here (see screenshot). Does adding CSS code here get overwritten when my theme gets updated?
Reply
Triblu Premium
That is exactly what Ronnie had suggested, and no... using that area does NOT get overwritten when updating your theme.
Reply
OCH3943 Premium Plus
That's good to know. Thanks, Trish!

I will give Tidio a try and see how useful it might be...
Reply
Top