1. Mailjet
  2. Support
  3. Documentation

Passport

Summary

Getting Started with Passport

Email design with our intuitive drag-and-drop editor Passport is simple and the only tool you need for all your mailing needs. What can you create with Passport? Take your pick:

  • Campaigns – Also known as a newsletter, a marketing email, a mass market email. Whatever name you pick, a campaign is sent to a list of subscribers.
  • TemplatesCreate and manage your own predesigned templates and use them for a multitude of purposes:

    • Marketing Templates – A template that reflects your brand and use it for future campaigns.
    • Transactional Templates – A template stored on the Mailjet platform that can be used for all your transactional needs.
    • Automation Template – A predesigned template you can use when creating an email automation workflow.

With Passport, you can choose how to design your campaigns, emails and templates:

  • With Passport’s Responsive Drag-and-Drop Editor - Use Passport’s wide range of content tools to design your header & footer, and different sections within your email body.
  • Use HTML – For anyone who is comfortable coding their emails with HTML directly.
  • Use MJML – Use Mailjet’s markup language MJML - the only framework designed to make coding responsive email easy. Save time and code more efficiently with MJML’s semantic syntax. (Please note that our drag-and-drop editor also generates MJML code.)

You can also preview your email on different mobile devices right inside Passport.

One more thing - Passport is a responsive email editor. That means your mailings will be rendered properly on a computer, smartphone or tablet regardless of the recipient’s email client. Mic drop.

Create Your Campaign

From the Campaigns page, click the ‘New Campaign’ button.

Passport

On this page, you will need to enter the basic information for your campaign:

  • Title: This is an internal reference label that only you will see.
  • Select your contact list: Click the ‘Choose contact list’ drop down menu to select your contact list. For premium plans users, once the contact list is selected, the segmentation section will appear. For more information, please read the FAQ: How to segment/filter contact lists
  • Language of Your Campaign: Choose the desired language.

Passport

Then click the ‘Save and Continue’ button.

[top]

Selecting Your Campaign Template

On this page you can select from the following template options:

Passport

  • Use a template from gallery
    Choose from a number of beautiful predefined templates
  • Use one of my templates
    Your own set of previously created templates
  • Code in HTML
    Create a campaign using HTML or import your own code
  • Code in MJML
    Create a campaign using MJML or import your own code

For this example, we will select the ‘BestTravel’ template from the gallery. Click ‘Select’ to continue.

Passport

[top]

Email and Sender Details

Now that you have selected your template, the next step is to enter the key sender and email information for your campaign:

Passport

  • Email Subject: The subject of your campaign, as it will appear in your recipient’s inbox. The subject can be personalized; simply click the ‘Insert variable’ to show a list of your contact properties. Personalizing your content is explored further in the next section.
  • From Name: The name your recipients will see in the ‘from’ field.
  • From Address: Select a sending address from the drop-down list.
  • Use a different reply-to address: (optional) If you want replies to be sent to another email address and not to the From Address, click the link and enter the email address.

Once the information has been entered, click ‘Start designing your email’

At the top of the screen, you will see the sender name and campaign subject.

To change the campaign information at any time, just click the pencil icon.

Passport

[top]

Menu & Layout

The Mailjet Passport Builder is packed with exciting features and tools.

Let’s take a closer look at the home screen:

Passport

Main Menu

The main menu allows you to navigate through all the stages of building, testing and sending your campaign.

Passport

Exit

You can exit the template builder at any time, by clicking on Mailjet logo in the top left corner. Please note, your campaign will be automatically saved upon exiting.

Passport

[top]

Previous / Back

Click to go back to the previous screen.

Passport

Undo / Redo

You can undo and redo modification on your campaign. You can also use the keyboard shortcut for the undo command: Mac (cmd + Z) and Windows (ctrl + Z)

Passport

Preview & Test

To preview your campaign across different devices (mobile, tablet, desktop), click ‘Preview your template’.

