Skip to content

Crisp support when error login #749

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
elie222 merged 1 commit into from
Sep 5, 2025
Merged

Crisp support when error login #749

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions apps/web/app/(landing)/login/error/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import { useRouter } from "next/navigation";
import Link from "next/link";
import { useEffect } from "react";
import { Suspense, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { BasicLayout } from "@/components/layouts/BasicLayout";
import { ErrorPage } from "@/components/ErrorPage";
Expand All @@ -11,6 +11,7 @@ import { useUser } from "@/hooks/useUser";
import { LoadingContent } from "@/components/LoadingContent";
import { Loading } from "@/components/Loading";
import { WELCOME_PATH } from "@/utils/config";
import { CrispChatLoggedOutVisible } from "@/components/CrispChat";

export default function LogInErrorPage() {
const { data, isLoading, error } = useUser();
Expand All @@ -33,7 +34,7 @@ export default function LogInErrorPage() {
<LoadingContent loading={isLoading} error={error}>
<ErrorPage
title="Error Logging In"
description={`There was an error logging in to the app. Please try log in again. If this error persists, please contact support at ${env.NEXT_PUBLIC_SUPPORT_EMAIL}.`}
description={`Please try again. If this error persists, please use the support chat or email us at ${env.NEXT_PUBLIC_SUPPORT_EMAIL}.`}
button={
<Button asChild>
<Link href="/login">Log In</Link>
Expand All @@ -42,6 +43,10 @@ export default function LogInErrorPage() {
/>
{/* <AutoLogOut loggedIn={!!session?.user.email} /> */}
</LoadingContent>

<Suspense>
<CrispChatLoggedOutVisible />
</Suspense>
</BasicLayout>
);
}
16 changes: 11 additions & 5 deletions apps/web/app/(landing)/login/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { AlertBasic } from "@/components/Alert";
import { env } from "@/env";
import { Button } from "@/components/ui/button";
import { WELCOME_PATH } from "@/utils/config";
import { CrispChatLoggedOutVisible } from "@/components/CrispChat";

export const metadata: Metadata = {
title: "Log in | Inbox Zero",
Expand Down Expand Up @@ -100,10 +101,15 @@ function ErrorAlert({ error }: { error: string }) {
}

return (
<AlertBasic
variant="destructive"
title="Error logging in"
description={`There was an error logging in. Please try log in again. If this error persists please contact support at ${env.NEXT_PUBLIC_SUPPORT_EMAIL}`}
/>
<>
<AlertBasic
variant="destructive"
title="Error logging in"
description={`There was an error logging in. Please try log in again. If this error persists please contact support at ${env.NEXT_PUBLIC_SUPPORT_EMAIL}`}
/>
<Suspense>
<CrispChatLoggedOutVisible />
</Suspense>
</>
);
}
10 changes: 10 additions & 0 deletions apps/web/components/CrispChat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,4 +41,14 @@ const CrispChat = () => {
return null;
};

// This is used to show the Crisp chat when the user is logged out, and auto opens to help the user
export const CrispChatLoggedOutVisible = () => {
useEffect(() => {
if (!env.NEXT_PUBLIC_CRISP_WEBSITE_ID) return;
Crisp.configure(env.NEXT_PUBLIC_CRISP_WEBSITE_ID);
}, []);

return null;
};
Comment on lines +44 to +52
Copy link
Contributor

@coderabbitai coderabbitai bot Sep 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Match the intent: auto-open the chat for logged-out users

The comment says “auto opens,” but the effect only configures Crisp. Open and show the widget so users immediately see support.

 export const CrispChatLoggedOutVisible = () => {
   useEffect(() => {
     if (!env.NEXT_PUBLIC_CRISP_WEBSITE_ID) return;
-    Crisp.configure(env.NEXT_PUBLIC_CRISP_WEBSITE_ID);
+    Crisp.configure(env.NEXT_PUBLIC_CRISP_WEBSITE_ID);
+    // Ensure visibility and open the widget to assist the user
+    Crisp.chat.show();
+    Crisp.chat.open();
   }, []);
 
   return null;
 };
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
// This is used to show the Crisp chat when the user is logged out, and auto opens to help the user
export const CrispChatLoggedOutVisible = () => {
useEffect(() => {
if (!env.NEXT_PUBLIC_CRISP_WEBSITE_ID) return;
Crisp.configure(env.NEXT_PUBLIC_CRISP_WEBSITE_ID);
}, []);
return null;
};
// This is used to show the Crisp chat when the user is logged out, and auto opens to help the user
export const CrispChatLoggedOutVisible = () => {
useEffect(() => {
if (!env.NEXT_PUBLIC_CRISP_WEBSITE_ID) return;
Crisp.configure(env.NEXT_PUBLIC_CRISP_WEBSITE_ID);
// Ensure visibility and open the widget to assist the user
Crisp.chat.show();
Crisp.chat.open();
}, []);
return null;
};
🤖 Prompt for AI Agents 
In apps/web/components/CrispChat.tsx around lines 44 to 52, the effect only
configures Crisp but does not actually open the chat as the comment promises;
modify the effect so that after calling
Crisp.configure(env.NEXT_PUBLIC_CRISP_WEBSITE_ID) you immediately open/show the
widget (for example call the SDK method that displays the chat such as
Crisp.show() or push window.$crisp with ["do", "chat:show"] depending on the
Crisp integration used), keeping the env guard and empty deps array intact.


export default CrispChat;
2 changes: 1 addition & 1 deletion version.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
v2.8.12
v2.8.13
Loading