Skip to content

README.md

Latest commit

 

History

History
131 lines (93 loc) · 4.97 KB

README.md

File metadata and controls

131 lines (93 loc) · 4.97 KB

Next.js component for Wingify SmartCode integration

npm version

Overview

The Wingify SmartCode Next.js package enables seamless integration of Wingify SmartCode into Next.js applications. This component is designed to work with both Page Router and App Router, allowing developers to integrate Wingify SmartCode efficiently.

Installation

Install the package using npm or yarn:

# via npm
npm install wingify-smartcode-nextjs

# via yarn
yarn add wingify-smartcode-nextjs

Usage

Page Router (Legacy pages/ Directory)

For applications using the Page Router, add the WingifyScript component inside _document.js (or _document.tsx if using TypeScript) to include it in the <head> of your HTML document.

// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { WingifyScript } from 'wingify-smartcode-nextjs';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <WingifyScript accountId="YOUR_ACCOUNT_ID" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

App Router (app/ Directory)

For applications using the App Router, include the WingifyScript component in layout.tsx to ensure it loads correctly within the <head> of your HTML document.

// app/layout.tsx
import { WingifyScript } from 'wingify-smartcode-nextjs';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <WingifyScript accountId="YOUR_ACCOUNT_ID" />
      </head>
      <body>{children}</body>
    </html>
  );
}

Using Nonce

To add a nonce attribute for Content Security Policy:

<WingifyScript
  accountId="YOUR_ACCOUNT_ID"
  scriptAttributes={{
    nonce: 'your-nonce-value',
  }}
/>

Props

The WingifyScript component accepts the following props:

Prop Type Required Default Description
accountId string ✅ Yes — Your Wingify account ID
version 2.2 | 3.0 No 2.2 SmartCode version to load
type 'ASYNC' | 'SYNC' No 'ASYNC' Type of SmartCode script loading
settingsTimeout number No 2000 Timeout for settings initialization
hideElement string No 'body' CSS selector for the element to be hidden
hideElementStyle string No 'opacity:0 !important;filter:alpha(opacity=0) !important;background:none !important' CSS styles applied to the hidden element
scriptAttributes Record<string, string> No {} Additional attributes to be added to the script tag. Note: referrerPolicy will be overridden in case of SYNC SmartCode
linkAttributes Record<string, string> No {} Additional attributes to be added to the link tag.

Authors

Development and Testing

Install Dependencies

yarn install

Compile TypeScript to JavaScript

yarn build

Contributing

We welcome contributions to improve this package! Please read our contributing guidelines before submitting a PR.

Code of Conduct

Our Code of Conduct outlines expectations for all contributors and maintainers.

License

Apache License, Version 2.0

© 2025 Wingify Software Pvt. Ltd.

wingify-smartcode-nextjs