Tips and Tricks

Here are some tips for including some commonly used and useful elements in your emails.

Email banner image
Anchor Links
CTA buttons
CTA to auto-login customer into app
Calendar links
Emojis

Email banner image

Here are some guidelines for the email banner image size:

For desktop screens, the recommended width is between 650px to 700px and the height between 90px to 200px.
For mobiles, the recommended width is between 320-385px and the height up to 100px.
On most devices, users can view approximately the first 300-500px section of the email without scrolling. As such, it is recommended that the email banner height should be small enough for the users to be able to view the email content without scrolling.

Anchor links

Anchor links at the top of a long newsletter are useful so that readers can quickly navigate to any section without having to scroll through the entire newsletter.

An anchor link is made up of two parts: the URL link and the actual anchor tag that the link is “jumping” to in your email.

To add an anchor link in your email, complete the following steps:

Add an HTML tag to the row to which you want to add the anchor link to.
In the following example, the link is added to the row for the Hot stone massage section.
Add an anchor by editing the HTML code and adding the following code. The name is the keyword that you will use when linking to this anchor tag.
In this example, we are setting the name=”stone”.

<a name="stone"><br /></a>
Go to the top of the newsletter or to the section of the newsletter where you want to add the link to this anchor.
Select the text that you want to link.
Click the link icon in the text editor panel and for the URL add a # followed by the name that you set for the anchor.
In this example, we set the name=”stone” and so the URL that we add will be #stone.

CTA buttons

When you add call to action (CTA) buttons in your templates, use the Action properties to add a URL to the button.

Increase visibility

You can update the following properties to increase the visibility and impact.

Change the background color.
Update and style the text.
Increase the width and adjust the padding.
Change the border radius to change the shape of the button.
Change the border.

Add a thin border to add depth to the button.
You can also add a thicker border in a shade darker than the button to add depth.
Omit the background color for a lighter effect.

Button on a background image

To add a button on a background image, complete the following steps:

Enable the “Row background image” setting and add a background image for the row.
Add a button to the row.
Edit the button properties to set the background color as transparent.
Edit the button properties to set a border for the button.
Add a text component and use it to increase the size of the row to display more of the background image.

CTA to auto-login customer into app

When you send an email to your customers, you can include a call to action (CTA) link in the email that will automatically log in a user into your app provided that the customer opens the email on their mobile device and has also installed your app. Blueshift’s deep links provide the ability to open email links inside an Android or iOS mobile app if the app is installed. Otherwise the links are opened in the browser.

To achieve auto-login, use external fetch to get the required login information and then create the email URL for auto-login using the data received from the external fetch.

Note: To use Blueshift’s deep link feature, you must use Blueshift’s mobile SDKs for iOS and Android.

Calendar links

If you are inviting customers to attend an event, you can include an “Add to Calendar” link in the email so that customers can add the event to their calendars easily.

You can include an Add to Calendar link using one of the two following ways:

Include an ICS Calendar file as an attachment.
Include an add-to-calendar link.

Include an ICS Calendar file

An ICS file is a common calendar format that typically uses the .ics file extension and is widely accepted by most calendars. For more information, see icalendar.org or iCalendar in Wikipedia.

Pros: ICS files work with most calendar applications and hence no personalization is required.

Cons: Customers must first download the ICS file and then upload it to their calendar. Or they must open it (double click or tap) to launch the default email client on their machine, which then prompts them to save the calendar item.

To obtain an ICS file, use any one of the following methods:

Send an event invite to yourself. Download the ICS file and use it.
Use ICS creation tools like iCalendar event maker or create the file manually using any text editor.

Then include a CTA button in the email for the customer to download the ICS file.

Include an add-to-calendar link

An add-to-calendar link makes it very easy for the customer to add the event to their calendar. When the customer clicks the link, the calendar opens and the event details are populated. Google Calendar, Outlook.com, and Office 365 support add-to-calendar links.

Pros: Easy for customers to add event to calendar

Cons: All calendars do not support the add-to-calendar link. Additionally, a separate calendar link must be provided for each calendar.

To obtain an add-to-calendar link, use any one of the following methods:

Create a link by using a tool. For example, Amit Agarwal’s Calendar Links.
If you are using Google Calendar, open the event, go to Options > Publish Event, and copy the link for the event.

Then include a CTA button in the email with the add-to-calendar link. You can use liquid and personalize the link based on the email client that the customer is using.

Emojis

Emojis are creative emotion-conveying graphics that you can insert into text. While less common in email marketing, they can be very effective if you use them with proper consideration.

Blueshift currently supports the latest approved version of emojis in your creatives at any time. However any standard byte size emoji, regardless of the Unicode version, should work.

Here are few resources available to copy and paste emojis into your emails.

Note: All emojis may not render in all email clients. If the symbol is not supported by the email client, recipients will typically see a little box character (like ☐) instead. It is always important to proof your email across popular email clients and devices to ensure that your emojis (and other creative assets) render the way you expect them to.