https://github.com/wingify/vwo-smartcode-nextjs
React component to integrate VWO smart-code into Next.js applications
https://github.com/wingify/vwo-smartcode-nextjs
Last synced: 5 months ago
JSON representation
React component to integrate VWO smart-code into Next.js applications
- Host: GitHub
- URL: https://github.com/wingify/vwo-smartcode-nextjs
- Owner: wingify
- License: apache-2.0
- Created: 2025-02-26T12:36:38.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-11T07:39:27.000Z (about 1 year ago)
- Last Synced: 2025-08-11T01:33:32.441Z (11 months ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/vwo-smartcode-nextjs
- Size: 53.7 KB
- Stars: 0
- Watchers: 7
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Next.js component for VWO SmartCode integration
[](https://www.npmjs.com/package/vwo-smartcode-nextjs)
## Overview
The **VWO SmartCode Next.js** package enables seamless integration of **VWO SmartCode** into Next.js applications. This component is designed to work with both **Page Router** and **App Router**, allowing developers to integrate VWO SmartCode efficiently.
## Installation
Install the package using npm or yarn:
```bash
# via npm
npm install vwo-smartcode-nextjs
# via yarn
yarn add vwo-smartcode-nextjs
```
## 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 `` of your HTML document.
```javascript
// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { VWOScript } from 'vwo-smartcode-nextjs';
class MyDocument extends Document {
render() {
return (
);
}
}
export default MyDocument;
```
### App Router (`app/` Directory)
For applications using the **App Router**, include the `VWOScript` component in `layout.tsx` to ensure it loads correctly within the `` of your HTML document.
```tsx
// app/layout.tsx
import { VWOScript } from 'vwo-smartcode-nextjs';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
### Using Nonce
To add a nonce attribute for Content Security Policy:
```tsx
```
## Props
The `VWOScript` component accepts the following props:
| Prop | Type | Required | Default | Description |
| ------------------ | ------------------------ | -------- | -------------------------------------------------------------------------------------- | --------------------------------------------------- |
| `accountId` | `string` | ✅ Yes | `null` | Your VWO account ID |
| `type` | `'ASYNC' \| 'SYNC'` | 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:white !important;transition:none !important;'` | CSS styles applied to the hidden element |
| `backgroundColor` | `string` | No | `'white'` | Background color used when hiding body element |
| `scriptAttributes` | `Record` | No | `{}` | Additional attributes to be added to the script tag. Note: `id` will be overridden and `referrerPolicy` will be overridden in case of `SYNC` SmartCode |
| `linkAttributes` | `Record` | No | `{}` | Additional attributes to be added to the link tag. |
## Authors
- [Apoorv Tiwari](https://github.com/Ragnarrlothbrok)
## Development and Testing
### Install Dependencies
```bash
yarn install
```
### Compile TypeScript to JavaScript
```bash
yarn build
```
## Contributing
We welcome contributions to improve this package! Please read our [contributing guidelines](https://github.com/wingify/vwo-smartcode-nextjs/blob/master/CONTRIBUTING.md) before submitting a PR.
## Code of Conduct
Our [Code of Conduct](https://github.com/wingify/vwo-smartcode-nextjs/blob/master/CODE_OF_CONDUCT.md) outlines expectations for all contributors and maintainers.
## License
[Apache License, Version 2.0](https://github.com/wingify/vwo-smartcode-nextjs/blob/master/LICENSE)
© 2025 Wingify Software Pvt. Ltd.