Mailmodo 0ff833fb

Mailmodo Support

Raise a Ticket here

In this article, you will discover what UTM codes are and learn about their applications. 

UTM parameters (Urchin Tracking Module parameters) are codes added to the end of a URL to track the performance of marketing campaigns and traffic sources. UTM parameters provide valuable information about where a user came from, which campaign they interacted with, and which specific ad or link they clicked on to reach a particular website. The information collected from UTM parameters can be used to measure the effectiveness of marketing campaigns, identify which channels drive the most traffic, and optimize website performance.

There are several benefits of using UTM tags in your marketing campaigns. Here are some key benefits:

: UTM tags enable tracking of marketing campaigns by providing data on traffic sources, mediums, and campaigns that drive traffic to a website. This helps identify successful marketing efforts and adjust strategies accordingly.

: UTM tags provide accurate data on website traffic sources, conversion-driving channels, and high-ROI campaigns.

: UTM tags offer high customizability, enabling tracking of specific campaigns or individual content pieces. This level of detail provides a deeper understanding of effective marketing efforts.

: UTM tags help optimize marketing efforts and improve ROI by tracking campaign effectiveness.

: UTM tags are easily implemented by adding a few extra parameters to any URL. This makes tracking marketing efforts and gathering effectiveness data simple.

Example of a UTM code for an email campaign

https://www.example.com/?utm_source=email&utm_medium=newsletter

In this example, the UTM code includes the following parameters:

: This indicates the source of the traffic, which is an email campaign.

: This indicates the medium through which the traffic was delivered, which is a newsletter.

The first three of the five UTM parameters are the most important and required for accurate tracking by Google Analytics. They are:

" identifies the traffic source, such as a search engine or social media platform, and helps to attribute the traffic to the right channel.

" identifies the marketing medium, such as email or display advertising, and helps to categorize the traffic by the type of marketing effort.

" identifies the specific campaign, such as a product launch or holiday sale, and helps to track the success of each campaign individually.

, are optional and provide extra information about specific content or keywords linked to a campaign. utm_content identifies which content piece generates the most traffic, while utm_term tracks keywords in paid search campaigns. While helpful for more granular tracking, they're not necessary for Google Analytics and can be left out if not needed.

 to know how you can add UTM parameters tracking in Mailmodo.

All about UTM parameters

What are UTM parameters and how to use them

On desktop devices you have more screen space to work with, so you can optimize your email template for a comfortable reading experience, maintaining white space and establishing a clear hierarchy between different blocks and elements. However, on mobile devices, you have limited screen space to work with. You need to optimize the layout to ensure content is readable without excessive scrolling, while also maintaining large touch targets for buttons, links, and other interactive elements. In this article, we are going to learn how to create mobile-friendly templates on Mailmodo’s no-code email editor.

Why should you optimize your email template for my mobile devices?

Mobile is the most popular reading environment, with 44.7% of the share. - 

If your emails are not optimized for mobile, it will affect your 

 - lower clicks, conversions, ROI, and higher unsubscribes.

Lower brand reputation, as you are not providing users with what they expect from your brand.

11 Must-Know Mobile Email Design Tips to Keep Your Subscribers Happy 

In this article, we are going to learn how to-

imize multi-column layouts for mobile devices 

Optimize block-level and column-level alignment for mobile devices

Optimizing block-level padding and column-level padding for mobile devices

Different font sizes for Desktop and Mobile

Preview template across different mobile devices

Watch out this space for further updates. More mobile customisation features coming soon!

1. If the width of the device on which the email is being viewed is less than 480px, then the mobile version will be shown. If the width is more than 480px, then the desktop version will be shown.

2. All changes made in the desktop view will be applied to mobile view by default unless changed explicitly.

3. Changes made in mobile view would only be applicable to mobile devices and not to desktop.

Optimize multi-column layouts for mobile devices

While multi-column layouts look great on desktops, they often affect legibility and make your email look cluttered on smaller screens. 

For example, this 4-column layout looks great on a desktop-

But, this layout does not look good on mobile. Instead, if we used vertical column stacking, here is how the template will look- 

As you can see, vertical stacking gives a much cleaner appearance to your email template.

Use a single-column layout on mobile devices.

 Switch to mobile view using the dropdown at the top.

 Select the multi-column block and select vertical layout from the left panel.

Now your columns will be stacked one below the other on mobile devices instead of appearing parallelly.

Sometimes a full-width image might look great on a desktop but might not look so good on mobile devices. 