Passport

Review & Send

Passport

To send your campaign, select ‘Review & Send’.

To save your campaign, select ‘Save my email’.

To save your campaign as a template, select ‘Save as a template’.

To save and exit, please select the last option ‘Save and exit'.


Let’s step through saving your campaign as a template:

The first time you save a campaign as a template, you will need to enter a template name. You can overwrite the default template name or enter a new template name.

For this example, a new template name will be entered. Then click ‘Confirm’ to create your new template.

Passport

To view your new template, click on ‘Back to template selection’ from the main menu, then click ‘Use one of my templates’.

Passport

[top]

Layout

Your campaign/templates consists of 3 main sections:

  • Header
  • Main Body
  • Footer

Passport

The Header (Preheader & View online)

The campaign header contains the two important elements:

  • Preheader
    The preheader is the short summary text you see at the top of the email, and is displayed following the subject line when an email is previewed.

    To customize your preheader wording, simply click on the text, and make your changes.

  • View online Link
    This link allows your recipient to view your email on a web browser. The link is automatically generated and no changes need to be made.

Passport

If you do not want to display the header in your newsletter, click on Settings then uncheck “Include header”.

Passport

The Main Body

The main body of the campaign is comprised of sections, and each section can have one or more content elements (text, image, button, …).

To change the properties of a main body section, click on the section background to display the properties toolbar. You can change the margins, the vertical alignment, the background colour or add a background image.

Passport

[top]

The campaign footers contains the following elements:

  • Unsubscribe Link
    The unsubscribe link is mandatory for all campaigns and is automatically added to each campaign. There are no change needed to the link, variable (email to) or the text.

  • Mailing Address
    Best mailing practices ask for your full company’s mailing address and contact information be added to all campaign footers. This also increases your deliverability.

    To customize the mailing address, just click on the text, and make your changes.

Passport

Please note: The header & footer sections are linked. To change the background or text colour of the footer section, please go to the header section.

[top]

Sections

Add a Section to Your Campaign

You can build your campaign by adding sections. Then you add different elements (text, button, images, …) to each section. A section can have 1, 2, 3 or 4 columns, with varying widths.

Click on the section layout you want, then drag and drop it into your campaign.

Passport

[top]

Save & Reuse Sections

Save sections of your template into your own library where you can easily drag-and-drop into future campaigns.

When you save a section, the content, colours and formatting is saved allowing you to speed up your campaign creation and keep your marketing brand consistent across campaigns.

To save a section: Click within the section and select ‘Create a saved section’.

Passport

Give the section a meaningful name that you can recognize later, and click 'Save'.

Passport

To use a saved section in your campaign: Click on ‘My saved sections’. Then ‘drag and drop’ the section into your campaign.

Passport

Move a Section

Click in the section background then on the up or down arrows.

Passport

Duplicate a Section

Click within the section to highlight it, then click the duplicate icon on the right side of the screen.

Passport

Delete a Section

To remove a section from your campaign body, click within the section, then click the trash icon. Confirm the deletion by clicking on the red 'x' that appears.

Passport

You can also quickly delete a section or element, by dragging it to the content tools area.

Passport

[top]

Locking a Section

Protect your email design and brand identity from accidental changes with Section Locking.

Give your Developers, Designers and other team members the ability to control who can edit or delete content within individual sections of a Campaign or Template, as well as the entire Design & Layout.

Passport

Please note Section Locking is only available on Premium Plans.

Assign Locking Permissions

Give locking permissions when sharing your account with collaborators and team members.

Passport

Choose the predefined role of Manager, Developer or Designer role which includes locking ability, or create a custom role. (For more information on User Roles, please go to the Account Sharing Guide)

Passport

[top]

Locking a Section (via Passport)

To lock or unlock a section of a campaign or template in Passport, simply click on the ‘Content Locking’ icon.

Passport

If you do not have permissions to lock or unlock a section, a modal will appear informing you to contact the account administrator to acquire the permissions.

