NextJS integration (App Router)

Next.js Integration (App Router)

Follow these steps to integrate the Staysignal widget into your Next.js application:

1. Create a Client Component Provider

This component handles loading the widget script (using the Site ID in the URL) and initialization. Place it in your root layout.


// app/layout.tsx
import { StaySignalWidget } from '@/components/StaySignalWidget'; // Adjust path

export default function RootLayout({ children }: { children: React.ReactNode }) {

  const handleComplete = (payload: any) => { console.log('StaySignal Complete:', payload); };
  const handleError = (error: any) => { console.error('StaySignal Error:', error); };

  return (
    <html lang="en">
      <body>
        {children}
        {/* Render StaySignalWidget - siteId prop is only needed if not loading via /api/widget/script/[siteId] */}
        <StaySignalWidget onComplete={handleComplete} onError={handleError} />
      </body>
    </html>
  );
}

2. Create a Cancel Button Component

// components/CancelButton.tsx
'use client';

import { useEffect, useRef } from 'react';

interface CancelButtonProps {
  subscriptionId: string;
  className?: string;
  children?: React.ReactNode;
}

export function CancelButton({ subscriptionId, className = '', children }: CancelButtonProps) {
  const buttonRef = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    const button = buttonRef.current;
    if (!button) return;

    button.classList.add('staysignal-cancel');
    button.setAttribute('data-subscription_id', subscriptionId);

    return () => {
      button.classList.remove('staysignal-cancel');
      button.removeAttribute('data-subscription_id');
    };
  }, [subscriptionId]);

  return (
    <button ref={buttonRef} className={className}>
      {children || 'Cancel Subscription'}
    </button>
  );
}

3. Use in Your App


// app/layout.tsx
import { StaySignalWidget } from '@/components/StaySignalWidget'; // Adjust path

export default function RootLayout({ children }: { children: React.ReactNode }) {

  const handleComplete = (payload: any) => { console.log('StaySignal Complete:', payload); };
  const handleError = (error: any) => { console.error('StaySignal Error:', error); };

  return (
    <html lang="en">
      <body>
        {children}
        {/* Render StaySignalWidget - siteId prop is only needed if not loading via /api/widget/script/[siteId] */}
        <StaySignalWidget onComplete={handleComplete} onError={handleError} />
      </body>
    </html>
  );
}

Learn how to find the Stripe subscription ID

For the Pages Router, the implementation is similar but you would typically initialize the widget in _app.tsx.

Need Help?

If you encounter any issues with the integration, please contact our support team or refer to our documentation.

PreviousSimple HTML/JS integration NextReact integration

Last updated 8 months ago

hashtagNext.js Integration (App Router)

hashtag1. Create a Client Component Provider

hashtag2. Create a Cancel Button Component

hashtag3. Use in Your App

hashtagNeed Help?

Next.js Integration (App Router)

1. Create a Client Component Provider

2. Create a Cancel Button Component

3. Use in Your App

Need Help?