Works with next/script — zero performance hit
Use Next.js's built-in Script component with strategy='afterInteractive' so FrontFace loads after hydration, with no impact on LCP or TTI.
App Router and Pages Router compatible
Add to your root layout.tsx (App Router) or _document.tsx / _app.tsx (Pages Router). One placement and the widget is live across your entire app.
Answers from your product docs
Feed FrontFace your documentation site URL or upload API reference docs. Users get precise answers from your actual content, with citations — not generic responses.
Handles developer onboarding questions
Answer integration questions, SDK usage, error codes, and configuration FAQs automatically — letting your team focus on shipping, not repeating setup steps.
Live in 5 minutes
Three simple steps. No technical skills required.
Feed it your knowledge
Point FrontFace at your website or upload docs, PDFs and FAQs. It reads everything and builds a grounded knowledge base in minutes.
Make it yours
Add your logo, pick your colors, write a welcome message. Test it against real questions before it goes live.
Go live in 5 minutes
Drop one line of code on any site — Shopify, WordPress, Wix or custom — or share a hosted public agent page.
Frequently asked questions
- How do I add FrontFace to a Next.js App Router project?
- In your root app/layout.tsx, import Script from 'next/script' and add <Script src='https://cdn.frontface.app/widget.js' data-id='YOUR_ID' strategy='afterInteractive' /> inside the <body>. The widget loads on every page.
- Does it work with Next.js Pages Router?
- Yes. Add the Script component to _app.tsx or _document.tsx using the same strategy='afterInteractive' approach. It works with both routing systems.
- Will it affect my Next.js Core Web Vitals?
- No. Using strategy='afterInteractive' ensures the script loads after the page is interactive. It doesn't block rendering, hydration, or affect LCP or CLS scores.
- Can I show it only on certain Next.js pages?
- Yes. Instead of adding it to the root layout, import and render the Script component conditionally in specific page components. It will only load on those pages.