Passport

Or if you are on a Basic plan, you will need to upgrade to a Premium Plan.

Passport

If you have permissions, the ‘Content Locking’ modal will appear with the following levels of locking:

Passport

• Unlock everything (default)
There is no locking and the section is completely open for modification, including deletion.

• Allow text and images edition only
In other words, it is content-editable only. No changes to the section design (padding, alignments, colours, etc) can be done and no content blocks can be added or removed from the section. The section can be moved and, if checked, the section can be deleted or duplicated.

• Lock everything.
The section is fully locked down and no changes can be made, except moving the section.

Once you selected a level of locking, click ‘Confirm’ to save your changes.

Passport

[top]

Viewing Locked Sections

Let’s look at how the different locked sections will appear in Passport to users who do not have permissions to lock or unlock sections.

Unlocked Section

The section appears as normal in Passport – with full content block menu icons and section buttons (section options, move up/down, copy, save section, delete).

Passport

Section is content-editable only (with no section deletion)

The section can moved; but all other section buttons are hidden (section options, copy, delete, save section).

Locked Section: Not Locked Section:

Passport

Passport



And no content blocks can be added or deleted to a content-editable only (no deletion) section.

Passport

When clicking on a content block within a (locked) section, the options available will be for content editing. The icons associated with block design, or block duplicating or deletion will be hidden

Text

Tools Available Not Available
• Text style preset (Paragraph, Heading…)
• Variables
• Insert a link
• Bulleted list
• Numbered list
• Bold, Italic, Underline, Strikethrough
• Font Family, Font Size, Text Color
• Clear Formatting
• Alignment
• Line Height
• Block Options (padding, background)
• Copy or Delete Text Block
Passport


Image

Tools Available Not Available
• Choose Image
• Edit Image
• Enter Link
• Block Options (padding, shape, etc.)
• Copy or Delete Image Block
Passport


Divider

Tools Available Not Available
• No Options • Block Options (padding, shape, etc.)
• Copy or Delete Divider
Passport


Button

Tools Available Not Available
• Insert a variable
• Enter Link
• Font Family, Text Size, Text Color
• Bold, Italic, Underline, Strikethrough
• Clear Formatting
• Alignment
• Line Height
• Block Options (button color, border, padding, etc.)
• Copy or Delete Button
Passport


Spacer

Tools Available Not Available
• Adjust Height
• Block Options (background color)
• Duplicate or Delete Spacer
Passport


Social Sharing

Tools Available Not Available
• No Options
• Font Family, Text Size, Text Color
• Bold, Italic, Underline, Strikethrough
• Clear Formatting
• Alignment
• Line Height
• Block Options (icon styling, padding, configure links, etc.)
• Copy or Delete Social Sharing Block
Passport


HTML

Tools Available Not Available
• Enter HTML
• Copy or Delete of HTML Block
Passport
Section is content-editable only (with section deletion)

With this locking option, you can duplicate or delete the section.

Passport

All options for the content blocks (text, image, button, etc) are the same as the “Section is content-editable - with no selection deletion” locking option.

Passport

Section fully locked

A section that is fully locked has no available options or menus. The section and any content blocks within, cannot be modified in any way but the section can be moved and saved.

Passport

[top]

Locking Global Page Design

Account owners and users who have locking permissions can lock the global design settings at the template level which includes:

• Pre-header (visibility and layout)
• Page Layout (responsive design) and background color
• Text styles (headers, paragraphs, link styles)

To access this locking option, go to the ‘Settings’ tab in Passport, then click on ‘Page design locking’.

Passport

(Note, if you do not have locking permissions, the ‘Page design locking’ option will not be accessible to you. To obtain locking permissions, you would need to contact the account administrator.)

The ‘Page design locking’ section offers two options:

• By default, the first option is selected which allows the Global settings to be modified by users with the permission to lock sections.
• Click the second option to lock all Global settings (except for Language). A small ‘lock’ icon will appear beside the locked options.

