15+ framework, tek satırlık kurulum

Her yerde çalışır.

Next.js, WordPress, Laravel, Django — hangisini kullanıyorsan ol, IHA Chat’i saniyeler içinde ekle. Aşağıdan framework’ünü seç, kodu kopyala, hazırsın.

Framework’ünü seç

Karta tıkla, ilgili rehbere zıpla. Her biri için kopya-yapıştır kod bloğu ve tavsiye edilen konumu paylaşıyoruz.

Plain HTML

Statik siteler ve el yazması HTML sayfaları için tek satırlık kurulum.

<!doctype html>
<html>
  <head>
    <title>Sitem</title>
  </head>
  <body>
    <!-- Sayfa içeriği -->

    <script
      src="https://cdn.iha-chat.com/loader.js"
      data-site-id="SITE_ANAHTARINIZ"
    ></script>
  </body>
</html>
  • Etiketin kapanış </body> etiketinden hemen önce yer alması önerilir; sayfa render süresini etkilemez.
  • loader.js asenkron yüklenir; diğer script'lerin çalışmasını engellemez.

Next.js

App Router veya Pages Router — next/script bileşeni ile entegrasyon.

// app/layout.tsx
import Script from "next/script";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="tr">
      <body>
        {children}
        <Script
          src="https://cdn.iha-chat.com/loader.js"
          data-site-id="SITE_ANAHTARINIZ"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}
  • App Router yapısında next/script kök layout içine yerleştirilir; her sayfada yüklenir.
  • strategy="afterInteractive" değeri, sayfa etkileşime hazır olduğunda yüklemeyi başlatır.

React

Create React App, herhangi bir SPA veya SSR kurulumu için standart script etiketi.

<!-- public/index.html -->
<body>
  <div id="root"></div>

  <script
    src="https://cdn.iha-chat.com/loader.js"
    data-site-id="SITE_ANAHTARINIZ"
  ></script>
</body>
  • Script etiketi public/index.html içine yerleştirilir; React render döngüsüne dahil olmaz.
  • Widget'ı yalnızca belirli sayfalarda göstermek için useEffect + document.createElement kullanılabilir.

Vite

Vite tabanlı projeler için index.html içine tek satırlık ekleme.

<!-- index.html -->
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>

  <script
    src="https://cdn.iha-chat.com/loader.js"
    data-site-id="SITE_ANAHTARINIZ"
  ></script>
</body>
  • Vite public dizinini kök URL olarak sunar; script harici bir kaynaktan yüklendiği için ayrı bir işlem gerekmez.
  • Framework bağımsız çalışır: React, Vue, Preact, Svelte, Solid gibi tüm Vite şablonları desteklenir.

Vue

Vue 3 uygulamalarında index.html içine standart script etiketi ile entegrasyon.

<!-- index.html -->
<body>
  <div id="app"></div>

  <script
    src="https://cdn.iha-chat.com/loader.js"
    data-site-id="SITE_ANAHTARINIZ"
  ></script>
</body>
  • Widget bağımsız olarak yüklenir; Vue reaktivite sistemi ile etkileşime girmez.
  • SSR modunda yalnızca istemci tarafında yüklendiği için ek bir kontrol gerekmez.

Angular

src/index.html dosyasına tek satırlık ekleme ile entegrasyon.

<!-- src/index.html -->
<body>
  <app-root></app-root>

  <script
    src="https://cdn.iha-chat.com/loader.js"
    data-site-id="SITE_ANAHTARINIZ"
  ></script>
</body>
  • Angular Universal (SSR) kurulumlarında script yalnızca tarayıcı ortamında çalışır.
  • Widget bağımsız yüklendiği için Angular değişiklik algılama döngüsünü etkilemez.

Nuxt

nuxt.config app.head yapılandırması ile tüm sayfalara otomatik ekleme.

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: "https://cdn.iha-chat.com/loader.js",
          "data-site-id": "SITE_ANAHTARINIZ",
          async: true,
        },
      ],
    },
  },
});
  • app.head.script tanımı, script'i tüm sayfaların head/body kısmına ekler.
  • Alternatif olarak useHead composable'ı ile belirli sayfalara özel yükleme yapılabilir.

Astro

Layout dosyasının gövdesine is:inline direktifi ile ekleme.

---
// src/layouts/Layout.astro
---
<!doctype html>
<html lang="tr">
  <head>
    <title>Sitem</title>
  </head>
  <body>
    <slot />

    <script
      is:inline
      src="https://cdn.iha-chat.com/loader.js"
      data-site-id="SITE_ANAHTARINIZ"
    ></script>
  </body>
</html>
  • is:inline direktifi, Astro'nun script'i bundle işlemine dahil etmesini engeller ve doğrudan HTML çıktısına yerleştirir.
  • Hydration gerekmez; widget kendi başına başlatılır.

Remix

app/root.tsx içindeki <Scripts /> bileşeninden sonra ekleme.

