No business or marketer out there wants to see any of their customers retracing their steps, do they? And this hesitance is rooted as much in sentiments as in economics- the cost of acquiring a new customer is nearly five times that of retaining an existing one. Much effort goes into acquiring a lead, nurturing them, and developing a robust relationship with them. So, naturally, the matter of customer retention is tended to with great care at every organization. 

In this context, renewal emails assume particular importance. Mostly deployed by SaaS providers and companies offering subscription-based services, a renewal email seeks to prolong a customer’s association with the brand. Besides nudging buyers to recommence the existing contract, renewal emails, on occasion, host cross-selling and upselling attempts, too. Hence, if you come to think of it, a lot rides on a renewal email. This, then, is all the more reason for us to curate it as carefully as we can. Want to know how to go about it? We’ve got you covered! Today, we talk at length about a host of techniques that go into writing and creating an impactful renewal email template. Let’s find out what they are!

1. Look to Personalize

As inboxes are getting more and more crowded by the day, embracing personalization is a must for brands to get noticed by their subscribers. This applies to all types of emails they plan on sending out: welcome, abandoned cart, milestone, survey, product recommendation, and, of course, renewal email templates.

Many brands miss the trick by treating their renewal emails as cursory reminders. Sure, they have a very definite purpose, but that doesn’t mean they have to sound robotic, right? Even if you have set up an automated workflow for your renewal emails (as you should, and not just for renewal, but for all your other emails, too), there’s no need for your audience to pick up on that. 

Now, the question is: what can you do to personalize your renewal emails? Let’s take a look.

• Address your subscribers by their first name; it’s the oldest trick in the book, is the easiest thing to do, and works like a charm! Apart from the email body, you could include the subscriber’s name in the subject line as well. 
• Look to include information that is relevant to the customer. Suppose you are a video streaming service. In your renewal email, you can mention the number of videos they streamed during their subscription period. These small personal touches can go a long way toward capturing the subscriber’s attention. 
• Part of personalizing the email templates also includes tweaking the sender’s name- make it appear as if the email has been sent from an individual rather than the organization (for instance, if we have to send a renewal email, we’ll keep the sender name as Kevin from Email Uplers instead of just Email Uplers).

This email from AllTrails is an ideal personalized renewal email example.

Image source

2. Leverage FOMO

One of the ways in which you could nudge your customers into renewing their subscriptions is by shedding light on all the things they stand to lose by deciding against it. The market is rife with competition, and at the end of their subscription, your existing customers can’t be faulted for wanting to test out the offers of your competitors. However, during this juncture, if your renewal email does a decent job of highlighting your value proposition, you have a great shot at retaining them. More importantly, while talking about the salient features of your subscription, ensure that you make it about the customer. Instead of talking about them in isolation, mention how they add value to your buyer’s lives. Only then will you be able to engage them successfully.

YouTube’s renewal reminder email template over here (for its YouTube Premium service) aptly illustrates the arguments we just put forward.

Image source

3. Offer an Incentive

While the unique merits of your service might be sufficiently compelling for users to sign up for your subscription, it might fail to convince them to go for a renewal, particularly when there’s no dearth of options in front of them. So, what can you do to prop yourself slightly above the rest? Place an incentive in your renewal email. It could be anything- revised, lower pricing, exclusive limited-period access to another one of your services, or even a couple of free additional months of service. Think of it as a means of expressing your gratitude to them for subscribing in the first place. By offering them extra value beyond your subscription, you make it extremely tough for them to resist your renewal request. Some businesses choose to place their incentives against a ticking clock in a bid to accelerate their customer’s decision-making process by instilling a sense of urgency in them. 

Here’s a renewal email from Namecheap containing an incentive for the customer.

Image source

4. Stitch a Sequence

Earning a renewal from a subscriber can be a tricky affair. And sending a solitary renewal email is unlikely to get the job done. Amidst the barrage of emails that would already be flooding your subscriber’s inbox, what’s one more email for them to lose sight of, right? Therefore, to have a realistic shot at getting noticed as well as convincing your customers to do what is needed, the wisest course of action is to send out a sequence of renewal message samples. A series of 3-5 emails would be ideal. Take care to space out the emails appropriately so that you don’t end up overwhelming your customers. 

The first email in the sequence could be sent well before the service expiration date- perhaps a month prior. Then, the subsequent ones could each be sent within a span of 5-7 days of the first one. Also, make sure to include something unique in each of these emails to prevent the sequence from becoming monotonous. Maybe in the first email, you could talk about the salient features of your subscription and generate FOMO; then in the next one, you could shed light on the various ways in which the customer in question benefitted from your subscription; in the following email, you could place an incentive; you get the drift, don’t you?

5. Avoid Promotional Language

The customers whom you’re trying to persuade for a renewal have already had a taste of your service; keep this in mind while drafting your renewal emails. Because if you happen to take the promotional route with your renewal emails, these customers have every reason to disengage from you. Keep things crisp and to the point. As mentioned earlier, renewal emails have a very focused objective, and you’d do well not to digress. Moreover, putting forward an exaggerated plea for renewal makes you appear desperate and could potentially rust your brand reputation.

Take a look at this renewal message sample from Apple that perfectly embodies the “simplicity is the ultimate sophistication” philosophy.

Image source

6. State the Important Details Clearly

In a renewal email, two details assume utmost importance- the renewal date and payment details. You could add other information on top of this (like the incentive or a brief summarization of the service’s USPs, as we discussed earlier) so that these critical details are not overshadowed. To facilitate a hassle-free renewal process, clearly conveying the expiration date to your customers is an absolute must. And along with stating the payment amount, also offer ample clarity on all the various means they can use to complete their transaction.

This renewal email from Reincubate puts the important details in bold text to avoid confusion. Moreover, they have included a link to a site a customer would most likely frequent in connection with account renewal in the email body itself- an excellent move to enhance the customer experience.

Image source

7. Write Impactful CTAs

Hitting the right notes with your CTA is crucial because that will help elevate the appeal created by your copy and visuals in the email body, ultimately compelling your customers to take the desired action. Now, CTAs in renewal emails are best written in an affirmative tone; this will heighten the chances of the subscriber going ahead with the needful. Equally vital is to pay attention to the CTA’s placement and visibility- it should immediately catch the reader’s eye the minute they open the email. And as far as the CTA phrase is concerned, avoid sounding vague; that’s more or less the only guideline!

This renewal reminder email template from Bynder has a lovely CTA. Take a look.

Image source

Wrapping It Up

Renewal emails are invaluable because they shoulder the important responsibility of retaining existing customers. When done right, they can help you foster long-lasting customer relationships and maximize customer lifetime value. We hope the insights and renewal email examples shared above will help you write pitch-perfect renewal emails and minimize your churn rate.

