Form — Send an email

1. Description

Example of a dynamic page (Form) for entering and sending a subscriber's email.

1.1. Flow example

An example flow can be seen in Figure 1.

Fig. 1. Sending an email 

For convenience, you can download the completed JSON file, which is attached below, and import it. 

1.1.1. Flow description

Component  

Block of component

 Component parameters

Description

Displayed

Component  

Block of component

 Component parameters

Description

Displayed

Start



Start component



Form Textfield

To create a text input field for an Agent.

This requires:

  • in the Id field, enter the service name - mail_input;

  • in the Label field, enter  - Enter subscriber's email;

  • in the Hint field, enter the hint's text - If you leave the field empty, the message will not be sent.

Hint display:

Form Rich Text Editor

Create a text input field with formatting for the Agent.

This requires:

  • in the Id field, enter the service name - message;

  • in the Initial value field, enter the text that will be displayed in the input field - the message that will be sent. In this example, the following is specified: Dear subscriber! <p>We could not contact you to clarify the information on your order.</p> You can contact us using the following contacts:  <ul> <li>+38000000000</li> <li>+38000000000</li>;

  • in the Label field, enter - Enter message text;

  • in the Hint field, enter the hint's text - Text can be edited;

  • in the Output field, select the HTML option

Hint display:

Generate Form

Create a form based on previously created elements.

This requires:

  • in the Id field, enter the service name - 4;

  • in the Form title field, enter the text of the form title - Sending an email;

  • in the Body contents field, enter the id of the components in the order in which they should be displayed in the form. To add a component, enter the component id and click the Add button:

    • enter the id from the Form Textfield component - mail_input and click the Add button;

    • enter the id from the Form Rich Text Editor component - message and click the Add button;

  • in the Form actions element, enter the data for creating buttons:

    • the Send button

      • in the Id field, enter the service name - send;

      • in the Color field, select the button color - primary;

      • in the Text field, enter the name of the button - Send

Send email

To send an email.

This requires:

  • enter the recipient's email address in the To field, or specify it using a variable. In this example, the variable used is ${mail_input};

  • in the Subject field, enter Messages from the care service;

  • the From field indicates who the email came from. Enter the address specified in the User field in angle brackets - <*******@***.**>;

  • in the Message field, enter the message's text to be sent or specify it as a variable. In this example, the variable from the Form Rich Text Editor component is used - ${message};

  • switch the SMTP Auth switch to the active position - the User field and the Password field are added:

    • in the User field, enter the email address specified in the Email profile (in the Login field), which will be used to send notifications;

    • in the Password field, enter the password for the email address specified in the Email profile (the Password field), which is used to send the message;

  • in the Port field, enter the data from the SMTP Port field of the Email profile used;

  • in the Server field, enter the data from the SMTP Host field of the Email profile used

In the Email profile used, the Flow Scheme to be created should be selected in the Flow schema field.

The Email profile must be enabled.



The letter received by email to the subscriber:

Attempt Result

Leaves a message in the call history for a specific call status.

This requires:

  • in the Status field, select - success. Click the Add button;

  • In the Description field, type the text that will be added to the history or specify it as a variable. In this example, The email was sent to ${mail_input}.

In Call info (History):