React email widget

Our free widget for sending emails to a trusted email account. The intention with this project is to solve the issues people are facing with having contact us pages, subscribe to newsletter and similar and not having their own backend or email services.

The widget is built on our free Email API that you can use if you want to build your own front-end solution.

Prerequisites

In order to use the API and widget, we need you to contact us with your e-mail that you will use for this, so we can add it to our list of trusted partners. It will usually take maximum 1 day before we have added you.

How it works

Once your e-mail is added to our API, you can use the widget and/or the API how much you want.

The functionality is quite simple, all the messages that your users are sending through the widget will be forwarded to the e-mail that you give us. In the widget, you should specify the e-mail in the recipient prop, example is shown below.

Email design

The emails that you will receieve looks like below image

Download

npm i react-email-widget

Consume the widget

Example of how the widget can be consumed. The email you provide in the recipient prop and that you have added as the trusted email, will recieve all the emails from your customers from our API.

import { SendMail } from "react-email-widget";

<SendMail recipient="your-email@gmail.com" />;

Example of default widget

Image of default looking widget

Props

The widget is fully customizable in terms of styling and copy. All props available:

interface ISendMailProps {
  recipient: string;
  className?: string;
  inputPlaceholder?: string;
  textareaPlaceholder?: string;
  headline?: string;
  buttonText?: string;
  styles?: any;
  inputStyles?: any;
  textareaStyles?: any;
  buttonStyles?: any;
  successText?: string;
  generalErrorText?: string;
  noEmailEntered?: string;
  wrongEmailFormat?: string;
  noMessageEnteredMessage?: string;
}

Feedback and improvements

If you have any feedback, questions of how to use or style it, or if you want some changes to be added - please contact us. We love to improve our software, and we take all feedback seriously. Contact us here with all your thoughts.

See all our articles See all our open source projects