Summary
- How does a widget work?
- Create a Widget
- Preview Widget
- View Widget Code
- Edit a Widget
- Duplicate a Widget
- Delete a Widget
- Troubleshooting
- Related Reading
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.
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
From the menu, select Contacts → Subscription Widgets.
Now click the ‘Create new widget’ button.
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?
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
Let's step through each section now.
Widget Settings
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.
Fields and Messages
Widget Fields
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’.
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.
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.
Delete Field
To remove the field from the signup form, just click on the "X" icon.
Collect explicit consent from your subscribers to comply with the GDPR
Include a consent checkbox on the widget that users must check to subscribe to your newsletter.
When a user subscribes to your newsletter, the consent information which includes the widget name and consent checkbox text, will be added to their contact profile
Notification Messages
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.
Widget Design
Now the fun part - designing your widget! Our simple drag-and-drop editor allows you to easily customize:
TEXT: Click any text to format the appearance
COLOR: Choose a color from the toolbar and drag it to an item. You can add new colours to the toolbar by clicking the ‘+’
LAYOUT: Select a horizontal or vertical layout for your 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.
Button
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
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:
The Embedded Widget has also two form layouts - both being horizontal:
Confirmation Email
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 should be short and very clear.
Confirmation Page
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.
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:
To enter into Expert Mode, click on the < / > from the design toolbar:
Please note, once you change to Expert Mode, it is not possible to return to the drag & drop interface.
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.
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. 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.
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:
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:
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’:
The resulting drop-down list on the widget:
Remember to test your new widget in a non-production area before integrating it on your website.
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:
First step, add the ‘Boolean’ fields to your 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.
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.
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” ...
Then duplicate the line of code and change the type to “hidden” and the value to “false” as follows:
To add a text label next to a checkbox, add the ‘label’ tag directly after the ‘input’ tag:
Then replace “Field ID” with the id of the ‘input’ tag:
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:
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:
The resulting checkboxes on the widget:
As always, test your widget in a non-production area before integrating it on your website.
Widget Summary
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.
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.
And congratulations, you have created your first 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.
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
Enter the page title, and paste the Subscription Widget code in the 'Text' tab.
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
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.
To display your Subscription form, we need to add the Text widget. Click on the ‘Text’ widget name, and select the desired position.
Paste the Subscription Widget HTML code into the ‘Content’ section. Then click ‘Save’.
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.
View Widget Code
From the Widget Management page, hover over the Manage section, and click the second icon < / > to view the widget code.
Edit Widget
Hover your mouse over the Manage section, and click the pencil icon.
Duplicate a Widget
From the Widget Management page, hover over the Manage section, and click the ‘plus’ (+) icon.
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.
To delete multiple widgets at the same time, click the checkbox for each widget, then click the trash icon.
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.