Modify email content with Imagino's email builder

Alleeeeeez hot-hot-hot, I'm still interested to Email Builder solutions integrated into tools and I'm now tackling the Email Builder part of the CDP - for Customer Data Platform - French Imagino Don't stop me now, I'm having such a good time! (I hope you have the ref...)

Let me start by pointing out that Imagino uses Stripo's API - for Application Programming Interface - for its Email Builder solution. Basically, Imagino "integrates" the Stripo solution into its interface... It's even easier to understand.

I will take the time to quickly re-explain Stripo's unique nomenclature and the blocks that the solution offers, but without going into too much detail: I leave you to consult analysis dedicated to the Stripo standalone Email Builder if you want more information, I won't write the same thing twice, it wouldn't make sense...

A special nomenclature

• "Stripe these are sections of your email. Header, Email body (Content), Footer, or Information zone (Info Area) Here are the 4 choices offered by Imagino, in line with Stripo.
  • Display conditions Display conditions: you can apply display conditions to Stripe, which can be very useful if you want to reserve the display of certain sections according to your recipients' criteria.
    
• "Structure The lines making up a section.
  
  • Multi-column a Structure can contain several columns (or Container) as you can see from the screenshot above. And the solution offers you ready-made structures, isn't that nice?
  • Width management Now you can manage the width - in pixels - of each column. I love it!
  • Spacing management you can play with the spacing between each column - in pixels. Beautiful!
  • Desktop/mobile dissociation : It's very easy to enter different values for the desktop and mobile versions, for margins for example. I love it!
• "Container The cells of a structure. What else can I say? These are the greyed-out columns you can see in the previous screenshot.
• "Blocks :
  
  • Image : Unlike Stripo, image-editing capabilities are not present here.. However, you'll still be able to apply a visual change on hover. I regret that the content of the "Alternate text" (Texte alternatif) can also be added to a title in my opinion, counterproductive in terms ofemail accessibility.
  • Text Nothing in particular to report: a rich text field with options both in the rich text window and in the "options" part of the block. Personally, I still find it a little confusing...
  • Button The options are pretty basic, but they get the job done! There are fewer choices than in Stripo, as if the API were a little short on "real" solutions, but that's more than enough.
  • Spacer Width, thickness, color, alignment of the separator (which is in fact a simple line)... Yes, it's all very simple, but what more do we need?
  • Video We've got it covered: a field for the video link, an alternative text that automatically completes itself according to the video title, a drop-down list for choosing a player style, the option of adding a custom image... That's pretty good! But be careful, we're talking about a still image here, not a video integrated into the email. That's the nuance!
  • Social A whole host of networks at your disposal, and the possibility - it seems - of adding an infinite number more! And for each network, a text field to add the url of the relevant account. There's also a drop-down list to choose the style of icons (you can even import your own, how cool is that!) and an "integer" (number) field that you can modulate for the spacing between each icon... Not bad at all!
  • Banner So you can call up an image, add one on top of it, change the orientation of the composition, add a little filter... It's clearly not all the editing possibilities you'll find in Stripo, but it's something.
  • Menu A menu where you can display text, or icons, or text + icon, with no limit on the number of tabs, where you can choose the color of the text but also the background color of each tab, or even add a separator between each tab... And as a gift: the option of displaying a tab only on desktop or mobile. Not bad!
  • HTML A classic code editor for developing your own custom HTML code.
  • DAM for Digital Asset Manager. It sounds a bit barbaric, but it's simply the possibility of calling - in a synchronized or non-synchronized way - blocks that you've developed outside your campaign. Don't worry, I know you're eager to learn more, and I'll explain the procedure in the chapter on content fragments.

The logical order is as follows: Stripe > Structure > Container > Block. A Stripe can contain several Structure. A Structure can contain several Container. A Container can contain several Block.

Appearance

It's in this tab, next to the "Content" in Imagino's Email Builder, you'll find several categories for stylizing your entire email. This section is divided into 5 categories:

• General settings email width - default 600px, but you can increment or decrement in 10px increments -, content alignment, body background color (<body>) of the email, default font for texts, default line spacing value, spaces or not at the bottom of paragraphs... As you may have gathered from the category name, this is where the general parameters of the email will be defined. Take the time to define your default styles, it will save you a lot of time when editing your blocks, believe me!
• Stripes To define the text size, background color, typeface color, link color, etc. for sections of type Header, Content, Footerand Info area.
• Headings What typeface for your titles (from <h1> à <h3>), text sizes, colors, line spacing, formatting (italics, bold)... Go ahead, declare all your characters - it's now or never!
• Button Define the style of your default buttons here: background color, hover background color, text color, text size and typeface, border (thickness, rounded corners...), internal margins... Nothing prevents you from modifying them afterwards on a case-by-case basis, of course! And you can even activate hover effects!
• Mobile Formatting General settings for the mobile version. Will your buttons be full-width? What size will your titles be? The size of your section texts Header, Content, Footer and Info Area ? Well, I think you get the idea... I won't insist!

