Geliştirdiğiniz uygulamanın son kullanıcıları için e-posta bildirimleri oluşturmak ve uygulamaya eklemek için Email Builder modülünü kullanabilirsiniz.

Yeni bir e-posta oluşturmak için:

1. Kuika platformuna giriş yaptıktan sonra Apps ekranından çalışacağınız projeyi açın. 
2. Ardından üst kenardan Email Builder modülünü seçin.

3. Yeni oluşturacağınız e-posta için bir isim verin ve CREATE butonuna tıklayın.

4. Açılan ekrandan NEW BLANK TEMPLATE butonuna tıklayarak yeni bir e-posta şablonu oluşturabilir ya da sol paneldeki hazır email şablonlarını kullanabilirsiniz. 

Content (İçerik) Sekmesi

E-posta şablon oluşturma arayüzünde yer alan Content sekmesinde birçok element bulunmaktadır.  Content sekmesinde bulunan elementleri sürükle bırak ile şablona ekleyebilirsiniz. 

Columns Elementi Ayarları

1. Columns elementini şablon ekranına sürükleyip bırakın. 
2. Aşağıdaki alanlardan Columns elementini özelleştirebilirsiniz:

• Columns: E-posta şablonunuzun farklı bölümlerini yan yana yerleştirerek daha dinamik ve organize bir düzen oluşturmanıza olanak tanır.

• Column Properties: Sütunların görünümünü ve düzenini özelleştirmenizi sağlayan alandır.

• Row Properties: E-posta tasarımındaki satırların düzenini ve stilini özelleştirmenizi sağlayan alandır. Ayrıca satırlara görsel eklemenize olanak tanır.

• Responsive Design: Şablonunuzun farklı cihazlar, ekran boyutları ve çözünürlüklerde uyumlu bir şekilde görüntülenmesini sağlar. Responsive bir tasarım oluşturmak için arayüz içerisinde Desktop ve Mobile görüntüleme seçenekleri bulunmaktadır. 

Heading (Başlık) Elementi Ayarları

1. Heading elementini şablon ekranına sürükleyip bırakın.
2. Aşağıdaki alanlardan Heading elementini özelleştirebilirsiniz:

• Text: E-posta içeriğinde kullanacağınız başlık metnini özelleştirebildiğiniz alandır.

• Links: Başlık metnine bir URL eklendiğinde, URL bağlantısını özelleştirmenizi sağlar.

• General: Başlığın genişliğini ve yüksekliğini ayarlayabileceğiniz alandır.

• Responsive Design:  Şablonunuzun farklı cihazlar, ekran boyutları ve çözünürlüklerde uyumlu bir şekilde görüntülenmesini sağlar.  Responsive bir tasarım oluşturmak için arayüz içerisinde Desktop ve Mobile görüntüleme seçenekleri bulunmaktadır. 

Text (Metin) Elementi Ayarları 

1. Text elementini şablon ekranına sürükleyip bırakın. 
2. Aşağıdaki alanlardan Text elementini özelleştirebilirsiniz:

• Text: E-posta içeriğinde kullanacağınız metni yazıp özelleştirebildiğiniz alandır. 

• Links: Metin alanına bir URL eklendiğinde, URL bağlantısını özelleştirmenizi sağlar. 

• General: Metin alanının genişliğini ve yüksekliğini ayarlayabileceğiniz alandır. 

• Responsive Design: Şablonunuzun farklı cihazlar, ekran boyutları ve çözünürlüklerde uyumlu bir şekilde görüntülenmesini sağlar.  Responsive bir tasarım oluşturmak için arayüz içerisinde Desktop ve Mobile görüntüleme seçenekleri bulunmaktadır. 

Button Elementi Ayarları

1. Button elementini şablon ekranına sürükleyip bırakın. 
2. Aşağıdaki alanlardan Button elementini özelleştirebilirsiniz:

• Action:  Button elementi için aksiyon ekleyebilir ve butona tıklandığında gerçekleştirilecek işlemi belirleyebilirsiniz. Şu seçenekleri kullanabilirsiniz:some text
  • Open Website: Butona tıklandığında açılacak web sitesinin URL'sini girmenizi sağlar.
  • Send Email: Butona tıklandığında gönderilecek e-posta metnini belirlemenize olanak tanır.
  • Call Phone Number: Butona tıklandığında aranacak telefon numarasını girmenizi sağlar.