The post How to Create A Renewal Email Template: Expert Tips & Examples appeared first on Email Uplers.

The word “custom” can be confusing. Two years ago, one of our clients who had not the slightest idea about development or coding, was quite shocked to learn that “custom coding” does not refer to DIY coding. 

Because our developers had been custom-coding templates in Mailchimp, the venerable client had to wait beyond his apparently self-appointed TAT.

On the surface, it may seem there’s no difference between the two. But probe deeper, and you’ll find that “custom” means both “tailor-made” and “conventional.” In other words, custom coding an email template on a particular ESP requires a thorough practical understanding of said ESP’s technical convention/ecosystem. 

So if you want to know how to create a template in Mailchimp, you need to work within the technical compass of Mailchimp. This would involve knowing how Mailchimp works, what the ESP allows or prohibits, how it reacts, whether or not it sheds code, etc.

And that’s where experts like us come in. In this developer guide, we’re putting out all the stops to show you how to code Mailchimp HTML templates. From the top! 

• Take A Goal-centric, User-friendly Approach
  
• Embed CSS Styles into The HTML Code
  
• Arrange Content Blocks within Rows
  
• Coding for Image, Text, And CTA Button
  
• Adding The Email Footer
  
• Upload Your Template to Mailchimp
  
• Test Your Email for Rendering across Clients 

Read more: A Complete Guide to Mailchimp’s New Email Builder

How to Code Custom Mailchimp Templates

1. Take A Goal-centric, User-friendly Approach

To begin with, identify your goal. What is it you’re trying to achieve with a custom coded email template? Much of coding depends on having a prior idea about the placement of various components in your email. 

For instance, if you’re creating a promotional email which offers a gift card, it would contain a CTA button either on the hero image or just after. Again, if you’re showcasing a brand’s product line, you’re thinking of multiple CTAs across the email.

Perhaps you want to embed the images and CTAs in a Z-pattern to improve readability, and so on. All this is part and parcel of knowing how to code a Mailchimp template. 

2. Embed CSS Styles into The HTML Code

Mailchimp automatically incorporates the CSS styles in your code into the HTML code of the email template. So there’s no need for a separate CSS file. This reduces code bloat. 

Consider the following code snippet. When you save this code in Mailchimp, the CSS styles defined in the <style> tag will be integrated or “inlined” into the HTML code of the email template. Besides limiting code bloat, this also ensures consistent rendering across email clients that may not support CSS stylesheets. 

Read more: How To Embed Mailchimp Survey & Polls In Emails To Boost Your Campaign ROI

3. Arrange Content Blocks within Rows

Like we mentioned earlier, having a prior idea about the placement of various components in your email is crucial while coding. This idea will guide your coding, ensuring each block operates as intended within the layout. Now, to give a structure to your code, you need to think about how the content blocks in the email will operate. 

Take editable blocks, for instance. These are sections within your email that the designer can modify without needing to fiddle with the code. Likewise if the designer wants to change the order of these editable blocks. These blocks should be placed within rows for better organization, as shown below. 

4. Coding for Image, Text, And CTA Button

Keep in mind that whenever coding Mailchimp HTML templates, you’ll need to add mc:edit. In the following example, the attribute is added within the <image> tag. 

(mc:edit is not part of standard HTML. It’s a custom attribute that is used within Mailchimp email templates. In this regard, feel free to read Mailchimp’s proprietary Template Language documentation.) 

N.B. Mailchimp tends to strip out the attributes that define the height and width of images. Now this creates a problem if you want to use retina images i.e. images that have twice the number of pixels per inch than regular images. In the absence of attributes, the images will appear larger than intended, leading to disrupted viewing. There are two ways to deal with the problem. One, you can scale down the retina images before uploading them to Mailchimp. Two, you can add the image size attributes manually after editing the Mailchimp template.

Like images, you can add an editable section for the body copy as shown below. 

Finally, the CTA button. Note that you can only use padded buttons in custom Mailchimp templates. Any styles you may have applied to the anchor tags of your custom button might be removed by Mailchimp’s rendering environment. This once again reminds us of the importance of adhering to an ESP’s native penchants. 

The click real estate will be limited to the CTA text. The viewer can’t click on the space surrounding the text. Outside the text, the pointing hand will resolve into the default cursor. Below is an example of HTML code for adding a padded CTA button in a Mailchimp email template.

5. Adding The Email Footer

You might not have to make the footer section editable if the legal information doesn’t require changes. However, if the designer wishes to incorporate a creative footer, ensure you include “mc:edit=footer” in your code. 

Also, remember to insert *|UNSUB|* in the code to generate the unsubscribe link, which is a legal requirement.

Speaking of merge tags, make sure you always add the following merge tags in your code:

• *|MC_PREVIEW_TEXT|* : To generate the appropriate preview text mid-campaign-setup
  
• *|ARCHIVE|* : To generate the ‘View Online’ link
  
• *|UPDATE_PROFILE|* : To give your subscribers the option to update their personal information or manage their email preferences
  

*|TWITTER:FULLPROFILE|* : Or any other social media channel integration for that matter. In the present case, the “FULL PROFILE” argument will populate the email with your brand’s X avatar, followers, follow link, and the latest tweets. 

6. Upload Your Template to Mailchimp

Once the HTML code is ready, 

• Log in to your Mailchimp account
  
• Go to ‘Content,’ and choose ‘Email templates.’ 

• Click ‘Create template’

• Select ‘Code your own’

• Choose ‘Import Zip’ to upload a zip file with your template code

• Name your template, and click ‘Upload’
  
• Make changes to your code or design
  
• Once you’re done editing your template, click ‘Save and Exit’

7. Test Your Email for Rendering across Clients

Testing is the key to understanding how an ESP operates. In particular, examining how an ESP naturally behaves in coding provides valuable insights for developers to navigate around any limitations of the builder in future projects.

From removing code to ensuring proper rendering, it’s essential to test your emails before sending them to your design team. In Mailchimp, you can easily test your template by sending a test email to your own email address. Learn more about previewing and testing your emails in Mailchimp. 

Order Custom Coded Mailchimp Templates for A Decent Buck! 

As official Mailchimp partners, we’ve been delivering pixel-perfect custom Mailchimp templates to businesses worldwide for over ten years. Share your design brief with us. Our coding services begin at just $59. Rest assured, all templates undergo rigorous testing for rendering and responsiveness before delivery. Hustle!

The post How to Code Mailchimp HTML Templates appeared first on Email Uplers.

• Design complexity: An email featuring intricate layouts, custom typography, advanced visual effects, etc., isn’t easy to replicate in HTML.
  
• Client compatibility: Email clients differ widely and wildly in their acceptance levels. Rendering and accessibility are always major hurdles.
  
