Bildirimler

Email Builder

Kuika’nın Email Builder modülü, geliştirdiğiniz uygulamanın son kullanıcılarına gönderilecek e-postaları hızlı ve kolay bir şekilde hazırlayabilirsiniz. Modül içinde 200+ hazır e-posta şablonunu kullanabileceğiniz gibi boş bir e-posta ile başlayarak ihtiyacınız olan tasarımı siz de yapabilirsiniz. Bu eğitim içeriğinde e-posta hazırlamayı öğreneceksiniz.

Bu eğitim içeriği aşağıdaki başlıklardan oluşmaktadır:

E-posta oluşturma.
E-posta şablon oluşturma arayüzü sekmeleri.
E-posta şablonlarını kullanma.
E-posta parametrelerini yapılandırma.
Send Mail aksiyonu ile e-posta gönderme.
AI ile e-posta tasarımı.

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ı

Columns elementini şablon ekranına sürükleyip bırakın.
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ı

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

Smart Headings: Yapay zeka aracılığıyla, e-postanız için yaratıcı başlıklar oluşturmanıza yardımcı olur.

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ı

‍

Text elementini şablon ekranına sürükleyip bırakın.
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ı

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

Smart Buttons: Yapay zeka aracılığıyla, e-posta içinde kullandığınız Button elementi için yaratıcı başlıklar bulmanıza yardımcı olur.

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ı

Divider elementini şablon ekranına sürükleyip bırakın.
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ı

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

Magic Image: Yapay zeka aracılığıyla, e-posta içine kullandığınız Image elementi için yaratıcı görseller bulmanıza yardımcı olur.

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:some text
- 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ı

Menu elementini şablon ekranına sürükleyip bırakın.
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ı

HTML elementini şablon ekranına sürükleyip bırakın.
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.

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

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.

Content, Blocks ve Body sekmelerinden email şablonunuzu özelleştirebilirsiniz.
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.

Content, Blocks ve Body sekmelerinden email şablonunuzu özelleştirebilirsiniz.
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.

Content, Blocks ve Body sekmelerinden e-posta şablonunuzu özelleştirebilirsiniz.
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.

Content, Blocks ve Body sekmelerinden email şablonunuzu özelleştirebilirsiniz.
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.

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:

Kuika platformuna giriş yaptıktan sonra Apps ekranından çalışacağınız projeyi açın.

UI Design (1) modülünde, sol kenarda bulunan Elements (2) panelinden Commonly (3) kategorisi altındaki Button elementini (4) ekrana sürükleyip bırakın.
Button elementini seçtikten sonra sağda açılan Properties panelinden ADD ACTION butonuna tıklayın.

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

Send Mail Aksiyonu Parametrelerini Yapılandırın

Mail Type Custom

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.
Custom seçeneği altında, Receivers (2) sekmesi aracılığıyla alıcı e-posta bilgilerini girmeniz gerekir.
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.
İç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

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.
Daha sonra, Receivers (2) sekmesi aracılığıyla alıcı e-posta bilgilerini girin.
Subject (3) sekmesinde ise gönderilecek e-postanın konusunu belirleyin.
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.