eFlyerMaker

Sign-up Forms Builder 2.0.5 for Magento 2.x

User Guide

2018-01-05

2

eFlyerMaker

Dear Reader,

This User-Guide is based on eFlyerMaker’s Signup-Form Builder Plugin for Magento eCommerce. What follows is a screen by screen guide in detail.

For quick support, please contact us:

- by Email: support@eflyermaker.com

- at our Help Desk: 1-866-632-7217 ex 3206.

We appreciate your feedback and support of our tool during each stage of development. Please do not hesitate to actively keep in touch.

2018-01-05

3

eFlyerMaker

Table of contents

Get your eFlyerMaker Informations 5

Configure your Magento 6

Add your form in the Magento CMS 8

Add a Pop-up Form sign-up 9

Add a Popup Trigger to a button 10

Synchronizing Magento's Newsletter Subscribers with your eFlyerMaker

Publication. 11

Importing your current Subscribers to eFlyerMaker 13

How to customize the look of the pop-up. 15

CSS References 20

API References 21

Technical Information and Online Videos 21

2018-01-05

4

eFlyerMaker

Get your eFlyerMaker Informations 1. Log into your eFlyerMaker's account or create your free account now

2. In the navigation menu, select “List”, then "Publications"

3. Under Newsletter, click "Sign-Up HTML Code"

4. In the pop-over modal window, select Plugins, then Magento

2018-01-05

5

eFlyerMaker

5. Copy all the JSON code

Configure your Magento 1. Locate the eFlyerMaker Plugin in the Admin section

2018-01-05

6

eFlyerMaker

2. Click the Create Form tab located in menu bar

3. Paste the code in the field "eFlyerMaker JSON code"

4. Click "Create Form" button

2018-01-05

7

eFlyerMaker

5. You may click on a field to access the Input Text Options panel.Use this panel to customize the form

6. You may change the fields order by simply dragging them up or down.

7. Once your changes are completed, make sure to choose a descriptive name for your form, then click Save Form button.

Add your form in the Magento CMS

2018-01-05

8

eFlyerMaker

1. Click on the Manage Form tab locate in the menu bar

2. Click the </> icon located at the right side of the table

3. Copy all the blue text (Check "is a pop-up" if you want your signup form to be a pop-up)

4. Go in Magento CMS Content > Pages, then choose the page you want to add the form

5. Paste the code in the Content editor, then save.

Add a Pop-up Form sign-up 1. Click on the Manage Form tab locate in the menu bar

2018-01-05

9

eFlyerMaker

2. Click the </> icon located at the right side of the table

3. Copy all the blue text and make sure to select "is a pop-up"

4. Go to the Magento SideBar > Content > Pages, then choose the page you want to add the form

5. Paste the code in the Content editor, then save

Add a Popup Trigger to a button In case you want to pop-up the sign-up form only when the visitor clicks a button in the site like "Subscribe Today!".

1. Click on the Manage Form tab locate in the menu bar

2. Click the </> icon located at the right side of the table

2018-01-05

10

eFlyerMaker

3. Copy all the blue text and make sure to select "is a pop-up"

4. Go to the Magento SideBar > Content > Pages, then choose the page you want to add the form

5. Paste the code in the Content editor, then save.

6. At the end of the code, add the attribute popup_onclick="#trigger_id" where the trigger id is the corresponding ID of the clickable element.

Synchronizing Magento's Newsletter Subscribers with

your eFlyerMaker Publication. Magento integrates a Newsletter Feature in which customers can sign up to a newsletter at the moment of the account creation.

This feature may seem good for the administrator because everything is kept on the same interface. However, Magento has a huge lack of features regarding Email Marketing.

2018-01-05

11

eFlyerMaker

Using a tool like eFlyerMaker to do your Email Marketing Campaign will ensure compliance with Anti-spam regulations, deliverability and more laws in various country.

