WYSIWYG Editor Reference

The WYSIWYG editor helps you compose rich messages and HTML emails that are fully compatible with email clients.

You can use the WYSIWYG editor to you create rich pages, email, and templates. See:

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.

    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 appeareance 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.

       Tip

      You can add merge fields in the text area of any content block.

      • Columns: See Blocks and Content Columns above.

      • Divider: Add a dividing line. You can change the line color and style, and set padding around the divider.

      • Image: Enter the HTTP/HTTPS URL of an image. You can set the image alignment, provide alternate text, set padding, and provide a link if you want the image to be clickable.

        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.

          • Email image recommendations:
            • Formats: JPEG,JPG, PNG, GIF. Additional formats are supported (e.g., TIFF, BMP), but they do not always display in email.
            • 72 DPI.
            • 1MB is the recommended maximum size, but you should keep image size as small as possible. Use compression to decrease the size and balance quality.
            • Consider using an image that is twice the size of the space you’d like to fill so that it looks good on all screens. You can adjust the dimensions in the editor or with tags if using HTML. The width of the image will depend on the space you are trying to fill, but for reference, it is commonly recommended to have your email width at 600px.
        2. Button: Link to another page, presumably an action (subscribe, unsubscribe, or send the user to a particular product page, etc). You can style button color, border, alignment and padding in the sidebar. Click the button element to see the styling options for the button label text.

        3. HTML: Add your own custom HTML content block and set padding.

        4. Text: Add text. You can set the color, alignment, line height, and padding in the sidebar. Click the text element to set the font, size, list type, text and background colors, add links, and other options.

        5. Video: (Message Center Only) Enter a Youtube URL to add video to a message. The video adapts to the width of the column that you place it in.

        6. Menu: Create a navigation menu. Add menu items and their actions, then style the menu.

         Note

        Video does not display in message previews and may show an error. Airship prevents scripts and external links in previews for security. Click the link in the preview to make sure that you linked the right video.

        Button Actions for Message Center

        When creating a Message Center message or template using the WYSIWYG editor, you can assign an action that occurs when a user taps a button in the message. You can also use HandlebarsAirship’s message personalization syntax using double curly braces, more commonly known as {{handlebars}}. Use handlebars to insert variables and conditional logic in messages and templates. to personalize the actions.

        Adaptive Link

        Adaptive Link opens a mobile wallet pass. Select an Adaptive LinkA mobile wallet pass link that supports templates for both Google Pay and Apple Wallet. When a user taps the link, Airship determines the user’s platform and generates the right pass for the user. from the list.

        • Adaptive links must be configured before they will appear in the actions list. See: Adaptive Links Tutorial.
        • Only adaptive links created in the dashboard will appear in the actions list.
        Deep Link

        Deep Link opens a screen in your app or website. Select a deep link from the list.

        Share Share prompts the user to share your message with apps, social media accounts, and other services. Enter the text you want to accompany the share, including any promotional information, shortened links, hashtags, etc.
        Web Page Web Page opens a web page or any valid-device level URL such as App Store or app protocol links. The web page opens in the device’s default browser. Enter a URL.
        App Rating Open the system prompt for an App rating.

        Click Set a Tag to add or remove tags when a user taps the button.