Add the LinkToast widget to React / Next.js

Prerequisites

• An active LinkToast account
• A published widget in Studio
• Access to the React or Next.js page component where the widget should render

Step-by-step

1. 1

   Publish your widget in Studio

   Publish in Studio and copy the embed code. Note the widget ID in data-widget-id.

2. 2

   Pick where the widget mounts

   Choose a page or layout component, such as a marketing footer or partners section. The script can live in the component tree or in the root layout.

3. 3

   Load the script in Next.js

   Use next/script with afterInteractive so the loader runs after hydration. Replace YOUR_WIDGET_ID with the ID from Studio.

   Copy

   import Script from 'next/script';
   
   export function LinkToastWidget() {
     return (
       <Script
         src="https://app.linktoast.com/widget-loader.js"
         data-widget-id="YOUR_WIDGET_ID"
         strategy="afterInteractive"
       />
     );
   }

4. 4

   Render the component on your page

   Import LinkToast widget into the page and place it where the Trusted By block should appear. Deploy once. Later Studio publishes do not require a new deploy for widget content.