• Responsive design: Not all responsive frameworks guarantee a hassle-free adaptation of emails to various devices and screen sizes.
  

The process used to be more complicated, say, four or five years ago. 

However, as experts in this niche, we have witnessed major developments toward simplifying this most essential step in any design project. 

We convert 3,000+ PSD files into responsive email templates every month. In this top-level guide, we’ll show you the steps involved. Let’s go!

Requirements for Converting PSD to Email Template

Preparing an exportable PSD file consists of the following steps:

• Setting the template width
• Dividing the PSD into email-specific slices
• Using web-safe fonts
• Optimizing images for the Web

Let’s look at each of these steps in more detail. 

1. Width Setting

The recommended width for the traditional email template is 600-800px. Make sure you stick to this range while designing your email in Photoshop. 

For the mobile layout, the width should be reduced to approximately 320px. 

To avoid clipping or misalignment of email content, it is essential to include padding on both sides. 

2. Image Slicing

You’ll need to slice up the static PSD image into email header, body, and footer.

3. Fonts

In view of varying compatibility standards, consider using web-safe fonts for text. 

4. Image Optimization

Optimize the images for Web support by compressing them but without sacrificing image quality. 

You are now set to convert your PSD to HTML email template.

Steps for Converting PSD to Email Template

The conversion of PSD design to email HTML is a four-step process:

• Exporting your PSD file
• Coding the email structure
• Adding images
• Testing & optimization

Let’s hurry on to the details then.

1. Export the PSD File

Exporting your PSD file to another location is not hard. Simply follow these steps: 

• Open your design file in Photoshop
• Go to File
• Select Export 
• Click Export Preferences and set your preferences

• From File, go to Export As to export the file

Note that the Export As option allows you to export the file with your preferences. 

2. Code the Email

Create the basic HTML structure for your email.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Email Template</title>
</head>
<body style="margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f4f4f4;">

    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f4f4f4; padding: 20px;">
        <tr>
            <td align="center">

                <table width="600" cellpadding="0" cellspacing="0" border="0" style="background-color: #ffffff; border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);">
                    <tr>
                        <td style="padding: 20px; text-align: center; border-bottom: 1px solid #dddddd;">
                            <h1 style="color: #333333; margin: 0;">Welcome to Our Newsletter!</h1>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: 20px;">
                            <p style="color: #555555; line-height: 1.5;">Thank you for subscribing to our newsletter. We are excited to share the latest updates and offers with you!</p>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: 20px;">
                            <table width="100%" cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                    <td style="padding: 10px; text-align: center;">
                                        <h2 style="color: #333333;">Latest Updates</h2>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="padding: 10px; border: 1px solid #dddddd; text-align: left;">
                                        <h3 style="color: #333333;">Update 1</h3>
                                        <p style="color: #555555;">Details about update 1 go here.</p>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="padding: 10px; border: 1px solid #dddddd; text-align: left;">
                                        <h3 style="color: #333333;">Update 2</h3>
                                        <p style="color: #555555;">Details about update 2 go here.</p>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: 20px; text-align: center; border-top: 1px solid #dddddd;">
                            <p style="color: #555555;">© 2023 Your Company. All rights reserved.</p>
                            <p style="color: #555555;">Follow us on 
                                <a href="#" style="color: #1a73e8; text-decoration: none;">Twitter</a>, 
                                <a href="#" style="color: #1a73e8; text-decoration: none;">Facebook</a>, 
                                <a href="#" style="color: #1a73e8; text-decoration: none;">Instagram</a>
                            </p>
                        </td>
                    </tr>
                </table>

            </td>
        </tr>
    </table>

</body>
</html>

In the above HTML code:

• The outer <table> sets the background color for the email. 
• The inner <table> contains the header, body, and footer. 
• Inline CSS has been used for styling the elements in the email. 
• Social media links are styled for clear visibility.

3. Insert Image Slices

Now, you insert the image slices nto your HTML code. For example, if you need to add your brand logo and hero image, you can do it like this. 

<!-- Brand Logo -->
                <tr>
                    <td style="padding: 20px; text-align: center; border-bottom: 1px solid #dddddd;">
                        <img src="https://example.com/brand-logo.jpg" alt="Brand Logo" style="max-width: 100%; height: auto; border-radius: 5px;">
                    </td>
                </tr>
                <!-- Hero Banner -->
                <tr>
                    <td style="padding: 20px; text-align: center;">
                        <img src="https://example.com/hero-banner.jpg" alt="Hero Banner" style="max-width: 100%; height: auto; border-radius: 5px;">
                    </td>
                </tr>

Note the use of absolute URLs for the two image slices. 

An absolute URL is a complete web address, containing the protocol, the domain name, and the path to the image.

Absolute URLs ensure that your emails display correctly on email clients. 

4. Test Your Email

The last step is the most crucial of all. Test your emails across email clients and devices for accessibility, readability, load time, etc.

Convert PSD to Responsive Email with Email Uplers! 

A few things to keep in mind with respect to PSD-to-email conversions: 

• Use email-safe fonts sized 12-14pts for better readability.
  
• Keep the PSD template height within 1800-2000px to avoid clipping in Gmail.
  
• Ensure the PSD design aligns fully with the brand’s colors and logos.
  
• Separate sections in the email with spacers for clarity.
  
• Avoid background images in sections with editable content to simplify coding.

Have a PSD file with you? Send it over to our template production team!

The post Quick Guide: How to Convert PSD Design to Email HTML appeared first on Email Uplers.

• Developing a game is costly and time-consuming.
  
• Email gamification is not everyone’s cup of tea, so it may lead to a kind of analysis paralysis mid-project, causing limbo.
  
• Client compatibility may be the biggest challenge.
  
• Mobile accessibility can be quite tricky to pull off. 

Therefore, if you want to gamify an email, you need more than expertise. You need experience, intuition, and a competent team. 

Gamification being one of our strong suits, our developers know what exactly goes into creating fully-functioning games for email. In this guide, we show how we built our latest Thanksgiving game for our subscribers. Let’s go!

How the Thanksgiving Game Works

Our Thanksgiving game features Oliver and his cat, Whiskers, who is missing. As Oliver, you need to find the right kitchen cupboard to get a turkey and use it to lure Whiskers back so you can celebrate Thanksgiving together. 

We recommend that you play the game yourself first. 

Before diving into how we built the game, let’s first review the key CSS properties used to manage visuals, presentations, and animations. These are:

• Opacity 
• Visibility 
• Keyframes
• Labels 

Let’s understand each of these in some detail. 

1. Opacity

The opacity property manages an element’s transparency. 

Set to opacity: 0;, the element becomes fully invisible while remaining part of the layout and interactive. 

This property is particularly useful for creating fade effects.

