livechat / chat-widget-adapters Goto Github PK

customIdentityProvider() {
const baseAPI = '' //////what is this value????
const userId = '30317220-c72d-11ed-2137-0242ac120002'

	        const getToken = async () => {
	          const response = await fetch(`${baseAPI}/getToken/${userId}`)
	
	          const token = await response.json()
	          console.log('getToken', token)
	          return token
	        }
	
	        const getFreshToken = async () => {
	          const response = await fetch(`${baseAPI}/getFreshToken/${userId}`)
	
	          const token = await response.json()
	          console.log('getFreshToken, token')
	          return token
	        }
	
	        const hasToken = async () => {
	          const response = await fetch(`${baseAPI}/hasToken/${userId}`)
	          const data = await response.json()
	          return data
	        }
	
	        const invalidateToken = async () => {
	          const response = await fetch(`${baseAPI}/invalidate/${userId}`)
	          const data = await response.json()
	          console.log(data)
	        }
	
	        return {
	          getToken,
	          getFreshToken,
	          hasToken,
	          invalidate: invalidateToken,
	        }
	      },

Describe the bug
The code snippet provided to install is invalid. It's better to list the packages instead of writing *

To Reproduce

1. Run yarn add @livechat/widget-*

Expected behavior
Install the package

Screenshots

yarn add v1.22.10
[1/4] Resolving packages...
error An unexpected error occurred: "https://registry.yarnpkg.com/@livechat%2fwidget-*: Not found".
info If you think this is a bug, please open a bug report with the information provided in "/home/bartek/go/src/github.com/gendocu-com/console-ui/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

Describe the bug
In our setup, the Widget is inside the router component. So it is destroyed and created each time the User changes the page. If one does it quickly enough we can catch this error.

To Reproduce
Steps to reproduce the behavior:

1. Put the widget inside the router component
2. Change routes quickly
3. Get the error

Expected behavior
Widget is checking if window.LiveChatWidget is present

Screenshots
The top of the callstack:

instrument.js:107 TypeError: Cannot read properties of undefined (reading 'call')
at Object.destroy (widget-core.esm.js:321:29)
at LN.i.useEffect.n (widget-react.esm.js:292:120)

Desktop (please complete the following information):

• React JS
• OS: macOS
• Browser chrome
• Version 103

Additional context
I think this is a bug in the Widget because here https://github.com/livechat/chat-widget-adapters/blob/master/packages/widget-react/src/LiveChatWidget.tsx#L11 it creates an API but here https://github.com/livechat/chat-widget-adapters/blob/master/packages/widget-core/src/create-widget.ts#L73 it is not checking a global object is present.
If we repeat those functions quickly enough 'widgetRef.current' could be present but 'window.LiveChatWidget' still no.

When the developer imports { LiveChatWidget, EventHandlerPayload } from "@livechat/widget-vue", there is a notification that the require is not defined.

@livechat/widget-vue version is 1.2.3, which is the vue2 framework used in uniapp.

Describe the bug

Uncaught TypeError: Cannot read properties of null (reading 'useRef')
    at Object.useRef (react.development.js:1628:1)
    at LiveChatWidget (widget-react.esm.js:284:1)
    at renderWithHooks (mf-va_remoteEntry.js:32482:28)
    at mountIndeterminateComponent (mf-va_remoteEntry.js:35795:23)
    at beginWork (mf-va_remoteEntry.js:36774:24)
    at beginWork$1 (mf-va_remoteEntry.js:40119:24)
    at performUnitOfWork (mf-va_remoteEntry.js:39567:23)
    at workLoopSync (mf-va_remoteEntry.js:39506:15)
    at renderRootSync (mf-va_remoteEntry.js:39485:17)
    at recoverFromConcurrentError (mf-va_remoteEntry.js:39105:30)
    at performConcurrentWorkOnRoot (mf-va_remoteEntry.js:39053:32)
    at workLoop (mf-va_remoteEntry.js:20594:44)
    at flushWork (mf-va_remoteEntry.js:20573:24)
    at MessagePort.performWorkUntilDeadline (mf-va_remoteEntry.js:20781:31)

To Reproduce
node version: 20.4.0
react version: 18.0.1

