1. Mailjet
  2. Support
  3. Documentation

Subscription Widget

Summary

How does it work?

The Mailjet Subscription Widget consists of a signup form, a confirmation email and confirmation page. When someone subscribers on your website, a confirmation email with a link to the confirmation page is sent to them. Once they confirm their registration, their email address (and any other information collected via the signup form) is added to your contact list.

The best part? All you need to do is design and customize the form, email and page in the Widget Builder. Mailjet will generate the code for the signup form and take care of the workflow.

Watch our Video Tutorial on how to create a subscription widget or scroll down to read our step-by-step instructions.

Please note: the features in the Subscription Widget are only available to customers who registered after April 2014.

Is your website running on WordPress? You may want to check out Mailjet’s WordPress Plugin which allows you to create a subscription form, manage your contacts, create emails and view real-time stats directly from your WordPress Admin!

Create a Widget

Go to your Contacts page and click on the ‘Subscription widgets’ link.

Subscription Widget

You will arrive on the widget management page, which will list all the widgets you have created. From here, you can create, edit, view and delete your widgets.

Now click the ‘Create New Widget’ button.

Subscription Widget

The first step is to decide which type of widget you would like to create:

Would you prefer a registration form directly embedded on your website page, or would you rather want the form to pop-in a new window when a button or link is clicked?

Subscription Widget

For this example, we will select the ‘Pop-in’ widget.

You will now be on the Widget Creation page which has three main areas:

  • the settings for your widget
  • the fields your subscribers will need to fill in and related notification messages
  • the widget design editor

Subscription Widget

Let's step through each section now.

Widget Settings

Subscription Widget

In this section you will be entering:

Widget Name
Enter a name for your widget (this is an internal name only you can see).

Contact List
Select the contact list where new subscribers will be added to.

Language
You can choose to display your widget in a different language.

Confirmation Page
Once someone signs up for your widget, they will receive a confirmation email with a link to validate (confirm) their registration. By default, this link leads to the Confirmation Page via Mailjet that you can design in the widget editor. If you wish to use your own confirmation page on your website, click ‘Use External Confirmation Page’ and then enter the URL.

Create Pop-in Button (default)
Use the Widget designer to customize the subscriber button and have the HTML code generated automatically. Otherwise, if you uncheck this option, you will need to generate the HTML code to launch the pop-in widget.

[top]

Fields and Messages
Widget Fields

Subscription Widget

The Widget Fields are linked to your custom contact properties. You can add up to 10 fields on your signup form to collect additional information such as the subscriber’s name, location, or gender. To view your current contact properties, go to the Contacts Page and click on ‘Contact Properties’.

Add Field Name
Select the desired contact field from the drop down list and click ‘Add Field’.

Subscription Widget

Displayed Label
The text label that will be shown on the signup form.

Make a Field Mandatory
Simply click the ‘Mandatory’ toggle slider. Please note, the default ‘Email Address’ is a mandatory field.

Subscription Widget

Ordering the Fields
The order of the fields is the how they will appear on the signup form. You can move a field by clicking on the three bar icon and dragging it to the new location.

Subscription Widget

Delete Field
To remove the field from the signup form, just click on the "X" icon.

[top]

Notification Messages

Subscription Widget

Once a person clicks the subscribe button on your sign-up form, you can have personalized notification messages appear for the following scenarios:

  • Successful Subscription - Shown when a person has successfully submitted the form on your website. Please note, the person still needs to click the link within the confirmation email to be added to your contact list.
  • Failed Subscription - Appears when a person is already subscribed to your contact list.
  • IP Blacklisted - Mailjet has a limit of the number of subscribers per IP address to avoid spamming of your list. This message will appear once that limit has been reached.

To activate any message, just click on the checkbox and then add your custom message.

Subscription Widget

[top]

Widget Design

Subscription Widget

Now the fun part - designing your widget! Our simple drag-and-drop editor allows you to easily customize:

Subscription Widget


TEXT: Click any text to format the appearance

Subscription Widget


COLOR: Choose a color from the toolbar and drag it to an item.
You can add new colours to the toolbar by clicking the ‘+’

Subscription Widget

Subscription Widget


LAYOUT: Select a horizontal or vertical layout for your widget

Subscription Widget


