search

tantainnovative / intercom-next-js-14-guide

Next.js 14 Intercom Integration: A comprehensive guide and example codebase for seamlessly integrating the Intercom chat widget into Next.js 14 applications, enhancing user engagement and support.
https://tantainnovatives.com/blog/how-to-guides-and-tutorials/how-to-integrate-intercom-in-your-nextjs-14-project
MIT License
4 stars 0 forks source link

I'm glad to see the program you provided, but I have a question can you please help me? #1

Open lynn1286 opened 3 months ago

lynn1286 commented 3 months ago

I want the program to be able to pass parameters to Intercom dynamically, for example: the current user is not logged in, no need to pass the user information, the current user is logged in, pass the user information, how should I pass this information to Intercom?

Thank you for your help and look forward to your reply , thank you!

mr-tanta commented 3 months ago

To dynamically pass user information to Intercom based on whether a user is logged in or not, you’ll need to conditionally set the Intercom settings within your IntercomClientComponent. This involves checking the authentication state of the user and updating the Intercom settings accordingly.

Example 

'use client';
import { useEffect } from "react";

interface IntercomClientComponentProps {
    userId?: string;
    userEmail?: string;
}

const IntercomClientComponent: React.FC<IntercomClientComponentProps> = ({ userId, userEmail }) => {
    useEffect(() => {
        const intercomSettings: any = {
            api_base: "https://api-iam.intercom.io",
            app_id: "{YOUR_INTERCOM_APP_ID}" // Replace with your Intercom app ID.
        };

        if (userId && userEmail) {
            intercomSettings.user_id = userId;
            intercomSettings.email = userEmail;
        }

        window.intercomSettings = intercomSettings;

        if (window.Intercom) {
            window.Intercom('reattach_activator');
            window.Intercom('update', intercomSettings);
        } else {
            const intercomScript = document.createElement('script');
            intercomScript.type = 'text/javascript';
            intercomScript.async = true;
            intercomScript.src = 'https://widget.intercom.io/widget/{YOUR_INTERCOM_APP_ID}'; // Ensure this matches your Intercom app ID.
            intercomScript.onload = () => window.Intercom('update', intercomSettings);
            document.body.appendChild(intercomScript);
        }
    }, [userId, userEmail]);

    return null; // This component does not render anything visually.
};

export default IntercomClientComponent;
mr-tanta commented 3 months ago

Updated Layout.tsx


import React from "react";
import Script from "next/script";
import IntercomClientComponent from "@/components/IntercomClientComponent"; // Adjust the path as necessary.

interface RootLayoutProps {
    children: React.ReactNode;
    userId?: string;
    userEmail?: string;
}

const RootLayout: React.FC<RootLayoutProps> = ({ children, userId, userEmail }) => (
    <html lang="en" className="h-full scroll-smooth">
        <body className="relative h-full font-sans antialiased bg-white dark:bg-black text-black dark:text-white">
            <main className="relative flex-col">
                <div className="flex-grow flex-1 mt-20 min-h-screen">
                    {children}
                </div>
            </main>
            <Script
                strategy="afterInteractive"
                id="intercom-settings"
                dangerouslySetInnerHTML={{
                    __html: `
                        window.intercomSettings = {
                            api_base: "https://api-iam.intercom.io",
                            app_id: "{YOUR_INTERCOM_APP_ID}", // Ensure this matches your actual Intercom app ID.
                        };
                    `
                }}
            />
            <IntercomClientComponent userId={userId} userEmail={userEmail} />
        </body>
    </html>
);

export default RootLayout;