Документация Webitel

Форма - отправить письмо

1. Описание

Пример схемы динамических страниц для ввода электронной почты абонента и отправки электронного письма.

1.1. Пример схемы

Пример схемы можно увидеть на рисунке 1.

Пример схеми для отправки электронного письма.png

Рис. 1. Пример схемы

Для удобства пользования можно скачать готовый json-файл, который прикреплен ниже, и импортировать. Больше информации о импорте json-файла можно посмотреть здесь.

Получить email и отправить письмо-schema.json

1.1.1. Описание схемы

Компонент 

Блок компонента

Параметры компонента

Описание

Отображение в Workspace

Start

image2024-3-4_11-14-7.png


Компонент начала схемы


Компонент "Form Textfield"

image2024-3-4_11-14-25.png

image2024-3-4_11-18-6.png

Для создания поля ввода текста  для оператора.
Для этого:

  • в поле "Id" указать служебное название. В данной схеме указано "mail_input";

  • в поле "Label" ввести "Введите электронную почту абонента";

  • в поле "Hint" ввести текст подсказки - "Если оставить поле пустым - сообщение не отправится".

image2024-3-4_11-50-26.png

Отображение подсказки:

image2024-3-4_11-50-50.png

Компонент "Form Rich Text Editor"

image2024-3-4_11-14-42.png

image2024-3-4_11-18-21.png

Для создания поля ввода текста с возможностью форматирования  для оператора.
Для этого:

  • в поле "Id" ввести служебное название. В данной схеме указано "message";

  • в поле "Initial value" ввести текст, который будет отображаться в поле ввода - сообщение, которое будет отправлено. В данном примере указано следующий: "Уважаемый абонент! <p>Не удалось с Вами связаться для уточнения информации по Вашему заказу.</p> Связаться с нами можно по этим контактам:   <ul>              <li>+76000000000</li>              <li>+74000000000</li>";

  • в поле "Label" ввести "Введите текст сообщения";

  • в поле "Hint" ввести текст подсказки - "Текст можно редактировать";

  • в поле "Output" выбрать вариант "HTML".

  image2024-3-4_12-32-30.png

Отображение подсказки:

image2024-3-4_12-32-49.png

Компонент "Generate Form"

image2024-3-4_11-15-48.png

image2024-3-4_11-18-47.png

Создание формы на основе предварительно созданных элементов.

Для этого: 

  • в поле "Id" указать служебное название. В данной схеме указано "4";

  • в поле "Form title" указать текст заголовка формы - "Отправление электронного письма";

  • в поле "Body contents" указать id компонентов в том порядке, в котором они должны отображаться в форме. Для добавления компонента необходимо ввести id компонента и нажать кнопку "Add"ввести id с компонента "Form Textfield" - "mail_input" и нажать кнопку "Add";ввести id с компонента ""Form Rich Text Editor"" - "message" и нажать кнопку "Add";

  • в элемент "Form actions" ввести данные для создание кнопоккнопка "Отправить":в поле "Id" указать служебное название кнопки - "send";в поле "Color" выбрать цвет кнопки - "primary";в поле "Text" ввести название кнопки - "Отправить"

image2024-3-4_12-36-18.png

Компонент "Send email"

image2024-3-4_11-16-8.png

Send email - Форма - отправить письмо.png

Для отправки сообщения на электронную почту.

Для этого;

  • в поле "To" ввести электронную адресу получателя, или задать использую переменную. В данном примере используется переменная -  ${mail_input};

  • в поле "Subject" ввести "Сообщения от службы заботы";

  • в поле "From" указывается от кого пришел email. Ввести адрес указанный  в поле "User"  в угловые скобки - <*******@***.**>

  • в поле "Message" ввести текст сообщения, которое будет отправлять, или задать его переменной. В данном примере используется переменная из компонента "Form Rich Text Editor"- ${message};

  • переключатель "SMTP Auth" перевести в активное положение - добавятся поле "User" и поле "Password":

    • в поле "User" вводится электронная адрес указанный в Email профили (в поле "Логин"), с помощью которого будут отправляться сообщения;

    • в поле "Password" вводится пароль от электронного адреса указанный в Email профили (поле "Пароль"), с помощью которого будут отправляться сообщения;

  • в поле "Port" вводится данные из поля "SMTP Порт" используемого Email профиля;

  • в поле "Server" вводится данные из поля "SMTP Хост" используемого  Email профиля


В используемом Email профиле в поле "Схема" должна быть выбрана создаваемая схема. 
Email профиль должен быть включен.


Полученное на электронную почту абонента письмо:
Полученное письмо.png

Компонент "Attempt Result"

image2024-3-4_11-16-30.png

image2024-3-4_11-27-34.png

Оставляет сообщение в истории звонка при определенном статусе звонка. 

В данном примере:

  • в поле "Status"  выбрать  - success. Нажать кнопку "Add";

  • в поле "Description" ввести текст, который будет передаваться в историю, или задать его переменной. В данном примере - "Письмо отправлено на ${mail_input}"

В истории звонка:

image-2023-7-25_3-10-46.png