The Live Chat icon overlays the bottom sidebar of the site.

[AnkaS]

Hello!
I was unable to change the location of the Live Chat icon.
The icon overrides the menu button on the site.

Editing the code does not lead to the desired result.


Please help move the chat slider a little higher.

Changing the code (right: 20px; bottom: 20px;") does not solve the problem. The chat icon does not respond to this code change(
What needs to be changed in the code and how to move the chat icon a little higher?



<!--<call-us
phonesystem-url="https://1342.3cx.cloud"
style="position:fixed;font-size:16px;line-height:17px;z-index: 99999;--call-us-main-accent-color:#1c61e7;--call-us-main-background-color:#FFFFFF;--call-us-plate-background-color:#373737;--call-us-plate-font-color:#E6E6E6;--call-us-main-font-color:#292929;--call-us-agent-bubble-color:#29292910;right: 20px; bottom: 20px;"
id="wp-live-chat-by-3CX"
minimized="true"
animation-style="noanimation"
party="*****"
minimized-style="bubbleright"
allow-call="true"
allow-video="false"
allow-soundnotifications="true"
enable-mute="true"
enable-onmobile="true"
offline-enabled="true"
enable="true"
ignore-queueownership="false"
authentication="both"
operator-name="****"
show-operator-actual-name="true"
aknowledge-received="true"
gdpr-enabled="false"
message-userinfo-format="both"
message-dateformat="both"
lang="ru"
button-icon-type="default"
greeting-visibility="none"
greeting-offline-visibility="none"
chat-delay="2000"
enable-direct-call="true"
enable-ga="false"
></call-us>-->
<script defer src="https://downloads-global.3cx.com/downloads/livechatandtalk/v1/callus.js" id="tcx-callus-js" charset="utf-8"></script>

 

[paurus]

remove the extra characters at the beginning and end of the code <!-- -->

 

[AnkaS]

Thank you very much! I received two email replies from 3CX experts.
But your answer turned out to be the most correct and understandable.
You are clearly the best! Thank you!

I have another question about test periods and purchase. What is the trial period of the live chat that I currently have?
In the settings, I chose free customization options.

 

[paurus]

Thank you very much! I received two email replies from 3CX experts.
But your answer turned out to be the most correct and understandable.
You are clearly the best! Thank you!

I have another question about test periods and purchase. What is the trial period of the live chat that I currently have?
In the settings, I chose free customization options.

Live chat is always provided for free, as long as you have a subscription to 3CX

 

[AnkaS]

Thank you very much for the information.
I want to clarify with you - will tools be added to the live chat for self-editing the size of the live chat window?
Since when changing the position of the chat icon, the adaptation of the open live chat window is very poor and goes beyond the screen on mobile devices.
Too much empty space in the open live chat window.
Tools for similar editing of dimensions for those who do not understand the code would be useful.

 

[techcare]

Thank you very much for the information.
I want to clarify with you - will tools be added to the live chat for self-editing the size of the live chat window?
Since when changing the position of the chat icon, the adaptation of the open live chat window is very poor and goes beyond the screen on mobile devices.
Too much empty space in the open live chat window.
Tools for similar editing of dimensions for those who do not understand the code would be useful.View attachment 35943

I agree. A lot more customization would be amazing.
Go here and vote for the things you like - https://www.3cx.com/community/forums/live-chat-sms-facebook/
Plenty to improve, but I'm sure 3CX is working hard at it.

 

[AnkaS]

I agree. A lot more customization would be amazing.
Go here and vote for the things you like - https://www.3cx.com/community/forums/live-chat-sms-facebook/
Plenty to improve, but I'm sure 3CX is working hard at it.

So far I haven't been able to figure out how to resize the live chat window. Live chat elements simply go beyond the screen on mobile devices.
And I can't write anything in this section. Not enough rights(

 

[Tomhowson1991]

Hello!
I was unable to change the location of the Live Chat icon.
The icon overrides the menu button on the site.

Editing the code does not lead to the desired result.


Please help move the chat slider a little higher.

Changing the code (right: 20px; bottom: 20px;") does not solve the problem. The chat icon does not respond to this code change(
What needs to be changed in the code and how to move the chat icon a little higher?

View attachment 35765

<!--<call-us
phonesystem-url="https://1342.3cx.cloud"
style="position:fixed;font-size:16px;line-height:17px;z-index: 99999;--call-us-main-accent-color:#1c61e7;--call-us-main-background-color:#FFFFFF;--call-us-plate-background-color:#373737;--call-us-plate-font-color:#E6E6E6;--call-us-main-font-color:#292929;--call-us-agent-bubble-color:#29292910;right: 20px; bottom: 20px;"
id="wp-live-chat-by-3CX"
minimized="true"
animation-style="noanimation"
party="*****"
minimized-style="bubbleright"
allow-call="true"
allow-video="false"
allow-soundnotifications="true"
enable-mute="true"
enable-onmobile="true"
offline-enabled="true"
enable="true"
ignore-queueownership="false"
authentication="both"
operator-name="****"
show-operator-actual-name="true"
aknowledge-received="true"
gdpr-enabled="false"
message-userinfo-format="both"
message-dateformat="both"
lang="ru"
button-icon-type="default"
greeting-visibility="none"
greeting-offline-visibility="none"
chat-delay="2000"
enable-direct-call="true"
enable-ga="false"
></call-us>-->
<script defer src="https://downloads-global.3cx.com/downloads/livechatandtalk/v1/callus.js" id="tcx-callus-js" charset="utf-8"></script>

Hey

Could someone explain where to put this code, please? I need to also move the icon on my site as it is unusable due to the return to the top of page button in WordPress.

Any help is appreciated!

 

[Lhot]

Same problem

 

[Lhot]

Thank you very much! I received two email replies from 3CX experts.
But your answer turned out to be the most correct and understandable.
You are clearly the best! Thank you!

I have another question about test periods and purchase. What is the trial period of the live chat that I currently have?
In the settings, I chose free customization options.

Hello, could you please teach me how to raise the live chat icon a bit? I'm experiencing a similar issue on my WordPress website. Thank you

 

[Guillaume Bourgeois]

To adjust the 3CX button position on your website and prevent it from overlapping with your menu, you should modify the `bottom` CSS property in the widget's style tag. This property controls the distance of the widget from the bottom of the page.

In your provided code, the widget is currently set to `bottom: 20px;`, meaning it's 20 pixels from the bottom. To move it up, increase this value. For example, changing `bottom: 20px;` to `bottom: 50px;` will raise the widget 50 pixels above the bottom, reducing or eliminating the overlap with your menu.

Here’s how to adjust it:

<!--<call-us
...
style="...; bottom: 50px;"
...
></call-us>-->

Make sure to test the new positioning on different devices and screen sizes for a consistent user experience.

 

[SnakeRiverWebDevelopment]

<!--<call-us ... style="...; bottom: 50px;" ... ></call-us>-->

This does not work, as the style is over written in the callus.js file

 

[Guillaume Bourgeois]

This does not work, as the style is over written in the callus.js file

The another approach is to add your custom CSS after the link to the callus.js file, within a <style> tag in your HTML. This would look something like:

<script defer src="https://downloads-global.3cx.com/downloads/livechatandtalk/v1/callus.js" id="tcx-callus-js" charset="utf-8"></script>
<style>
    #wp-live-chat-by-3CX {
        bottom: 50px !important;
    }
</style>

By placing this after the script tag, it ensures your custom CSS loads last and has a higher specificity.

I haven't tested it yet, but as a last resort, I would use JavaScript. However, I am convinced that this will work. Have you tested it?

 

[SnakeRiverWebDevelopment]

Yes just now, does not make a difference. Take a look for your self https://owyhee-county.com/

 

[Lhot]

To adjust the 3CX button position on your website and prevent it from overlapping with your menu, you should modify the `bottom` CSS property in the widget's style tag. This property controls the distance of the widget from the bottom of the page.

In your provided code, the widget is currently set to `bottom: 20px;`, meaning it's 20 pixels from the bottom. To move it up, increase this value. For example, changing `bottom: 20px;` to `bottom: 50px;` will raise the widget 50 pixels above the bottom, reducing or eliminating the overlap with your menu.

Here’s how to adjust it:

<!--<call-us
...
style="...; bottom: 50px;"
...
></call-us>-->

Make sure to test the new positioning on different devices and screen sizes for a consistent user experience.

Hi, Thank you for the comment! Where can I find the widget's style tag? I'm sorry, I'm not very familiar with WordPress.

 

[johnkirk]

remove the extra characters at the beginning and end of the code <!-- -->

For those of us who don't know html: could you specify what exactly needs to be output in that code? or better yet, what should be left?

 

[SnakeRiverWebDevelopment]

As I stated before, 3cx has embedded in the callus.js the style = value:"position: fixed; right: 20px; bottom: 20px; This overrides any css on the page, thus you can't move the callus-container, maybe inn Wordpress bey not on a normal website

 

[johnkirk]

As I stated before, 3cx has embedded in the callus.js the style = value:"position: fixed; right: 20px; bottom: 20px; This overrides any css on the page, thus you can't move the callus-container, maybe inn Wordpress bey not on a normal website

So it can only be fixed with a 3cx update

 

[SnakeRiverWebDevelopment]

Only if 3CX removes the code from the callus.js

 

[TECHXNEPAL]

Only if 3CX removes the code from the callus.js

Have you found any solution yet? If you do, Can you please also share with me? I'm also devastated by this icon position!!!