1. Features
  2. Emails

Features

Emails

Send transactional emails with mailgun.

Helper Functions

Access helper functions by importing from $lib/emails

        import { send, addToMailingList } from '$lib/emails';

      

send()

js
        await send({from, to, subject, template, templateMetadata, text, html}) returns success/error message

      

addToMailingList()

js
        await addToMailingList({to, mailingListEmail}) returns success/error message

      

Send Transactional Emails

You can send transactional emails using Templates or Text/HTML Strings.

Send with Templates

Templates live in $lib/emails. You can create new templates by creating a new svelte file in the $lib/emails/templates folder. This will be automatically imported for you by doing so.

Use: Just pass the file name as the template param as shown below.

js
        import { send } from '$lib/emails';

const response = await send({
  from: 'Travis @ SvelteLaunch <travis@sveltelaunch.io>',
  to: email,
  template: 'ThankYou',
  templateMetadata: { name: 'John Smith' },
  subject: 'Test Subject'
});

      

Template Metadata

Template metadata is an object where your key names match your template props.

        <Text>
  Hello, {name}! Thanks for purchasing Svelte Launch
</Text>

      

Send with Text/HTML Strings

js
        import { send } from '$lib/emails';

const response = await send({
  from: 'Travis @ SvelteLaunch <travis@sveltelaunch.io>',
  to: email,
  text: 'ThankYou',
  html: '<h1>ThankYou</h1>',
  subject: 'Test Subject'
});

      

Creating Templates

Templates can be created using Svelte components or HTML. You can even use tailwindcss classes to style your templates. svelte-5-email also includes some components you can use, but they are completely optional.

        <script>
	import { Button, Hr, Html, Text } from '@sveltelaunch/svelte-5-email';

	const { name } = $props();
</script>

<Html lang="en">
	<Text>
		Hello, {name}! Thanks for purchasing Svelte Launch
	</Text>
	<Hr />
	<Button
		href="https://sveltelaunch.com"
		style={{
			backgroundColor: '#1F7F4C',
			fontSize: '18px',
			fontFamily: 'Helvetica, Arial, sans-serif',
			fontWeight: 'bold',
			textDecoration: 'none',
			padding: '14px 20px',
			color: '#ffffff',
			borderRadius: '5px',
			display: 'inline-block'
		}}>Svelte Launch</Button
	>

	<h1 class="text-red-900">TEST</h1>
</Html>

      

Changing Mail Providers

  1. Step 1

    Create a client in `$lib/server`

            npm install yourmailprovderslib --save
    
          

    Instantiate your providers client in a file called yourProviderClient.js;

  2. Step 2

    Edit `api/emails/send/+server.js`

    Change the function below to match your provider.

            await mailgun.messages.create(MAILGUN_DOMAIN, {
      from: data.from ? data.from : import.meta.env.VITE_EMAIL_FROM,
      to: [data.to],
      subject: data.subject,
      html: templateHtml ? templateHtml : data.html,
      text: templateText ? templateText : data.text
    });
    
          
  3. Step 3

    Edit `api/emails/mailing-lists/+server.js`

    Change the function below to match your provider.

            const subscriber = await mailgun.lists.members.createMember(data.mailingListEmail, {
      address: data.to,
      subscribed: 'yes', // optional, modifiable on website
      upsert: 'yes'
    });