Web'e Gömme

Atlas, dashboard'ların harici web sayfalarına iframe ile gömülmesini destekler. Embed için ayrı bir özel rota yoktur; public link rotası iframe-safe biçimde tasarlanmıştır ve doğrudan iframe src olarak kullanılabilir.

Ön Koşul

Embed kullanmadan önce şu zincirin tamamlanmış olması gerekir:

Bir Atlas dashboard'u oluşturulmuş olmalı.
Dashboard için public link üretilmiş olmalı (Embed için ayrı bir özel rota yoktur).

→ Dashboard Oluşturma → Public Paylaşım

1. Embed Link Hazırlama

Adım	Açıklama
1	Atlas liste ekranında dashboard'un Share diyaloğunu açın
2	Sağ panelden Generate Public Link butonuna tıklayın
3	Üretilen link'i kopyalayın
4	Hedef web sayfanıza iframe ekleyin

2. iframe HTML Örneği

<iframe
  src="https://<your-domain>/atlas/public-dashboard/<public_url_token>"
  width="1200"
  height="800"
  frameborder="0"
  allowfullscreen
  style="border: none;">
</iframe>

Özellik	Açıklama
`src`	Public link URL'i
`width / height`	Embed boyutu (CSS ile responsive yapılabilir)
`frameborder="0"`	Eski tarayıcılar için sınır kaldırma
`allowfullscreen`	Dashboard'u tam ekran açmaya izin verir

3. Responsive Embed

Embed'i container'ın genişliğine sığdırmak için aspect ratio tekniği:

<style>
  .embed-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio */
  }
  .embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
</style>

<div class="embed-container">
  <iframe
    src="https://<your-domain>/atlas/public-dashboard/<token>"
    allowfullscreen>
  </iframe>
</div>

Atlas V2 layout zaten responsive olduğu için iframe boyutu değiştikçe içerik akıcı bir şekilde ölçeklenir.

4. Güvenlik — CSP / X-Frame-Options

Pirivision sunucusu, public dashboard rotası için iframe içinde gösterilebilirliği sağlamak için aşağıdaki başlıkları döndürmelidir:

Header	Beklenen Değer
`X-Frame-Options`	(set edilmemeli) veya `ALLOW-FROM <domain>`
`Content-Security-Policy`	`frame-ancestors 'self' <embed-domain>` veya `*`

Backend Yapılandırması

Eğer iframe'in açıldığı domain Pirivision sunucusundan farklıysa, sunucu yapılandırmasında frame-ancestors izinleri tanımlanmış olmalıdır. APISIX gateway veya reverse proxy ayarlarından kontrol edin.

5. Embed Davranışı

Davranış
Dashboard public mode'da yüklenir (`isPublicMode = true`)
Login UI yoktur
Edit Mode, Share, Delete butonları yoktur
Global filter kullanıcı tarafından değiştirilebilir
Refresh otomatik çalışır
iframe boyutu değişince layout responsive ölçeklenir
Tarayıcı navigation üst barı görünmez (iframe içinde)

6. Embed Senaryoları

Senaryo	Yaklaşım
Müşteri portalına KPI dashboard	Public link → iframe ile portal sayfasına göm
Konferans sunum web sayfası	Embed; sunum sırasında canlı veri
TV duvarı (operasyon merkezi)	Tam ekran tarayıcı + public link (iframe gerekmez)
Wiki / Confluence sayfası	Embed makro veya iframe widget'ı kullan

7. Embed Sınırlamaları

Public link iframe'de göründüğü için token kim ele geçirirse erişebilir.
Cross-origin sorunları olursa tarayıcı console'da hata gösterir; backend CSP yapılandırması kontrol edilmelidir.
Ana sayfanın CSS/JS'i iframe içine sızmaz; iframe izolasyon sağlar.
Mobil tarayıcılarda iframe scroll davranışı bazen takılı kalabilir; outer container overflow: auto eklemek faydalı olabilir.

8. Sık Karşılaşılan Hatalar

Belirti	Olası Neden	Çözüm
iframe boş görünüyor	X-Frame-Options bloklamış	Backend CSP/X-Frame-Options yapılandırın
Console "Refused to display" hatası	frame-ancestors izni yok	CSP başlığını güncelleyin
Embed mobile'da sığmıyor	Aspect ratio yanlış	CSS responsive embed tekniğini uygulayın
Login ekranı görünüyor	Token public link değil, normal dashboard URL'i	`/atlas/public-dashboard/<token>` formatını kullanın

9. Sonraki Adım

→ Yönetim — Taşıma