Only show these results:

How to Build a Complete Email Management Interface

Looking to build a custom email interface using the customizable, ready-to-use Nylas Mailbox and Composer Components? With our pre-built UI components and integration with the Nylas API, you can quickly create a complete email management interface that's customized for your team.

In this guide, you'll set up a complete email app using Nylas Components in a simple React application.

What Are Nylas Components?

The Nylas Components are pre-built, modular UI components that can be added to any website. They are web components. This means that they can be integrated into any website which can load JavaScript and display an HTML element, with no additional frameworks required. Being pre-built means you get up and running quickly, and the availability of a full set of custom options lets you customize components to meet your needs.

Additionally, Nylas Components are set up for easy integration with the Nylas APIs. This integration allows for robust functionality without draining developer resources. For more information on the APIs and how they can improve your workflow, check out our API documentation.

In this guide, we'll focus on the Mailbox and the Composer components. Combined, they provide a fully-fledged email management interface which can be set up in about 30 minutes.

Prerequisites

  • If you're a new customer, sign up for an account with Nylas.
  • If you're an existing customer, create a new application in the Nylas dashboard to start testing.

Set Up Your React Project

To pull together all of the components, you'll need to create a basic React project. Open your terminal, run npx create-react-app <my-app-name>, and follow the steps.

Once you're done, open up your new project folder with your editor of choice. To install the packages related to our components, run npm i @nylas/[email protected] @nylas/[email protected]. This will install the latest canary release versions.

Navigate to src/App.js and replace the code there with the code below. Make sure to insert your Mailbox and Composer component IDs.

import './App.css';
import '@nylas/components-mailbox';
import '@nylas/components-composer';

function App() {
return (
<div className="App">
<nylas-mailbox id="<YOUR_MAILBOX_ID"></nylas-mailbox>
<nylas-composer id="<YOUR_COMPOSER_ID>"></nylas-composer>
</div>
);
}

export default App;

This will load the current version of the Mailbox and Composer components and use the IDs you provide to load your registered instance, complete with Nylas API integration. You should see something like this for the Mailbox:

Mailbox with demo data

The Composer will look like this:

Composer with demo data

Component Setup

We’ll walk through the same basic steps to set up and configure the Mailbox and Composer components.

Mailbox

In the Dashboard, click Components on the left. Then, click Mailbox.

Nylas Mailbox Component tile in the dashboard

This will take you to the Component setup screen. Select your connected account and enter your access token.

Under Allowed domains, type * This will make your component accessible from any domain, including localhost. You can also enter your preferred domain if you'd like. Once you're done, it should look like this:

Nylas components, showing allowed domains

Click on Save new component. You'll then see several configuration properties. At the bottom, you'll see instructions for adding the component to your app. Save the code snippet that contains your component ID.

<nylas-mailbox id="YOUR-MAILBOX-ID" > </nylas-mailbox>   

Composer

In the Dashboard, click Components on the left. Then, click Composer.

Nylas Composer tile in the dashboard

Similar to the steps above, select your connected account, enter your access token, and add an allowed domain, and click Save new component. At the bottom, you'll see instructions for adding the component to your app. Save the code snippet that contains your component ID.

<nylas-composer id="YOUR-COMPOSER-ID" > </nylas-composer>   

Integrate Mailbox Components

Now that you've built a quick proof of concept with React and the Mailbox and Composer components, let’s integrate the Components and build what you need to support email forwarding.

First, let’s add some styling to the Composer. Put the composer in a div and overlay it on the bottom-right side using the code below:

      <div
style={{
position: 'absolute',
width: '60%',
margin: 'auto',
right: '0',
bottom: '0',
zIndex: 2,
}}
>
<nylas-composer
id="4aed9955-007d-4096-a63e-badae043e622"
></nylas-composer>
</div>

Next, let’s close the Composer by default and add a button for opening it. You'll need to create a ref for this, and then use it in an effect to close the component upon loading.

  const composerRef = useRef(null);
useEffect(() => {
if (!composerRef.current) return;

composerRef.current.close();
}, [composerRef]);

You can then add a button to open the Composer when you want to compose a new message. Let’s create an openComposer function using the code below:

  const openComposer = useCallback(() => {
if (!composerRef.current) return;

composerRef.current.open();
}, [composerRef]);