• Button Options: E-posta içeriğinde kullanacağınız butonu özelleştirebildiğiniz alandır.

• Spacing: Buton elementinin iç ve dış boşluklarını ayarlayabileceğiniz alandır.

• General: Button alanının genişliğini ve yüksekliğini ayarlayabileceğiniz alandır.

• Responsive Design: Şablonunuzun farklı cihazlar, ekran boyutları ve çözünürlüklerde uyumlu bir şekilde görüntülenmesini sağlar.  Responsive bir tasarım oluşturmak için arayüz içerisinde Desktop ve Mobile görüntüleme seçenekleri bulunmaktadır. 

Divider (Bölümleyici) Elementi Ayarları

1. Divider elementini şablon ekranına sürükleyip bırakın. 
2. Aşağıdaki alanlardan Divider elementini özelleştirebilirsiniz:

• Line: Bölümleyici çizginin görünümünü ve stilini özelleştirmenizi sağlar. 

• General: Divider alanının genişliğini ve yüksekliğini ayarlayabileceğiniz alandır. 

• Responsive Design: Şablonunuzun farklı cihazlar, ekran boyutları ve çözünürlüklerde uyumlu bir şekilde görüntülenmesini sağlar. Responsive bir tasarım oluşturmak için arayüz içerisinde Desktop ve Mobile görüntüleme seçenekleri bulunmaktadır. 

Image (Görsel) Element Ayarları

1. Image elementini şablon ekranına sürükleyip bırakın. 
2. Aşağıdaki alanlardan Image elementini özelleştirebilirsiniz:

• Image: E-posta içeriğinde kullanacağınız görseli özelleştirebildiğiniz alandır.

• Action: Image elementi için aksiyon ekleyebilir ve görsele tıkladığınızda gerçekleştirilecek işlemi belirleyebilirsiniz. Şu seçenekleri kullanabilirsiniz:
  • Open Website: Görsele tıkladığınızda açılacak web sitesinin URL'sini girmenizi sağlar.
  • Send Email: Görsele tıkladığınızda gönderilecek e-posta metnini belirlemenize olanak tanır.
  • Call Phone Number: Görsele tıkladığınızda aranacak telefon numarasını girmenizi sağlar.

• General: Image alanının genişliğini ve yüksekliğini ayarlayabileceğiniz alandır. 

• Responsive Design: Şablonunuzun farklı cihazlar, ekran boyutları ve çözünürlüklerde uyumlu bir şekilde görüntülenmesini sağlar.  Responsive bir tasarım oluşturmak için arayüz içerisinde Desktop ve Mobile görüntüleme seçenekleri bulunmaktadır. 

Menu Elementi Ayarları

1. Menu elementini şablon ekranına sürükleyip bırakın. 
2. Aşağıdaki alanlardan Menu elementini özelleştirebilirsiniz:

• Menu Items: Menü seçenekleri veya bağlantıları ekleyebileceğiniz alandır.

• Styles: E-posta içeriğinde kullanacağınız menüyü özelleştirebildiğiniz alandır. 

• General: Menu alanının genişliğini ve yüksekliğini ayarlayabileceğiniz alandır. 

• Responsive Design: Şablonunuzun farklı cihazlar, ekran boyutları ve çözünürlüklerde uyumlu bir şekilde görüntülenmesini sağlar.  Responsive bir tasarım oluşturmak için arayüz içerisinde Desktop ve Mobile görüntüleme seçenekleri bulunmaktadır. 

HTML Element Ayarları

1. HTML elementini şablon ekranına sürükleyip bırakın. 
2. Aşağıdaki alanlardan HTML elementini özelleştirebilirsiniz: 

• HTML:  Özel HTML kodları ekleyerek e-posta tasarımınızı özelleştirebilirsiniz. 

• General: HTML alanının genişliğini ve yüksekliğini ayarlayabileceğiniz alandır. 

• Responsive Design: Şablonunuzun farklı cihazlar, ekran boyutları ve çözünürlüklerde uyumlu bir şekilde görüntülenmesini sağlar.  Responsive bir tasarım oluşturmak için arayüz içerisinde Desktop ve Mobile görüntüleme seçenekleri bulunmaktadır. 

