Use Email Builder

Learn the Email Builder functionality.

You can prepare and send Emails quickly and easily in the applications you have developed with Kuika.You can edit and use one of the dozens of Email templates offered by Kuika during the email preparation process.

This training content consists of the following topics:

  1. Email Builder Screen

  2. Creating Parameters on the Email Creation Screen

  3. Working with Email Sending Action on the Application Screen

1. Email Builder Screen

You can use the Email Builder view mode to create and add email notifications for end-users to the application.

Open the Email Builder view mode in the project you are working on in Kuika.

On the next screen, you will be greeted with a new Email Builder adding screen (+) and a default Verify Email, Task Notification, Set Password, and Reset Password templates created by Kuika.

1.Verify Email

The Verify Email preset email template is a message template used to ask email message recipients to verify their email addresses. This type of email is commonly used when users are registering for a website or an application, or to ensure account security.

2.Task Notification

The Task Notification preset email template is a message template aimed at informing or reminding a user about a specific task. This type of message can be used in task management applications, project management software, task tracking tools, and other similar platforms.

3.Set Password

The Set Password preset email template is a message template used when users create an account or want to reset their passwords. This message aims to assist users in securely setting their passwords and gaining access to their accounts.

4.Reset Password

The Reset Password preset email template is a message template used for resetting the password when a user either forgets or is unable to access their password. This message serves as a guide for users to regain access to their accounts.

If you need password setting and password reset emails in the application you have developed, you can edit and use the default Set Password and Reset Password templates created by Kuika.

On a new Notification Template adding screen, name your template and click the Next button.

Dozens of editable Email templates, ready to be used by Kuika, will welcome you on the screen that opens.

You can choose one of these templates according to your wishes and needs, or create an Email template from scratch by clicking the NEW BLANK TEMPLATE option.

Let's say you create a template from scratch. When you click the NEW BLANK TEMPLATE button, you will be greeted by the Email template creation interface.

The email template creation interface works with drag-and-drop logic. The interface has Desktop and Mobile display options to create a responsive design.

The interface Content, Blocks and Body tabs.

Content Tab

The Content tab in the email template creation interface contains many content structures.

Email templates you have prepared through the Content tab;

  • columns

  • Heading

  • text

  • Image

  • button

  • Divider

  • HTML

  • Menu

To add a specified content, all you have to do is drag the content structure you want to add and drop it into the template creation workspace.

Each of the contents under the Content tab contains special settings within itself.

When you add the Columns content to the Email template you are creating, you can set the Columns content settings in two different configurations, namely web, and mobile, under the headings Columns, Columns Properties, Row Properties, and Responsive Design.

When you add the Heading content to the Email template you are creating, you can set the Heading content settings in two different configurations, namely web, and mobile, under Smart Headings, Text, Links,General and Responsive Design headings.

When you add the Text content to the Email template you are creating, you can adjust the Text content settings in two different configurations, namely web and mobile, under the headings of Text, Links, General and Responsive Design.

When you add the Image content to the Email template you are creating, you will see the Image content settings in the Magic Image, Image, Width, Align, Alternate Text, Action, General and Responsive Design headings. You can perform it in two different configurations as web or mobile.

When you add the Button content to the Email template you are creating, you can edit the Button content settings in two separate configurations, namely web and mobile, under the headings Smart Buttons, Action, Button, Options, Spacing, General and Responsive Design.

When you add the Divider content to the Email template you are creating, you can adjust the Divider content settings in two different configurations, namely web and mobile, under the headings Line, General and Responsive Design.

When you add the HTML content to the Email template you are creating, you can set the HTML content settings in two different configurations, namely web and mobile, under the headings HTML, General and Responsive Design.

When you add the MENU content to the Email template you are creating, you can set the MENU content settings under two different configurations, namely web and mobile, under the headings Menu Items, Styles, General and Responsive Design.

Blocks Tab

The Blocks tab in the email template creation interface contains many block structures that provide a content transfer layout.

To add the block structures to the Email template you are creating, all you need to do is drag the content structure you want to add and drop it into the template creation workspace.

You can add content to the block columns by hovering over the columns in the Block structure you added.

Body Tab

You can visually edit the body structure of the Email template via the Body tab in the Email template creation interface.

Via the Body tab, you can perform visual adjustments in General, Email Settings and Links.

2. Creating Parameters in the Email Creation Screen

You can add parameters to the Email template you are creating to work with dynamic data.

To add a parameter, add the parameter in the form of @parameter to the field you want to pull dynamic data from.

To define the parameter values you added, return to the UI Design window, and define the parameter values through actions.

3. Working with Send Email Action on the Application Screen

In the application you developed with Kuika, you can perform configurations and parameter definitions for the Email template you created by using the SendMail action, one of the system actions.

In an example scenario, let's think of a generated Email template with parameters that are activated through the application screen.

Add the SendMail action to a Button element that you add to the application screen. Select the Button element you want to add an action to. Click the ADD ACTION button in the Button Properties that opens on the right. Select onClick> Notification>SendMail in the menu that opens.

When you add the SendMail action, select Mail Type via the drop-down menu under the Mail Type heading in the action.

Custom and Template options are available in the drop-down menu titled Mail Type.

With the Custom option in the drop-down menu titled Mail Type, the content of the mail can be created in the Body tab under the action, without using any templates. You can capture the e-mail content dynamically or statically via the SymbolPicker in the Body tab. Receiver/user Email information is entered via the Receivers tab under the Custom option. The subject of the Email to be sent via the Subject tab is entered. You can add sender, cc, bcc, file attachment and image attachment via base64 options through the optional parameters that can be added, and you can enter the values of the parameters you added.

You can use the Symbol Picker to capture the value information of all tabs under the Custom option dynamically or statically.

You can send an Email using the Email template you created with the Template option in the drop-down menu titled Mail Type. First, after selecting Template as MailType, select the Email template you want to use via the drop-down menu under the Templates heading. Then, the recipient/user Email information is entered via the Receivers tab. The subject of the Email to be sent via the Subject tab is entered.

Then the parameters you have added to the Email template will be listed. You can enter parameter values using SymbolPicker.

For an Email template we use as an example, let's examine the process of dynamically entering data into the namesurname parameter in the template by using the SendMail Action.

To add a value to the namesurname parameter of the SendMail action via Symbol Picker, click Symbol Picker in the namesurname parameter under the SendMail action.

To add a value to the parameter, select the relevant Symbol Picker category in the drop-down menu.

Select the item that will create the value source for the parameter specific to the category.

Repeat this process for all parameters in the email template.

You can add sender,cc, bcc, file attachment and image attachment via base64 options via optional parameters that can be added to SendMail Action, except for the parameters in the email template, and you can enter the values of the parameters you added. You can enter the value information of all tabs under the Template option using SymbolPicker.

Last updated