Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Preparing the template

As for print template, Wedia will work as close as possible with the original document template.
In this case, preparing the HTML of the holiday e-cards was just a matter of adding some specific HTML markup to restrict the editing zones and the movable / repeatable zone.

Specific HTML markup

By adding specific HTML attributes, the designer will precisely set up how the emailing editor will react to user inputs.

topic 7ab33Image Added
Figure 1. Setting a table cell as editable

Creating a ZIP file for upload

Once set up, the HTML files and image files are zipped and ready to upload.

Creating a Wedia email template

The process for creating a Wedia template is similar to creating a print template.

topic 4d4b6Image Added
Figure 2. Creating a new email template


topic 53589Image Added
Figure 3. Uploading the ZIP file of the email template


Once uploaded, the ZIP file is immediately rendered.

An “Analyze” button will help template designers carry out a series of tests to validate the HTML and catch any technical errors.

topic 3d923Image Added
Figure 4. Analyze button


topic 02f18Image Added
Figure 5. Template list


As with print templates, the email template can go through validation workflows.

Working with the holiday e-card

Starting an email will go through the same screens and processes as for print document creation. We’ve designed this workflow to ease user onboarding.

The user will select an email template, based on a preview automatically generated by the system.

topic a6ea6Image Added
Figure 6. Selecting an email template


The use will then set the name of the email and the target language.

topic 5e5d6Image Added
Figure 7. Naming the email and setting the language


Once this first step is completed, the user is guided into the email editor. We developed this email editor to match as closely as possible the print editor.

topic 0e79aImage Added
Figure 8. The email editor

Text editing

topic 95f08Image Added
Figure 9. Editing text


The text editing can be done “in place”: just by clicking on the editable zones, the user can directly enter the text.

Formatting options can be set using an advanced editor, with formatting options and advanced functions (such as importing and placing images).

topic 238cdImage Added
Figure 10. Add the signature


topic 7f734Image Added
Figure 11. Email with signature

Removing blocks

If the email designer has properly tagged the template, a click on a removable block will launch a popup window giving options to copy or delete the clicked block.

topic ceccaImage Added
Figure 12. Removing a block

Wedia integrates a link editor that allows the editing of social media target destinations.

topic 3e3d2Image Added
Figure 13. Editing link for social media destinations

Previewing the email

The email menu provides a “Preview” option that will show the email in various sizes, helping to test the responsive design behaviors included in the design.

topic 5ab2cImage Added
Figure 14. Preview the email


topic 332c1Image Added
Figure 15. Previewing on an iPad

Connection with an Email Service Provider (ESP)

Wedia is preparing for the summer 2018 a Wedia version with an integrated ESP. It is currently necessary to connect to an external ESP to send the email campaign. Connecting with an ESP is mostly a matter of technical integration with the ESP APIs. Without any development, Wedia will generate a package that will be directly loaded in most ESPs.

topic 09fc3Image Added
Figure 16. Export option for email


In the ESP (the same as we’re using at Wedia, SmartFocus), we can load the exported package.

topic 479cfImage Added
Figure 17. ESP main window


The package is a ZIP file that contains the HTML and the images, converted into an email-friendly format and size.

topic 9adaeImage Added
Figure 18. ESP upload message dialog box


topic c60f9Image Added
Figure 19. Message from Wedia ready to be sent