Next.js ve React sitenize video balonu ekleyin
Script'i kök layout dosyanızda bir kez yükleyin. CornerHello istemci taraflı rota değişikliklerini kendiliğinden takip eder; böylece sayfa kuralları tek sayfalı uygulamalarda (SPA) da çalışmaya devam eder.
Başlamadan önce
- Uygulamanızın koduna erişim ve yayına alma (deploy) imkânı.
- Site anahtarınız (Panel → Kurulum).
Kod
YOUR_SITE_KEY yerine Panel → Kurulum'daki anahtarınızı yazın.
import Script from "next/script";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Script src="https://cornerhello.com/w/l.js" data-site="YOUR_SITE_KEY" strategy="afterInteractive" />
</body>
</html>
);
}Adımlar
- 1
Kök layout dosyanızı açın (App Router'da app/layout.tsx, ya da pages/_app.tsx).
- 2
next/script paketindeki Script bileşenini, aşağıdaki gibi strategy “afterInteractive” ayarıyla ekleyin.
- 3
Yayına alın (deploy), ardından siteyi gizli pencerede açın.
Çalıştığını kontrol edin
Sitenizi gizli bir pencerede açın ve birkaç saniye bekleyin: balon köşeye kayar. Panelde Kurulum → Doğrula, satırın bulunduğunu onaylar. Bir şey görünmüyor mu? Sayfanın funnel'ınızın sayfa kurallarına uyduğunu ve funnel'ın yayında olduğunu kontrol edin.
- Diğer React kurulumlarında (Vite, Create React App, Remix) düz script satırını index.html dosyasında </body> etiketinden önce yapıştırın.
- Script'i yeniden mount edilen bileşenlerin içine eklemeyin; kök dosyada bir kez eklemek yeterlidir.
SSS
Next.js ve React üzerinde CornerHello
İstemci taraflı gezinmeyle çalışır mı?
Evet. CornerHello rota değişikliklerini dinler ve balonu sayfa kurallarınıza göre gösterir veya gizler.
Stillerimle çakışır mı?
Hayır. Balon kendi shadow DOM'u içinde oluşturulur; bu yüzden sizin CSS'iniz ile bizimki birbirine dokunmaz.
Her ziyaretçiye merhaba deyin.
CornerHello'yu küçük gruplar halinde açıyoruz. E-postanızı bırakın, sıranız gelince sizi içeri alalım.