A React and Next.js package for dynamic text and UI transformation using AI with UTM parameter, user information, and theme support
npm install notsounusual
Serve multiple dynamic webpages from a single URL! A React and Next.js package that uses custom tags
> 🚀 New in v2.2.0: Full UI transformation support! The package now supports dynamic UI changes based on user context and theme configuration.
> 🌐 Visit our landing page: notsounusualui.vercel.app for live demos and more information.
> 📦 GitHub Repository: github.com/PriyanshuDas01/notsounusual_NPM_Package
* 🎯 Smart Traffic Source Detection: Automatically detects user origins and referrers
* 🎨 Dynamic UI Transformation: Transform UI elements based on user context
* 📝 Text Transformation: Transform text content using AI
* 🎯 UTM Parameter Support: Customize content based on marketing parameters
* 👤 User Information: Access device type, platform, and language
* 🎨 Theme Customization: Customize colors, fonts, and styles
* 🔄 Real-time Updates: Transform content as users navigate
* 🎯 Journey-Aware Content: Adapt content based on user's entry point
* 🚀 Gemini AI Integration: Powered by Google's Gemini Pro model
``bash`
npm install notsounusual@2.2.0or
yarn add notsounusual@2.2.0
`jsx
import { UnseenProvider, Unseen } from 'notsounusual';
function App() {
return (
geminiApiKey="YOUR_GEMINI_API_KEY" // Get from https://makersuite.google.com/app/apikey
>
$3
jsx
import { UnseenProvider, Unseen } from 'notsounusual';function App() {
const getCustomPrompt = (utmConfig) => {
// Default prompt for banking solutions
const defaultPrompt =
; // Campaign-specific prompts
const campaignPrompts = {
home_loans:
,
credit_cards: ,
investment:
}; // Return campaign-specific prompt or default
return campaignPrompts[utmConfig?.campaign] || defaultPrompt;
};
return (
geminiApiKey="YOUR_GEMINI_API_KEY" // Get from https://makersuite.google.com/app/apikey
customPrompt={getCustomPrompt}
>
);
}
$3
jsx
import { UnseenProvider, Unseen } from 'notsounusual';function App() {
const themeConfig = {
colors: {
primary: '#1976d2',
secondary: '#dc004e',
background: '#ffffff',
text: '#333333',
accent: '#4caf50',
},
typography: {
fontFamily: 'Roboto, sans-serif',
fontSize: '16px',
fontWeight: '400',
},
spacing: {
small: '8px',
medium: '16px',
large: '24px',
},
borderRadius: '4px',
shadows: '0 2px 4px rgba(0,0,0,0.1)',
};
return (
geminiApiKey="YOUR_GEMINI_API_KEY" // Get from https://makersuite.google.com/app/apikey
themeConfig={themeConfig}
>
);
}
`$3
The package automatically detects and adapts to how users arrive at your site:
jsx
import { UnseenProvider, Unseen } from 'notsounusual';function App() {
const getCustomPrompt = (utmConfig, userInfo) => {
// Detect traffic source
const referrer = userInfo.referrer;
const source = utmConfig?.source;
// Customize content based on traffic source
if (referrer.includes('google.com')) {
return
;
} else if (referrer.includes('facebook.com')) {
return ;
} else if (source === 'email') {
return ;
} // Default transformation
return
;
}; return (
geminiApiKey="YOUR_GEMINI_API_KEY" // Get from https://makersuite.google.com/app/apikey
customPrompt={getCustomPrompt}
>
);
}
`
$3
> ⚠️ Note: While OpenRouter is supported, we strongly recommend using Gemini for better performance, reliability, and cost-effectiveness.
jsx
import { UnseenProvider, Unseen } from 'notsounusual';function App() {
return (
useGemini={false} // Set to false to use OpenRouter
>
);
}
`Props
$3
| Prop | Type | Description |
|--------------|-------------|-----------------------------------------------------|
| geminiApiKey | string | Your Gemini API key (required for Gemini) |
| apiKey | string | Your OpenRouter API key (required for OpenRouter) |
| useGemini | boolean | Set to true to use Gemini API (recommended) |
| customPrompt | string/function | Optional custom prompt or function that returns a prompt based on UTM config |
| utmConfig | UtmConfig | Optional UTM parameters (overrides URL parameters) |
| themeConfig | ThemeConfig | Optional theme configuration for UI transformation |
$3
| Prop | Type | Description |
|--------------|---------------|--------------------------------------------|
| children | ReactNode | The content to be transformed |
| transformUI | boolean | Enable UI transformation (default: false) |
| componentId | string | Optional component identifier |
| componentName| string | Optional component name |
Theme Configuration
The
prop allows you to customize the appearance of transformed UI elements:`typescript
interface ThemeConfig {
colors?: {
primary?: string;
secondary?: string;
background?: string;
text?: string;
accent?: string;
};
typography?: {
fontFamily?: string;
fontSize?: string;
fontWeight?: string;
};
spacing?: {
small?: string;
medium?: string;
large?: string;
};
borderRadius?: string;
shadows?: string;
}
`Marketing Use Cases
1. Dynamic Headlines: Generate different headlines based on traffic source
2. Personalized CTAs: Customize call-to-action text and appearance based on campaign
3. A/B Testing: Test different text and UI variations automatically
4. Campaign-Specific Content: Show different content and styling for different marketing campaigns
5. Channel-Specific Messaging: Adapt tone, style, and UI based on marketing channel
6. Device-Specific Content: Customize content and layout based on user's device and screen size
7. Language-Aware Content: Adapt content and UI based on user's language preferences
UTM Parameter Support
The package supports all standard UTM parameters:
*
: Traffic source (e.g., facebook, google)
* utm_medium: Marketing medium (e.g., social, email)
* utm_campaign: Campaign name
* utm_content: Content identifier
* utm_term`: Search terms* Browser Information:
* Device type (mobile/desktop/tablet)
* Platform (OS)
* Language preferences
* Screen resolution
* Session Information:
* Entry page
* Referrer URL
* Session start time
* Geographic Information:
* Timezone
Gemini API is recommended for better performance and reliability:
- Faster response times
- More accurate transformations
- Better context understanding
- Cost-effective
- No rate limiting issues
- Better support for complex UI transformations
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- React 16.8.0 and above
- React 17.x
- React 18.x
- React 19.x
MIT License
For support, please open an issue in the GitHub repository.
Priyanshu Das