crisp-im/crisp-sdk-web

:package: Include the Crisp chat widget from using frameworks such as React, VueJS, Angular...

Crisp SDK Web

The Crisp SDK Web allows embedding Crisp chat widget using web frameworks such as React, Vue, or Angular. This SDK wraps the $crisp methods and provides TypeScript definitions.

Copyright 2023 Crisp IM SAS. See LICENSE for copying information.

• 😘 Maintainers: @baptistejamin

Documentation

👉 Please go to the Crisp Developer Hub to access the documentation on the Web SDK.

Credits

Crisp SDK Web is owned and maintained by Crisp IM SAS. You can chat with us on crisp or follow us on Twitter at Crisp_im

License

Crisp SDK Web is under Copyright license. see LICENSE for more details.

crisp-sdk-web's Issues

Add `setChatView()` alongside `setHelpdeskView()` method

Hey, I see I can set the Helpdesk View (Crisp.chat.setHelpdeskView()) but I can't do a similar thing to switch to Chat View (e.g. Crisp.chat.setChatView()). This could be handy for hooking up my UI elements to the desired action (either talking to someone or checking the helpdesk topics). Small thing but IMHO it improves the experience.

I tried to fork and add it on my own, but it looks like I can't toggle between Chat and Helpdesk view with the $crisp.push(["do", "chat:open"]) method.

  setHelpdeskView() {
    this.parent.createSingletonIfNecessary();

    window.$crisp.push(['do', 'helpdesk:search']);
  }

  setChatView() {
    this.parent.createSingletonIfNecessary(); // or this.parent.autoInjectIfNecessary(); ?

    window.$crisp.push(['do', 'chat:open']);
  }

Let me know what am I doing wrong 😅
Cheers

"Document is not defined" error on Next.JS when Implementing the library

I installed the crisp-sdk-web in a Next.js project, but I am getting an error: "document is not defined".

Note: With a common react project (create-react-app) it works OK.

Carousel message type mismatch between docs & typings

SDK docs for carousel message use "description": "...string...", while message.ts typings define description: boolean.
Also, typings include a required label field, while the docs example is missing that field. Which is the correct code to use?

https://docs.crisp.chat/guides/chatbox-sdks/web-sdk/npm/#show-a-carousel-message

https://github.com/crisp-im/crisp-sdk-web/blob/master/src/message.ts#L42

session.reset error

Crisp.session.reset() triggers an error window.$crisp.do is not a function.

The culprit seems to be the following line :

crisp-sdk-web/src/session.ts

Line 25 in a30d3c4

window.$crisp.do("session:reset", [reload]);

that should be changed to:
window.$crisp.push(["do", "session:reset", [reload]]);

Let me know if I need to open a PR.

Package entry issue

I encounter this error while releasing new version of my app. Is there anything wrong with the package?

Failed to resolve entry for package "crisp-sdk-web". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "crisp-sdk-web". The package may have incorrect main/module/exports specified in its package.json.
error during build:

Passing options to configure() disables autoload

It is very misleading that passing options to configure() (e.g. locale, or even an empty {}) disables autoload. I suspect most people will assume that whatever option they passed is what broke the widget.

Instead of

