Modal Card Creator

Modal Card Creator ile modal listesinden seçtiğiniz bir modal'ın renk, boyut, sayfa pozisyonu, görsel ve daha bir çok özelliğini dilediğiniz gibi özelleştirebilir, son aşamada verilen çıktıyı sitenizin tagleri arasına ekleyerek kullanabilirsiniz.

Kullanılan Teknolojiler

.

React Context - Eslint - Prettier - Upload.js

Demo

🔴 Live Link

Kullanımı

🔸 Aşama 1: Choose your template

Bu aşamada listelenen modallardan birini seçmeniz gerekiyor. (Şu an seçilebilir 3 modal, koda dökülebilir 1 modal var)

🔸 Aşama 2: Appearance

Seçtiğiniz modalın;

• boyutunu
• ekrandaki pozisyonunu
• rengini
• varsa logosunu

değiştirebilirsiniz

🔸 Aşama 3: Content

Modalın içerdiği tüm yazıları ve varsa görselini değiştirebilirsiniz

🔸 Aşama 4: Targeting Rules

• Visitor Device: Ziyaretçilerinizin cihaz tipini belirleyin. Kapalı olarak işaretlenirse tüm ziyaretçi türleri olarak seçilir.

• After X Second: Modalınız girdiğiniz sürenin sonunda ekrana gelecektir.

• After % Scroll: Modalınız ekranın girilen yüzdesi scroll edildiğinde aktif olacaktır.

• Traffic Source: Modalınız sadece girilen adresten yönlendirilen ziyaretçilerin karşısına çıkacaktır.

• *Browser Language: Ziyaretçilerin tarayıcı dillerini belirleyin. Seçilen dillere göre modal değişiklik gösterecektir.

• Exit Intent Targeting: Modalınız, ziyaretçi sitenizden ayrılmak istediğinde aktif olur. (Mouse tarayıcının içerik alanının dışına çıktığında)

  _{*Bu özellik henüz aktif değil.}

🔸 Aşama 5: Settings and Code

Bu aşamada girdiğiniz webhook adresine modalınızın ziyaretçi etkileşimleri ve ziyaretçilerin tarayıcı detayları gönderilir.

_{Dil, tarih, saat, işletim sistemi, tarayıcı, tıklanan alanlar vs.}

Son aşamada tek yapmanız gereken "Get Your Code" butonuna basmak ve verilen kodu web sayfanızın body tagleri arasına yapıştırmak.

Artık modalınız Aktif! 🎉 🎉

Dağıtım

Bu projeyi geliştirici modunda çalıştırmak için;

npm run dev

Bu projeyi build etmek için;

npm run build

komutlarını kullanabilirsiniz.

Ekran Görüntüleri