.transparent-element   {
opacity: 0; /* Element is invisible but still clickable */
}

2. Visibility

The visibility property hides an element without removing it from the layout.

When set to visibility: hidden;, the element becomes invisible and non-interactive but continues to occupy space.

.hidden-element   {
visibility: hidden; /* Element is hidden and non-interactable */
}

3. Keyframes

Keyframes enable you to define the intermediate stages of an animation, specifying the start, middle, and end states. 

This allows for smooth transitions of properties such as opacity.

/* Define the fade-in animation */
@keyframes fade-in02 {
 0% {
 opacity: 0;          /* Fully transparent */
 visibility: hidden;  /* Hidden from layout */
}
 100% {
 opacity: 1;          /* Fully visible */
 visibility: visible; /* Visible in layout */

4. Labels

Labels in HTML interactive emails are essential for boosting engagement. 

Often paired with form elements like checkboxes, radio buttons, and input fields, they facilitate actions such as toggling content visibility, revealing hidden sections, or enabling in-email navigation. By linking a label’s for attribute to the corresponding form element’s id, labels become clickable, enhancing accessibility and interactivity. When used creatively, labels can create dynamic email layouts, including collapsible menus, content revealers, and surveys—all without relying on external scripts, ensuring broad compatibility across email clients.

<! - - Checkbox to toggle visibility (invisible) - - >
<input type= “checkbox”   id=“showContent”   style=“display:none;”>
<! - - Label that triggers the checkbox - - >
<label for=“showContent”>Click here to reveal hidden content in table</label>

Let’s now understand the entire game in detail.

Diving into the Nitty-gritty!

Here’s the preview of our Thanksgiving game. 

Labels and Page Transitions

1. Checkbox:
   The checkbox <input type=”checkbox” id=”redirect-checkbox”> is hidden using display: none;. It serves as the trigger for the transition.
   
2. Label:
   The <label for=”redirect-checkbox”> is styled to resemble a button. Clicking the label toggles the hidden checkbox.
   
3. CSS Logic:
   
   • The <a> link is initially hidden using display: none;.
   • When the checkbox is checked (#redirect-checkbox:checked), CSS makes the link visible.

4. Redirection:
The user clicks the label to reveal the link, and clicking the link redirects them to the next page.

<form>
    <input type="checkbox" name="Help Oliver" id="em_help" style="display:none;" />
    <input type="checkbox" name="Game Story" id="em_enter" style="display:none;" />
    <input type="checkbox" name="living" id="em_living_room" style="display:none;" />
    <input type="radio" name="turkey" id="em_click_turkey" style="display:none;" />
    <input type="checkbox" name="kitchen" id="em_back_kitchen" style="display:none;" />
    <input type="radio" name="door" id="em_left_door" style="display:none;">
    <input type="radio" name="door" id="em_right_door" style="display:none;">
    <input type="checkbox" name="room" id="em_back_living_room" style="display:none;" />
    <input type="reset" name="reset" id="reset" style="display:none;" />

Frame 1

We assigned the label name em_help to define the interactive area for the click event. The label is associated with an input element (checkbox or radio) via the for attribute and wraps a clickable image. The image serves as a visually engaging call-to-action (CTA) element, styled with properties like width, height, and alt text to ensure accessibility and responsiveness. 

When the label is clicked, it toggles the hidden input element with the ID em_help, which can be further styled or linked using CSS rules or HTML logic to perform a redirection or trigger an action to the second page. This approach combines functionality, interactivity, and visual appeal to create an intuitive user experience.

<tr>
  <td align="center" valign="top" class="em_f1_ctaimg01">
    <label for="em_help">
      <img 
        src="https://2700725.fs1.hubspotusercontent-na1.net/hubfs/2700725/Thanksgiving_2024/cta_01.png" 
        width="346" 
        height="72" 
        alt="YEAH, LET'S HELP OLIVER" 
        style="display: block; 
               font-family: Arial, sans-serif; 
               font-size: 14px; 
               line-height: 18px; 
               color: #000000; 
               max-width: 346px;" 
        border="0" 
      />
    </label>
  </td>
</tr>

Frame 2

When the label is checked, Frame 2 becomes visible with a smooth and dynamic animation. This animation sequence first reveals Whisker (the cat) and Oliver (the boy), followed by the appearance of the second frame pop-up after a 1-second delay. The keyframe animation slide-in-elliptic-top-fwd is responsible for this effect. Initially, the element starts off-screen, positioned at translateY(-600px), with a rotation on the X-axis and scaled down to 0. This creates an effect of the element “flying in” from the top while rotating slightly. As the animation progresses, the element smoothly moves to its final position (translateY(0)) with no rotation or scaling, gradually becoming fully visible with an opacity transition from 0 to 1.

The animation has a 1-second delay (animation-delay: 1s), ensuring that the content appears after the label is checked, allowing for a smooth, timed transition. The use of visibility: visible and opacity: 1 makes the element fully appear on screen, while visibility: hidden ensures it is not displayed before the animation starts. This creates a visually engaging and polished effect that enhances the user experience by allowing content to appear in a coordinated and aesthetically pleasing way.

/* Frame 2 Comes after Some Delay */
#em_help:checked~table .slide-in-elliptic-top-fwd {
	-webkit-animation: slide-in-elliptic-top-fwd 1s ease-in both;
	animation: slide-in-elliptic-top-fwd 1s ease-in both;
	animation-delay: 1s;
	-webkit-animation-delay: 1s;
	opacity: 0;
	visibility: hidden;
}
 @-webkit-keyframes slide-in-elliptic-top-fwd {
 0% {
 -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
 transform: translateY(-600px) rotateX(-30deg) scale(0);
 -webkit-transform-origin: 50% 100%;
 transform-origin: 50% 100%;
}
 100% {
 -webkit-transform: translateY(0) rotateX(0) scale(1);
 transform: translateY(0) rotateX(0) scale(1);
 -webkit-transform-origin: 50% 1400px;
 transform-origin: 50% 1400px;
 opacity: 1;
 visibility: visible;
}
}
 @keyframes slide-in-elliptic-top-fwd {
 0% {
 -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
 transform: translateY(-600px) rotateX(-30deg) scale(0);
 -webkit-transform-origin: 50% 100%;
 transform-origin: 50% 100%;

Frames 3 & 4

After the second frame appears, clicking a button triggers the redirection to the third frame. The 3rd frame will fade in using the fade-in keyframe animation, remain visible for a few seconds, and then fade out using the fade-out keyframe animation, smoothly transitioning to the 4th frame. This sequence is activated when the associated label is checked, triggering the animations.

The fade-in keyframe animation gradually increases the opacity of the third frame, making it visible, while the fade-out keyframe animation decreases the opacity, causing the frame to disappear. 

#em_enter:checked~table .em_frame3 {
	-webkit-animation: fade-in-out 5s ease-in-out both;
	animation: fade-in-out 5s ease-in-out both;
	
}
 @-webkit-keyframes fade-in-out {
 0% {
 opacity: 0;
}
 20% {
 opacity: 1;
}
 80% {
 opacity: 1;
}
 100% {
 opacity: 0;
}
}
 @keyframes fade-in-out {
 0% {
 opacity: 0;
}
 20% {
 opacity: 1;
}
 80% {
 opacity: 1;
}
 100% {
 opacity: 0;
}
#em_enter:checked~table .em_frame4 {
	-webkit-animation: fade-in02 3s ease-in both;
	animation: fade-in02 3s ease-in both;
	animation-delay: 4s;
	-webkit-animation-delay: 4s;
}
 @-webkit-keyframes fade-in02 {
 0% {
 opacity: 0;
 visibility: hidden;
}
 100% {
 opacity: 1;
 visibility: visible;
}
}
 @keyframes fade-in02 {
 0% {
 opacity: 0;
 visibility: hidden;
}
 100% {
 opacity: 1;
 visibility: visible;
}
}
#em_enter:checked~table .em_frame4 {
	opacity: 0;
	visibility: hidden;

Frames 5 & 6

In the kitchen scene, a cupboard and two interactive buttons are presented. When a user clicks a button, the cupboard opens to reveal different items based on the selection. Clicking the left button reveals a turkey inside the cupboard, while the right button displays a dog. This interactive element adds dynamism, allowing the user’s choice to influence the outcome.

Once the item (turkey or dog) is revealed, the scene transitions smoothly to the next frame, continuing the gamified flow. The timed transition ensures the content progresses seamlessly after a brief interaction, enhancing the overall user experience.

/*Frame 5 CSS*/
#em_left_door:checked~table .em_left_door {
	background: url(https://2700725.fs1.hubspotusercontent-na1.net/hubfs/2700725/Thanksgiving_2024/cup_left_open.png) left top no-repeat;
	width: 368px;
	height: 320px;
}
#em_right_door:checked~table .em_right_door {
	background: url(https://2700725.fs1.hubspotusercontent-na1.net/hubfs/2700725/Thanksgiving_2024/cup_right_open.png) right top no-repeat;
	width: 368px;
	height: 320px;
}
#em_left_door:checked~table .turkey_img_show {
	display: block !important;
}
#em_left_door:checked~table .f5_em_opacity {
	background-color: rgba(250, 213, 194, 0.8) !important;
}
#em_right_door:checked~table .em_left_door {
	display: none !important;
}
#em_left_door:checked~table .em_right_door {
	display: none !important;
}
/* After Enter Left Door */
#em_left_door:checked~table .em_frame6 {
	z-index: 999 !important;
	-webkit-animation: fade-in02 1s ease-in both;
	animation: fade-in02 1s ease-in both;
	animation-delay: 1s;
	-webkit-animation-delay: 1s;
}
 @-webkit-keyframes fade-in02 {
 0% {
 opacity: 0;
 visibility: hidden;
}
 100% {
 opacity: 1;
 visibility: visible;
}
}
 @keyframes fade-in02 {
 0% {
 opacity: 0;
 visibility: hidden;
}
 100% {
 opacity: 1;
 visibility: visible;
}
}
/* After Enter Right Door */
#em_right_door:checked~table .em_frame5 {
	z-index: 999 !important;
	-webkit-animation: fade-in02 1s ease-in both;
	animation: fade-in02 1s ease-in both;
	animation-delay: 2s;
	-webkit-animation-delay: 2s;
}
 @-webkit-keyframes fade-in02 {
 0% {
 opacity: 0;
 visibility: hidden;
}
 100% {
 opacity: 1;
 visibility: visible;
}
}
 @keyframes fade-in02 {
 0% {
 opacity: 0;
 visibility: hidden;
}
 100% {
 opacity: 1;
 visibility: visible;
}
}

