Docs
Get a product tour Pricing Blog Release notes Support

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.

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

PreviousDrag & drop email editorNextEmail statistics

Last updated