// app/root.tsx
export default function App() {
  return (
    <html lang="tr">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <script
          async
          src="https://cdn.iha-chat.com/loader.js"
          data-site-id="SITE_ANAHTARINIZ"
        />
      </body>
    </html>
  );
}
  • Script gövde sonuna yerleştirildiği için sayfa render süresini etkilemez.
  • Her rota geçişinde yeniden yüklenmez; Remix'in client-side navigation yapısıyla uyumludur.

SvelteKit

src/app.html içine %sveltekit.body% sonrası ekleme.

<!-- src/app.html -->
<body data-sveltekit-preload-data="hover">
  <div style="display: contents">%sveltekit.body%</div>

  <script
    src="https://cdn.iha-chat.com/loader.js"
    data-site-id="SITE_ANAHTARINIZ"
  ></script>
</body>
  • app.html şablonu tüm sayfalar için ortak HTML iskeleti sağlar.
  • SvelteKit'in adaptive routing yapısı script'in tekrar yüklenmesine yol açmaz.

WordPress

functions.php dosyasına wp_footer action hook'u ile ekleme.

<?php
// Aktif temanın functions.php dosyasına eklenir.
function ihachat_widget() {
  ?>
  <script
    src="https://cdn.iha-chat.com/loader.js"
    data-site-id="SITE_ANAHTARINIZ"
  ></script>
  <?php
}
add_action( 'wp_footer', 'ihachat_widget' );
  • wp_footer hook'u, tema veya eklenti fark etmeksizin script'in tüm sayfalarda yüklenmesini sağlar.
  • Alternatif olarak Header/Footer Scripts eklentileri de kullanılabilir.

Shopify

theme.liquid dosyasına </body> etiketinden hemen önce ekleme.

{% comment %} layout/theme.liquid — </body> etiketinden hemen önce {% endcomment %}
<script
  src="https://cdn.iha-chat.com/loader.js"
  data-site-id="SITE_ANAHTARINIZ"
></script>
</body>
</html>
  • Online Store → Themes → Edit code menüsünden layout/theme.liquid dosyasına erişilir.
  • Widget tüm sayfalarda (ürün, koleksiyon, sepet) otomatik olarak yüklenir.

Laravel

Blade layout dosyasına tek satırlık ekleme.

{{-- resources/views/layouts/app.blade.php --}}
<!DOCTYPE html>
<html lang="tr">
<head>
  <title>@yield('title')</title>
</head>
<body>
  @yield('content')

  <script
    src="https://cdn.iha-chat.com/loader.js"
    data-site-id="SITE_ANAHTARINIZ"
  ></script>
</body>
</html>
  • Ana layout dosyası (genellikle resources/views/layouts/app.blade.php) tüm sayfalar tarafından extend edilir.
  • Site anahtarı config/services.php üzerinden yönetilerek ortam değişkenine bağlanabilir.

Symfony

base.html.twig şablonuna tek satırlık ekleme.

{# templates/base.html.twig #}
<!DOCTYPE html>
<html lang="tr">
<head>
  <title>{% block title %}Sitem{% endblock %}</title>
</head>
<body>
  {% block body %}{% endblock %}

  <script
    src="https://cdn.iha-chat.com/loader.js"
    data-site-id="SITE_ANAHTARINIZ"
  ></script>
</body>
</html>
  • templates/base.html.twig tüm sayfalar için ortak şablondur; extends direktifi ile kullanılır.
  • Site anahtarı parameters.yaml üzerinden yönetilerek ortam değişkenine bağlanabilir.

Ruby on Rails

application.html.erb layout dosyasına tek satırlık ekleme.

<%# app/views/layouts/application.html.erb %>
<!DOCTYPE html>
<html lang="tr">
<head>
  <title><%= yield(:title) %></title>
</head>
<body>
  <%= yield %>

  <script
    src="https://cdn.iha-chat.com/loader.js"
    data-site-id="SITE_ANAHTARINIZ"
  ></script>
</body>
</html>
  • app/views/layouts/application.html.erb tüm sayfalar için ortak layout'tur.
  • Site anahtarı Rails.application.credentials üzerinden güvenli şekilde yönetilebilir.

Django

base.html şablonuna tek satırlık ekleme.

{# templates/base.html #}
<!DOCTYPE html>
<html lang="tr">
<head>
  <title>{% block title %}Sitem{% endblock %}</title>
</head>
<body>
  {% block content %}{% endblock %}

  <script
    src="https://cdn.iha-chat.com/loader.js"
    data-site-id="SITE_ANAHTARINIZ"
  ></script>
</body>
</html>
  • templates/base.html tüm sayfalar için ortak şablondur; extends direktifi ile kullanılır.
  • Site anahtarı settings.py içinde ortam değişkeniyle yönetilerek şablona context processor ile aktarılabilir.
Framework’ün listede yok mu?

Sorun değil — bir <script> etiketi yükleyen her yerde çalışır.

IHA Chat, klasik script tag’ini yükleyen her sayfada devreye girer. Hesabı aç, sana özel site anahtarını al, kopyala-yapıştır.

Ücretsiz başla