Social Element Ayarları

1. Social elementini şablon ekranına sürükleyip bırakın. 
2. Aşağıdaki alanlardan Social elementini özelleştirebilirsiniz: 

• Icon: Sosyal öğeyi kişiselleştirirken, buradan ikonu seçebilir veya değiştirebilirsiniz. Örneğin, Facebook, Twitter, Instagram gibi sosyal medya simgeleri kullanabilirsiniz.

3. General: Social alanının genişliğini ve yüksekliğini ayarlayabileceğiniz alandır. 
4. Responsive Design: Şablonunuzun farklı cihazlar, ekran boyutları ve çözünürlüklerde uyumlu bir şekilde görüntülenmesini sağlar.  Responsive bir tasarım oluşturmak için arayüz içerisinde Desktop ve Mobile görüntüleme seçenekleri bulunmaktadır. 

‍

Blocks Sekmesi

E-posta şablonu oluşturma arayüzünde bulunan Blocks sekmesi, sayfa düzenini sağlayan çeşitli blok yapıları sunar. Oluşturduğunuz e-posta şablonuna blok yapıları eklemek için, istediğiniz elementi sürükleyip şablon oluşturma alanına bırakmanız yeterlidir. Eklediğiniz blok yapısındaki sütunların üzerine gelerek, bu sütunlara elementi ekleyebilirsiniz.

Body (Gövde) Sekmesi

1. Body sekmesinden aşağıdaki alanları özelleştirebilirsiniz:

• General: Genel e-posta yapısını özelleştirebildiğiniz alandır.

• Email Settings: E-posta gelen kutusunda konu satırının hemen ardından görünen özet metnini yazacağınız alandır.

• Links: E-posta şablonuna, web sitelerine yönlendirilmesini sağlayan bağlantıyı özelleştirebildiğiniz alandır. 

Sol paneldeki Email şablonu ekleme alanından varsayılan olarak Verify Email, Set Password, Task Notification ve Reset Password şablonlarını kullanabilirsiniz. 

Mail şablonlarında bulunan ML support switch'i, şablonun birden fazla dilde eklenip tasarlanmasını sağlar; her yeni dil, varsayılan şablondan çoğaltılarak otomatik olarak güncellenir ve şablon, dil seçimi parametresi ile SendMail aksiyonuna eklenebilir.

Verify Email Şablonu

Verify Email, alıcılardan e-posta adreslerini doğrulamalarını istemek için kullanılan bir hazır e-posta şablonudur. Bu şablon genellikle geliştirdiğiniz uygulama kullanıcılarının uygulamaya kayıt olurken ya da hesap güvenliğini sağlamak amacıyla kullanılır.

1. Content, Blocks ve Body sekmelerinden email şablonunuzu özelleştirebilirsiniz. 
2. Ardından UPDATE ile şablonu güncelleyebilir veya CANCEL ile değişiklikleri iptal edebilirsiniz. 

ML Support anahtarını kullanarak farklı dillerde şablonlar oluşturabilirsiniz.

Task Notification (Görev Bildirimi) Şablonu

Task Notification, Process Automation (İş Akışı) eklenmiş uygulamaların son kullanıcılarına belirli bir görev hakkında bilgilendirilmesi veya bu görevin hatırlatılması amacıyla kullanılan bir hazır e-posta şablonudur.

1. Content, Blocks ve Body sekmelerinden email şablonunuzu özelleştirebilirsiniz. 
2. Ardından UPDATE ile şablonu güncelleyebilir veya CANCEL ile değişiklikleri iptal edebilirsiniz. 

ML Support anahtarını kullanarak farklı dillerde şablonlar oluşturabilirsiniz.

Set Password Şablonu

Set Password, kullanıcıların bir hesap oluşturduklarında veya parolalarını sıfırlamak istediklerinde kullanılan bir hazır e-posta şablonudur. Bu şablon ile kullanıcıların güvenli bir şekilde parolalarını belirlemelerine ve hesaplarına erişmelerine yardımcı olmayı amaçlar. 

1. Content, Blocks ve Body sekmelerinden e-posta şablonunuzu özelleştirebilirsiniz. 
2. Ardından UPDATE ile şablonu güncelleyebilir veya CANCEL ile değişiklikleri iptal edebilirsiniz. 