Frame 7

Clicking on the white box moves the turkey onto the table. When the checkbox with the ID em_click_turkey is checked, the turkey element (.em_turkeyin) becomes visible and animates with a bounce-table effect, moving from the bottom position, creating the appearance of the turkey bouncing onto the table.

/* Click On Turkey */
#em_click_turkey:checked~table .em_turkeyin {
	position: absolute;
	visibility: visible !important;
	opacity: 1 !important;
	-webkit-animation: bounce-table 1s ease-out forwards;
	animation: bounce-table 1s ease-out forwards;
}
 @-webkit-keyframes bounce-table {
 0% {
 bottom: 26px;
}
 100% {
 bottom: 215px;
}
}
 @keyframes bounce-table {
 0% {
 bottom: 26px;
}
 100% {
 bottom: 215px;
}
}
#em_click_turkey:checked~table .em_f11_imgt {
	background: url(https://2700725.fs1.hubspotusercontent-na1.net/hubfs/2700725/Thanksgiving_2024/turkey_image_03.png) center top no-repeat !important;
	background-size: contain !important;
}
#em_living_room:checked~table .em_fadeout {
	-webkit-animation: fade-out 1s ease-in both;
	animation: fade-out 1s ease-in both;
	animation-delay: 7s;
	-webkit-animation-delay: 7s;
}
 @-webkit-keyframes fade-out {
 0% {
 opacity: 1;
 visibility: visible;
}
 100% {
 opacity: 0;
 visibility: hidden;
}
}
 @keyframes fade-out {
 0% {
 opacity: 1;
 visibility: visible;
}
 100% {
 opacity: 0;
 visibility: hidden;
}
}
#em_living_room:checked~table .turkey-button-in {
	-webkit-animation: fade-in07 1s ease-in both;
	animation: fade-in07 1s ease-in both;
	
}
 @-webkit-keyframes fade-in07 {
 0% {
 opacity: 0;
 visibility: hidden;
}
 100% {
 opacity: 1;
 visibility: visible;
}
}
 @keyframes fade-in07 {
 0% {
 opacity: 0;
 visibility: hidden;
}
 100% {
 opacity: 1;
 visibility: visible;
}
}

Frame 8

Clicking on the turkey triggers a transition to the next frame. When the checkbox with the ID em_click_turkey is checked, the background of the element .em_f11_imgt is updated to display a new turkey image, ensuring a smooth visual transition.

