It is assumed you have both a Nexmo account and a Sendinblue account, and associated API keys and secrets.
NOTE: A full use case write up of this use case is available on the Nexmo Developer Portal.
This code allows you to demonstrate a two way chat use case using the Client SDK and Sendinblue. The scenario is as follows:
-
A user creates an order. An order confirmation email is sent to the user via Sendinblue. The order email contains a link the user can click if he wishes to chat with an agent about the order.
-
A custom event is created when the confirmation email goes out. This is retained in the Conversation for that user.
-
A chat screen is loaded that contains current order data, order history, and message history. Two-way messaging can then take place between the customer and a support agent.
The following diagram illustrates the overall process:
The following assumes you have the git
and npm
commands available on the command line.
- Install the Nexmo CLI:
npm install nexmo-cli -g
- Update your
.nexmorc
file:
nexmo setup NEXMO_API_KEY NEXMO_API_SECRET
- Clone the repo:
git clone https://github.com/nexmo-community/sendinblue-use-case.git
-
Change into the cloned project directory.
-
Install required npm modules:
npm install
-
Copy
example.env
to.env
. -
Create a Nexmo application.
nexmo app:create
This enters interactive mode. You can give your app a name and also select RTC capabilities. A private key will be written out to private.key
.
A file .nexmo-app
will also be created in the project directory containing the Application ID and the private key. Make a note of the Application ID as you will need this later.
Open the .env
file in your project directory with an editor. Set the following information:
NEXMO_APPLICATION_ID=
NEXMO_API_KEY=
NEXMO_API_SECRET=
NEXMO_APPLICATION_PRIVATE_KEY_PATH=private.key
CONVERSATION_ID=
PORT=3000
SENDINBLUE_API_KEY=
SENDINBLUE_FROM_NAME=
SENDINBLUE_FROM_EMAIL=
SENDINBLUE_TO_NAME=
SENDINBLUE_TO_EMAIL=
SENDINBLUE_TEMPLATE_ID=
Add in your application ID from the installation section. You can obtain your API key and secret from the Nexmo Dashboard.
The private key file will typically be private.key
.
The Conversation ID is only used if you want to use the utilities in the utils
directory.
Most importantly you must have a Sendinblue API key.
For testing this use case it is assumed you have Sendinblue "sender" information. This is the email address and name you are sending emails from. You will also want to specify a user name and email address that will receive the order confirmation emails. Usually this information would be available on a per-customer basis in the user database, but for testing convenience it is set in the environment file in this use case.
The last piece of configuration information you need is the ID of the template you are using. The template is created in the Sendinblue UI. When you ahve created a template and activated it you can make a note of its ID in the UI. This is the number that is used here.
Sample template:
ORDER CONFIRMATION
Dear {{params.name}},
Thank you for your order!
ORDER_ID
{{params.order_id}}
ORDER_TEXT
{{params.order_text}}
If you would like to discuss this order with an agent please click the link below:
{{params.url}}
Thanks again!
There are several steps to running the demo.
- In the project directory start the server:
npm start
This starts up the server using node.js
.
- Create the support agent user with the following Curl command:
curl -d "username=agent" -H "Content-Type: application/x-www-form-urlencoded" -X POST http://localhost:3000/user
This creates the user 'agent'.
IMPORTANT: It is necessary to create the support agent before any other user in this simple demo.
- Create a customer user:
curl -d "username=user-123" -H "Content-Type: application/x-www-form-urlencoded" -X POST http://localhost:3000/user
This creates the user 'user-123'.
You will notice from the server console logging that a conversation is also created for the user.
- Create a customer order:
curl -d "username=user-123" -H "Content-Type: application/x-www-form-urlencoded" -X POST http://localhost:3000/order
This creates an order for user 'user-123'. For simplicity this is a simple pre-defined order, rather than a shopping cart.
This step will also generate a custom event of type custom:order-confirm-event
contain the order details.
In addition a confirmation email is sent via Sendinblue. This email contains a link the user would select to chat if they wanted support with order.
-
Check you have received the order email! Go to the inbox defined in your configuration to read the confirmation email.
-
Click the link in the email to log the customer into the chat screen.
-
Log the agent into the chat. For this step it is recommended you additionally start an 'incognito' tab in your browser (or use a new browser instance).
For simplicity the support agent logs into the chat using a method similar to the customer. You can just copy the link the client clicked on in the email, and change the username in the link to agent
:
localhost:3000/chat/agent/CON-ID/ORDER-ID
The user and support agent can now engage in a two-way messaging session.