ML Support anahtarını kullanarak farklı dillerde şablonlar oluşturabilirsiniz.

Reset Password Şablonu

Reset Password, bir kullanıcı parolasını unuttuğunda ya da parolasına erişim sağlayamadığı durumlarda parolasını sıfırlamak için kullanılan bir hazır e-posta şablonudur. Reset Password, kullanıcının hesabına yeniden erişmesi için yol gösterir. 

1. Content, Blocks ve Body sekmelerinden email şablonunuzu özelleştirebilirsiniz. 
2. Ardından UPDATE ile şablonu güncelleyebilir veya CANCEL ile değişiklikleri iptal edebilirsiniz. 

ML Support anahtarını kullanarak farklı dillerde şablonlar oluşturabilirsiniz.

Oluşturduğunuz e-posta şablonunda dinamik verilerle çalışmak için şablon üzerine parametreler ekleyebilirsiniz.

Parametre eklemek için dinamik veri çekmek istediğiniz alana parametre formatında ekleyebilirsiniz.

Eklediğiniz parametre değerlerini tanımlamak için UI Design modülünde dönerek aksiyonlar aracılığıyla parametre değerlerini tanımlayabilirsiniz.

Kuika ile geliştirdiğiniz uygulamalarda, sistem aksiyonlarından Send Mail aksiyonunu kullanarak oluşturduğunuz e-posta şablonuna yönelik yapılandırma ve parametre tanımlama işlemlerini gerçekleştirebilirsiniz.

Örnek bir senaryoda, oluşturulan ve parametre içeren bir e-posta şablonunun uygulama ekranı aracılığıyla aksiyon verildiği  düşünerek aşağıdaki adımları takip edin: 

1. Kuika platformuna giriş yaptıktan sonra Apps ekranından çalışacağınız projeyi açın.‍
2. UI Design modülünde, sol kenarda bulunan Elements panelinden Commonly kategorisi altındaki Button elementini ekrana sürükleyip bırakın.
3. Button elementini seçtikten sonra sağda açılan Properties panelinden ADD ACTION butonuna tıklayın.

4. Açılan menüden onClick → Notification → SendMail seçimini yapın.

Send Mail Aksiyonu Parametrelerini Yapılandırın 

Mail Type Custom 

1. Mail Type (1) başlıklı açılır menüde bulunan Custom seçeneği, e-posta içeriğini herhangi bir şablon kullanmadan oluşturmanıza olanak tanır. 
2. Custom seçeneği altında, Receivers (2) sekmesi aracılığıyla alıcı e-posta bilgilerini girmeniz gerekir. 
3. Subject (3) sekmesinde ise gönderilecek e-postanın konusunu belirleyebilirsiniz. Opsiyonel parametreler ekleyerek gönderici, cc, bcc, dosya ekleme ve base64 aracılığıyla resim ekleme seçeneklerini yapılandırabilir ve bu parametrelerin değerlerini girebilirsiniz. Custom seçeneği altındaki tüm sekmelerin değer bilgilerini Symbol Picker kullanarak dinamik veya statik olarak çekebilirsiniz. 
4. İçerik, aksiyon altında yer alan Body (4) sekmesinde düzenlenir. Body sekmesindeki Symbol Picker aracı sayesinde e-posta içeriğini dinamik veya statik olarak çekebilirsiniz.

Mail Type Template

1. Mail Type (1) başlıklı açılır menüde bulunan Template seçeneği ile oluşturduğunuz e-posta şablonunu kullanarak e-posta gönderimi gerçekleştirebilirsiniz. Öncelikle Mail Type olarak Template seçimini yaptıktan sonra, Templates başlığı altındaki açılır menü aracılığıyla kullanmak istediğiniz e-posta şablonunu seçin. 
2. Daha sonra, Receivers (2) sekmesi aracılığıyla alıcı e-posta bilgilerini girin. 
3. Subject (3) sekmesinde ise gönderilecek e-postanın konusunu belirleyin. 
4. Verification Code (4) sekmesi, kullanıcıların kimliğini doğrulamak veya belirli bir işlemi onaylamak amacıyla tek seferlik kod gönderiminde bulunmanızı sağlar. E-posta şablonunda eklediğiniz parametreler listelenecektir ve bu parametre değerlerini Symbol Picker kullanarak girebilirsiniz.