AWS SES Email template builder
An isomorphic utility SDK to build and send emails via SES.
Installation
yarn add @pdftron/ses-email-builder
fetch
is also required to be available as a global. If using node, you can use the isomorphic-fetch
package.
Usage
The default export of this package is a factory function that returns a Class you can use throughout your app to send emails. The factory function allows you to set global styles that will be applied to all emails, and the returned class lets you set more specific details per email.
Example usage:
const factory = require('@pdftron/ses-email-builder');
const EmailBuilder = factory({
...defaults // see documentation below for options
})
const builder = new EmailBuilder();
builder
.setSource('PDFTron <noreply@pdftron.com>')
.setTo('person@gmail.com')
.setSubject('PDFTron - Contact Sales Form Confirmation')
.setHeader({ text: "PDFTron Systems" })
.addText({ text: "Thank you for filling out our form! We will get back to you soon" })
.addButtons({
buttons: [
{
text: "See more info",
to: "https://pdftron.com/webviewer"
},
{
text: "Documentation",
to: "https://pdftron.com/documentation"
}
]
})
.send(); // send the email!
API
Any options that include a style should come in the form of a style object, similar to React
factory(defaults: Object) => EmailBuilderClass
Defaults object can contain:
-
appName
The name of your application. The text in the header is defaulted to this -
endpoint
The endpoint of your AWS SES endpoint. Requests will be sent here. Required. -
defaultEmailSource
The default source of all emails -
defaultHeaderImage
A link to an image that will be included in all headers -
defaultHeaderTextStyle
The default style for the text in the header -
defaultHeaderStyle
The default style for the header div -
defaultSubHeaderStyle
The default style for the subheader dic -
defaultSubHeaderTextStyle
The default style for the subheader text -
defaultFont
The default font to use for all text -
defaultFontColor
The default font color to use for all text -
defaultHeaderImageStyle
The default style for the image in the header -
defaultBodyStyle
The default style for the overall wrapper div -
defaultContentStyle
The default style for the div wrapping the main email content (not including the headers or footer) -
defaultLabelStyle
The default style for info labels -
defaultValueStyle
The default style for info label values -
defaultLinkStyle
The default style for any links -
defaultFooterStyle
The default style for the footer div -
defaultFooterText
The default text to be displayed in the footer -
defaultFooterTextStyle
The default style for the text in the footer -
defaultButtonStyle
The default style for all buttons
Returns a reference to a EmailBuilder class
new EmailBuilderClass() => builder
Methods
Any methods that accept styles will override the defaults set in the factory.
-
builder.setDefaultFont(font: string) => this
Sets the default font for this specific email -
builder.setDefaultFontColor(color: string) => this
Sets the default font color for this specific email -
builder.setContentStyle(style: StyleObject) => this
Sets the style for the content of this email -
builder.setBodyStyle(style) => this
Sets the style for the entire wrapper div -
builder.setSource(source: string) => this
Sets the source/sender of this email -
builder.setTo(to: string|string[]) => this
Sets who the email is sent to -
builder.setSubject(subject: string) => this
Sets the subject of the email -
builder.setTextStyle(tags: string|string[], style: StyleObject) => this
Sets the style for specific text tags.
Example:
// sets all the p's and h5's to red
builder.setTextStyle(['p', 'h5'], { color: 'red' })
-
builder.setHeader(options: Object) => this
Sets the header of the email-
options.text
The text to be in the header -
options.imageSource
The source of the image for the header -
options.style
Style for the header div -
options.imgStyle
Style for the image in the header -
options.textStyle
Style for the text in the header
-
-
builder.setSubheader(options: Object) => this
Sets the contents and style of the subheader-
options.text
The text to appear in the subheader -
options.style
The style to apply to the subheader div -
options.textStyle
The style to apply to the text in the subheader
-
-
builder.addText(options: Object) => this
Adds text to the body of the email-
options.text
The text to add -
options.tag
The type of text. For example, 'p' or 'h3' -
options.textStyle
The style of the text
-
-
builder.addCustom(html: string) => this
Adds a custom HTML string to the body -
builder.addLineBreak() => this
Adds a line break to the body -
builder.addInfoItem(options: Object) => this
Adds a nicely diaplayed key value pair to the email body-
options.label
The label of the data -
options.value
The value of the data -
options.labelTag
The tag to use for the label -
options.valueTag
The tag to use for the value -
options.labelStyle
Style for the label -
options.valueStyle
Style for the value
-
-
builder.addButtons(options: Object) => this
Adds a row of buttons to the email body-
options.buttons
An array of buttons to add. Each button can have atext
,to,
andstyle
property. -
options.wrapperStyle
Style to apply to the whole wrapper div
-
-
builder.addJSON(options: Object) => this
Renders a bunch of info label corrosponding to a JSON object. Loops over theaddInfoItem
API.-
options.data
A non-nested object containing key value pairs to render. -
options.labelTag
The tag to use for the labels -
options.valueTag
The tag to use for the values -
options.labelStyle
Style for the labels -
options.valueStyle
Style for the values
-
-
builder.setFooter(options: Object) => this
Sets the footer of the email-
options.text
The text to render in the footer -
options.style
The style to apply to the footer div -
options.textStyle
Style to apply to the footer text
-
-
builder.getHTML() => string
Returns the HTML contents of the email. Used mostly for debugging. -
builder.get() => Object
Returns the entire SES data structure of the email. Used mostly for debugging. -
builder.send() => Promise<Response>
Sends the email
Statics
EmailBuilderClass.link(options: Object) => string
Creates an inline link element that can inserted into other text
-
options.text
The text of the link -
options.to
Where the link points to -
options.style
Style for the link
Example
builder.addText({
text: `View documentation ${EmailBuilder.link({
text: 'here',
to: 'http://pdftron.com/documentation',
})}`
})