Email Templates

Noptin does not come with a drag and drop email builder. Instead, it uses email templates to customize the look of your emails.

You can think of an email template as a WordPress theme. It is given the email heading, content, and footer text and then produces the final HTML email.

This allows you to do awesome things in your templates, such as using dynamic PHP code to generate truly personalized email content.

Noptin comes with several email templates.

Changing an email’s template

You can use a different template for each email that you send with Noptin. This applies to both newsletter emails and automated emails.

To change your email template, open your email campaign in the Noptin email editor then scroll to the “Template” settings area and select your preferred template.

noptin change email template

The “Template” settings area only appears if your email type is set to “Standard”.

Customizing the default email templates

Nopin allows you to change the appearance of any built-in email template.

To do this:-

First, create a new folder in your active WordPress theme’s (or child theme’s) root folder and name it “noptin” as shown below.

Overide Noptin Templates

Next, open the new folder and create a new “email-templates” folder as shown below.

Overide Noptin Email Templates

Finally, copy the template that you want to customize from “wp-content/plugins/newsletter-optin-box/templates/email-templates” into the folder you previously created and customize it as you see fit.

You can use a plugin such as this one to customize the appearance of the WooCommerce template.

Creating a custom email template

You can also create new email templates.

To do this:-

First, you need to register your template via the noptin_email_templates filter as shown below.

<?php

/**
 * Registers a custom email template.
 *
 */
function register_custom_noptin_email_template( $templates ) {
    $templates['my-template'] = 'Custom Template';
	return $templates;
}
add_filter( 'noptin_email_templates', 'register_custom_noptin_email_template' );

Finally, you need to generate the final HTML when an email is sent using your new template.

<?php

/**
 * Registers a custom email template.
 *
 * @param string $generated_email
 * @param Noptin_Email_Generator $generator
 * @return string
 */
function apply_custom_noptin_email_template( $generated_email, $generator ) {

	// Ensure that this is our template.
	if ( $generator->template === 'my-template' ) {

		ob_start();

		?>
			<!DOCTYPE html>
			<html <?php language_attributes(); ?>>
			<head>
				<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo( 'charset' ); ?>" />
				<meta http-equiv="x-ua-compatible" content="ie=edge">
				<title><?php echo esc_html( $generator->heading  ); ?></title>
				<meta name="viewport" content="width=device-width, initial-scale=1">
				<meta name="robots" content="noindex, nofollow" />
				<style>
					a { color: blue; }
				</style>
			</head>
			<body>

				<!-- start hero -->
				<h1 style="margin-bottom: 20px;"><?php echo esc_html( $generator->heading  ); ?></h1>
				<!-- end hero -->

				<!-- Start content -->
				<div style="margin-bottom: 20px;"><?php echo wp_kses_post( trim( $generator->content ) ); ?></div>
				<!-- end content -->

				<!-- Start footer -->
				<div style="margin-bottom: 20px;"><?php echo wp_kses_post( $generator->footer_text ); ?></div>
				<!-- end footer -->

			</body>
			</html>
		<?php

		$generated_email = ob_get_clean();

	}

	return $generated_email;
}
add_filter( 'noptin_email_after_apply_template', 'apply_custom_noptin_email_template', 10, 2 );

The above code snippet is written in PHP. You can add it to your site via the Code Snippets plugin or by copying it to your theme’s functions.php file.

Using an email template builder

If you’re not a developer, you can also use an HTML email customizer plugin such as this one to change the appearance of your emails.

All you have to do is install and configure the plugin. It will then intercept Noptin emails and apply your configured template.

If you decide to go this route, make sure you set the template of each campaign to “No Template” as shown below.

noptin no template

Using a drag and drop email builder

You can use any drag and drop email builder such as Unlayer to design your emails and send them via Noptin.

To do this:-

First, design the email in your email builder then export the email as an HTML document.

unlayer download as html

Second, create a new Noptin newsletter or automated email campaign then set the email type to “Raw HTML”.

noptin raw html email

Finally, paste your exported HTML into the email content text area then either send or save your email campaign.

Remember to include an unsubscribe link in your email using the [[unsubscribe_url]] merge tag.

You can also personalize your email using any of our supported merge tags.

If your HTML email contains any images, remember to first upload the images to your site then edit the exported HTML and correct the image links.

6 thoughts on “Email Templates

  1. First of all, I’d like to say, Noptin is best plugin ever!
    but I can’t find guide about how to attach ‘unsubscribe’ link on template.
    Please guide me. Thanks!

    1. Hi Natalie,

      Thanks for the kind words.

      You can use the [[unsubscribe_url]] tag as a URL anchor and it will be replaced by the unsubscribe link.

      Below is an example of how the default template does it:-

      <p style="margin: 0;">To stop receiving these emails, you can <a href="[[unsubscribe_url]]" target="_blank" rel="noopener noreferrer nofollow ugc">unsubscribe</a> at any time.</p>
      
  2. Hi, Thanks for your great Plugin.

    I was wondering if it is possible to use the HTML E-mail Template from the Plugin WP HTML Mail. So that every email that gets sent from my System looks the same and I don’t have to do the same template twice.

    Thanks and all the best,

    Kevin Lambert

Leave a Reply

Your email address will not be published.

Have a question about Noptin?

Contact our customer support team anytime

Contact Support

Custom CSS Slide Example
Custom Animation Example
Default Animation