Lead Management and Email Marketing Application with OpenAI

In today's competitive market, businesses need to stay ahead of the curve when it comes to lead management and email marketing. The integration of AI technology is transforming the traditional approach to lead management and email marketing, making it faster, more efficient, and more effective. In this blog post, we will introduce you to an AI-powered lead management and email marketing application developed by OpenAI and Altogic. Our application is designed to help businesses streamline their marketing strategies and optimize their lead conversion rates. By leveraging the power of AI, businesses can create highly personalized and relevant email content that resonates with their target audience. Join us on this journey as we explore the benefits and actionable insights that come with using an AI-powered lead management and email marketing application.

Email Marketing and Lead Management with OpenAI - Email Marketing with OpenAI

An AI-powered lead management and email marketing application is a software application that uses AI to automate the process email marketing of leads. It uses AI to generate personalized pitch and send email to the leads. By leveraging the power of AI, businesses can create highly personalized and relevant email content that resonates with their target audience.

Before we begin

Before we begin, let's take a look at the technologies we will be using in this tutorial.

• Altogic - Altogic is a backend development and AI enablement platform that allows developers to build, deploy, and manage their applications with the integration with OpenAI and Replicate. It provides a variety of APIs that can be used to build AI-powered applications.

• OpenAI - OpenAI is a AI research and development company that provides a variety of APIs that can be used to build AI-powered applications.

• React - React is a JavaScript library for building user interfaces. It is used to build single-page applications.

• Vercel - Vercel is a cloud platform for static sites. It provides a global edge network, real-time CDN, and automatic SSL.

Let's build frontend

We will be using React to build the frontend for our application. If you are not familiar with React, you can learn more about it from the official documentation.

To get started, you can clone the repo from the Github Repository: https://github.com/zinedkaloc/ai-lead-email-marketing

You can clone the repo by running the following command in your terminal:

$ git clone [email protected]:zinedkaloc/ai-lead-email-marketing.git

Switch to the app directory by running the following command:

$ cd ai-lead-email-marketing

Install the necessary dependencies by running the following command in your terminal:

$ npm install

info

To get started, you will need a REACT_APP_ENDPOINT_URL environment variable that points to your Altogic and OpenAI ChatGPT API. You can get this URL by following the steps in the next section.

Building the backend

We will be using Altogic to build the backend for our application. If you are not familiar with Altogic, you can learn more about it from the official documentation. To get started, you can create a free account on Altogic. Once you have created an account, you can create a new project by clicking the New Project button on the left sidebar.

1. Create an account on OpenAI

2. Create an API key on OpenAI and copy the secret key.

3. Create an account on Altogic

4. Create a new Altogic application with Basic template.

5. Open the Parameters view of Altogic Designer and complete the following steps:

• Create a new parameter called OpenAISecretKey with the value of your OpenAI Secret key.
• Create a new parameter called CompanyOwner with the value of your Email sender name.
  • In this case, Deniz Colak
• Create a new parameter called companyNameAndService with the value of your Email sender email address.
  • In this case, MongoDB - The developer data platform that provides the services and tools necessary to build distributed applications fast, at the performance and scale users demand.

tip

We will use these parameters to personalize the email template and send emails to our leads. You can also use other parameters such as emailFrom, emailFromName, or emailSubject etc.

Parameters view of Altogic Designer

6. Open Models view of Altogic Designer to create a new model. Click on the + New button and select Model from JSON. Copy and paste the following JSON to the editor and click on the Next button.

leads.json

{  "name": "text",  "job": "text",  "department": "text",  "email": "[email protected]",  "company": "text"}

Lead Model

7. Name the model as leads you can also enable the timestamp by clicking on the Enable timestamp button and click on the Next button.

Enable timestamps for the model

8. In the next step you will be asked to automatically generate CRUD endpoints for the model. For this example, we will only need the Create endpoint. Select the Create endpoint and click on the Create button.

CRUD endpoints for the leads model

tip

In the next sections, we will create a message queue, when user submits the lead form using lead/ endpoint, we will offload the email generation with OpenAI Chat Completion(ChatGPT) API and sending process with Altogic to the message queue. Also, you will be able to delay the email sending process by adding a delay to the message queue.

9. Let's create completions model to store and use the OpenAI GPT-3 Chat Completion API response to generate emails. Click on the + New button and select Model from JSON. Copy and paste the following JSON to the editor and click on the Next button.

{
  "id": "chatcmpl-6tiyvt4G1CP0beQlS2vk8he8OFWU1",
  "object": "chat.completion",
  "created": 1678738969,
  "model": "gpt-3.5-turbo-0301",
  "usage": {
    "prompt_tokens": 322,
    "completion_tokens": 253,
    "total_tokens": 575
  },
  "choices": [
    {
      "message": {
        "role": "assistant",
        "content": "Sure, here are I am!"
      },
      "finish_reason": "stop",
      "index": 0
    }
  ]
}

note

For the completion object, you can use the OpenAI GPT-3 Chat Completion API to generate a response.

9. Open the Message Queue view of Altogic Designer and click + New button to create a new message queue.

• Name the message queue as Generate/Send an email and select the Routed Serviceand click/tap Add new no-code service button and define the service name as Generate/Send an email and click/tap Create button.

10. Click on the Generate/Send an email message queue service and complete the following steps:

• Select the Start Node and select the leads model and name it a leads

• Click the Marketplace tab on the Nodes Library and search for OpenAI to find the Create Chat Completion service and drag and drop it to the Designer. Connect the Start node to the Create Chat Completion node.

• Select the Create Chat Completion node and define the Api key as params.appParams.OpenAISecretKey as we defined before.