That's about it: in the end, it's a low-cost version of the original Stripo. A bit like having access to an old version! But I admit, it's not bad at all!

Now that I've given you a brief overview of Stripo's nomenclature, I'm going to concentrate on identify the additional parameters available in Imagino's Email Builder, as well as the strong and weak points that differentiate it from Stripo. Here we go, get in the caterpillar!!!! Put your two feet in canaaaard (the guy confuses everything...)

Environments

Workspaces

It is the shared work environment where a team can collaborate, share resources, manage access and centralize projects.

• Each company or organization generally has a single workspace.
• All team members have access to the same data (contacts, models, images, etc.).
• This is where user access rights are defined.

Projects

A project is a specific workspace mission or campaign. It contains everything you need to work on a specific action.

• You can have several projects in the same workspace.
• Each project has its own objectives, its own content and sometimes its own rules.
• This helps to segment the work, organize it and avoid mixing everything up.

I'd like to touch briefly on this notion of workspace and projects, because the content fragments we're about to discuss can be attached to a specific project.

What are content fragments?

This is one of Imagino's key features and strengths: content fragments, listed in the content library, enable you to create modules that you can reuse at will in your campaigns via the Block DAM. In each project, you can create content fragments. In this case, you'll need to enter :

• General information :
  
  • A name for easy retrieval when imported into a campaign.
  • An identifier The name is generated automatically, according to the given name. But you can modify it yourself!
  • A description for example, "Campaign header [brandname] ". But don't worry, it's optional!
• One configuration :
  
  • One source to which view you will attach this module.
  • A module type :
    • created from the code editor Code your element yourself in HTML and CSS using the solution's code editor. This requires a good knowledge of HTML and CSS, but if you're comfortable with it, go for it! You'll have more latitude when it comes to design possibilities this way. This design method allows :
      • import the module into a campaign and modify its content.
      • import the "referenced" (or synchronized) content. You will no longer be able to modify it in the campaign. This choice is made when the module is called up via the "DAM" widget.
        
    • created from the e-mail creator Use the Stripo api to design a drag-and-drop module with the blocks mentioned above.
  • A category: free-form, header, menu, footer or template - the choice is yours. Above all, this categorization makes it easy to find your little ones when searching for modules from the content fragment library.

Once your content fragment has been created, its status is automatically set to "Draft. All that's left is to activate it if you want it to appear in the choices available when using the Block DAM.

Let's get down to the positive and negative points of the solution. Don't worry, it's almost over!

Negative points of Imagino's Email Builder

• I cannot apply uppercase formatting to text via CSS (text-transform:uppercase). If you want to add textual content in uppercase, you'll have to write it entirely in uppercase. It's a tiny detail, I grant you, but in terms of accessibility, it's a good practice!
• I cannot enter internal margins other than multiples of 5. Slightly frustrating. In fact, it means that you can't totally control the graphic design of the email. What's more, margins are limited to a maximum of 40px... Which is why I think it's best, in this kind of situation, to design your layouts on Figma - or similar - with full knowledge of the capabilities of the tool you'll be using later - to avoid any disappointment.
• Apparently, there are no no way to view the mobile version of a content fragment or campaign without leaving the editor…

And the very positive points

• As with Stripo, Imagino integrates the following features text, tooltip or pop-up warnings about the use of certain functions - adding anchors, using google fonts, using VML on Outlook... Perfect for anyone new to email marketing!
  
• You can access the HTML code of a block, a container, a structure, a strip, the whole email... To do this, simply click on the "HTML and CSS - code editor top left of the solution. And you can even modify it! Whether or not this is a good idea is up to you!
  

Custom modules

So I see you coming: "If I can access the HTML code of the blocks and the email, and I can create content fragments, I can totally create custom HTML blockswithout necessarily using Imagino structures, containers and blocks!. Indeed, it's not impossible.

But! I'll put a few conditions on that:

• First, you'll need to be comfortable with HTML and CSS email development - Badsender offers a HTML coding for email" training course if you're interested. And if you'd rather skip it but still don't know anything about it, there's also a guide dedicated to the subject " HTML and CSS email coding" .
• Media queries that could be defined in a content fragment do not seem to be preserved when importing a block via the DAM. This forces you to design your modules using the Spongy - development method. max-widthghost boards for Outlook, all that and more...
• And above all: for your code to be "valid", you must adapt your HTML code "to the instructions for Stripo models". - it's not me who says it, it's Imagino! In concrete terms, this means you'll need to add class - esd-stripe, esd-structure, esd-container-frameetc. - in order to respect Stripo's element naming scheme. We're glad to hear it, Imagino provides you with a link to do this. Well, good luck!
  

Have you tried Imagino's email builder? What did you think of it? Don't hesitate to share your thoughts and feelings in the comments, I'm all ears!