Contact Forms Wizard: Pop-up/Exit pop-up

Advanced Pop-up Creator is a tool that facilitates the creation of pop-up and exit pop-up forms.

Pop-up is a window that displays in the browser window and contains specific contents. SALESmanago uses pop-ups as contact forms and at the same time changes it for a tool that acquires leads within the website.

Exit pop-up is a window that displays in the moment when a user wants to go on other website or close the browser window. So to be more precise, it is a moment when a cursor is placed outside the window.

Thanks to the advanced Pop-up Creator you can create a pop-up and modify all its options.

Benefits:

  • a complete tool for acquiring new contacts on the website
  • a possibility of creating your own templates in a modern drag&drop creator or HTML editor

 

GO TO GENERATE LEADS => POP-UP/ EXIT POP-UP


Main steps

1. Start 
2. Choose pop-up type
3. Set the basic options
4. Create a pop-up in Drag&Drop creator / Create a pop-up in HTML editor
5. Create Thank you page or Redirect to another page 
6.Preview and Settings
7. Confirmation email
8. Options
9. Final settings
10. Add the pop-up code on the website


Start

 

[1] Create new + – click to create a new pop-up.

Choose the advanced editor.


2. Choose pop-up type

 

[1] Standard Pop-up
[2] Exit Pop-up – it is a window that appears in the moment when the user wants to leave the website

Regardless of the pop-up type, you will go through similar settings.


3. Set the basic options

 

[1] Pop-up name – type in the name that will identify the pop-up in the system.

[2] Select the main owner of new leads – type in the email address of the system user who will be the main owner of the contacts generated by the pop-up.

[3] Please enter your google analytics id – you can enter your google analytics id in order to receive statistics of the created pop-up on your Google Analytics dashboard. To find your ID, you need to log into your Google Analytics account, choose Account column then select an account on an unfolding list. Next, you need to choose the service in the Property column and click Tracking Info → Tracking Code.

[4] Create pop-up in Drag&Drop creator – select this option to customize the layout of the form in an easy way.

[5] Create pop-up in HTML editor – select this option to work in HTML editor.


4. Create pop-up in Drag&Drop creator

Begin with the choosing the structure of your pop-up. You can find them in Layout section. Then, proceed to the Widgets section where you can find elements with which you can fill in the pop-up. Drag the chosen elements from the menu and drop them in the place of your choice. You can modify and delete the elements.

>>>Learn more the widget settings of the sign-in form

Click   to display additional settings for the website content

[1] Background color – choose any color of the background you like or leave this field empty if you want the background to be transparent.

[2] Page width – adjust the width of the page by means of a slider. Remember, the change in the width can affect the appearance of previously set elements.

[3] Responsively move columns down when window with is lower than – this option lets you adjust when too large elements will be responsively moved to the lower part of the pop-up.

[4] Page image URL – paste the URL address to which the user will be redirected after clicking this image.

[5] Page color – choose the color of the page.


Create a pop-up in HTML editor

You can insert a ready-made pop-up template or create it from scratch by means of HTML6.


5. Create Thank you page or Redirect to another page 

After filling in the form, the contact will be redirected to the thank you page. You can create such notification by yourself, choose ready-made templates or set redirection to other website.

[1] Create new Thank You Page – select this option to use Drag&Drop creator to customize the structure and layout of a Thank you page

[2] Redirect to another page – select this option if you want to use existing landing page or insert a URL address to which the contact will be redirected

 

Click Next once you’re ready with Thank you page or redirection.


6. Preview and settings

In preview section you can verify whether the form works correctly and thank you page looks properly.

[1] Show example website on preview – click to see the preview of the form on example website.

[2] Contact form / Thank you page – click to see how contact form looks like.

Below the preview window, there are settings that you should go through.

Pop-up window settings:
[1] Set the height of the pop-up window

[2] Set the width of the pop-up window

[3] Set the color of the pop-up window background. Select the option to set the colorless background or choose a color from the color palette.

[4] Set the frame color of the pop-up window. Select the option to set the colorless background or choose a color from the color palette.

Pop-up display settings:

[5] Adjust the space between the pop-up and the upper edge of the page. Select Scroll page with pop-up (fixed position) so that pop-up won’t change its position on the website while scrolling.

[6] Adjust the space between the pop-up and the left edge of the page or select center option to place the pop-up in the middle of the page.

[7] Dim the page under the pop-up – use a slider to adjust the dimming from the brightest (1) to the darkest (9)

Closing image settings:

Default image for exit button is X icon. You can either modify it or insert your own graphics.

[8] Enter a URL of selected graphics that replaces the default closing image.

[9] Set the height of the closing image

[10] Set the width of the closing image

[11] Set the vertical position of the closing image with regard to the right upper corner of the pop-up frame

[12] Set the horizontal position of the closing image with regard to the right upper corner of the pop-up frame

You can track the changes in the preview window. If everything is correct, click Save.


7. Confirmation email

In the next two steps, you can configure automatic message for contacts, who left contact details in the form. The aim of this message is to confirm saving the contact in the database.

Drag chosen elements of the message.

Click    to display additional template settings, which let you change the color, width and the transparency of the background. Once you finished creating confirmation email, click Next.


8. Options

[1] Add the tag to the acquired contact – if the contact fills in the form, then a tag can be automatically assigned to this contact. You need to type in the name of the tag that you want to be assigned to a contact after filling in the form.

[2] Add the tag to the contact who confirmed the subscription – if the contact confirmed the subscription in the form, then a tag can be automatically assigned to it. You need to type in the name of the tag that you want to be assigned to a contact after confirmation of the subscription.

These settings are optional.

IMPORTANT: We recommend such a nomenclature of the tags that will indicate the way of generating contacts. It’s useful while generating Lead Generation analytics where you need to determine the source of contact acquisition.

[3] Send notification when contact fills a pop-up form – tick the Let the owner know option if you want that the owner of the contacts receives notification about a new contact.

Once the settings are selected, click Next.


9. Final settings

[1] Active – with this slider you can either activate or deactivate the pop-up

[2] Pages where your pop-up will appear – in these two fields you can paste URL address where your pop-up will display and where your pop-up won’t be active, respectively.

3] Who should see your pop-up – you can choose the recipients of the form. You can choose from monitored and anonymous contacts. However, you may address the pop-up form to all contacts.

[4] When to display your pop-up – you can set the time of displaying both pop-ups or exit pop-ups.


10. Add the pop-up code on the website

[1] Download the code – click to display the code you need to place on the website. A window with a pop-up code will display (see below)

[1] Your pop-up code – paste this code on your website before <body/> section. You need to do it only once. Since then all your pop-ups will display on this particular website. You can use this code on other pages.

[2] Display pop-ups only in windows wider than x pixels – you can restrict the display of pop-ups to screens of a particular size. Use this option, if you think that displaying the pop up on a small screen (e.g. a smartphone) may make navigating on the website harder.

Finally, click Copy to clipboard and place the code on the website. From now on, the pop-ups will be active on the website.

IMPORTANT: One code enables all pop-ups on a particular website, so if you create more pop-ups, you don’t need to place a code on the website again. 

to subscribe
our newsletter

Follow us