Sharing a quick snippet showing how you can install Front Chat as a React component.
This example was specifically tested using Next.js 13 with the /app directory.
First, create a FrontChat component. We’re using the Next Script component.
Have the onLoad prop call an ‘init’ function for our widget, which just runs the content of the chat JS snippet provided in your Chat channel settings.
// @/components/front-chat.tsx
"use client";
import Script from "next/script";
export function FrontChat() {
return (
<Script
id="front-chat-script"
src="https://chat-assets.frontapp.com/v1/chat.bundle.js"
onLoad={initFrontChat}
></Script>
);
}
function initFrontChat() {
//@ts-expect-error
window.FrontChat("init", {
chatId: "YOUR_FRONT_CHAT_ID",
useDefaultLauncher: true,
});
}
(If anyone can tell me how to get rid of the TS error on window.FrontChat, I’d love to hear it!)
To use the FrontChat component, it’s probably best to insert it into your layout.tsx, just before the closing </body> tag:
import "./globals.css";
import { FrontChat } from "@/components/front-chat";
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
{children}
<FrontChat />
</body>
</html>
);
}