#em_click_turkey:checked~table .em_frame8 {
	-webkit-animation: fade-in04 1s ease-in both;
	animation: fade-in04 1s ease-in both;
	animation-delay: 1s;
	-webkit-animation-delay: 1s;
}
 @-webkit-keyframes fade-in04 {
 0% {
 opacity: 0;
 visibility: hidden;
}
 100% {
 opacity: 1;
 visibility: visible;
}
}
 @keyframes fade-in04 {
 0% {
 opacity: 0;
 visibility: hidden;
}
 100% {
 opacity: 1;
 visibility: visible;

Frames 9 & 10

Clicking the “Back to Kitchen” button triggers the next frame, and after a few seconds, Frame 9, which contains a timer, appears. When the checkbox with the ID em_back_kitchen is checked, the background of the element .em_frames_bg01 updates to show the kitchen counter image, creating a visual cue for the next part of the sequence.

The timer effect is achieved using the timer01 keyframe animation. The animation shifts the background position from top to bottom, simulating the countdown or progression of time. As the background moves, it visually indicates that the timer is running, enhancing the interactive experience.

Once the timer ends, Frame 10 transitions to reveal a CTA (call-to-action) button, allowing the user to move back to the living room.

Clicking the “Go Back to the Living Room” button triggers the display of the next frame, which contains a CTA featuring a Twitter share link.

/* Timer Running Out  */

#em_back_kitchen:checked~table .em_frames_bg01 {
	animation: timer01 steps(4) 5s backwards;
	-webkit-animation: timer01 steps(4) 5s backwards;
}
#em_back_kitchen:checked~table .em_frames_bg01 {
	background: url(https://2700725.fs1.hubspotusercontent-na1.net/hubfs/2700725/Thanksgiving_2024/Counter.png) center bottom no-repeat;
	background-size: 100%;
}
 @-webkit-keyframes timer01 {
 0% {
 background-position: top;
}
 100% {
 background-position: bottom;
}
}
 @keyframes timer01 {
 0% {
 background-position: top;
}
 100% {
 background-position: bottom;
}
}
#em_back_kitchen:checked~table .em_hide_game {
	z-index: -999 !important;
	-webkit-animation: time-out 0.5s both;
	animation: time-out 0.5s both;
	animation-delay: 6s;
	-webkit-animation-delay: 6s;
}
 @-webkit-keyframes time-out {
 from {
 opacity: 1;
 visibility: visible;
}
 10% {
 opacity: 0;
 visibility: hidden;
}
to {
	opacity: 0;
	visibility: hidden;
}
}
 @keyframes time-out {
 from {
 opacity: 1;
 visibility: visible;
}
 10% {
 opacity: 0;
 visibility: hidden;
}
to {
	opacity: 0;
	visibility: hidden;
}
}
#em_back_kitchen:checked~table .em_frame10 {
	z-index: 999 !important;
	-webkit-animation: fade-in05 1s ease-in both;
	animation: fade-in05 1s ease-in both;
	animation-delay: 6.5s;
	-webkit-animation-delay: 6.5s;
}
 @-webkit-keyframes fade-in05 {
 0% {
 opacity: 0;
 visibility: hidden;
}
 100% {
 opacity: 1;
 visibility: visible;
}
}
 @keyframes fade-in05 {
 0% {
 opacity: 0;
 visibility: hidden;
}
 100% {
 opacity: 1;
 visibility: visible;
}
}

The Final Frame

/* Final Screen */
#em_back_living_room:checked~table td.em_room {
	background: url(https://2700725.fs1.hubspotusercontent-na1.net/hubfs/2700725/Thanksgiving_2024/background_image02.jpg) center top no-repeat !important;
	background-size: cover !important;
}
#em_back_living_room:checked~table .em_share {
	z-index: 999 !important;
	-webkit-animation: fade-in06 1s ease-in both;
	animation: fade-in06 1s ease-in both;
	animation-delay: 1s;
	-webkit-animation-delay: 1s;
}
 @-webkit-keyframes fade-in06 {
 0% {
 opacity: 0;
 visibility: hidden;
}
 100% {
 opacity: 1;
 visibility: visible;
}
}
 @keyframes fade-in06 {
 0% {
 opacity: 0;
 visibility: hidden;
}
 100% {
 opacity: 1;
 visibility: visible;
}
}
#em_back_living_room:checked~table .em_kitchen {
	display: none;

Fallback Version

For email clients that do not support HTML5 and CSS3, it is necessary to create an alternative block of code that replicates the layout of the interactive content. 

This block will maintain the visual appearance of the email’s mechanics but without interactivity, ensuring that users still have a consistent and visually appealing experience. While the interactive elements (like buttons and animations) won’t function in these clients, users can still engage with the content by clicking on the elements, which will redirect them to the web version of the email. 

This ensures that the functionality and full experience of the email are preserved across all platforms, even when advanced features are not supported.