For example, here is how this logo image will look on a desktop.

And here is how it will look on mobile. 

As you can see, the full-width logo does not look very appealing on mobile.

Instead, if the logo image was scaled down, this is how it would look on mobile. 

In this case, a scaled-down image gives a much cleaner look to your email template.

On the other hand, a full-width image might look better on mobile devices in some cases. Let us look at another example below.

This is how the template looks on desktop.

This is how the template will look on mobile with full-width and scaled-down images respectively.

In this case, a full-width image looks better than a limited-width image.

While there is no hard and fast rule to choose between scaled-down and full-width images, it is a good practice to test out both versions to see which version looks best on your template.

1. Select the image in the desktop view. 

2. Scroll down in the right panel and choose one of full width or limited width. The selected configuration will be applied on mobile devices only.

When to optimize block-level and column-level alignment for mobile devices?

Certain layouts like zig-zag or pyramids might require different alignments for different blocks. 

For example, in this template, the first block is center aligned and the second block containing multiple columns is left-aligned. 

While this looks great on desktop, the template looks misaligned on mobile devices. The text of the first block is center aligned while that of the individual columns is left aligned. 

To maintain legibility, let us left align the text of the first block in mobile and see how it looks-

The template looks cleaner and the text is more legible now!

Let us look at another example of a 2 column layout, in which the left column is left-aligned and the right column is right-aligned. Here is how the template looks on the desktop-

While this is how it looks on mobile when the columns are stacked one below the other-

Now, let us see how the template will look when the second column is left aligned-

Clearly, the layout looks much better now.

How to optimize block-level and column-level alignment for mobile devices?

1. Switch to mobile view using the dropdown at the top.

2. Select the block whose alignment you want to change. Change the alignment of the block from the left panel.

Note that all the elements in the block will inherit block-level alignment.

3. Similarly, select the column and change its alignment from the right panel. All elements inside the column will inherit the column-level alignment.

The configured block/column level alignment will only be applied to mobile devices and the desktop version will not be affected.

When to optimize block-level padding and column-level padding for mobile devices?

While desktop devices have more space to work with, you can have higher padding to ensure readability and maintain enough white space. However, the extra padding and whitespace will increase vertical scroll and hinder legibility on mobile devices.

For example, this block has 24px padding on all sides on desktop. 

This is how the template looks on mobile-

Now, we were to reduce the padding from 24px to 4px, this is how the template will look on mobile.

As you can see, we are able to accommodate more words in the same amount of space. As you add more content to your email template, this will have a compounding effect reducing the vertical scroll on mobile devices significantly.

Let us look at another example where changing the column level padding on mobile devices helps us accommodate more text in a 2 column layout. The right column has 20px padding on all sides.

Now, if we were to reduce the right column padding to 4px, then this is how the template will look-

We are able to accommodate more text per line thus reducing the vertical scroll.

How to optimize block-level padding and column-level padding for mobile devices?

1. Select the block and set desktop padding from the left panel.

2. Toggle to the mobile version using the dropdown at the top.

3. Select the individual block and change its mobile padding from the left panel.

How to customize your email template for mobile devices using the no-code email editor?

Typography is an essential part of email design. Choosing the right font can make or break your email experience. Mailmodo offers a range of fonts to ensure your email design aligns with your brand guidelines and your email renders seamlessly across devices and email clients.

There are three kinds of fonts which we need to consider when designing an email-

Email safe fonts will render correctly across all browsers, devices and email clients.

These are fonts that are pre installed in the email recipient's device. These fonts are already installed in major operating systems like windows, macOS, android and iOS. 

Email safe fonts are considered the most accessible and the chances of the email client altering your font are minimal.

You can find these under the Email safe category in the font dropdown.

Web safe fonts will render correctly across most devices, browsers and clients. These fonts are installed on the majority of devices. 

There is a chance that your font can be altered because the device does not support the selected font. In this case, we will revert to a fallback font.

You can find these in the Web safe category in the font dropdown.

While email safe and web safe fonts are system fonts (i.e are installed in the user’s device and come with the operating system), web fonts are downloaded by the browser.

web fonts are supported by a select few email clients only, there is a high chance that your font will be altered by the email client. In case the font is not supported by the email client, a fallback version will be rendered. 

Major email clients that support web fonts are-

Certain versions of Outlook on Windows support web fonts as well.

AMP for email does not support web fonts. Web fonts will only render in HTML emails.

You can find these under the Web fonts category in font dropdown.

