Skip to content
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

Jump to bottom

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

Open
lynn1286 opened this issue Jun 18, 2024 · 2 comments
Open

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

lynn1286 opened this issue Jun 18, 2024 · 2 comments

Comments

@lynn1286
Copy link

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
Copy link
Collaborator

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
Copy link
Collaborator

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;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@lynn1286 @mr-tanta