WYSIWYG editor

The WYSIWYG editor helps you create content for rich messages and in-app automation, and HTML emails that are fully compatible with email clients. You can also design email preference centers that match your company branding.

You can use the WYSIWYG editor to create:

First, select a layout: blank, an Airship default, or a saved layout. Then you can then start editing.

When adding or editing content that contains HandlebarsHandlebars is Airship’s templating language for personalization. Handlebars expressions use double curly braces wrapped around a content template, ranging from a simple variable, e.g., {{first_name}} to complex evaluations of personalization data. , you can use JSON sample data representing a member of your audience to preview its appearance, without having to send test messages. See: Previewing personalized content.

Styling Sections

The editor has three styling sections:

  • Body: Settings that apply to the entire message.
  • Blocks: Blocks are single- or multi-column layout sections, and they are synonymous with content columns. You can leave blocks unstyled, style columns or rows independently, and add content elements.
  • Content: Add columns, buttons, dividers, text, images, etc., individually or to a block.

Drag and drop blocks and content to create a layout, then edit settings to complete styling the message.

When configuring a content element, select the Desktop and Mobile tabs for their different settings and options. Your message view in the editor will update dynamically when you switch tabs.

The last section on each tab is Responsive Design, with options:

  • Hide on Mobile/Desktop: Hides a content element from view. If you create different versions of the same content element for both desktop and mobile, use this option to make sure only the relevant version is viewable in the right context. For mobile, you may want to use this option to hide images and other elements that take up an inordinate amount of the screen in your message.

  • Do Not Stack on Mobile: Prevents columns in a row from stacking on a mobile device or when the client width is less than the Content Width (essentially the mobile breakpoint). You can set the Content Width in the Body section of the editor.

When editing a block or content element, click   to duplicate it,   to delete, and   to close the editing options and return to the top-level options for Blocks or Content.

 Tip

Use blocks or content columns to lay out your message before you add content. You can add multiple content elements to a single column. For example, you can place text above of an image, and both items will be grouped together in the collapsed mobile view.

Blocks and Content Columns

Blocks are identical to the Columns option in Content. They are background elements that help you layout your message before you add content. When you select a cell in a column, you can style the entire row or set styles for individual columns within the row. Most of the style options are the same for both rows and columns.

Add a single column or row of columns, then style each column and the row. To resize the column widths, click and drag the dividers, and the width percentages display in the sidebar.

Row Properties

