> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shootmail.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Usage

> Learn how to use Shootmail in your app.

## Import

Import the `Shootmail` client and CSS in your app

```typescript theme={null}
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.

```typescript theme={null}
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.

```html theme={null}
<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:

```typescript theme={null}
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.

```html theme={null}
<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](https://imagekit.io), more image services coming soon.

```typescript theme={null}
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.

```typescript theme={null}
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.

```typescript theme={null}
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`.

```typescript theme={null}
{
  "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.

```typescript theme={null}
import { MailPreview } from '@shootmail/email-builder';

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

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