Asyntai AI Chatbot'u Adobe Experience Manager'a Nasıl Eklersiniz

AEM web siteleri için adım adım kılavuz

Platform:

Adım 1: Yerleştirme Kodunuzu Alın

Önce Asyntai Dashboard'unuza gidin ve "Yerleştirme Kodu" bölümüne inin. Şuna benzeyen benzersiz yerleştirme kodunuzu kopyalayın:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Not: Yukarıdaki kod yalnızca bir örnektir. Kişisel widget kimliğinizi içerdiğinden, kendi benzersiz yerleştirme kodunuzu Dashboard'unuzdan kopyalamanız gerekir.

Adım 2: Sayfa Bileşeni Kullanarak Kod Ekleyin (Önerilen)

Önerilen yöntem, site genelinde kurulum için chatbot kodunu AEM sayfa bileşeninizin head bölümüne eklemektir:

AEM Author örneğinize giriş yapın
CRXDE Lite'a gidin (genellikle http://your-aem-instance:4502/crx/de adresinde)
Sayfa bileşeni şablonunuzu bulun (genellikle /apps/your-project/components/page altında)
head.html veya headerlibs.html dosyasını bulun veya oluşturun
Asyntai yerleştirme kodunuzu bu dosyaya ekleyin
Üst menüde "Tümünü Kaydet"'e tıklayın
Değişiklikleri yayınlama örneğinize kopyalayın

İpucu: Kodu head.html dosyasına yerleştirmek, chatbot'un bu şablonu kullanan tüm sayfalarda görünmesini sağlar. Bu, site genelinde kurulum için en temiz yaklaşımdır.

Alternatif Yöntem 1: İstemci Kütüphaneleri (ClientLibs)

Daha yapılandırılmış bir yaklaşım için AEM'nin İstemci Kütüphanesi sistemini kullanabilirsiniz:

/apps/your-project/clientlibs altında yeni bir istemci kütüphanesi klasörü oluşturun
cq:clientLibraryFolder düğüm türünü ayarlayın
JavaScript dosyalarınızı listeleyen bir js.txt dosyası oluşturun
Asyntai yerleştirme kodunuzu bu klasördeki bir JavaScript dosyasına ekleyin
İstemci kütüphanesini sayfa bileşeninize şu şekilde dahil edin:

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.js @ categories='your-category-name'}" />

Not: Bu yöntem, mevcut ClientLib yapısına sahip projeler için önerilir ve daha büyük uygulamalar için daha iyi organizasyon sağlar.

Alternatif Yöntem 2: Etiket Yönetimi (Adobe Launch)

Adobe Launch (eski adıyla DTM) veya başka bir etiket yöneticisi kullanıyorsanız:

Adobe Experience Platform Launch'a giriş yapın
Mülkünüze gidin
Kurallar'a gidin ve yeni bir kural oluşturun
Olayı "Page Bottom" veya "DOM Ready" olarak ayarlayın
Bir eylem ekleyin: Özel Kod
Asyntai yerleştirme kodunuzu yapıştırın
Kitaplığı kaydedin ve yayınlayın

İpucu: Adobe Launch kullanmak, üçüncü taraf komut dosyaları eklemek için Adobe'nin önerdiği yaklaşımdır. Daha iyi kontrol, test yetenekleri sağlar ve kod dağıtımları gerektirmez.

Alternatif Yöntem 3: Experience Fragment

Esnek, yazar dostu uygulama için:

AEM'de Experience Fragments'a gidin
Yeni bir Experience Fragment oluşturun
Bir Metin bileşeni veya HTML bileşeni ekleyin
HTML kaynak moduna geçin
Asyntai yerleştirme kodunuzu yapıştırın
Bu Experience Fragment'ı sayfa şablonunuzun alt bilgisine dahil edin

Önemli: Şablonları ve bileşenleri değiştirmek için uygun AEM izinlerine sahip olduğunuzdan emin olun. AEM as a Cloud Service için değişikliklerin CI/CD hattınızdan geçmesi gerekebilir.

Adım 3: Kurulumu Doğrulayın

Değişikliklerinizi dağıttıktan sonra tarayıcı önbelleğinizi temizleyin ve web sitenizi ziyaret edin. Sağ alt köşede sohbet widget'ı düğmesini görmeniz gerekir. Düzgün açıldığından ve çalıştığından emin olmak için tıklayın.

Widget'ı göremiyor musunuz? Tarayıcı konsolunuzu (F12) JavaScript hataları için kontrol edin. Kodun yayınlama örneğinize düzgün şekilde dağıtıldığını doğrulayın. AEM as a Cloud Service için değişikliklerinizin dağıtım hattından başarıyla geçtiğinden emin olun.