Passport

Viewing a Locked Page Design

For users who do not have locking permissions, the ‘Page design locking’ section will not be accessible. A modal will appear informing them to contact the account administrator to acquire the necessary permissions.

Passport

[top]

Global Style Settings

With a couple clicks, easily format the text styles of all your paragraphs, headers and hyperlinks within your newsletter or template.

To access the global text styles, click on the ‘Settings’ tab.

Passport

As the name suggests, the “Global Style” option will set the font family and colour for all the elements listed (Headers, Paragraphs, Links) as well as the newsletter header and footer.

Passport

You can then further customize the styling for each of the Headers, Paragraph and Link elements.

Passport

And lastly, if you want to have a different text style for a certain header or paragraph in your campaign, simply style the text as usual with the section toolbar.

Passport

[top]

Content Tools

This area covers all the content elements that will appear in your message: text, images, buttons, social sharing, dividers, and html blocks.

Adding content is easy - just click on the content block and drag it to the desired area in your campaign. If you want to move that block, just drag and drop to the new location.

Passport

Click within the frame to customize the element using the toolbar that appears around the frame.

Passport

Text

Passport

Using the Text tool bar, you can easily format and customize your text block:

• Adjust line heights
• Align text
• Set the background colour
• Change Margins
• Personalize your content using contact properties
• Format your text (font, bold, italic, etc)

Passport

Image

Passport

The Image toolbar allows you to:

• Set the horizontal positioning
• Add padding
• Apply a border (shape) to the image
• Set the background color

Passport

You have two ways to add an image into the section:

• Upload your image or pick an image from your gallery
• Link to an existing image online

Passport

For this example, let’s upload an image to our campaign.

Once you click the upload image button, you can click the ‘Browser your computer’ link to upload your image, or you can drag & drop your image file into the dialog box.

Passport

You can choose to add ALT text to your image. In the event your image cannot be rendered, the ALT text will appear instead. Keep your ALT text short and descriptive, kinda like a tweet. :)

Passport

Once you have added an image, you can use the Image Tool Editor to make changes to your image:

Passport

From here you can crop and resize your image, and change the orientation (rotate and flip).

Passport

Once you have completed your edits, click ‘Save’ to return to the campaign to view your image. In this example, the image was cropped.

Passport

[top]

Divider

Passport

You can add a dividing line to separate sections or elements within a section (as per the example below). The Divider tool bar allows you to:

• Set the background colour
• Change Margins
• Format the line (design, colour, weight)
• Adjust the horizontal and vertical spacing

Passport

[top]

Button

Passport

There are many options available in the Button tool bar (from bottom left to right):

• Border Radius (set the roundness of the button corners)
• Button border colour, weight, and style (solid, dotted, dashed, etc)
• Set horizontal positioning and padding
• Add a hyperlink
• Font alignment
• Adjust the margins
• Personalize the text using contact properties
• Format the font (font family, colour, bold, etc).

Passport

Spacer

Passport

Add a blank space to separate elements or sections within your newsletter. With the Spacer Tool, you can:

• Set the height of the blank space (in pixels)
• Add a background color (optional)

Passport

[top]

Social Sharing

Passport

Add your favorite social icons to your campaign such as Facebook, Twitter, LinkedIn and Google Plus.

From the social share toolbar, you can change the font color and formatting of the text labels.

Passport

Click on the block options (‘wheel icon’) to change the appearance of the block itself such as the background color of the section, and aligning the icons in a row or column.

You can also change the colors of the actual social media icons from their default colors to one uniform colour via the ‘Icon Styling’ option.

Passport

Within the block options, click the ‘Configure links’ button to access the Social Media Configuration pop-in window where you can:

• Select which social media icons to be show
• Modify the label text
• Share the online version of your marketing newsletter to your social media account* or set the link to go directly to your social media page.

Passport