• Set Model id as 'gpt-3.5-turbo'

• Set Messages as following JSON:

[
  {
    "role": "user",
    "content": {{CONCAT("Given a lead's company is ", input.company, " job is ", input.job, " in ",input.department, " department, and name is ", input.name, " , generate a personalized pitch that demonstrates how ", params.appParams.companyNameAndService, " can help their business grow and achieve their goals. Use data and statistics to support your claims and make the pitch concise and easy to understand. Sender ", " is ", params.appParams.companyOwner, " Format your response using HTML. Use headings, subheadings, bullet points, and bold to organize the information." )}}
  }
]

tip

In the above JSON, we are concatenating the prompt field from the request body with a message to format the response using Markdown. You can change the message to your liking.

• Set Max Tokens as 1000

• Click the Core tab on the Nodes Library and search for Change Object Type node and drag and drop it to the Designer. Connect the Create Chat Completion node to the Change Object Type node and select the completions model from the dropdown.

• Find Create Single Object node and drag and drop it to the Designer. Connect the Change Object Type node to the Create Single Object node and select the completions model from the dropdown.

• Find Get Object Value node and drag and drop it to the Designer. Connect the Create Single Object node to the Get Object Value node and insert inputObject.choices definition to the expression editor.

• Find Pick Object from Input List node and drag and drop it to the Designer. Connect the Get Object Value node to the Pick Object from Input List node and select the Pick type as First.

• Find Create Email node and drag and drop it to the Designer. Connect the picked output of the Pick Object from Input List node to the Create Email node. Click the output connector of Start Node and link it to the Create Email node. Now you can see the leads object in the Create Email node.

  • Set the From Email field as '[email protected]' // You can change the email address to your liking.
  • Set the From Name field as params.appParams.companyOwner
  • Set the To field as lead.email
  • Set the Subject field as 'Welcome to Altogic' // You can change the subject to your liking.
  • Set the HTML Message field as {{input.message.content}}

• Find Send Email node and drag and drop it to the Designer. Connect the Create Email node to the Send Email node.

• Find Finish Successfully node and drag and drop it to the Designer. Connect the Send Email node to the Finish node.

Here is the final overview of the message queue:

Generate an email with OpenAI and send it with Altogic

11. Open the Service view of Altogic Designer and click on the Create Leads Object service and complete the following steps:

• Unlink the connection between Create Single Object node and Return Success Response node.
• Click the Core tab on the Nodes Library and search for Submit Message to Queue node and drag and drop it to the Designer. Connect the Create Single Object node to Submit Message to Queue node and select the Generate/Send an email message queue from the dropdown.
• Find Return Success Response node and drag and drop it to the Designer. Connect the Submit Message to Queue node to the Return Success Response node.

tip

This will submit the lead to the Generate/Send an email message queue and return a success response to the client. Here you can specify a delay time to wait before sending the email. For example, you can set the delay time to 5 seconds to wait for the email to be sent or 3 days to wait for the email to be sent after the lead is created.

Here is the final overview of the service:

Create Lead Service

Connecting the Frontend to the Backend

Now that we have the backend ready, we can connect the frontend to it. To do this, we need to set the endpoint URL of the Create Lead service in the frontend app. To do this, open the .env file in the frontend app and set the REACT_APP_ENDPOINT_URL variable to the endpoint URL of the Create Lead service.

REACT_APP_ENDPOINT_URL=https://c3-na.altogic.com/e:64063xs2f0xs1e4d9xs8fa7c/leads

Now that we have the endpoint URL, we can run the frontend app by running the following command in your terminal:

$ npm start

Once the app is running, you can visit it in your browser at http://localhost:3000/.

Lead Collection Form

Generated and Sent Email

Here is the code for the handleSubmit function in the LeadForm component:

const handleSubmit = async (event) => {
  event.preventDefault();
  setLoading(true);
  setError("");
  setSuccess("");
  console.log(JSON.stringify(formData));

  const response = await fetch(`${process.env.REACT_APP_ENDPOINT_URL}`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(formData),
  });

  if (!response.ok) {
    let data = await response.json();
    setError(data.errors[0].message);
    setLoading(false);
  } else {
    setSuccess("Your form has been submitted successfully!");
    setLoading(false);
  }
};

In the above code, we are using the fetch API to make a POST request to the endpoint URL that we have created before in the Altogic with the formData as the request body. In that endpoint, we are using the Create Lead service to create a lead in the database and submit the lead to the Generate/Send an email message queue. The response from the endpoint is a JSON object that contains the success message.

With these steps, we have created a lead collection form that can create a lead in the database and generate an email with the lead information using OpenAI's Chat Completion(ChatGPT) API.

With further development, this app could be expanded to include additional features such as creating drafts of the email, sending multiple emails according to the sales funnel, also with using delayed message queues you can send emails to leads at a specific time such as 1 hour after, 3 days after they submit the form.

tip

If you want to manage leads in a comprehensive way, you can use Altogic Navigator to view and manage your leads. You can also use Altogic Watcher to display the performance of your app in real-time.

Resources

Source Code: The source code for the AI Lead Management and Email Marketing app can be found Github

Demo: Demo of the AI Lead Management and Email Marketing app can be found Vercel.

Conclusion

In conclusion, integrating OpenAI GPT-3 API with Altogic and React is a powerful way to build an AI-powered email marketing and lead management app that can revolutionize the way businesses interact with their customers. With the help of Altogic, you can easily integrate the OpenAI GPT-3 APIs into your any app and build powerful AI-powered applications that can provide personalized experiences to users and increase revenue for businesses.

If you have any questions, please feel free to reach out to us at community forum or discord channel.