How do I setup the chat in Next.js?

Last updated: November 8, 2024

This is an example snippet you can use to configure your app for Next.

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Script from "next/script";

const inter = Inter({ subsets: ["latin"] });

export default function RootLayout({
}>) {
  return (
    <html lang="en">
      {/* Initialize window.pylon.chat_settings. Make sure to replace APP_ID and other fields with your own values. */}
      <Script
        id="pylon-chat-widget-initialize-window"
        type="text/javascript"
      >{`window.pylon = { chat_settings: { app_id: "APP_ID", email: "EMAIL", name: "NAME" }}`}</Script>
      {/* Load the Pylon chat widget with the embed script. Make sure to replace APP_ID with your own value. */}
      <Script id="pylon-chat-widget" type="text/javascript" async>
        {`(function(){var e=window;var t=document;var n=function(){n.e(arguments)};n.q=[];n.e=function(e){n.q.push(e)};e.Pylon=n;var r=function(){var e=t.createElement("script");e.setAttribute("type","text/javascript");e.setAttribute("async","true");e.setAttribute("src","https://widget.usepylon.com/widget/APP_ID");var n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)};if(t.readyState==="complete"){r()}else if(e.addEventListener){e.addEventListener("load",r,false)}})();`}
      </Script>
      <body className={inter.className}>{children}</body>
    </html>
  );