In this tutorial, you’ll find out just how to construct a CRM (Client Partnership Administration) application utilizing ChatGPT, ToolJet, and also PostgreSQL.
Intro.
The CRM application will certainly enable you to include brand-new individuals or consumers to a PostgreSQL data source, see their information on a control panel, produce e-mail themes utilizing ChatGPT, and also send them e-mails by means of Sendinblue
We’ll make use of ToolJet for the application user interface in this tutorial.
What is ToolJet?
ToolJet is an open-source low-code structure that allows us to construct full-stack internet applications within a couple of mins. With ToolJet, you can produce standalone fully-functional full-stack applications or embed applications right into various other sites.
ToolJet permits you to construct applications that make use of relational and also non-relational data sources, remainder APIs, OpenAI modern technologies, and also cloud storage space like Google Cloud Storage Space, AWS S3, and also Minio It is an outstanding advancement device aiding people, programmers, and also organizations produce and also deliver items much faster.
Prior to we proceed, I require your aid?
I would certainly be very pleased if you might provide us a celebrity! As well as allow me likewise recognize in the remarks area. ❤
https://github.com/ToolJet/ToolJet
Establishing an ElephantSQL (PostgreSQL) data source.
ElephantSQL allows us to produce a PostgreSQL data source on the cloud rather than your regional maker. Comply with the actions listed below to produce a PostgreSQL data source:
Develop an ElephantSQL account right here
Include a brand-new data source circumstances. No bank card or payment info is needed.
As soon as you have actually developed the data source circumstances, your data source info is presented.
Congratses! You have actually effectively developed the data source required for this application. Next off, allow’s construct the application user interface and also link the data source to the application.
Developing the application with ToolJet.
Right here, you’ll find out just how to produce a ToolJet account and also construct a completely useful application with ToolJet.
If you are brand-new to ToolJet, produce an account
Develop a Work area and also a brand-new application called CRM application.
Construct an interface comparable to the picture listed below.
To produce the UI picture over, you will certainly initially include a big container on the canvas that will certainly house all the various other UI components of the application. Next off, include the 3 container components on top of the web page, the Include Lead switch element and also the Table element.
ToolJet allows you to produce applications’ user interfaces by dragging and also going down numerous UI elements on the canvas.
After recreating the UI, include an Activity switch with the message “Send out Email” to the table. (We’ll configure it later on to allow us to email each customer).
To finish the UI, we require a user interface that permits us to include an individual to the data source and also one more for modifying and also creating the e-mail web content for every customer.
To do this, we’ll make use of the Modal element We’ll present a modal when we click the Include Lead switch – for including brand-new information and also the “Send out Email” activity switch – for going into the e-mail web content for the customer.
The “Include New Lead” Modal.
To present the Include New Lead Modal element, you require to produce the modal and also include an onClick occasion to the “Include Lead” switch to reveal the modal.
Include the adhering to elements to the modal, and also keep in mind to shut the modal when you click the modal switch.
The “Send out Email” modal.
The Send out Email modal permits us to get in the customer’s e-mail, e-mail topic, and also web content. You can likewise produce e-mail web content utilizing the ChatGPT API. You’ll find out just how to do that in the upcoming sessions.
The toggle button has an onChange occasion that conceals the ChatGPT timely input area and also switch whenever you do not require it.
Keep in mind to shut the modal when an individual clicks the Send Out Email switch.
Congratses! You have actually finished constructing the UI for this application. In the upcoming sessions, you’ll find out just how to link the interface to a PostgreSQL data source, connect with ChatGPT, and also send out e-mails utilizing Sendinblue
Just how to connect with a PostgreSQL data source in ToolJet.
ToolJet permits us to connect with exterior sources or produce custom-made features by means of a panel called Question Panel In ToolJet, any type of feature that communicates with a data source, API, or cloud storage space and also runs a JavaScript or Python code is called a Question.
Right here, you’ll find out just how to connect with a PostgreSQL data source in ToolJet. Initially, allow me stroll you via attaching a PostgreSQL data source to ToolJet.
Linking a PostgreSQL data source to ToolJet.
Select PostgreSQL from the listing of data sources under the International Datasources panel, and also give the needed info as revealed listed below.
From the picture over, the host coincides as the web server name on ElephantSQL (omitting the braces). The username and also data source name coincide, and also duplicate and also paste the password right into its area.
Scroll down the web page and also click Examination Link
If the link is validated, we can begin making questions to the data source.
Inquiring a PostgreSQL data source in ToolJet.
Right here, you’ll find out just how to inquire information from the data source and also present them appropriately within the application.
Prior to we start, allow’s include some information to the data source. Click PostgreSQL on the Question Panel, choose SQL setting, and also run the code fragment listed below to produce a brand-new table including the information listed below.
DEVELOP TABLE Customers ( Call varchar( 255), Email varchar( 255), Phone varchar( 255), Organisation varchar( 255), Classification varchar( 255), Condition varchar( 255));
INSERT INTO Customers( name, e-mail, phone, organisation, classification, standing) WORTHS(' Teja', ' teja@gmail.com', ' +555 -34569', ' ToolJet', ' Programmer Supporter', ' Client');
INSERT INTO Customers( name, e-mail, phone, organisation, classification, standing) WORTHS(' Badri', ' badri@gmail.com', ' +555 -59659', ' ToolJet', ' Design Supervisor', ' Possibility');
INSERT INTO Customers( name, e-mail, phone, organisation, classification, standing) WORTHS(' Jack', ' jack@gmail.com', ' +555 -44449', ' ToolJet', ' Software Application Designer', ' Lead');
INSERT INTO Customers( name, e-mail, phone, organisation, classification, standing) WORTHS(' Nora', ' nora@gmail.com', ' +555 -46249', ' ToolJet', ' Item Supervisor', ' Client');
INSERT INTO Customers( name, e-mail, phone, organisation, classification, standing) WORTHS( 'Em ily', 'em ily@gmail.com', ' +555 -47893', ' ToolJet', ' Item Developer', ' Possibility');
INSERT INTO Customers( name, e-mail, phone, organisation, classification, standing) WORTHS(' Dave', ' dave@gmail.com', ' +555 -49313', ' ToolJet', ' Information expert', ' Lead');
SELECT * FROM Customers;
You can see the information on ElephantSQL once it has actually been posted.
Following, relabel the inquiry to getTableData, upgrade the SQL editor to present all the table materials, and also conserve the inquiry.
Update the Table element to present the information obtained from the getTableData inquiry.
Because we have actually presented the materials on the table. Next off, allow’s reveal the variety of Clients, Leads, and also Leads readily available on the data source.
Develop 3 brand-new questions based upon the PostgreSQL data source called getLeadsCount, getProspectsCount, and also getCustomersCount
Update the SQL editor for every inquiry to obtain the variety of information under each classification as done listed below, and also conserve them.
SELECT MATTER( *)
FROM Customers
IN WHICH Condition IN (' Lead');
/ *-- modification 'Lead' for leads, 'Possibility' for potential customers, 'Client' for consumers.-- */
Show the variety of information returned from each inquiry by changing the message web content within the container as done listed below.
{{queries.getProspectsCount.data[0] matter}}
//( Usage {{queries.getLeadsCount.data[0] matter}} for leads and also {{queries.getCustomersCount.data[0] matter}} for consumers).
Lastly, activate the “Run this inquiry on application lots?” toggle for the getTableData and also the various other 3 questions.
Congratses! You have actually discovered just how to inquire and also present the information got within the application. Next off, I will certainly stroll you via including brand-new information to the data source by means of the application user interface.
Including brand-new individuals to the data source.
Right here, you’ll find out just how to approve that information from the modal and also include the customer’s information to the data source.
Develop a brand-new inquiry pertaining to the PostgreSQL information resource that approves the worths from the modal and also sends out an SQL inquiry to include the information to the data source.
Make certain that the code fragment listed below suits the elements’ names from the modal. Duplicate the code fragment listed below right into the SQL editor panel and also conserve the inquiry.
INSERT INTO Customers( name, e-mail, phone, organisation, classification, standing) WORTHS(' {{components.name.value}} ', ' {{components.email.value}} ', ' {{components.phone.value}} ', ' {{components.organisation.value}} ', ' {{components.designation.value}} ', ' {{components.status.value}} ');
Lastly, include an onClick occasion to the Include Lead switch to run the inquiry on switch click.
Just how to connect with ChatGPT in ToolJet.
Right here, you’ll find out just how to connect with ChatGPT by means of OpenAI in ToolJet.
Establishing an OpenAI account.
Visit or produce an OpenAI account right here
Click Individual on the navigating bar and also choose Sight API tricks from the food selection bar to produce a brand-new secret trick.
Create a brand-new API secret and also duplicate it someplace on your computer system. We’ll utilize it in the upcoming area.
Interacting with the OpenAI API in ToolJet.
Under the International Datasources tab on your control panel, click Plugins, and also choose OpenAI. After that, paste your API secret and also company ID right into the input areas and also check the link.
You can currently access the OpenAI information resource from the inquiry panel.
If you do not have a company ID, usage “Personal”.
Select OpenAI from the Question Panel and also established its web content to prepare an e-mail utilizing ChatGPT.
Draft an e-mail to {{components.recipient.value}} concerning {{components.chatgptprompt.value}}
Run the inquiry when an individual clicks the Ask switch on the modal.
Lastly, to present a picked customer’s e-mail immediately on the modal, established the default worth of the recipient’s e-mail input to {{components.table1.selectedRow.email}} This immediately establishes its worth to the e-mail of the chosen customer.
Just how to send out e-mails by means of the Sendinblue API in ToolJet.
Sendinblue is an electronic advertising and marketing device that offers Email, SMS, Facebook, Conversation, and also extra, by means of one system to aid expand organizations by constructing more powerful consumer connections.
In this area, you’ll find out just how to incorporate and also send out e-mails by means of Sendinblue in ToolJet. Initially, you require to visit or produce a SendinBlue account
Select SMTP and also API on your control panel, produce an SMTP secret, and also replicate it someplace on your computer system. You’ll require it quickly.
Go Back To your ToolJet application, include a brand-new SMTP information resource, and also fill in the needed qualifications. Your password is the created SMTP secret.
If effectively linked, it will certainly present “Link Validated”. After that you can begin sending out e-mails.
Following, produce the inquiry for sending out the e-mails. Give your e-mail, name, the recipient’s e-mail, topic, and also title elements.
Lastly, conserve the inquiry and also run it when the Send out Email switch on the modal is clicked.
Right here is a functioning demonstration of the application: https://tooljet-stny.onrender.com/applications/7a8867e3-3cea-49e3-89e7-8da39038b875
You can likewise download its JSON documents and also import it right into a ToolJet application, yet you’ll require to give your Sendinblue qualifications and also OpenAI API secret.
Final thought.
Until now, you have actually discovered just how to
- include a PostgreSQL data source to ToolJet
- send out e-mails within a ToolJet application utilizing Sendinblue,
- connect with ChatGPT by means of OpenAI in ToolJet, and also
- Construct full-stack applications in a couple of mins with ToolJet.
ToolJet is both an outstanding advancement device and also open-source – indicating its code is easily offered for every person to customize and also boost. It has a huge neighborhood of programmers and also gifted factors regularly keeping and also boosting the software program. As an individual, you can be certain of obtaining the very best efficiency when you make use of ToolJet.
Are you curious about adding to ToolJet? Do not hesitate to take a look at our GitHub repo- https://github.com/ToolJet/ToolJet to add and also increase concerns concerning ToolJet.
Thanks for checking out!