* The online sharing option is currently available for marketing campaigns, and not for transactional and automation emails.

HTML Block

Passport

You can add some HTML code directly into your newsletter. Drag the HTML Block to your campaign, then click on the button from the toolbar to open the HTML editor window...

Passport

and code away!

Passport

Import Custom Fonts

Add custom Google fonts to your marketing newsletters, transactional and automation templates using Passport. Choose from over 800 Google Web Fonts that best fits your brand and design.

Please note, the import custom font feature is only available on Paid Plans.

Custom fonts are saved per template. Fonts added in one template/newsletter are not automatically added to newly created ones or if you pick another template from the gallery.

Tip: Duplicate or export your template/newsletter to carry over your custom fonts.

To add a custom font, click on the Font Family drop down list from within a text element.

Passport

Select ‘Add a web font’.

Passport

Start typing a Google Font name. Once you select a font from the predictive list, the preview window will display the new font. You can also change the text in the ‘your font’ preview section (up to 15 characters).

Passport

The preview section also displays a fallback font.

While some major email clients do support custom web fonts (Apple Mail, Android Mail, iOS Mail, Outlook 2016 OSX…), be aware that some others don’t, such as: Gmail, Yahoo! Mail and Outlook 2003. In these cases, the fallback font will be displayed instead of the Google font.

Passport

Once you selected a custom font, click ‘Add font’.

Passport

All custom fonts will be added to the top of the font list in alphabetical order.

Passport

Fanatical about fonts? Check out Google fonts to learn more about typography.

[top]

Personalizing Content

You can customize your newsletter text and subject field by adding your contact properties. Select the text frame where you want to display the personalized content. From the menu bar, click on 'Variables'.

Passport

Select the desired contact property.

Passport

Then enter text in the ‘Default value’ box. If your contact does not have a "firstname", the default text that will appear instead.

Passport

Passport

[top]

Manage your Mobile View

You can arrange how the columns in each section of your message will appear on a mobile device: Stacked (default) or Side by Side

Passport

To change a column display, click on the section background then click on the ‘Selection Options’ icon.

Passport

Check the ‘Keep multiple columns on mobile’ options to display columns side by side.

Passport

A small blue icon will appear in the section indicating the columns will be shown side by side on a mobile device.

Passport

Click on ‘Preview your template’ to view how your columns will look side by side.

Passport

Passport

[top]

Responsive Design (Fullwidth vs Boxed)

Our tool allows you to build responsive design newsletters. This means that your newsletter can respond and adapt accordingly to the width of your viewing screen. Your campaign will look awesome whether you view it on a computer/laptop, mobile phone or tablet.

In the Setting Tab, the ‘Page layout & background’ toolbar gives you two options for your campaign responsive design: Fullwidth or Boxed

Passport


Fullwidth: Your campaign width will automatically adjust to the width of the viewing screen as seen below.

Passport


Boxed: The main campaign body width is static, regardless of the viewing screen

Passport

[top]

Preview Your Campaign

To preview your campaign click on the 'Preview your template' button from the Passport design window.

Passport

Your campaign can be previewed on different devices:

• Mobile Phone (default view)
Passport

• Desktop & Tablet
Passport

• Plain Text
Passport

Once you are done previewing your campaign, simply close the modal window.

Passport

[top]

Send a test email

You can send a test email (campaign) up to 10 recipients at any time.

To send a test campaign, go to the Preview Screen and click on the ‘Send a test email’ button.

Passport

[top]

Send Your Campaign

Once you have worked your magic to create an amazing campaign, and you’re ready to send your campaign, click ‘Review & Send’ from the Passport design window.

Passport

You can now choose whether you want to send your campaign right now or schedule it to be sent at a particular time and date. Then just click the ‘Send now!’ button.

Passport

Then confirm that you want to send your campaign now...

Passport

Congratulations on sending your first campaign with Mailjet.

[top]

Try Mailjet now ?
Create an account - no engagement, no hidden fees