configure(websiteId: string, options: Options = {autoload : true }) {

it should be

configure(websiteId: string, options: Options = {}) {

and then defaults should be resolved on a per-option basis within the body.

Crisp found shims of native JavaScript methods.

Hello la team,

Depuis qu'on a implémenté Sentry coté Front, on a des warning : getsentry/sentry-javascript#2130

On a depuis des clients qui nous disent nous avoir écrit, mais aucune trace de leurs messages chez Crisp. Ils nous appellent pour comprendre pourquoi ils n'ont pas de réponses. Est-ce que vous pensez que ça peut être lié ? Nous n'avons pas réussi à reproduire l'issue pour obtenir plus d'informations

Merci

Callback for Crisp.message.onMessageSent missing TypeScript definition

If i have this line:
Crisp.message.onMessageSent((data) => {

I get a TypeScript error:

TS7006: Parameter data implicitly has an any type.

The return type is just Function, could it be more specific?

The operand of a 'delete' operator must be optional.

Hi my build on vercel does not work
./node_modules/crisp-sdk-web/src/index.ts:209:16
Type error: The operand of a 'delete' operator must be optional.
window.CRISP_TOKEN_ID = tokenId;
} else {
delete window.CRISP_TOKEN_ID;
^
}
}

./node_modules/crisp-sdk-web/src/index.ts:4:3
Type error: Re-exporting a type when the '--isolatedModules' flag is provided requires using 'export type'.

2 |
3 | export {

4 | AnimationMessage,
| ^
5 | AudioMessage,
6 | FileMessage,
7 | PickerMessage,

• info Linting and checking validity of types .

next js 13 , typescript 4.9.3 , node js 18
npm run build
usage
import { Crisp } from "crisp-sdk-web";

Resize Crisp widget withtout the SDK

Would it be possible to add an option to resize the widget directly from the CDN version? (without including the SDK)

<script type="text/javascript">window.$crisp = []; window.CRISP_WEBSITE_ID = "uuid"; (function () { d = document; s = d.createElement("script"); s.src = "https://client.crisp.chat/l.js"; s.async = 1; d.getElementsByTagName("head")[0].appendChild(s); })();</script>

For example, a parameter such CRISP_WIDGET_SIZE= "sm"?

Impossible de changer de tokenId sans recharger la page

Bonjour,

J'intègre le sdk crisp dans une app mobile (techno angular). Je veux pouvoir changer le tokenId sans recharger l'appli et j'ai l'impression que ce n'est pas possible.

J'ai essayé de réécrire la config avec Crisp.setTokenId(newToken); ou Crisp.configure(key, { tokenId: newToken }); sans succès. J'ai également essayé la commande de reset $crisp.push(['do', 'session:reset']); sans résultat. J'ai l'impression qu'il n'y a pas moyen de reload Crisp sans recharger la page.

Un idée ?
Simon

License is 404

A License link at the bottom of your README.md returns 404.

Crisp uses the mediadevices API which busts the Chrome bfcache

Hi Crisp Team,

I'm using the Crisp widget on a couple of my websites. I recently ran a Google Lighthouse check on one of them, and on all pages, I got the same issue:

If I understand correctly, DevTools is referring to this API.

By using the "Search" tool of Chrome Devtools I found that apparently only the Crisp chat widget is utilizing that API.

Please have a look, as this could potentially seriously impact cache performance for every page using your widget.

Allow setting Crisp's chatbox language after locale change

In our current setup (web app running on NextJS), when a user changes the language on the website, he gets redirected to a new url containing the new locale. We have tried re-configuring Crisp with the new locale after the page load and even though the locale is correctly set in the Crisp object, the language of the chatbox does not change to the new locale. You have to do a page refresh for the chatbox language to change accordingly.

It would be great if you could force Crisp's locale via a function and trigger a chatbox re-render when that happens.

Our setup:
"crisp-sdk-web": "^1.0.13"
"next": "^13.1.6"

getSegments?

Would be handy if we could have a getSegments function. =)

Get A mirror in vue3

index.ts:173 Refused to load the script 'https://client.crisp.chat/l.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

What should I do?

Provide API equivalent to push set message:text

Bug

How to open a window and prefill a chatbox user text with a value. In JS SDK, it is done by using:

$crisp.push(["set", "message:text", [msg]]);

Is there a method equivalent to do that? I was not able to find any. I am using "crisp-sdk-web": "^1.0.21".

Implementation

Would be great to have something like:

Crisp.chat.setMessageText(msg)

Session reset and tokenId set not consistent

Hello,

Here are some tests related to issues I faced mostly with session reset, session loading and token id setting. The result seem not logical to me but maybe I use the sdk wrong. The sdk functions called (or onLoaded callback) are given at each steps:

Step 1: anonymous user not connected

Crisp.configure(xxx, { locale: 'fr', autoload: false })
Crisp.load()
=> Crisp.session.onLoaded(session_1)

• result: new empty chatbox ✅

Step 2: login as userA

Crisp.setTokenId(userA)

• result: messages from anonymous session_1 still visible ❌
• expected: new empty chatbox for userA (sessionMerge false by default)

Step 3: logout, now anonymous again

Crisp.session.reset()
=> Crisp.session.onLoaded(session_2)

• result: chatbox has messages from session_2 (maybe a previous session I had locally ??)
  completely other messages, not related to first anonymous session with Step 1 (session_1) ❌
• expected: messages from anonymous session_1 or new empty chatbox

Step 4: page reload, still anonymous

Crisp.configure(xxx, { locale: 'fr', autoload: false })
Crisp.load()
=> Crisp.session.onLoaded(session_2)

• result: chatbox has messages from session_2 ❌

• expected: messages from anonymous session_1 or new empty chatbox

Step 5: login as userB

Crisp.setTokenId(userB)

• result : no changes in chatbox, still messages from session_2 ❌
• expected: new empty chatbox for userB

Step 6: page reload as userB

Crisp.configure(xxx, { locale: 'fr', autoload: false })
Crisp.setTokenId(userB)
Crisp.load()
=> Crisp.session.onLoaded(session_3)

• result: messages from userB visible ✅

Step 7: logout, now anonymous again

Crisp.session.reset()
=> Crisp.session.onLoaded(session_3)

• result: messages from userB still visible (session_3) ❌
• expected: messages from anonymous session_1 or new empty chatbox

Step 8: page reload as anonymous

Crisp.configure(xxx, { locale: 'fr', autoload: false })
Crisp.load()
=> Crisp.session.onLoaded(session_3)

• result: messages from userB still visible (session_3) ❌
• expected: messages from anonymous session_1 or new empty chatbox

The safe mode does not seem to be available in the library

When we receive in the console the warning message asking us to activate the "safe mode" I see that it is not possible to do it from the exposed methods of the SDK. Shouldn't it be possible to activate it directly in the configure method?

You can disable this warning by adding: $crisp.push(["safe", true]) to your page JavaScript.

Knowing the phone number causing a crash

Would it be possible to have the phone number which caused a crash when it is invalid ? Otherwise, it's impossible to debug it 😅

Ability to add a nonce to the script tag

Hi @valeriansaliou ,

Due to third-party tools usage I have to set a nonce to my server page to load their script and bypass using CORP/COEP headers since I cannot customize them on those tools responses.

Would you consider adding the ability to customize the script attributes you create with load()?

crisp-sdk-web/src/index.ts

Lines 192 to 197 in cc3c7fb

	const _script = document.createElement("script");
	_script.src = this.clientUrl;
	_script.async = true;
	_head[0].appendChild(_script);

Thank you,

Crisp gets blocked on latest Chrome desktop version

Crisp has stopped working for me on the latest Chrome version. It still works on Chrome Mobile and on Safari but on Chrome Desktop (Mac) it no longer opens and instead logs the following errors:

Uncaught TypeError: window.$__CRISP_INSTANCE.__spool.locale_handler is not a function at en.js?21df3bd:7:34

Third-party cookie will be blocked in future Chrome versions as part of Privacy Sandbox.

I use the latest crisp-sdk-web version 1.0.25.

Delay When Fetching the session_id from Token

When the mobile app (Android or iOS SDK) sets the tokenId and we fetch the session_id using this API: https://api.crisp.chat/v1/website/:website_id/visitors/token/:tokenId, there is sometimes a delay—sometimes 1 minute, sometimes it doesn't happen at all—depending on the website ID. Is this related to the website ID's plan?

Not possible to set/update locale

Is there any plan to support it? Currently, we set it via window.CRISP_RUNTIME_CONFIG = { locale: intl.locale, session_merge: true };

window.$crisp.is is not a function

I am working on a React application, on which I have installed crisp-sdk-web. Sometimes, randomly, I can't open the chat anymore, and I have the following error message in the console, while sometimes, everything works perfectly. The behavior seems random:

I did call Crisp.configure() with the uuid in my App.tsx.

main.fd36622d.js:2 Uncaught TypeError: window.$crisp.is is not a function
    at e.isChatOpened (main.fd36622d.js:2:1515822)
    at onClick (main.fd36622d.js:2:3023326)
    at onClick (main.fd36622d.js:2:3002732)
    at Object.De (main.fd36622d.js:2:2260503)
    at Be (main.fd36622d.js:2:2260657)
    at main.fd36622d.js:2:2280557
    at Mr (main.fd36622d.js:2:2280651)
    at Lr (main.fd36622d.js:2:2281066)
    at main.fd36622d.js:2:2286508
    at uu (main.fd36622d.js:2:2350177)
    at Re (main.fd36622d.js:2:2259635)
    at Vr (main.fd36622d.js:2:2282360)
    at Gt (main.fd36622d.js:2:2266756)
    at qt (main.fd36622d.js:2:2266540)
    at HTMLDivElement.r (main.fd36622d.js:2:2935323)

Implement Crisp.chat.onChatLoaded() function

Hi,
I'm integrating the Crisp into my React app and I'd love to be able to know when the Crisp chat is fully loaded.
I'm using the autoload: false option and loading Crisp manually via Crisp.load() method.

I'd like to add a UI loader to let users know when the chat is loading.

I've tried onChatOpened and onChatInitiated but it does not trigger after first programatic open.

Thanks!