function LiveChatWidget(props) {
  var widgetRef = React.useRef(null);
  React.useEffect(function () {
    widgetRef.current = createWidget(props);
    window.__lc.integration_name = "@livechat/widget-react";
    widgetRef.current.init();
    return function () {
      var _widgetRef$current;

      (_widgetRef$current = widgetRef.current) === null || _widgetRef$current === void 0 ? void 0 : _widgetRef$current.destroy();
    }; // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [props.license, props.group, props.chatBetweenGroups]);

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Is your feature request related to a problem? Please describe.
I'd like to be able to set session variables, open the widget and set callbacks (specifically for 'on_chat_ended') using hooks rather than the window.LiveChatWidget API.

Describe the solution you'd like
A set of hooks for calling some of the functions available in the JS API. I think it could also be beneficial to have a single hook encapsulating all of the most important, more specific ones in order to minimise hook calls, making the usage more concise and elegant (IMO).

Describe alternatives you've considered
I'm writing my own set of hooks for use within our app for the time being.

Additional context
Example of usage I've got in mind

I am trying to figure out how on earth to programatically trigger the window to open from a button click. We are using React with next.js and the livehcat component is being rendered in the app,.tsx file, but how do you access the methods on that widget? Your documentation gives no clues to this.

Is your feature request related to a problem? Please describe.
Update to Angular v15

Describe the solution you'd like
#64

Additional context
Previous issue (#61) was not fully covered v15 migration. So, I've created a new PR with update to v15

Seems with the new upgrade the OpenChatWindow has been disregarded and unavailable with the package, this is a good feature that is required when child to main components on Angular. Can you please see this through for us.

Bug Description
Trying to implement @livechat/widget-react with Next.js but it gives https://cdn.livechatinc.com/tracking.js net::ERR_BLOCKED_BY_CLIENT and is not working

To Reproduce
Implementing the code for Livechat as follows:
<LiveChatWidget
license="MY_LICENSE_KEY"
group="0"
visibility={'maximized'}
/>

Expected behaviour
The Livechat widget should be shown on the page maximized

Screenshots

Desktop (please complete the following information):

• OS: MacOS Catalina v10.15.7
• Browser: Chrome Version 101.0.4951.64 (Official Build) (x86_64)

Additional context
"react": "^17.0.2"
"next": "12.0.1"
"@livechat/widget-react": "^1.1.0"

Is your feature request related to a problem? Please describe.
We don't want the user to be able to minimize the widget.

Describe the solution you'd like
As a developer, createWidget function configs has hideMinimizedIcon option.

Describe alternatives you've considered
No.
Additional context

Describe the bug
We are using reactjs live chat packager
Here is the URL : https://www.npmjs.com/package/@livechat/widget-react

visibility 'maximized' | 'minimized' | 'hidden'

visibility="minimized" do hide chat icon in mobile view, due to this all mobile user not able to see chat icon with this visibility.

To Reproduce
Steps to reproduce the behavior:

1. Go to the website where live chat widget added using reactjs.
2. In mobile android device it is not showing chat icon, iPhone I did not check, you need to check it.

Expected behavior
I am assuming that chat icon should visible in minimized mode, it should not open but show chat icon.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Mobile OS
• Browser [chrome, safari] you can check in the all browser.
• Version [All version]

Smartphone (please complete the following information):

• Device: [All devices]
• OS: [All OS]
• Browser [chrome, safari]
• Version [all]

Additional context

Is your feature request related to a problem? Please describe.
It is an enactment, I have a case where would be good to have a method to open the chat in case the user clicks on contact Me

Describe the solution you'd like
a hook that opens the chat so the user can see the popup and type the message there.

There is an error in console related to live chat tracking file.
Error happens immediately after widget load.

• OS: MacOS
• Browser Safari
• Version 15.6.1

Describe the bug
On some mobile devices we are experiencing a white bar behind the chat widget that is restricting viewing the bottom of the screen. It is not happening on all devices, but we've verified it happens on:

• Pixel 6 Android 13 with Chrome browser version 108
• iPhone 14 with Safari
• iPhone 12 Mini with Safari

To Reproduce
Steps to reproduce the behavior:

1. Install the @livechat/widget-react package
2. Add the plugin to the App.tsx page.
   Here's an example of how/where we add the widget
   function App() { return ( <AppProvider> <CacheProvider value={clientSideEmotionCache}> <ThemeProvider theme={themes()}> <CssBaseline /> <SnackbarProvider maxSnack={3}> <AuthProvider> <DialogProvider> <RightDrawerProvider> <Routes /> </RightDrawerProvider> </DialogProvider> </AuthProvider> </SnackbarProvider> </ThemeProvider> </CacheProvider> <LiveChatWidget license="XXXXXXX" /> </AppProvider> ); }
3. Start App
4. Notice the white bar across the bottom of the screen

Expected behavior
We expected the widget to float above the components instead of taking up the entire row.

Screenshots

Desktop (please complete the following information):
No issues here :)

Smartphone (please complete the following information):

• Pixel 6 Android 13 with Chrome browser version 108
• iPhone 14 with Safari
• iPhone 12 Mini with Safari

Please let me know if you need any additional information and I'll be happy to provide it.

Cheers,
Jeremy

Is your feature request related to a problem? Please describe.
I am trying to develop a website for a client that uses Livechat. They want to implement your software into their website, but Since I useSveltekit there is a problem with doing that,

Describe the solution you'd like
I would like the vue support to be adapted to work for sveltekit as well. This should be simple as svelte and vue are very similar. Some people have written scripts to do that exact thing.

Describe alternatives you've considered
Non that I can think of

Is your feature request related to a problem? Please describe.
How can I hide / Destroy chat widget on page leave. I dont want to show chat widget on all pages. i have a support page and want to show chat only on support page.

Describe the solution you'd like
there should be an option to show/hide on widget.

Describe alternatives you've considered
i hide it via css.

Additional context
I am using angular with ionic framework. and i want to hide it using *ngIf or is there an directive available ?

Is your feature request related to a problem? Please describe.

Embedding the LC widget leads to a large PageSpeed performance degradation.

https://pagespeed.web.dev/report?url=https%253A%252F%252Fwww.intervillas-florida.com%252F&hl=en&form_factor=mobile

Describe the solution you'd like

As you can see, the external resources are huge, and block the rendering for the page for up to half a second.

Without the LC widget, the PageSpeed ranks in the mid-80s.

It would be nice if you could spare some engineering time and improve this situation.

(I realize this has not much to do with the adapters provided in this repository, but I'd like to keep the discussion open for others stumbling on this issue.)

Describe alternatives you've considered

1. I've considered to delay loading the chat widget. This however only moves the problem to a later point in time (and maybe hide it from the PageSpeed tools).
2. Disable the LC integration altogether. This isn't really an option :)

Additional context

We're using the Vue 2 adapter:

<template>
  <div>
    <a
        v-if="!isReady"
        :href="`https://direct.lc.chat/${license}/1`"
        rel="nofollow"
        target="_blank"
    >Chat with us!</a>
    <LiveChatWidget
        :license="license"
        @ready="isReady = true"
    ></LiveChatWidget>
  </div>
</template>

<script>
import { LiveChatWidget } from "@livechat/widget-vue/v2"

export default {
  components: {
    LiveChatWidget,
  },
  props: {
    license: { type: String, required: true }, 
  },
  data() {
    return {
      isReady: false,
    }
  },
}
</script>

Describe the bug
I am using the Angular widget of LiveChat and I want to be able to call functions to manipulate the chat widget. For Example. set the widget visibility to 'maximize' and 'minimize'. From the documentation Here Angular Adapter it looks like I should be able to call LiveChatWidget.on('visibility_changed', onVisibilityChanged);. My Question is Am I only able to use this function call in a script tag html or can I use it also in my component.ts file?

To Reproduce
Steps to reproduce the behavior:

1. OnInit LiveChat widget will be 'minimized'.
2. On Click of widget call function to open another Angular Dialog.
3. When form submitted in Dialog, can make a call to 'maximize' LiveChat widget.
4. other function call between LiveChat and Angular components will continue.

Expected behavior
An example and expected behavior of how to make function calls between Angular components and LiveChat, Do I make calls in script tag HTML or can I make calls to the Widget in component files?

Screenshots
not applicable at this time

Desktop (please complete the following information):

• OS: [Windows 10]
• Browser [Edge*, Chrome, FireFox]

Smartphone (please complete the following information):
n/a

Additional context
n/a

Hello LiveChat team, my development team and I, we want to integrate the LiveChat service to our web application developed with React version 17.0.2, we have followed the documentation: https://developers.livechat.com/docs/extending-chat-widget/chat-widget-adapters/react-adapter

However, we have not been successful, we get an error indicating that we must use TypeScript files (.tsx), but we are working with .jsx files.

In this order of ideas, we need your help to confirm if it is possible to integrate the LiveChat service with the current version of React.

Currently, we have the LiveChat service functional on our WordPress site iproveedor.com and we want that same chat to work on our web app https://app.iproveedor.com/login/index.html.

Is your feature request related to a problem? Please describe.
I want when the user presses the live chat button, the message in the live chat widget is automatically filled with the message the developer wants.

Describe the solution you'd like
Added setter methods to set customer messages such as set customer name or email currently available.

Describe alternatives you've considered
Currently there is no other alternative

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @livechat/[email protected] for the project I'm working on.

I noticed that you included the types for the widget in your package, but they were not applying for me in my Next.js app. I'm using version 4.9.5 of Typescript.

Here is the diff that solved my problem:

diff --git a/node_modules/@livechat/widget-core/dist/widget-core.d.ts b/node_modules/@livechat/widget-core/dist/widget-core.d.ts
index a30da32..551784c 100644
--- a/node_modules/@livechat/widget-core/dist/widget-core.d.ts
+++ b/node_modules/@livechat/widget-core/dist/widget-core.d.ts
@@ -1,4 +1,5 @@
-declare type ExtendedWindow = Window & {
+ declare global{
+ interface Window  {
     __lc: {
         license: number;
         group?: number;
@@ -21,7 +22,8 @@ declare type ExtendedWindow = Window & {
     LC_API?: {
         on_after_load?: VoidFunction;
     };
-};
+}
+ }
 declare function on(name: 'ready', handler: EventHandlers['onReady']): void;
 declare function on(name: 'new_event', handler: EventHandlers['onNewEvent']): void;
 declare function on(name: 'form_submitted', handler: EventHandlers['onFormSubmitted']): void;

This issue body was partially generated by patch-package.

"Can't perform a React state update on an unmounted component." Appears in the console log, and the app memory leaks and crashes my browser.

Simply following your code example in next.js caused this. Your older deprecated widget works.

I would like to use the react implementation of this widget, but I'm not sure how it works with a Custom Identity Provider. As far as I see, I don't have access to the custom_identity_provider object which is shown in the documentation: https://developers.livechat.com/docs/extending-chat-widget/custom-identity-provider

Is your feature request related to a problem? Please describe.
I am using Angular livechat widget package in the Angular app. I would like to have the latest version supported.

Describe the solution you'd like
PR - #60

Is your feature request related to a problem? Please describe.
There is a lack of asyncInit option (in the ExtendedWindow type from livechat-core)

feature requested: https://developers.livechat.com/updates/load-livechat-widget-on-demand

Describe the solution you'd like
Probably an update on LC api -> introducing new input [asyncInit] -> we can get LC component via @ViewChild(LiveChatWidgetComponent), so using liveChatWidgetComponent.reinitialize() in .ts code is not an issue, or everything via inputs is also fine

Describe alternatives you've considered
I tried to set (window as any).__lc.asyncInit = true; myself but to no avail -> it should be set after license etc. but before initialization and i have no control over it cause of the widget

Additional context
I need to hold loading of LC code before user agrees to cookies or anything else and i see no mention for asyncInit anywhere in the codebase here - maybe some update pretty please?

This is more of a question. Is there a way to programmatically start a chat in the React Chat Widget? I want to start a chat when a user clicks on a button that I created.

Describe the bug
Using it in ionic project for mobile application. but on Iphone is it not respecting Safe areas. and going out side safearea which is causing issues. after opening the widget not able to close it.

Expected behavior
Should respect safes in iPhones

**Screenshot

**

How can i change color in the chat box to match my brand color?

I'm currently experiencing a problem with React's LiveChat widget, I hope someone can shed some light and possibly suggest a fix.

Our app currently runs in a native web view, which allows us to use React (HTML, JS and CSS) as a frontend for our native app.

When running the web view, iOS exposes CSS env() variables like safe-area-inset-top, which is a non-zero value in case the phone has a notch. This variable is used to define a safe area so that content isn't rendered behind the notch.

This works pretty well except when we open the LiveChat widget, which seemingly sets all the values to 0.

How the App usually looks:

How the chat looks when the LiveChat component is open:

You can see the minimise button is being rendered behind the notch. And if I increase the padding of the iframe rendering he chat, I can take a peek behind to reveal the CSS variables setting the safe areas have been reset:

If I go look at my inspector, I can tell that --safe-area-inset-top (which I previously assigned to env(safe-area-inset-top) has been set to 0.

The strange thing is that before opening LiveChat, I can see that #chat-widget-container actually has a non-zero value assigned to the variable, which is then set to 0 the moment I click on the button to open LiveChat.

Our implementation is pretty standard:

      <LiveChatWidget
        license={liveChatLicense}
        visibility={visibility}
        customerEmail={user.data?.data.email}
        customerName={user.data?.data.firstName}
      />

Any idea how we can work around this issue?

I implement library to my project but have some problem.

<LiveChatWidget license="*****" visibility="minimized" />
But is show in my code like this =>

I need change to like this =>

Dependency conflicts: Please update the library to enable migration to Angular v18.

trying to sue @livechat/widget-vue in Vue2 and getting exceptions on loading my site. Not even rendering the component yet. I get thi

s
Steps.

1. Add package with yarn
2. put code in nuxt plugin:
   import Vue from 'vue';
   import { LiveChatWidget } from "@livechat/widget-vue";
   Vue.use(LiveChatWidget);
3. Add plugin to nuxt.config.js

Describe the bug
We try to test LiveChat on our application but it did not work, tried to run code but that time showed an error.

We have referenced the document for implementation.
https://github.com/livechat/chat-widget-adapters

To Reproduce
Steps to reproduce the behavior:
See error:
error NG8001: 'livechat-widget' is not a known element:
1. If 'livechat-widget' is an Angular component, then verify that it is part of this module.
2. If 'livechat-widget' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Screenshots

Version:
-Angular Version 9

Is your feature request related to a problem? Please describe.
This angular widget supports up to Angular v15, v16 has now been released.

Describe the solution you'd like
It does not seem to be that many breaking changes but rather new features such as signals that are optional. It might be enough to just bump the peer dependancies?

Describe alternatives you've considered
To give up on the Angular specific widget and create our own implementation, but I really want to avoid this.

Description
I want to use the live chat widget adapter. However, this will not be displayed in minimised state, if the support team is offline. If the support team is online, it works as intended. If I use the JS implementation the live chat widget works as intended even if the support team is offline.

Does this package support a params prop for React? I didn't notice an option for that prop unlike the old react-livechat package.

Describe the bug
I am trying to implement livechat widget using @livechat/widget-react package to a website.

To Reproduce
I found that, after I selected visibility for the chat widget as "Always hide minimized widget icon" from the control panel (Settings > Chat widget > Customisation > Position), when I tried to open the widget (as captured in the video below at 0:08 and 0:12 seconds) with a button copied from control panel (Settings > ... > Chat buttons) and pasted to the html file for my working project, sometimes (may be 2 out of 10 more or less) the chat widget was opened with flicks (a flash before fully open).

Expected behavior
There should be no flicks when opening the widget.

Video Record
https://user-images.githubusercontent.com/55337066/174469814-374b62bf-2168-4f48-9f27-9429fe40fde3.mov

Environments:

• OS: iOS
• Browser Chrome (v102.0.5005.115)
• react (v17.0.2)
• @livechat/widget-react (v1.1.0)

I think this behaviour may be quite disturbing for users, is there any way to fix it? thanks for answering.

There is react 18 out, please update your package.json

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Is your feature request related to a problem? Please describe.
I am Using it inside Ionic Mobile Application. My application have Bottom Tabs. using Livechat widget hide my Tab Button.

Describe the solution you'd like
there should be a Position option to change widget position. or CSS workaround to add some margin bottom .

Describe alternatives you've considered
Tried CSS not Working.

Additional context
Add any other context or screenshots about the feature request here.

Describe the bug
I'm using Vue 2 as my framework and the livechat widget guide seems to not working

To Reproduce
Steps to reproduce the behavior:

1. I Use Provided Code from the website to my index ( before tag, as instructed) and it doesnt do anything to my website
   

2. Then i use this page's direction to Place the code on the app.vue and it's still not working
   
   

My website still show nothing

Version : Vue 2.6.12

You can set customerName and customerEmail. It seems like it should be possible also to set the avatar.