It is a good practice to thoroughly test your email across clients and devices before sending it out to your audience.

If you have any queries, then reach out to us at 

Font selection in email template

Calendly is going to phase out API V1 and webhooks by June 30, 2022. To ensure a smooth transition, users need to migrate from API V1 to API V2. Read more about the change 

Starting 27th June, 2022 you will have to use API V2 to integrate Calendly with Mailmodo.

You need to migrate to API V2 to continue using the Calendly widget in Mailmodo templates.

If you are using API V1, then you would not be able to insert Calendly widget in your templates. 

What happens to templates and campaigns which are already using the Calendly widget?

Existing templates and campaigns using Calendly widget will continue to work as long as the widget is not modified or deleted from the template. However, you won’t be able to add a new Calendly widget to a template until you have migrated to API V2.

 Go to integrations from the vertical menu on the left. Deactivate Calendly. If you are logging in after 27th June, you might find Calendly already deactivated.

 You would be able to see Calendly under available for connection. 

 Reintegrate Calendly. Upon clicking on the authentication CTA, this modal will open.

 You need to enter the API V2 token here. Visit this 

Give an appropriate name to your token. Click on 

 Paste the copied API token in Mailmoodo. Click on 

 Upon successful authentication, Calendly will be integrated.

That’s it, you have successfully migrated from API V1 to API V2. You can now use the Calendly widget in your Mailmodo templates. 

Did we miss something? Not to worry! ✌️

 to find quick guides and walkthroughs ✅ 

If you face any problem then reach out to us at 

How to migrate from Calendly API V1 to API V2?

With the rising popularity of dark mode on digital platforms, it is essential to ensure that logos with black text and transparent backgrounds remain visible and legible. Dark mode alters the color scheme to a darker background, posing challenges for logos to stand out without appropriate adjustments. This article explores two effective strategies to ensure black logos render properly in dark mode.

When a logo consists of dark text and the image background is transparent, the text becomes invisible since the background color is converted to black in dark mode and dark text is not legible on dark background.

One approach to making black logos visible in dark mode is to add a white outline around the logo's vector. This technique creates a clear contrast between the logo and the dark background, allowing the text to stand out. 

 Use an Image with a White or Solid Color Background:

Alternatively, if modifying the logo's design is not desirable or possible, you can consider using an image with a white or solid color background instead of a transparent background. By doing so, the logo's text will remain visible in dark mode as the background will adapt to the dark color scheme. 

Experiment with these solutions and choose the one that best suits your logo's design and overall branding strategy. 

If you have any queries, then reach out to us at 

How to ensure Black Logos render properly in Dark mode?

How to ensure text in logos renders properly in dark mode?

Use Mailmodo AI to quickly create compelling and engaging email content without the need for extensive writing skills or spending hours crafting the perfect message.

1. Email writing requires a lot of effort especially when you have to write compelling outreach emails or campaigns and you are going through writer’s block. But writer’s block can't hurt you if you have an AI email writer by your side. AI email writers can help you create amazing email copy and that too in minutes.

2. Save time and cost by outsourcing email copywriting to AI. Craft or rewrite email copy from scratch using AI and the right prompts.

3. Auto-generate email copy based on brand guidelines.

How to generate email copy with Mailmodo AI?

Open the email template editor and add a text element. Select the text element

 Click on Mailmodo AI in the text editing tooltip. Select 

 Tell AI what to write about. For example, 

“Write an email informing my customers that our best-seller organic tea is back in stock“.

 Select a tone from the dropdown to further tailor the email copy according to your brand guidelines. Once done, click on Generate Draft. 

Be as specific as possible and use natural language

Provide background information or specific details to get a more relevant email copy

Experiment and iterate the prompt till you get a satisfactory result

If you cannot find the desired tone in the dropdown, write it as a custom prompt.

Need help writing prompts? Get access to the 

 Voila! Your email copy is generated. Review the output. If you are satisfied with the results, click on 

 to insert the AI-generated text in your email template. If you are unsatisfied with the suggested text, click on regenerate to get more results. Use the arrows at the bottom to traverse between the results.

Click on Edit to tinker with the prompt and generate new output text!

 Select the text element which you want to improve. Click on Mailmodo AI in the text editing tooltip. Select 

 Tell AI how to improve the text. Select a quick action to change the tone (professional, casual, funny, urgent), or length (shorter, longer), or make the text simpler.  You can also write your own prompt to give specific instructions on how to improve the text.

 Review the generated text. If you are satisfied with the results, click on replace text to replace the existing text with the AI-generated text in your email template. If you are unsatisfied with the suggested text, click on regenerate to get more results. Use the arrows at the bottom to traverse between the results. Click on Edit to tinker with the prompt and generate new output text.