EXPERT MODE: Use HTML to customize your widget instead of the drag and drop interface.
Please note, once you switch to Expert Mode, it cannot be undone.

[top]

Button

Subscription Widget

The Button option is only available for the pop-in widget type. The button will appear on your website, and when it is pressed, the subscription form will appear.

For the button, you can:

  • Edit and format the button text
  • Choose the background colour
  • Set the ‘roundedness’ (radis) of the button corners (0 = square corners)
Form

Subscription Widget

Design your subscription form to fit your website look by changing the colours of each part of the form (text, button, background) and customizing the font.

You can set the form layout for your Pop-in Widget:

Subscription Widget

The Embedded Widget has also two form layouts - both being horizontal:

Subscription Widget

[top]

Confirmation Email

Subscription Widget

You can customize the email that is sent to new subscribers asking them to validate their subscription to your newsletter. This email will include a button with the link that directs recipients to the confirmation page.

You can edit the header and body text. Remember that the message should only be used to validate the subscription: it must be short and clear so that not too be cumbersome for your registrants.

Confirmation Page

Subscription Widget

The confirmation email sent to new subscribers will contain a link to the confirmation page. If you have selected the ‘Create a Confirmation Page via Mailjet’ in the Widget Settings section, you can use the drag and drop editor to:

  • Customize the colours of the header, background and text
  • Edit the page header and body text to inform the new subscriber that their confirmation was successful

Once you have customized each component, click the ‘Next’ button to continue.

[top]

Expert Mode (Advanced HTML Mode)
The Expert Mode is only recommended for users who know how to code in HTML.

In Expert Mode, you can view and edit the widget HTML code, and add advanced form elements such as drop-down lists, radio buttons, and checkboxes. Expert Mode has no drag & drop interface – the Widget Designer consists of HTML windows:

Subscription Widget

To enter into ‘Expert Mode’, click on the < / > from the design toolbar:

Subscription Widget

Please note, once you change to Expert Mode, it is not possible to return to the drag & drop interface.

[top]

Creating a drop-down list
This advanced feature is for users who know how to code in HTML.

Add a drop-down list to your widget via the Expert Mode and some HTML code.

First, add a field of type ‘String’ that will be used as the drop-down list.

Subscription Widget

Design and customize all your widget components (button, form, confirmation email and page) using the widget designer.

Once you are ready, click the ‘Expert Mode’ button.

Subscription Widget

Please note, once you convert to ‘Expert Mode’, you cannot return to the drag and drop interface.

Click the confirmation message that appears, and you are now in 'Expert Mode'.

Subscription Widget

In the HTML code window, find the contact property that will be used as the drop-down list as we need to make changes to the code:

Subscription Widget

First, change the “input” tag to “select”:


   <input id="w-preview-fields-content-cell-field-46229" type="text" ...

   becomes:
                    	
   <select id="w-preview-fields-content-cell-field-46229" type="text" ...

Then add the following code to create the options within the list:

Subscription Widget

A brief explanation of the above code:

  • Each 'option' line creates an entry in the drop-down list.
  • Between the 'option' tags, is the actual text to be shown in the drop list.
  • The first option – “Drop down header” – is an inactive selection and provides information to the cust about the list.
  • (optional) The parameter “value” is passed to the Mailjet server if the subscriber chooses that option.

Please note, do not change the id or name values within the "select" tag, or any other tag in the HTML code. Any changes to these values will prevent your widget from passing subscriber information to Mailjet. You are free to alter the CSS portions of the code.

Example code for a drop-down list of ‘age ranges’:

Subscription Widget

The resulting drop-down list on the widget:

Subscription Widget

Remember to test your new widget in a non-production area before integrating it on your website.

[top]

Creating a Checkbox
This advanced feature is for users who know how to code in HTML.

You can add checkboxes to your widget via the Expert Mode. For each checkbox you want on your widget, you need to add a contact property of type ‘Boolean’.

In this example, we will build a widget with 2 checkboxes to allow the choice of newsletter topics:

Subscription Widget

First step, add the ‘Boolean’ fields to your widget.

Subscription Widget

Design and customize all your widget components (button, form, confirmation email and page) using the widget designer. Once you are ready, click the ‘Expert Mode’ button.

Subscription Widget

Please note, once you convert to ‘Expert Mode’, you cannot return to the drag and drop interface.

