After you installed the extension it will appear inside CMS->Magebird Popup and you are ready to create first popup. You can choose one of the predefined templates or create your popup from scratch.

Let's create popup with background image. For better unserstanding the instructions see the below video. To insert background image we need to insert table first. If you don't have any image yet you can use pexels.com which is a great source to find Creative Commons Zero images. CC0 images are free to use in any commercial project, no contribution is required.

As you will see we inserted text inside image using image editor. Of course you can insert text also using popup editor in the same way you edit cms pages, you can also use html code. We will cover this method in next tutorial. But sometimes it is easier to use image editor and insert text inside image. www.canva.com is another great free service to create nice popup image with text and different elements. Once you have image you can simply insert it inside popup editor.

Once you inserted table go to table properties and select 1 Columns and 1 Rows. Width should be 100% to make it responsive. Then click Insert button. Once table is inserted click inside with right mouse button and select Table properties again. Click Advanced and select your background image. We want background image size to adjust automatically. To do that insert inside field Style this: background-size:100% 100%; Don't remove the currect text inside this field, just append that to the end.

Table image is now inserted, but you need to adjust table height and popup width. To adjust table height just insert some empty lines inside table. To set popup width use fields "Popup content width", "Popup width unit" and "Popup content max width (in px)". First select inside "Popup width unit" option Percentage (%). Inside field ¸"Popup content width" write 90. Inside "Popup content max width (in px)" we will put 713 which is the same as background image width in our case. If you have different size of image put different number here. This means popup will be 90% of screen width but never larger than 713px.

Now you can insert newsletter widget. We will give coupon code for 10% discount to all subscribers, each customer will receive different coupon code which will be valid only for 1 day. First we need to create new shopping rule that will be used for coupons. Once shopping cart rule is created you can use it inside newsletter widget.

After that we will insert newsletter widget inside popup. Click with mouse to the line where you want to insert newsletter widget. Click insert new widget icon and select Popup newsletter. Inside field Newsletter form width insert 85 and inside Newsletter form width unit select Precentage (%). This means the width will adjust automatically and it will be 85% of table width. You can also select form template. Inside field Coupon type we will choose option Auto generate coupon code and then we will select shopping cart rule. If you want to set expiration time for each coupon code use field "Coupon expiration (in minutes)". Now final step inside newsletter widget is to modify field "Text/content after subscribe". This is where coupon code will be shown (see the video).

Now we would like to put form to the center. There is a small bug inside Magento editor and using Align Center icon won't do the trick in live preview. To center the newsletter widget click "Show/Hide Editor". Find <p> before widget type="magebird_popup/list"}} and change it to <div style="text-align:center;">. Then find </p> after }} and change it to <div> (see the video for illustration).

Popup is now almost ready. If you preview it looks fine. We are going to change a few more things now. I will remove white border and change close icon. To do that click tab Appearance, css, script, change "Border size in px" to 0 and select close icon you want to use.

We need also to show popup nicely in mobile devices. The background image will automatically adjust browser width, but it wont look perfectly because it will scale. Better option is to create separate popup just for mobile devices with smaller image. In this way you can also track popup results for mobile devices seperately.

First change Devices for current popup. Field Devices is located inside tab Other conditions. Select Desktop & Tablet. Save popup. Now duplicate the first one. In the second popup we will select inside Devices option "Mobile". Now do inside editor right click and select Table properties and change background image. We suggest you to use image that is 320px wide. We will also change "Popup content max width (in px)" to 320. Your second popup for mobile devices is now ready as well.