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.

Diğer platformlar

WordPress Shopify Webflow Wix Squarespace Kajabi Thinkific Teachable Google Tag Manager Herhangi bir web sitesi

Videonuzda ne söylemeli

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.

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>
  );
}