vwo-nextjs-component
v1.0.0
Published
A Next.js component for VWO SmartCode integration
Readme
VWO Next.js SmartCode
A Next.js package for seamlessly integrating VWO SmartCode into your application. This component is designed to be compatible with both Page Router and App Router in Next.js.
Installation
Install the package using npm or yarn:
npm install vwo-nextjs-smartcode
or
sh
yarn add vwo-nextjs-smartcode
Usage
Page Router (Legacy pages/ Directory)
For applications using the Page Router, add the VWOScript component inside _document.js (or _document.tsx if using TypeScript) to include it in the <head> of your HTML document.
1. Create or edit _document.js in the pages/ directory:
// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { VWOScript } from 'vwo-nextjs-smartcode';
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<VWOScript 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 VWOScript component in head.tsx to ensure it loads correctly within the <head> of your HTML document.
1. Edit layout.tsx in the app/ directory:
// app/layout.tsx
import { VWOScript } from 'vwo-nextjs-smartcode';
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<html>
<head>
<title>Your App Title</title>
<meta name="description" content="Your app description" />
<VWOScript accountId="YOUR_ACCOUNT_ID" />
</head>
<body>{children}</body>
</html>
);
}Props
The VWOScript component accepts the following props:
| Prop | Type | Required | Default | Description |
| ---------------- | ---------------------- | -------- | ------------------------------------------------------------------------------------ | --------------------------------------------------- |
| accountId | string | ✅ Yes | null | Your VWO account ID |
| type | 'ASYNC' \| 'OSC' | No | 'ASYNC' | Type of VWO 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 |
Important Notes Ensure the accountId prop is set correctly to your VWO account ID. The VWOScript component should be placed inside the of the document for proper loading. For Page Router, use _document.js to inject the script into the . For App Router, use head.tsx inside the app/ directory. License This package is released under the MIT License.