Next.js integration

#1

Hi,

I’m trying to integrate the Webpushr script with a Next.js site and was wondering if there’s a preferred method?

#2

We have unfortunately not done any testing on Next.js site. Hopefully someone who has will contribute to this thread.

#3

I recently Use Webpushr in my Nextjs Project.
I Find Documentation on Nextjs 14 But I can’t find Proper Documentation.but after some try on my project I find a solution.
You make a component.

“use client”;

import { useEffect } from “react”;

const Webpushr = () => {

useEffect(() => {

if (typeof window.webpushr !== "undefined") return;

window.webpushr =

  window.webpushr ||

  function () {

    (window.webpushr.q = window.webpushr.q || []).push(arguments);

  };

const setupWebpushr = () => {

  const js = document.createElement("script");

  const fjs = document.getElementsByTagName("script")[0];

  js.id = "webpushr-jssdk";

  js.async = 1;

  js.src = "https://cdn.webpushr.com/app.min.js";

  fjs.parentNode.appendChild(js);

  window.webpushr("setup", {

    key: process.env.WEBPUSHR_KEY,

    integration: "popup",

  });

};

setupWebpushr();

}, []);

return;

};

export default Webpushr;

and this componet set in Main Layout page in like

export default function RootLayout({ children }) {

return (

<html lang="en">

  <body className={inter.className} style={{ minHeight: "100vh" }}>
      <>{children}</BootstrapInte>
    <Webpushr />
  </body>

</html>

);

}