You are all set to leverage Mailmodo AI to craft engaging emails that drive results and resonate with your audience!

 Always review and customise AI-generated content to make sure it's right for your audience. It is always a good idea to add that extra human touch to make sure the campaign reflects your voice and perspective. Happy email marketing!

How to use Mailmodo AI to generate subject line and pre header text

We use OpenAI to generate email copy. You can read OpenAI's 

In case of queries, send us an email at 

 or click on the chat icon on the bottom right corner of your screen.

Use the undo button to revert changes in the editor. Use the redo button to reverse changes. A global action history will be maintained where you can traverse through 100 actions. Please note that the action history is local to the particular editor session. Once you exit the editor, you will not be able to undo changes done in previous session.

Use the undo redo button in the top panel to revert or reverse changes. Please note that redo will only be enabled if you have undone any changes.

Use keyboard shortcuts to quickly undo redo actions. For macOS, use cmd+Z and cmd+Y ; for windows use ctr+Z and ctr+Y.    

If you have any queries, reach out to us at 

How to Undo and Redo action in the Editor?

Mailmodo’s template suggestion tool will evaluate your email template against various success metrics to provide you with intelligent recommendations that will help you create high quality, engaging and accessible emails.

Your email template will be evaluated against a multitude of factors including

Can specially abled people access your templates? Will your template render properly across devices, email clients and browsers?

 Does your email template have any invalid or broken links? 

Is your template using consistent typography?

Are you using widgets and personalisation parameters in your email? An interactive email will drive engagement. 

Is your HTML email more than 102 kb or AMP email more than 200 kb? Gmail clips HTML emails above 102 kb and AMP will not render above 200 kb.

Are individual images exceeding 100 kb? Low image size improves the loading speed of your email.

Have you configured all widgets and forms properly?

The template analysis is divided into three sections

Problems that need immediate attention. If not fixed, they can cause your template to malfunction.

Issues that may not break the functionality of your template but can negatively impact the appearance and usability of your template.

Features that can help you increase engagement and enhance template design.

 Once done, click on the bulb icon to view template suggestions.

 Implement the recommendations given by the tool.

Use the refresh and update CTA to fetch the latest results.

Template Suggestions

In an AMP email in Gmail on iOS, the email content jumps or shifts unexpectedly when a user interacts with an AMP component like a form or a widget. Currently there is no workaround for this issue. This issue does not occur in AMP emails on other platforms, such as Android or desktop.

This impacts all AMP components like forms, Spin the Wheel, Quiz, etc. The issue is more prominent in multi-step widgets.

This issue occurs because of a potential bug on the Gmail iOS app. You can track the status of the issue 

. Any progress on the issue will be updated here.

Jump scrolling issues in AMP email for Gmail on iOS

Understanding Scaled Down and Full Width Images on Mobile Devices

Mobile is one of the most popular email reading environment. It is essential to optimise your email for mobile devices to ensure the best user experience. 

Learn how to customize your email template for mobile devices using the no-code email editor

In this article we are going to understand the difference between scaled down and full width images on mobile devices. The way images are displayed plays a crucial role in capturing attention and conveying information effectively.

When you add an image to your email template, you would be able to define how the image will look on mobile devices. You have two options, scaled down and full width.

When selecting a scaled-down option for an image on a mobile device, the width of the image will be set to the computed width based on the size you choose in either percentage (%) or pixels (px).

If the computed width is less than the available width on the mobile device, the image width will be equal to the computed width. 

If the computed width is more than the available width on mobile device, the image will be scaled down to the maximum available width.

Case 1: Computed width is less than the available width on mobile

Optimize your email template for mobile devices

Best Practices and FAQs

What are UTM parameters and how to use them

How to customize your email template for mobile devices using the no-code email editor?

Font selection in email template

How to migrate from Calendly API V1 to API V2?

How to ensure text in logos renders properly in dark mode?

How to generate email copy with Mailmodo AI?

How to Undo and Redo action in the Editor?

Template Suggestions

Jump scrolling issues in AMP email for Gmail on iOS

How does image scaling work on mobile devices?

Why do I see discrepancies between Mailmodo editor preview and actual email client display?

Outlook Rendering Issue: Single Quote (') as '

Why can't I use border width and border radius together for blocks and column?