eflyermaker Sign-up Forms Builder 2.0.5 for Magento 2.x User Guide 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. 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 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 5
eflyermaker 5. Copy all the JSON code Configure your Magento 1. Locate the eflyermaker Plugin in the Admin section 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 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 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 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 popup" 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 10
eflyermaker 3. Copy all the blue text and make sure to select "is a popup" 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. 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 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 Vector Initialization 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 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 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 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 need Here is an exemple : 16
eflyermaker Box This 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 17
eflyermaker Box Title 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> 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 Delay To choose a pop-out visual effect Some effect may appear different depending on the browser version. Time the browser waits before pop-in 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 20
eflyermaker API References Request to eflyermaker subscribe https://campaign.eflyermaker.com/eflyerprofilemanager/en? action=campaigns_subscribe&p=[publication_id]&email=[email]&publication_agr eement=1&consent_policy=1&simple=simple unsubscribe https://campaign.eflyermaker.com/eflyerprofilemanager/en? action=campaigns_unsubscribe&e=[email_encrypted]&account_name=[eflyeramker_ account] Callback to Magento unsubscribe http://[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 eflyermaker https://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 21