New Live Chat implementation - Cant get it to work

[beta_Rigel]

Dear 3cx,

i want ot implement the new 3cx Chat into my website. "selfprogrammed"

i have copied the call-us-selector into the body Tag, but the chat icon does not appear on my localhost, but if use the old code the chat bubble appears.

Does anybody maybe have an idea?

New Code​

return (
<>
<call-us-selector
phonesystem-url="https://*********.3cx.de:5001"
party="LiveChat162866"
></call-us-selector>
</>
);
};

Old Code​

<call-us
style={{
position: "fixed",
right: matches ? "6px" : "12px",
bottom: matches ? "6px" : "12px",
zIndex: "99999",
"--call-us-form-header-background": "#1b1b1b",
"--call-us-main-button-background": "grey",
"--call-us-client-text-color": "#d4d4d4",
"--call-us-agent-text-color": "#f0f0f0",
"--call-us-main-button-width": "40px",
" --call-us-form-height": "330px",
}}
id="wp-live-chat-by-3CX"
channel-url={threeCxConfig}
files-url={threeCxConfig}
minimized="true"
animation-style="slideUp"
party="alludechat"
minimized-style="BubbleRight"
allow-call="true"
allow-video="true"
allow-soundnotifications="false"
enable-mute="true"
enable-onmobile="true"
offline-enabled="true"
enable="true"
ignore-queueownership="false"
authentication="none"
operator-name="Allude"
show-operator-actual-name="true"
channel="phone"
aknowledge-received="true"
gdpr-enabled="false"
gdpr-message="I agree that my personal data to be processed and for the use of cookies in order to engage in a chat processed by COMPANY, for the purpose of Chat/Support for the time of 30 day(s) as per the GDPR."
message-userinfo-format="both"
message-dateformat="both"
start-chat-button-text="Chat"
window-title="Allude Chat"
window-icon="https://*******.s3.eu-central-1.amazonaws.com/staticImages/alludeLogo/Allude_Master_A_white.svg"
button-icon="https://*******.s3.eu-central-1.amazonaws.com/staticImages/alludeLogo/Allude_Master_A_white.svg"
button-icon-type="url"
invite-message="Hello! How can we help you today?"
authentication-message="Could we have your name and email?"
unavailable-message="We are away, leave us a message!"
offline-finish-message="We received your message and we'll contact you soon."
ending-message="See you soon and have a great day!"
greeting-visibility="none"
greeting-offline-visibility="none"
// chat-delay="2000"
offline-name-message="Could we have your name?"
offline-email-message="Could we have your email?"
offline-form-invalid-name="I'm sorry, the provided name is not valid."
offline-form-maximum-characters-reached="Maximum characters reached"
offline-form-invalid-email="I'm sorry, that doesn't look like an email address. Can you try again?"
enable-direct-call="false"
enable-ga="true"
></call-us>

<Script
src="https://cdn.3cx.com/livechat/v1/callus.js"
id="tcx-callus-js"
lazyOnload
></Script>

 

[paurus]

<Script
src="https://cdn.3cx.com/livechat/v1/callus.js"
id="tcx-callus-js"
lazyOnload
></Script>

this code must also be added to the new code

 

[Dmitry Yurkin]

Hello, beta_Rigel,

Paurus is right, new LiveChat code contains of two parts:

• Call-us tag (<call-us-selector ... >)
• Script tag (<script ... >)

You added only first part.

 

[beta_Rigel]

ok cool thank you. i will try it

 

[omondidavid]

Hello. I get to see the live chat message icon but on hovering it, i get ban icon. here is the code

import React, { FC, memo } from "react";

const LiveChatCOMP: FC = memo(() => {
return (
<div>
<call-us-selector
phonesystem-url="https://****.3cx.cloud"
party="*****"
></call-us-selector>

<script
defer
src="https://downloads-global.3cx.com/downloads/livechatandtalk/v1/callus.js"
id="tcx-callus-js"
charSet="utf-8"
crossOrigin="anonymous"
></script>
</div>
);
});

LiveChatCOMP.displayName = "LiveChatCOMP";
export { LiveChatCOMP };

in my modules.d.ts file

declare namespace JSX {
interface IntrinsicElements {
"call-us-selector": {
"phonesystem-url": string;
party: string;
} & React.HTMLAttributes<HTMLElement>;
}
}