Mailjet Widget Setup

Adding the Mailjet Plugin to Widgets

Now that the Mailjet plugin has been configured, the next step is to add the contact signup form to your website so that you can easily capture new contacts directly from your site and synchronize them directly with your Mailjet contact lists.

Please note, you can add more than one signup form on your website, allowing you to collect different subscriber information in various contact lists.

This is done by first selecting ‘Appearance’ → ‘Widgets’ from the main menu.

wordpress-img20

On the Widgets page, you will see a list of all available widgets on the left hand side including the ‘Mailjet Subscription Widget’. The sections on the right hand side are where you tell your WordPress theme to put the specific widget by dragging it over from the left to the appropriate section in the right.

wordpress-img21

Note

Please note, the number of widget areas is dependent on the WordPress theme you are using. The theme used for this document has over 12 widget areas.

To add a widget, simply click on the widget name and a drop-down menu appears. Select the desired position and click on the ‘Add Widget’ button.

For this example, the Mailjet Subscription Widget will be added to the Footer Widget 2 area.

wordpress-img22

Once added to the Footer Widget 2 section, the Mailjet Subscription Widget will expand to show the following setup options:

wordpress-img23

We will now take a closer look at each Step and the options within.

Note

Please remember that you can ‘Save’ your widget at any time.

Step 1 – Choosing Contact Properties

Beyond collecting just the email address, you can also specify up to 3 additional contact property fields (first name, last name, etc.) that you want shown on your signup form when a subscriber enters their email address to sign up to your newsletter or promotional email.

Simply drag & drop up to 3 contact properties from the ‘Available Contact Properties’ into the ‘Selected Properties’ area. Then arrange the contact properties in the order you want shown on your signup form.

wordpress-img24

Remember, your Mailjet account is linked to this widget. Any new contact properties made here will also be part of your Mailjet Contact Properties.

Contact properties will be covered in greater detail in the Mailjet Contacts section of this document.

For this example, the contact property ‘firstname’ will be added to the subscription form by dragging the block from ‘Available contact properties’ to ‘Selected contact properties’.

wordpress-img25

Click on ‘Next’ to continue to Step 2.

Step 2 – Labelling your widget

At this step, you will be adding custom labels to each part of your subscription form. If you added any contact properties in Step 1, they will be shown here. The label you enter will be the ‘default text’ shown within the input box on the form.

wordpress-img26

You can add labels for:

  • Title of subscription Form (required)
  • Button Text (required)

And lastly, select the contact list where new subscribers will be added to. If you wish to create a new contact list, you can do this within WordPress by clicking on ‘Mailjet’ → ‘Lists’ or you can go to your Mailjet account.

Example of an existing widget:

wordpress-img27

Once you are done entering all the labels, click on ‘Next’ to go to the last step.

wordpress-img28

If you wish to return to Step 1, click on ‘Back’.

Step 3 – Customized Options

At this final step, you have the option to customize the text of the different confirmation or error messages that your end users receive when filling out the contact form on your WordPress site (thank you text, opt-in confirmation emails, etc.).

wordpress-img29

You can also use the variable %s to display the subscriber’s email address in any message adding a touch of personalization.

For example:

Subscription confirmation email sent to %s. Please check your inbox and confirm the subscription.

And don’t forget to click on ‘Save’, once you have completed all your customization!