/* Fallback code Start */
		.em_fallback {
			display: none;
		}

		.em_herosec {
			display: block !important;
		}

		#MessageViewBody .em_fallback,
		body.MsgBody .em_fallback {
			display: block !important;
		}

		.& .yahoo-hide {
			display: none !important;
		}

		.& .yahoo-show {
			display: block !important;
		}

		.& .em_fallback {
			display: block !important;
		}

		[class="x_em_fallback"] {
			display: block !important;
		}

		[id="x_hide-outlook"] {
			display: none !important;
		}

		[id="x_hide-gmail"] {
			display: none !important;
		}

		[id="x_hide-yahoo"] {
			display: none !important;
		}

		[id="x_show-outlook"] {
			display: block !important;
		}

		u+.em_body .gmail-hide {
			display: none !important;
		}

		u+.em_body .gmail-show {
			display: block !important;

Wrapping Up!

Interactive emails revolutionize the way brands engage with their audiences. 

Unlike static emails, interactive emails allow users to interact directly within the email by clicking buttons, playing games, filling out forms, or navigating carousels. These dynamic elements not only make the email experience more enjoyable but also significantly boost engagement, click-through rates, and conversions.

Curious to check out more such games? Play our latest:

• Halloween game
• Christmas game

The post The Developer’s Code-by-Code Guide to Email Gamification appeared first on Email Uplers.

• In 2023, 70% of publishers identified the newsletter to be one of the major investment hotposts.
  
• By 2025, 27% of creators plan on launching a dedicated email newsletter.
  
• Followed by blog posts, articles, and books, the newsletter is one of the most popular forms of content being created.
  
• In terms of engagement, newsletters enjoy the highest open rate at 38.7%. 

You get the drift: The newsletter is arguably your best engagement tool. It is in your best interest, therefore, to examine what a successful newsletter looks like. 

You may have tried to xerox popular newsletters, but to no avail. Why? 

Usually, it’s because designers put the cart before the horse. If you want to send out engaging newsletters, you must first examine the anatomy of a newsletter.

In this guide, we’ll do exactly that. Over the last 10+ years, we have designed over thousands of newsletters for global brands and agencies. Let’s begin!

Anatomy of A Newsletter: The Key Components

The above image shows a simplified anatomy of a traditional newsletter. The key components of the newsletter are as follows:

• Brand logo 
• Visual header 
• Hero banner/banner image 
• Body (text and image)
• Footer

Now, let’s examine each of these components in detail. (Note: Newsletter design varies from brand to brand. However, the framework is more or less consistent.)

1. Brand Logo

The logo of your brand is the first thing that the reader will see. You want to make it prominent, solitary, and immediately recognizable. 

Do not design a separate logo for your newsletter. 

Consider the following example: Xtool features their brand logo in the centre of the header of their newsletter. Note the absence of any surrounding element. The logo should have its own space above the header. 

Here are a few expert tips on adding a brand logo in your email newsletter:

• Choose the right image format for your logo. PNG is usually recommended.
  
• Optimize the size of your logo. You want to make it visually appealing without pre-cluttering the header space.
  
• Make sure that the logo aligns with your brand identity.
  
• Determine the best alignment. You can go left, centered, or right. In the above example, the logo is centered.
  
• Your brand logo should be clickable and redirect to the home page.
  
• Provide a brief but descriptive alt text to make your brand logo accessible. 

Let’s study email newsletter headers next.

2. Header

When it comes to the header of an email, you need to understand the differences between the technical header and the visual header. 

The technical header consists of automatically-generated sender details. 

But the visual header is part of the email template. Here’s Xtool’s header. 

The header usually contains what is known as the primary navigation bar. Clicking on each of these menus redirects the user to the corresponding page. 

That’s the goal of the email navbar: To get the reader to your website. 

It’s important to note that not all newsletters necessarily contain a primary navbar in the header. But for starters, it’s best to stick to the established framework. 

Speaking of visual headers, you may want consider these expert tips: 

• The navbar needn’t be exactly the same as the one on your website. Email is space-constrained. Add only the most relevant/popular pages.
  
• You may have to scale it down further, if not remove it altogether, for mobile devices. Make sure to test it across various mobile devices.
  

Concerning that last point, Jordie van Rijn says, “The links are like clusterbombs, with a big chance of mistakenly tapping on the wrong link with your finger.”

3. Hero Banner

The hero banner is what introduces the newsletter. Most email newsletter examples would feature a hero banner. But keep in mind that the hero space can be variously designed. Sometimes it may not feature an image banner at all. 

The point is that the hero space acts as an introduction. For instance, Xtool’s email newsletter doesn’t feature an image, but a textual introduction.  

Xtool’s “Holiday Decor Earnings Guide” is the primary headline/heading. But you can use a hero image if you need the introduction to be as vivid as possible. 

We’d recommend using a hero image. Not just because it’s how most brands do it, but to enhance the viewing experience as well. 

In addition, it improves email readability. Which is a big deal in the email world.

As Mark Morin, CX and email automation expert, explains, “Poor email design makes reading slower. More difficult. More strenuous. Poor design adds friction to the communication process. On mobile device, it only gets worse. Unfortunately, eyes are imperfect devices. And the older they get, the less they work properly.” 

For example, this newsletter has a hero image banner.

Here are a few tips on how to design a successful hero banner for your newsletter:

• Use solid colors and bold fonts to make the banner stand out. 

• Choose the right size for the hero text: 28-30px for headlines and 18-24px for subheads. Keep the character count between 40 and 80.
  
• For mobile experience, stick to narrow emails, usually 500-650 px wide. But for desktop, use wider templates that are 960-980px wide. It’s template width that determines how the image displays on different viewports.
  
• Determine the right alignment. We recommend “centered.” It fits the inverted pyramid flow, guiding the eye downward to a CTA button.
  
• Maintain standard line spacing. Neither too tight nor too spaced. 

Before we move on to the email body, remember to add a View Online link, issue number, date, and a Subscribe link above the visual header.

4. Email Body

The body is where you add the newsletter’s meat and potatoes. You can use a single column or multiple columns to feature content. 

Xtool, for instance, stacks their content in a two-column format. 

Most email newsletter examples would use just one column. Unless your newsletter is promoting stuff, you wouldn’t need a product grid like Xtool’s. 

Because newsletters are meant primarily for readers, not buyers, the single-column format is ideal. Doug Morneau classifies newsletter format into three types:

1. The traditional format offers a mix of content such as news, blog posts, and promotions. Use this format if you want to keep readers informed.
   
2. The digest format allows you to offer “multiple pieces of content.” Morneau recommends this for brands that put out a high volume of content. The typical newsletter digest acts as a teaser to encourage readers to click through.
   
3. The curated content format includes valuable content from other sources in your niche. This is best for when you want to reinforce brand credibility.

Here are a few tips to help you nail the newsletter body:

• Employ storytelling techniques to keep the readers engaged. It could be in the form of success stories, milestone events, character portrayals, etc.
  
• Leverage multimedia elements, such as GIFs, infographics, high-res images, videos, ticker GIFs, to name a few. But don’t go overboard.
  
• Use emojis wherever relevant. Include relevant CTAs and anchor text.
  
• Remember to add alt-text to the visual elements for better accessibility.
  
• Talk about upcoming events, webinars, popular reads, testimonials, etc.
  
• Make sure every piece of content within the body is distinguishable. Feel free to add visible dividers or white space to mark the territory, as it were. 

The body is the space to invent. You can add anything relevant to your audience in any way you want to. It is what we like to call the wildcard module.

In fact, it’s the wildcard module that marks off the best newsletter examples from the rest. 

5. Footer

Finally, the footer. The footer of a newsletter consists of the following elements:

• Proof of Consent
• Unsubscribe link/preference center link 
• Social media icons 
• Privacy policy 
• Brand-specific riders, Terms & Conditions, etc.
• Physical mailing address
• Support team email address
• A View Online link (if not already displayed in the header)
• Copyright notice

The footer is usually the legal eagle’s Happy Place. It can be brief or descriptive as per your legal requirements. See The Strategist’s footer below. 

Email Newsletter Best Practices

Now that we’ve examined the anatomy of a newsletter, apply a few best practices:

• Avoid relying on AI for content; your newsletter subscribers are readers first. Make your copy engaging but visually concise.
  
• If content feels repetitive, vary your subheadings with questions, remarks, or even jokes.
  
• Use a conversational tone and storytelling. Include multiple POVs.
  
• Focus on user-friendly design. Break up text with relevant images or simple decorative elements.
  
• Use white space to reduce visual clutter in longer newsletters.
  
• Don’t overload with links. Place them strategically and diversify with emojis, icons, and buttons.
  
• Encourage engagement by asking subscribers to take polls and quizzes. 

Want to explore more email newsletter examples? Go through our expertly curated nonprofit newsletters. Or try these holiday newsletter examples.  

The post Anatomy of A Newsletter: An Expert Study appeared first on Email Uplers.

You don’t want to be dealing with code and that’s fair. 

That’s why we’re here. To help you navigate the process of embedding a sign-up form on your website. In this guide, you’ll learn how to do it on Klaviyo. We are certified Klaviyo experts, specializing in Klaviyo consulting for over a decade now. So we know the platform from stem to stern. Let’s go!

(Par for the course, we will be dealing with some code. But we will explain every bit of it so that you don’t need to twist your brains.)

How to Embed Klaviyo Sign-up Forms: The Steps

1. Add Klaviyo’s Onsite JavaScript

In the first step, you’ll have to add Klaviyo’s onsite JavaScript known as Klaviyo.js. 

Why? Because Klaviyo.js establishes the link between Klaviyo’s servers and your website. So when a user submits the form, it is this piece of code that captures the data and sends it to Klaviyo for processing and storage. 

This is how the code reads:

<script type="text/javascript" async="" src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>

Decoding the code:

• <script> is used to embed JavaScript in a webpage.
  
• “async” tells the browser to load the script asynchronously. In other words, it will download the file without interrupting page loading.
  
• src=”https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js” specifies the URL of the external JavaScript file.
  
• The PUBLIC_API_KEY placeholder will be replaced with your actual Klaviyo public API key. This key will link back to your Klaviyo account.
  
• Consequently, Klaviyo will be able to track user behavior on your website and integrate Klaviyo’s features on your site. 

In short, the above code is what facilitates the actual liaison between your website and Klaviyo. Follow these steps to add it to your website: 

• Log in to your Klaviyo account.
  
• Select your account name and click Integrations.
  
• Select Add Integration.
  
• Find your e-commerce platform. Then, click Add App.
  
• Connect to your e-commerce platform.
  
• Log in to your online store and click Install.
  
• Click Confirm to return to the Klaviyo interface.
  
• Check Automatically add Klaviyo onsite javascript.
  
• Click Save. 

2. Add the Embed Code to Your Website

The next step is adding the embed code to your site.

Now, what’s an embed code? An embed code is a piece of HTML code that allows you to integrate content from another website into your own. For example, if you want to embed a YouTube video in a blog post, you copy the video embed code and paste it where you want the video to appear. That’s how it works for sign-up forms.

Klaviyo will generate the embed code. Copy it from their Publish Form modal.

That done, go to your online store and locate the sign-up form. This is an important step for two reasons:

• Klaviyo wants you to ensure that the form appears where it should.
  
• Because you’ll need to paste the embed code you copied where the form appears, you must check the form’s location on your website.

If that sounded a bit vague, don’t worry! It will be clear in the next steps.

3. Navigate to Your “Storefront” 

In this step and following, you’ll learn how to navigate to the exact .html file where you need to paste the code you copied in the previous step. 

First, go to Storefront and select My Themes. 

Select Edit Theme Files as shown in the following image. 

4. Locate the Form Code 

Now, here’s where knowing the form location will help you. 

If, for example, your subscription form appears in the website footer, you need to open the file corresponding to that location. 

So you’ll have to open the footer.html file in Klaviyo’s editor. 

Just press Ctrl+F and type ‘newsletter’ in the Find bar as shown. The highlighted portion is the newsletter code.  

Decoding the code: 

• It starts with an HTML element that has a class name footer-info-col.
  
• data-section-type is a data attribute set to “newsletter subscription.”
  
• A conditional statement follows. If the setting show_newsletter_box is true, it will execute the code inside the block.
  
• {{ components/common/subscription-form}} is where the user will enter their email address in order to subscribe to the newsletter.
  
• {{> components/common/payment-icons}} displays the various payment options. “Icons” probably refers to the different payment logos. 

5. Find the Reference to Your Sign-up Form

You’ve successfully located the form code. 

Now look for the exact reference to your subscription form. As shown below, the form code is not located in the same file.

Select the code snippet to open the subscription.form HTML file. 

6. Replace the Form Code with the Embed Code

In the image below, you can see the components of your sign-up form. Highlight the entire block of code and replace it with the embed code you copied.

Decoding the code:

• The so-called “hidden” input fields are used to send additional information with the form submission without displaying the data to the user.
  
• type=”email” specifies that the input must be a valid email address.
  
• placeholder=”{{lang ‘newsletter.email_placeholder’}}” gives a hint to the user. You must have seen those grayed-out placeholders in sign-up forms.
  
• settings.show_newsletter_summary is a conditional statement. As the user hits the Submit button, it will show a summary related to the newsletter. 

Now, save your theme files and go back to your Klaviyo account. Ensure that your form has been published. Navigate to your site to view the Klaviyo embedded form. 

Bingo! You just learned how to embed Klaviyo sign-up forms in your website. 

All the above examples used BigCommerce as the e-commerce platform. Let’s also explore how to utilize Klaviyo embed form in Shopify.

Klaviyo Embed Form in Shopify: A Quick Guide

To include a sign-up form in the footer of your Shopify site, follow these steps:

• Log in to your Shopify account.
  
• On the Shopify dashboard, click Online Store. Select Themes. 

• Click the three dots and select Edit code.

• Open the footer.liquid theme file by clicking on theme.liquid.

• Find the area where you need the sign-up form to display. In the image below, the sign-up form appears in the footer just above the copyright information.

• Paste the embed form code and click Save.

Klaviyo Sign-up Forms: Best Practices

Instead of a general wrap-up, we leave you with some expert-vetted email signup form best practices:

• Make sure that your signup form is accessible to ALL users, including differently-abled visitors. Include clear labels, provide alternative texts for images, and test compatibility with the help of screen readers.

• Triple-check privacy compliance. Ensure your form complies with local as well as national/global data protection laws. Clearly state your privacy policy. Always obtain consent from visitors.

• Optimize your signup form for mobile and other handheld devices, particularly in the case of popup forms. 

• Gradually profile website visitors instead of asking too many details at once. Start with collecting basic information and progressively gather more data in proportion to user engagement.

• Simplify the signup process by inviting visitors to sign up using their social media accounts. 

• Send a confirmation email and wrap up the verification process. This is important because you don’t want fake or incorrect addresses in your email list. 

• Beef up the verification process by implementing a double opt-in process. 

• You may consider implementing spam mechanisms like CAPTCHA to minimize the risk of bots and bogus signups slipping into your email list. 

• Continuously A/B-test your email signup form template, from design to placement to text. 

• Lastly, use analytics tools to track user behavior and monitor relevant metrics such as bounce rate, conversion rates, abandonment rates, etc.  

Navigating ESPs can be tricky. But with experts like us, you’re free to choose ANY ESP to work with and we’d be thrilled to assist you. 

Next up, learn how to create sign-up forms in Mailchimp and Campaign Monitor.

The post How to Embed Klaviyo Sign-up Forms – The Complete Guide appeared first on Email Uplers.