HTML code editor

Build your email content from scratch with HTML

If you are proficient in HTML and prefer to write your own code, you can create emails using the Pushwoosh HTML code editor.

Don't have coding skills? Use the Drag & drop editor to effortlessly create email content, zero coding skills required. Learn more

Before you start creating email content, it's essential to properly set up your email within the email editor you choose. This involves configuring languages, specifying the subject line, providing sender information, and more. Learn how to do it

Create email content

To begin creating email content, paste your HTML code into the HTML tab. The editor provides real-time email previews as you are working on them.

Alternatively, you can upload an HTML file by clicking on Upload HTML File located in the bottom panel.

To add a personalized touch to your emails, use custom tags. For this:

  1. Click on the Tag icon located at the bottom of the editor.

  2. Select the desired Tag, and its modifier, and provide a default value if needed.

  3. Click Insert to include the custom tag in your email content.

To include an emoji in your email, click the Emoji icon located at the bottom of the editor.

Use localization

Localization empowers you to deliver personalized experiences to users in different languages.

In the HTML code editor, you can use localization by defining a default language and adding multiple language options. For instance, you can set a default message in English and then include translations in German and Spanish, ensuring that your email content adapts to each user's language preferences.

Below is an example of how to structure your localization data with English as the Default language and German and Spanish translations.

{
  "default": {
    "button": "Shop now",
    "description": "For a limited time, you can enjoy a 20% discount on all our premium coffee blends",
    "subtitle": "Don't miss it",
    "title": "☕ Coffee Promotion Alert!"
  },
  "de": {
    "button": "Jetzt einkaufen",
    "description": "Für kurze Zeit erhalten Sie einen Rabatt von 20% auf alle unsere Premium-Kaffeemischungen",
    "subtitle": "Verpassen Sie es nicht",
    "title": "☕ Kaffee-Promotion Benachrichtigung!"
  },
  "es": {
    "button": "Comprar ahora",
    "description": "Por tiempo limitado, puedes disfrutar de un descuento del 20% en todas nuestras mezclas de café premium",
    "subtitle": "No te lo pierdas",
    "title": "☕ ¡Alerta de Promoción de Café!"
  }
}

Once your localization data is structured and added in the Localization Tab of the editor, incorporate it into your HTML content using placeholders. The placeholders dynamically insert localized text into your content, based on the user's language preference. Here's how to implement it in your HTML

{{title|text|}} 
{{subtitle|text|}} 
{{description|text|}}
{{button|text|}}

Consider this scenario: you're advertising a limited-time discount on coffee blends. By using the localization structure mentioned above, you can communicate your promotional message effectively to users speaking different languages. Your HTML code for the promotion might look like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>☕ Coffee Promotion Alert</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
  }
  .container {
    background-color: #fff;
    padding: 20px;
    margin: 10px auto;
    max-width: 600px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  .button {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 20px;
    background-color: #ff6f61;
    color: white;
    text-decoration: none;
    border-radius: 5px;
  }
  .button:hover {
    background-color: #ff5733;
  }
  .footer {
    text-align: center;
    margin-top: 20px;
    font-size: 0.8em;
    color: #888;
  }
</style>
</head>
<body>
  <div class="container">
    <h1>{{title|text|}}</h1>
    <p>{{description|text|}}</p>
    <a href="https://www.example.com/promotion" class="button">{{button|text|}}</a>
  
  </div>
</body>
</html>

With this setup, if a user's language is German, they'll see the email in German; users who opted to receive emails in English will see it in English, and those who opted to receive it in Spanish will receive it in Spanish. This ensures that all recipients get your message in their preferred language.

Be sure to include an unsubscribe link in your email to provide recipients with an option to easily opt out of future communications, in compliance with regulations, and to respect their preferences regarding receiving emails.

Add the Unsubscribe link to your email as follows:

<a href=%%PW_EMAIL_UNSUBSCRIBE%%> Unsubscribe </a>

The attribute value %%PW_EMAIL_UNSUBSCRIBE%% will be replaced with the Pushwoosh Unsubscribe link at the moment you send the email message. When recipients follow the link, they opt out from your emails and are accounted in unsubscribe rate for that particular email message in Message History.

Please be aware that if you use your own Unsubscribe link instead of the Pushwoosh one, users opted out by your own method are not accounted in the unsubscribe rate presented in Message History. That means the number of unsubscribed users you'll see in stats of a particular email in your Message History will include only those users who followed the Pushwoosh default link and not those who were unsubscribed by your custom link.

To let you deliver important emails to your customers, we don't delete the unsubscribed users from your user base. For users who followed the Unsubscribed link from your emails, the Unsubscribed Emails default tag is set with the 'true' value.

Please consider creating a Segment for users who did not unsubscribe (the ones with the 'false' value of the Unsubscribed Emails tag) to continue messaging them. To avoid complaints, do not email users who unsubscribed from your messages.

Save email content

After you have finished creating your email, click on the Save button located at the top of the editor.

In the new window that appears, give your email a clear name, which could be the same as your Subject line. Also, create a label to help you easily find it in your list of emails.

If you haven't set up sender details yet, make sure to do that as well. Then, click Save.

Now that your email content is ready, it can be used in email campaigns. Learn more

Last updated