eFlyerMaker provides all prerequisites to ensure a good reputation in regards of ISP. Those are double-opt-in subscription, single opt-out unsubscription and bounce management.

By connecting your Magento Newsletter subscribers with eFlyerMaker, it ensures you to keep both lists synchronises and up-to-date.

Generate your encryption keys

1. Log in to your eFlyerMaker's account or create your free account now

2. In the navigation menu, select “List”, then "Publications"

3. Under Newsletter, click "Sign-Up HTML Code"

4. In the pop-over modal window, select Plugins, then Magneto

5. At the bottom of the Modal, click "Generate Key".You should see the following information, take note of them.

• Connection Password

• Connection Initialization Vector

• Your eFlyerMaker account name

• Publication key 

Back in Magento admin section

1. Locate the eFlyerMaker Plugin in admin section

2018-01-05

12

eFlyerMaker

2. Click on the "Configuration" tab located in menu bar

3. In the "eFlyerMaker Connection Properties" column, enter each parameter previously obtained in eFlyerMaker.

• Connection Password This password is only use by Magento to initiate connection with eFlyerMaker. It has no effect without the Blowfish Initial vector. It is not a login password.

• Connection Initialization VectorInitialization Vector is part of the Blowfish highest level of encryption. Blowfish is the default method of encryption in Magento.

• eFlyerMaker account name

4. In the "Paired Publication with Magento Newsletter systems" column, enter the publication key to the proper store. In case you have two or more stores, you may need to create a second publication with eFlyerMaker. Each Publication has its own unique Key. This ensures Magento to synchronise customers to the proper mailing list. Please refers to eFlyerMaker’s documentation to know more about the exclusive feature "Publication System" and how-to manage different languages.

Importing your current Subscribers to eFlyerMaker This section will guide you from Magento to eFlyerMaker on how-to import all your current Magento subscribers.

1. Locate the eFlyerMaker Plugin in the admin section

2. Click on "Configuration" tab located in menu bar

2018-01-05

13

eFlyerMaker

3. In the "Generate csv to export subscribers" column, unselect fields you don’t want to import in eFlyerMaker.

4. Click the "Export Newsletter Subscribers" green button.

Log in back to your eFlyerMaker's account.

1. In the navigation menu, select "List" > "Manage"

2. Under "Master List" click "View & Edit"

3. At the bottom, click the "Add/Edit Fields" button.

4. Use this interface to recreate all the fields you have decided to export from Magento. To avoid import problems later on, we recommend setting the field type as "Varying character" and keep “is mandatory” unselected.

5. Once completed, you should be back in the List Management View.Click "View & Edit" again,

6. Click the "Add Subscribers" button

7. In Option A, click select a CSV, then browse to select the exported csv from Magento (should be in your download folder).

8. Once uploaded, match the source (data columns from your CSV file) with the corresponding destination (list fields created in Step 2) and select the publication you wish your contact list to subscribe to (the default publication is Newsletter).It is very important to select a Publication. The selected publication

2018-01-05

14

eFlyerMaker

should be the same publication you have previously selected for the automatic synchronisation.

See More info on How-To import contacts in eFlyerMaker : https://kb.eflyermaker.com/add-subscribers

How to customize the look of the pop-up. This section will explain where and how to design your popup and adjust it to fit with your website design.

1. Locate the eFlyerMaker Plugin in Magento's admin section

2. Click on the "Options" tab located in menu bar

3. Select the form you want to customize

2018-01-05

15

eFlyerMaker

4. Once your popup selected, the On Load Dialog should update to this :

The following values let you do all the customization you needHere is an exemple :

2018-01-05

16

eFlyerMaker

• BoxThis section controls the box element

• Width

• Box Width

• ex: 600

• Height

• Box Height

• ex: 490

• Background Color

• Box Background Color

• ex: #000000

• Background Image url

• To add an image

• Absolute Url

• Overlay Color

• Window background color

• ex: 0f0f0f