Row properties affect the entire row; if you want to set properties for individual columns in a row, go to Column properties.

  • Background Color: Set the color for the entire row, extending to the entire width of the window, not just the width of the content body.

  • Content Background Color: Set the background color for content body in the row.

  • Background Image: Set an image as the background of the row. You can overlay the background image with other content elements. Enter the HTTP/HTTPS URL of an image, then set its options. See: Media guidelines.

    If your Airship plan includes CDN support, you can also upload an image or select from previous uploads.
    1. Click Upload Image.
      1. Click Choose file and select a file to upload, or select from previous uploads.

        • The default sort order is most recent upload first.
        • You can search by file name or keyword.
        • A file preview appears after upload or selection. Click   to preview audio and video files.
      2. (Optional) Add or edit keywords for the file to help organize your uploads.

        • Enter a term in the search field below the preview and select from results, or click Add keyword: [term].
        • Click   to remove a keyword.
      3. Click Insert selected media.

    2. Padding: Set padding — spacing inside the border — for all columns in the row. Use More Options to change padding for individual sides of the row.

    Column Properties

    Column properties affect an individual cell in a row. Click   to add another column to a row, or   to delete.

    • Background Color: Set the background color for the individual cell.
    • Padding: Set padding — spacing inside the border — for the cell.
    • Border: Add and style a border for the cell, helping you provide visual separation between rows and columns where necessary.

    Body Styles

    Body styles affect the entire body of the message.

    • Background Color: Set the background color for the entire message, both in and outside the content-width. You can override this setting at the row and column levels.

    • Background Image: Enter the HTTP/HTTPS URL of an image, then set its options.

      If your Airship plan includes CDN support, you can also upload an image or select from previous uploads.
      1. Click Upload Image.
        1. Click Choose file and select a file to upload, or select from previous uploads.

          • The default sort order is most recent upload first.
          • You can search by file name or keyword.
          • A file preview appears after upload or selection. Click   to preview audio and video files.
        2. (Optional) Add or edit keywords for the file to help organize your uploads.

          • Enter a term in the search field below the preview and select from results, or click Add keyword: [term].
          • Click   to remove a keyword.
        3. Click Insert selected media.

      2. Content Width: Set the content width of your message. This is generally helpful for email, as it represents your mobile breakpoint as well; when a client width is less than the content width, columns will collapse and cells will stack (unless you set mobile settings denying collapsibility).

      3. Font Family: Set the font for your message. You cannot override this setting at the row or column level.

      4. Links: Configure the appearance of links in the message.

      Content Elements

      Content elements consume the width of the column you place them in. Content elements that are not contained in a block are rendered full-width. Drag a content element into your message, then click the element to see its styling options.

      Button Actions

      When using the WYSIWYG editor for Rich PagesA landing page or Message Center message in your app that can include HTML, video, etc. and in-app automation, you can assign an ActionA configurable behavior that occurs when a user interacts with your message, e.g., opening a web page. that occurs when a user taps a button or image in the message. You can also use HandlebarsHandlebars is Airship’s templating language for personalization. Handlebars expressions use double curly braces wrapped around a content template, ranging from a simple variable, e.g., {{first_name}} to complex evaluations of personalization data. to personalize the actions. Minimum SDKs required to support all actions: iOS 8.5.0, Android 9.0.0.

      1. Select one of:
        • No Action
        • Adaptive Link
        • App Rating
        • Deep Link
        • Dismiss Message — In-app automation only
        • Preference Center
        • Push Opt-in — In-app automation only
        • Share
        • Web Page
      2. (Optional) Check the Landing page behavior box if you want the landing page to close after the selected action occurs; when the user reopens your app, the landing page will no longer be open. Minimum SDKs required: iOS 14.2.0, Android 14.1.0.
      3. (Optional) Add or remove tags when a user taps the notification.
        1. Click Set a tag.
        2. Select Add or Remove, then search for tags that exist in the system, or create a new tag.
        3. (Optional) Click Set another tag and repeat the previous step.

      Thumbnail Image for Message Center

      Message Center supports a message preview, which is how the message appears as listed in the inbox. In the Visual editor you enter a thumbnail image for the preview on the Message Center tab. See: Creating content: Visual editor.

      For Message Center messages created with the Interactive editor, add the image while in the WYSIWYG editor:

      1. Click Settings in the left sidebar.

      2. Enter the HTTPS URL of an image. See: Media guidelines.

        If your Airship plan includes CDN support, you can also upload an image or select from previous uploads.
        1. Select Upload and click Upload File.

          1. Click Choose file and select a file to upload, or select from previous uploads.

            • The default sort order is most recent upload first.
            • You can search by file name or keyword.
            • A file preview appears after upload or selection. Click   to preview audio and video files.
          2. (Optional) Add or edit keywords for the file to help organize your uploads.

            • Enter a term in the search field below the preview and select from results, or click Add keyword: [term].
            • Click   to remove a keyword.
          3. Click Insert selected media.

        Preheader Text for Email

        When creating the HTML body for email using the WYSIWYG editor, the first line of text in the message also appears as the Preheader TextA short line of text that displays after or below an email subject line in an inbox. You can also have the text appear in the message body. Preheader text is an easy way to expand on your subject line and improve email open rates. Not all email clients support preheader text. in the inbox. If you want to add preheader text that appears in the inbox only:

        1. Select the Body section from the sidebar.
        2. Under Email Settings, enter text in the Preheader Text field.

        Merge Fields

        You can add merge fieldsA variable in your message or template that you want to populate with a personalized value for each member of the audience. Merge fields use Handlebars syntax — {{merge_field}}. , conditionals, and looping fields in the WYSIWYG editor, making it easier to take advantage of Dynamic ContentVariable message content using Handlebars syntax that you populate at send time. Use dynamic content to personalize messages for each member of your audience. . Not supported for Email Preference CentersA page where users can manage their opt-in statuses for the subscription lists in your project. Preference centers are presented within your app or website, or as an Airship-hosted web page. .

        When you create a merge field, you set its Field Logic, which determines both how you use the field and the options you have when you use the field in a message:

         Tip

        You can also take advantage of looping (#each), conditional (#if), and other advanced handlebarsHandlebars is Airship’s templating language for personalization. Handlebars expressions use double curly braces wrapped around a content template, ranging from a simple variable, e.g., {{first_name}} to complex evaluations of personalization data. within HTML content to show or repeat text. However, you cannot apply conditional or looping logic to block-level elements in your template without adding merge fields to your template.

        Create or Edit Merge Fields

        1. Click Merge fields.

        2. Click Create field to add a new field or   to edit an existing field.

        3. Enter a Field Name. This is the friendly name for this merge field that you’ll see in the editor.

        4. Enter the Key Path. This is the path to the variable that you want to use.

        5. Select the merge Field Logic. Field logic determines both how you use the field and the conditional options you have when you apply the field.

          • None — Insert the value of the Key Path. You can insert this value into any Text content element.
          • Conditional — Display a content block if the Key Path is populated (true) or not (false).
          • Loop — Repeat a content block for each item in an array, or display the content depending on whether or not an array is populated.
        6. Click Save.

        When you’re done creating merge fields, click Done   to return to the WYSIWYG editor.

        Use Merge Fields

        The way you use a merge field depends on its logic: None, Conditional, or Loop.

        You can insert merge fields with Field Logic set to None into any Text content element in the WYSIWYG editor. Airship adds your merge field with the correct syntax in your text.

        1. Select the Text content element that you want to add a merge field to, and a toolbar will appear.
        2. Click Merge Tags from the toolbar, and select a merge field.

        Merge fields with Field Logic set to Conditional and Loop apply to the row level: you use the merge field to determine whether you want to show, hide, or repeat the entire Text content element.

        While conditions apply at the row level, you can still use merge fields within your conditional block. If you want to use a field both as a block-level condition and as a value within a block, you should save two merge fields: one to represent the conditional usage of the field, and one with Field Logic set to None.

        When you apply a looping merge field to a content block, you can reference the current instance of the loop with the this context. For example, if looping through an array of products in your audience’s shopping cart, you might reference the price for each product in the loop with {{this.price}}.

        1. Select the row you want to apply conditional or looping logic to and click  .

        2. Select the merge field that you want to apply, and then select the logic.

          For conditional merge fields
          • Show if condition is false: Shows the block if the field does not exist, is empty, or is null.
          • Show if condition is true: Shows the block if the field exists and is not an empty string or null value.
          For looping merge fields
          • Repeat for each: Repeat this block for each item in an array.
          • Show if there are none: Show this block if the key path is empty or does not exist.
          • Show if there are any: Show this block if the key path exists and has at least one item in the array.

        3. Click Select.

        Save a Layout

        You can save your layouts for reuse, up to 20 of each type: email, Rich PageA landing page or Message Center message in your app that can include HTML, video, etc. , In-App AutomationMessages that are cached on users' devices and displayed when your users meet certain conditions within your app, such as viewing a particular screen or opening the app a certain number of times. , Email Preference CenterA page where users can manage their opt-in statuses for the subscription lists in your project. Preference centers are presented within your app or website, or as an Airship-hosted web page. .

        1. Open an existing or blank layout, then edit.
        2. Click Save layout.
        3. Enter a name and thumbnail image that will appear on the card for the saved layout. The image is optional, and you cannot change the name later. Enter an HTTPS URL for the image.

          See: Media guidelines.

          If your Airship plan includes CDN support, you can also upload an image or select from previous uploads.
          1. Click Upload Image.
            1. Click Choose file and select a file to upload, or select from previous uploads.

              • The default sort order is most recent upload first.
              • You can search by file name or keyword.
              • A file preview appears after upload or selection. Click   to preview audio and video files.
            2. (Optional) Add or edit keywords for the file to help organize your uploads.

              • Enter a term in the search field below the preview and select from results, or click Add keyword: [term].
              • Click   to remove a keyword.
            3. Click Insert selected media.

          2. Click Save.
          3. Click Done to leave the WYSIWYG editor.

          Now you can complete creating your message, template, or web page. The next time you return to the WYSIWYG editor, your saved layout will be available to select.

          Manage Saved Layouts

          You must edit or create a message, template, or preference center web page to access the WYSIWYG editor, then you can manage your saved layouts.

          • Edit — You cannot directly edit a saved layout. Instead, select the layout, make changes, and save it as a new layout. You can then delete the previous version, if needed.
          • Delete — Hover over a saved layout and click Delete layout. You cannot delete Airship default layouts.