​
Import

Import the Shootmail client and CSS in your app

import { ShootmailEditor } from '@shootmail/email-builder';
import '@shootmail/email-builder/dist/shootmail.css';

​
Initialize the client

Intialize Shootmail client. Make sure to initialize the client at a place in your code that runs only client side and not on the server.

let editor = new ShootmailEditor({
    elementId: 'shootmail-editor'
});

​
Declare the editor element

Declare the editor element in your HTML. This is the element where the editor will be rendered.

<div id="shootmail-editor"></div>

Done! This should be all you need to get started. You should now see the editor rendered in your app, ready to be used.

​
Configuration Options

The following configuration options are available:

type ShootmailEditorOptions = {
  elementId: string;
  imageServiceUrl?: {
    url: string;
    token: string;
  },
  theme?: ThemeSettingProps,
  settingsControl?: boolean,
  background?: boolean,
  branding?: BrandSettings | null
};

​
elementId: string (required)

The ID of the editor element. This is the element where the editor will be rendered.

<div id="shootmail-editor"></div>

​
imageServiceUrl: object (optional)

This is optional but recommended. This is used to upload images used in the email.

Currently, the only image service available is ImageKit, more image services coming soon.

type ImageServiceUrl = {
  url: string;
  token: string;
}

​
theme: object (optional)

Use this option to change the theme of the editor to suit your app’s theme.

theme: {
    borderRadius: '8',
    padding: true,
    light: {
        editorBackground: '#ffffff',
        editorBorder: '#e2e8f0',
        emailBackground: '#f8fafc'
    },
    dark: {
        editorBackground: '#1e293b', 
        editorBorder: '#334155',
        emailBackground: '#0f172a'
    }
}

​
settingsControl: boolean (optional)

If true, this displays a settings control on the editor, to customize options like editor background, email background, padding, border radius, etc.

settingsControl: true

This allows your users to completely customize how their emails look.

​
background: boolean (optional)

If true, this offers customization of the email background color.

​
branding: object (optional)

Use branding object to pass the branding details like logo, signature, social media, unsubscribe link, etc. If the branding object is passed, the slash commands in the email builder are pre-populated with the branding details. Also, the branding details are applied to My Templates and Purchased Templates.

{
  "logo": {
    "light": "https://res.cloudinary.com/curead/image/upload/c_scale,f_auto,q_auto,w_343/v1712843877/Shootmail/logos/shootm-logo-with-name_jgdq2l.png",
    "dark": "https://res.cloudinary.com/curead/image/upload/f_auto,q_auto,w_343/v1713876965/Shootmail/logos/shootm-logo-with-name-dark-mode_rziumz.png"
  },
  "socialMedia": {
    "facebook": null,
    "instagram": null,
    "twitter": "https://x.com/subhendupsingh",
    "linkedin": null,
    "youtube": null,
    "github": "https://github.com/subhendupsingh"
  },
  "brandColor": "#ffb342",
  "unsubscribe": {
    "text": null,
    "link": null
  },
  "contact": {
    "email": "hi@shootmail.com",
    "phone": "+91-9999933907",
    "address": null
  },
  "signature": {
    "avatar": "https://ik.imagekit.io/storebud/shootmail/profile_SMGkeyy0v.jpg",
    "name": "SPS",
    "position": "Founder",
    "company": "Shootmail"
  }
}

​
Email Preview

Users can preview how their emails will look like on the email clients before sending them. Shootmail provides a built-in email preview dialog with options to preview on desktop and mobile.

import { MailPreview } from '@shootmail/email-builder';

const preview = new MailPreview({
    closeOnOverlayClick: true
});

const previewMail = async () => {
    const html = editor.getHTML();
    preview.setContent(html);
    preview.show();
}