Add the button with the code below:

  <button onClick={openComposer}>Compose a new message</button>   

You should now have a Mailbox that looks like this:

Nylas Composer and Mailbox

We have a functioning mailbox! But we can do even better.

Set Up Forwarding

First, let’s show the forward button in the Mailbox Component:

     <nylas-mailbox
id="<your-mailbox-id>"
show_forward={true}
></nylas-mailbox>

You should now see the forward button appear when you click on an email:

Mailbox component showing forward button

However, the button doesn’t do anything yet. To make it functional, we’ll need a mailbox ref and an effect to set up the event:

const mailboxRef = useRef(null);
useEffect(() => {
const mailbox = mailboxRef.current;
if (!mailbox) return;

mailbox.addEventListener(`forwardClicked`, openComposer);

return () => {
mailbox.removeEventListener(`forwardClicked`, openComposer);
};
}, [mailboxRef, openComposer]);

Don’t forget to add the ref to the component as shown below:

      <nylas-mailbox
id="<your-mailbox-id>"
ref={mailboxRef}
show_forward={true}
></nylas-mailbox>

From there, let’s go back to the openComposer function and add a bit of logic to bring in the original message text to the new draft.

First, let’s create a small helper function to help us with the formatting:

const formatForwardBody = (body) =>
`<div><br/><div>---------- Forwarded message ---------</div><br/>${body}</div>`;

Then, add an event parameter to the openComposer function. If it matches forwardClicked, we'll pre-populate the draft before opening the Composer window:

const openComposer = useCallback(
(event) => {
if (!composerRef.current) return;

if (event) {
const message = event?.detail?.message;
switch (event?.type) {
case `forwardClicked`:
composerRef.current.value = {
body: formatForwardBody(message.body),
files: message.files,
subject: `Fwd: ${message.subject}`,
thread_id: message.thread_id, // Required to ensure fwds/threads are associated to a thread
};
break;
default:
break;
}
}
composerRef.current.open();
},
[composerRef]
);

That’s it! Click forward on a message, and you’ll see your new draft populated with the body and subject based on the original message along with any attachments.

Mailbox and composer showing forwarded message

The entire source code is only 80 lines:

App.js
import './App.css';
import '@nylas/components-mailbox';
import '@nylas/components-composer';
import { useCallback, useEffect, useRef } from 'react';

const formatForwardBody = (body) =>
`<div><br/><div>---------- Forwarded message ---------</div><br/>${body}</div>`;

function App() {
const composerRef = useRef(null);
useEffect(() => {
if (!composerRef.current) return;

composerRef.current.close();
}, [composerRef]);

const openComposer = useCallback(
(event) => {
if (!composerRef.current) return;

if (event) {
const message = event?.detail?.message;
switch (event?.type) {
case `forwardClicked`:
composerRef.current.value = {
body: formatForwardBody(message.body),
files: message.files,
subject: `Fwd: ${message.subject}`,
thread_id: message.thread_id,
};
break;
default:
break;
}
}
composerRef.current.open();
},
[composerRef]
);

const mailboxRef = useRef(null);
useEffect(() => {
const mailbox = mailboxRef.current;
if (!mailbox) return;

mailbox.addEventListener(`forwardClicked`, openComposer);

return () => {
mailbox.removeEventListener(`forwardClicked`, openComposer);
};
}, [mailboxRef, openComposer]);

return (
<div className="App">
<button onClick={openComposer}>Compose a new message</button>
<nylas-mailbox
id="c70ff084-a2cf-4bef-8fb8-9f767ea0f0bd"
ref={mailboxRef}
show_forward={true}
></nylas-mailbox>
<div
style={{
position: 'absolute',
width: '60%',
margin: 'auto',
right: '0',
bottom: '0',
zIndex: 2,
}}
>
<nylas-composer
id="4aed9955-007d-4096-a63e-badae043e622"
ref={composerRef}
></nylas-composer>
</div>
</div>
);
}

export default App;

What's Next?

In this guide, we built a complete email management interface using the Nylas Mailbox and Composer components.

For more information, check out our docs on the Mailbox and the Composer components.

Check out the source code at the Nylas Samples repository.