Click the confirmation message that appears, and you are now in 'Expert Mode'.

Subscription Widget

In the HTML code window, find the boolean fields that will be used as the checkboxes and make the following changes:

First, change the input type from ‘text’ to ‘checkbox’ and add the attribute: value=”true”


   <input id="w-preview-fields-content-cell-field-46167" type="text" ...

   becomes:	

   <input id="w-preview-fields-content-cell-field-46167" type="checkbox" value=”true” ...

To add a text label next to a checkbox, add the ‘label’ tag directly after the ‘input’ tag:

Subscription Widget

Then replace “Field ID” with the id of the ‘input’ tag:

Subscription Widget

To change the appearance of the checkbox, edit the “style” attribute for the ‘input’ tag. In this example, the “style” attribute was removed entirely to have the checkbox return to its default (small) display:

Subscription Widget

Please do not change the id or name values within the 'input' tag, or any other tag in the code. Any changes to these values will prevent your widget from passing subscriber information to Mailjet. You are free to alter the CSS portions of the code.

Example code for two checkboxes:

Subscription Widget

The resulting checkboxes on the widget:

Subscription Widget

As always, test your widget in a non-production area before integrating it on your website.

[top]

Widget Summary

Subscription Widget

At the top section of the ‘Widget Summary’ page, you can review your widget parameters (name, contact list, language). To make any last minute changes, simply click the ‘Edit Parameters’ button.

In the Confirmation Email Info section, you need to enter the sender name and the email subject. The subject should clearly state that this is a confirmation email.

Subscription Widget

You can also preview the Confirmation Page and Confirmation Email in separate window browsers.

Once you are ready, click the ‘Save Widget’ button in the lower right corner.

Subscription Widget

And congratulations, you have created your first widget!

Subscription Widget

The last step is to integrate the widget HTML code as shown in the top window into your website. The code contains the subscription button and trigger to a launch the pop-in widget - just copy and paste the code into your website!

Please note: The pop-in widget can also be triggered via a hyperlink, image or any HTML element that can launch a Javascript function. The second smaller window shows example code for a hyperlink.

[top]

Integrating into WordPress

You can add the Subscription Widget html code directly into a post, page or add it via a WordPress Widget.

For this example, we will create a new page and add the Subscription form.

From the menu, select Pages → Add New

Subscription Widget

Enter the page title, and paste the Subscription Widget code in the ‘Text’ tab.

Subscription Widget

Click ‘Publish’ and you are done - your subscription widget will appear on the new page.

Your Subscription Form can also be added to your website’s sidebars via the Wordpress Widgets.

From the main menu, go to Appearance → Widgets

Subscription Widget

On the Widgets page, you will see a list of available widgets on the left hand side (archives, calendar, menu, text, etc.). The sections on the right hand side are the available widget locations. Each WordPress Theme has a different number of widget locations, and in this theme there are only 2 widget locations: Main Widget Area, and Secondary Widget Area.

Subscription Widget

To display your Subscription form, we need to add the Text widget. Click on the ‘Text’ widget name, and select the desired position.

Subscription Widget

Paste the Subscription Widget HTML code into the ‘Content’ section. Then click ‘Save’.

Subscription Widget

And that’s it - just pop over to your website to view your subscription widget!

Preview Widget

To quickly view your subscription form, hover over the Manage section, then click the ‘eye’ icon.

Subscription Widget

View Widget Code

From the Widget Management page, hover over the Manage section, and click the second icon < / > to view the widget code.

Subscription Widget

[top]

Edit Widget

Hover your mouse over the Manage section, and click the pencil icon.

Subscription Widget

Duplicate a Widget

From the Widget Management page, hover over the Manage section, and click the ‘plus’ (+) icon.

Subscription Widget

You can then edit the newly duplicated widget as normal.

Delete Widget

To delete a single widget, hover over the ‘Manage’ section, and click on the trash can icon that appears.

Subscription Widget

To delete multiple widgets at the same time, click the checkbox for each widget, then click the trash icon.

Subscription Widget

Troubleshooting

If you have implemented a widget on your website, and it has suddenly stopped working, please check that contact list associated with the widget has not been changed or deleted.

[top]

Managing Your Contact Lists

Contact Properties

Passport

If you have any questions about using the widget, please open a ticket with our Support Team!

Happy Subscribing!

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