• Overlay opacity

• Window background transparency

• ex: 0.7

• Border Color

• Box border

2018-01-05

17

eFlyerMaker

• ex: #0f0f0f

• Border radius

• To round box corner

• ex: 10px

• Close icon color

• The small X at the top-right of the box

• ex: #fffff

• Box Shadow

• To add a drop shadow behind the box

• ex: 0px 0px 4px #666666

• Custom Classes

• To add your own CSS class

• Classes are added in the element #efmfb_popup_form

• Do include the dot

• ex: bolder

• Header (text/html)

• To customize what is visible before on top of the form

• Both text or html is accepted

• Code is taken as is, there is no validation by the plugin

• ex: <h2 style="color:#ffffff; padding-top:2.8em; line-height: 0em;">Black Friday Deal!</h2><h4 style="color:#ffeb3b; ">Signup to the Newsletter</h4>

• Footer (text/html)

• To customize what is visible before on bottom of the form

• Both text or html is accepted

• Code is taken as is, there is no validation by the plugin

• content appears directly after the submit button

• ex: <h2 style="color:#ffffff; padding-top:2.8em; line-height: 0em;">Don't Wait!</h2>

• Box Title

2018-01-05

18

eFlyerMaker

• Text

• Yet another place to add text and customize

• Text Color

• Image url

• To add an image on top of the form

• Useful to add small banner

• Image position

• left | center | right

• Custom style

• To add a css style in the current div "Box Title"

• Box Body • Background color

• To adjust the background color of the inner form

• ex: #dd3333

• Background color opacity

• To adjust the transparency of the Background

• Custom style

• To add a Style style in the inner form

• Custom class

• To add a css style in the inner form

• Box Animations • Show animations

• To choose a pop-in visual effect

• Some effect may appear different depending on the browser version.

• Hide animations

• To choose a pop-out visual effect

• Some effect may appear different depending on the browser version.

• Delay

• Time the browser waits before pop-in

2018-01-05

19

eFlyerMaker

• Rotate box on success response

5. "Preview Popup"The preview will display the popup with an animation. Note: Styles may varying du to specific CSS from web WebSite Template.

6. Once your are satisfied, click "save"Important: If cache management is enabled make sure to reload the content. Go to SYSTEM > Tolls > Cache Management Click "Page Cache checkbox", select "Refresh" from the top of page, then click Submit.

CSS References #efmfb_popup_form

.efmfb-modal-dialog.efmfb-popup-container .efmfb-popup

#close_popup_container.efmfb-popup-body-container

.title

.efmfb-popup-header

.efmfb-popup-body

.efmfb-popup-footer

2018-01-05

20

eFlyerMaker

API References • Request to eFlyerMaker

• subscribehttps://campaign.eflyermaker.com/eflyerprofilemanager/en?action=Campaigns_subscribe&p=[publication_ID]&email=[email]&publication_agreement=1&consent_policy=1&simple=simple

• unsubscribehttps://campaign.eflyermaker.com/eflyerprofilemanager/en?action=Campaigns_unsubscribe&e=[email_encrypted]&account_name=[eflyeramker_account]

• Callback to Magento

• unsubscribehttp://[magento_ecommerce_site]/eflyermakerpublic/subscriber/unsubscribe/?email=[email_encrypted]&source=eflyermaker

• Encryption validation

• Once configurations are saved, the plugin will validate "Connection Password", "Connection Initialization Vector" and "eFlyerMaker Account name", then it creates an action "set_custom_callback".

• Send the callback info to eFlyermakerhttps://campaign.eflyermaker.com/eflyermaker/en?action=Campaigns_set_custom_callback&source=magento&url=[encrypted]&account_name=[eflyeramker_account]

Technical Information and Online Videos https://kb.eflyermaker.com/magento-signup-form-plugin

https://kb.eflyermaker.com/magento-signup-form-plugin/FAQ

2018-01-05

21