Manage customer communication directly within the platform.

The Full Screen Modal with Send Email feature in Naologic allows users to receive, review, and respond to emails without switching to external tools. It is primarily used for customer support but can be adapted for other communication needs.

Installing the Full Screen Modal with Send Email

1. Navigate to the Desired Project:

   • From the Builder Overview, locate and select the project where you want to install the modal.

2. Access the Individual App Canvas:

   • Within the selected project, hover over the desired app and click Access App Flow to open the app where you want to add the modal.

3. Open Add Elements:

   • On the left side of the app canvas, click the “+” button to open the Add Elements navigation.

4. Search for the Modal:

   • Use the search bar to look for Full Screen Modal with Send Email.

5. Drag and Drop to Install:

   • Once you've located the modal, simply drag and drop it onto the app canvas screen.

Setting up the Full Screen Modal with Send Email

The Full Screen Modal with Send Email is an advanced feature that requires proper configuration to function effectively. Follow the steps below to ensure that the modal is set up correctly within your app.

In order to properly setup the modal, you will first need to create two Data Structures and two Data Documents.

For the purpose of this example we will be creating the modal inside a Customer Support app, that handles customer conversations.

1. Create the Data Structures and Data Documents:

   1. Conversation Data Structure - this is used to track the request itself and should contain the following:

      • Title - String

      • Email - String

      • Status - String

   2. Conversation Data Document - in this Data Document you will need to create a view that contains the following:

[
  {
    "get": {
      "cfpPath": "customer-support/customer-support",
      "naoQueryOptions": {
        "docName": "conversationMessage",
        "cfpPath": "customer-support/customer-support"
      },
      "property": "docId",
      "targetProperty": "data.parentId",
      "projection": {
        "data": 1,
        "info": 1,
        "docId": 1
      },
      "transform": "data-array"
    },
    "set": {
      "cfpPath": "customer-support/customer-support",
      "property": "data.emails"
    }
  }
]

3. Conversation Message - this is used for the chat and for the email sending functionality. It should contain the following:

   • From Email - String

   • From Name - String

   • To - Array of Strings (Required)

   • Cc - Array of Strings

   • Bcc - Array of Strings

   • Subject - String

   • Body - String (Required)

   • Parent Id - String (Required)

   • Email System Sent - Boolean

   • Email System Id - String

   • Received At Date - Date

   • Support User Reply - Boolean

2. After you install the Modal, hover over it and click on Edit

3. Match the fields with the ones we have created in the Data Structures
   Most of them are straightforward but here are a few to note:

   • Flow document id - this is the Conversation Data Structure

   • Data relationship - this is the View created in the Conversation Data Document

   • Conversations data pointer - select Conversation Message, this is a field that is generated by the previously mentioned View

   • Email Data Document - this is the Conversation Message Data Structure

4. Click on Save Changes

The Full Screen Modal with Send Email feature provides a versatile and integrated solution for managing customer communications directly within your app. By following the installation and setup instructions, you can ensure seamless email interactions, whether for customer support, sales, or other communication needs. Proper configuration of data structures and documents will help you get the most out of this feature, enabling efficient and effective correspondence management.