Sample: Next.js script widget

The Script widget allows you to embed JavaScript code or external script files on your pages. You can also use it to paste embed codes from third-party tools, such as Google Analytics, social media widgets, or other tracking solutions. 

You can choose from the following options:

• Inline
  In this mode the Script widget renders the content of the text area in the widget designer on the place where the widget is dropped in the WYSIWYG editor
• BodyTop
  These modes register scripts with the script injection system. The ScriptInjector components subsequently retrieve these scripts and position them at the start or end of the body element in the page template.
• BodyBottom
  These modes register scripts with the script injection system. The ScriptInjector components subsequently retrieve these scripts and position them at the start or end of the body element in the page template.
  
  

PREREQUISITES: You must set up a Sitefinity renderer application and connect it to your Sitefinity CMS application. For more information, see Install Sitefinity in Next.js mode. 

Two critical configurations are needed:

• Include ScriptInjector components in the page template - Add ScriptInjectorBodyTop and ScriptInjectorBodyBottom components to your page template
• Pass RequestContext to ScriptInjectors - The ScriptInjector components require the RequestContext to access the layout data

IMPORTANT: This custom template configuration is required for every page where the Script widget is placed with BodyTop or BodyBottom location.

he implementation consists of four main components:

• Script Widget (script.tsx)
  Main widget component that renders inline scripts or returns null for BodyTop/BodyBottom scripts
  In edit mode, displays a preview of the script with location information
  Server-side component that processes the widget configuration
  
  
• ScriptInjector (script-injector.tsx)
  Scans the page layout to find all Script widgets with BodyTop or BodyBottom location
  Renders the scripts at the appropriate positions in the page template
  Disabled in edit mode to prevent script execution during page editing
  
  
• ScriptEntity (script.entity.ts)
  Designer metadata defining the widget properties
  Configures the widget editor interface in Sitefinity
  
  
• ScriptLocation constant (location.ts)
  Select where the script should be placed (Inline, Body top, or Body bottom)
  

The next step is to register the component implementation and the designer metadata with the Next.js renderer. The Sitefinity Next.js SDK will automatically generate the needed designer metadata based on the defined entity. The registry is used to find the component function reference for the widget from the response of the Page Layout service. It is also used when generating metadata for the widget when it is used in the WYSIWYG page editor – labels, visuals etc.

When you open your Renderer application and open the New editor, you will see the Script widget in the widget selector. When you add the widget on your page and edit it, you can choose where to place the script and you can enter the script in the text area.

• Server-Side Rendering: The Script widget is a server component that processes during page rendering
  
• Edit Mode Preview: In edit mode, shows the first 3 lines of the script with a location hint
  
• Layout Scanning: ScriptInjector components scan the entire widget tree to find Script widgets
  
• Unique IDs: Each script gets a unique ID based on placeholder, location, and widget ID
  
• HTML Injection: Scripts are injected using dangerouslySetInnerHTML for direct HTML rendering