This demo showcases the unsocial package, which detects when your website is being viewed inside social media in-app browsers like Facebook, Instagram, TikTok, and more.
Social platforms like Facebook, Instagram, TikTok, and LinkedIn use their own in-app browsers that can have limited functionality. Knowing when users are in these browsers helps you provide better experiences.
Enable debug mode to see a visual indicator when a social browser is detected. Perfect for testing your implementation and understanding which browsers are being detected in real-time.
Simply import the component and add it to your app. The package handles all the detection logic automatically, with no complex setup or configuration required.
Add unsocial to your project with npm, yarn, or pnpm. The package is lightweight and has minimal dependencies, ensuring it won't bloat your bundle size.
npm install unsocialImport the SocialBrowserDetector component into your React application. It works with any React framework including Next.js, Create React App, Remix, and more.
import SocialBrowserDetector from "unsocial"Place the component anywhere in your app, typically in your root layout or main component. Enable debug mode during development to see when detection occurs.
<SocialBrowserDetector debugMode={true} />TikTok
Twitter/X
Snapchat
When users are in a social media in-app browser, certain features like OAuth authentication, payment processing, or file uploads may not work properly. Detect these browsers and show a friendly message encouraging users to open your site in their default browser for the full experience.
Understanding how much of your traffic comes from social media in-app browsers helps you make informed decisions about feature development and user experience optimization. Track these metrics to better serve your audience.
Some features may not work reliably in in-app browsers due to their restricted environments. Use detection to conditionally load features, show alternative interfaces, or provide fallback experiences that work better in these contexts.
E-commerce sites and SaaS applications often see lower conversion rates from social media in-app browsers. By detecting these browsers and guiding users to open your site externally, you can improve completion rates for critical flows like checkout and signup.
To see the detector in action, share this page on Facebook, Instagram, TikTok, or another social platform and open it from within the app. With debug mode enabled, you'll see a visual indicator when a social browser is detected.