Create a Branded Popup for Your Website

 

Adding a popup to your website can be one of the most effective ways to grow a list of subscribers. A popup is an online form that is presented to website visitors while they browse. It is used to opt people in to receive your messages and to collect information that can be stored on a contact’s record in SlickText.

SlickText’s Website Popups tool allows you to create a custom branded popup and install it on your site. You can build one from scratch or use any of our fully customizable, pre-built templates.

 

In this article:

Tour the Website Popup Builder

Creating, Designing, and Editing a Website Popup

Defining Popup Behavior

Defining Popup Targeting Rules

Activating and Launching a Website Popup

 

Tour the Website Popup Builder

Website Popups are located on the Tools page under List Growth.  

1. Once you’ve logged into SlickText, click on Tools in the left navigation menu. 
2. Click on Website Popups. This will take you to the Website Popups page where you can view and manage all of your website popups.
3. Click the Create Popup button or click on any saved popup to navigate to the popup builder. 

Here’s a brief tour to help you understand the pieces of the Website Popup Builder that allow you to create your popup, test it, and launch it on your own website.

Popup Canvas: The popup canvas displays your popup. You build your popup by dragging elements such as text boxes, images, or buttons onto the canvas.

Sidebar Menu: To the left of the canvas, there is a sidebar menu. Click to expand each menu to build and edit your popup. 

There are five main sidebar menu items:

• Setup — Defines the basic setup of your popup.
• Design — Contains the elements that are the building blocks of your popup. Each of these elements has its own sidebar menu.
• Behavior — Determines when and how your popup is displayed to site visitors.
• Targeting — Allows you to target which pages on your website will display your popup and set the dates it will be displayed.
• Messaging — Allows you to edit the Double Opt-In Messages that are sent to people who subscribe using your popup. They'll have to reply with the word YES in order to complete the subscription process.

In addition to these main sidebar menus, there are additional menus for each of the elements that can be added to the popup. For example, buttons, images and fields have their own menus you can use to customize that element. Clicking on elements on the popup displayed on the canvas will automatically show the appropriate sidebar menu.

Other Toolbars: Underneath the canvas and sidebar menu, there are additional tools that allow you to do things like preview, test, and launch your popup.

• Minimized, Popup, Success - Toggle between the various popup views to edit them. 
  • Minimized — This is what website visitors will see if you have the minimized view enabled.
  • Popup — This is the main website popup.

• • Success — This is what website visitors will see after they have successfully submitted their information via your website popup.

• URL Preview — Enter a website address where it says “example.com” to add a webpage to the canvas and see how your popup will look on your website. This will also allow SlickText to populate color choices that match your website when editing popup elements.

• Preview and Testing — Once you’ve saved your popup, you’ll see a beaker icon you can click on to preview or test your popup.

• Undo / Redo — Undo or redo previous changes.

• Hidden Elements — SlickText allows you to hide certain elements on different devices. Click the eye slash icon to see hidden elements.  

• Device View — Click this to view and edit how your popup looks and acts on different devices.

• Active — Toggle on to activate your popup. This will cause the popup to display on your website according to the behavior and targeting rules you set.
• Save — You must save changes you make to your popup.

Creating, Designing, and Editing a Website Popup

The SlickText Website Popup Builder allows you to start designing from a blank canvas or edit a pre-built template. For the best experience, it’s recommended that you start with a template.

1. Once you’ve logged into SlickText, click on Tools in the left navigation menu. 
2. Click on Website Popups. This will take you to the Website Popups page where you can view and manage all of your website popups.
3. Click the Create Popup button or click on any saved popup to navigate to the popup builder. 
4. Expand the Setup menu item on the sidebar and complete the information.

• Name and Description — These are for your internal use and are not seen by your website visitors.

• Add contacts to one or more lists — You can define one or more lists your contacts will be added to if they opt in via this popup.  Alternatively, you can leave this field blank and your contacts will not be added to a list. 

• SlickText Tag — This is the code snippet that you add to your website to power your popups. If you’ve previously added the SlickText Tag to your website, you will not have to add it again for additional popups.

 5.  Expand the Design menu item to begin building or editing your popup. Select a template from our large library of pre-built popups or start from scratch by dragging design elements and dropping them directly onto the canvas. (See below for a brief description of these items.)

  6.  When you drag an element to the popup or click on an element that is already on the popup, SlickText will automatically display the specific menu for that element on the sidebar. Expand the menu items to fully customize your popup.

  7.   Click Save.

  8.   Repeat the editing steps for the Minimized and Success views.

 

Design Elements

Here is a brief explanation for the elements in the Design menu.

Term	Definition
Header / Text	A block of text that is formatted by default to serve as a header or website content. Note: If you’ve selected “your site’s font” as the font choice, it may not display with this font within the builder, but it will display that way on your site.
Image	Allows you to search a high resolution image library or add your own images to your popup.
Field	This is a data collection element. Any field available on the Contact record in SlickText, including your user-defined custom fields, can be added to a popup.
Dropdown	This is a data collection element that provides a list of options for website visitors to pick from. Any field available on the Contact record in SlickText, including user-defined custom fields, can be added to a popup as a dropdown.
Button / Links	Buttons and Links perform one of the following actions when clicked on by the website visitor: submits the form, minimizes the popup, closes the popup or navigates to a specified url.
Icon	Allows you to add icons from the SlickText icon library.
Close X	Allows users to close the popup.
Compliance Statement	Pre-written (editable) opt-in compliance statement.
Container	Allows you to treat more than one element as a single group. Drag additional elements and drop them into the container.
Two Columns	A container that has two columns.
Three Columns	A container that has three columns.
Error Text	While you cannot edit the content of error messages, you can decide where to show them and how they look to website visitors.

When you click on an element on the popup, SlickText will automatically display the specific menu for that element on the sidebar as well as a canvas element toolbar.

• Delete — The trash can icon allows you to delete the element that is selected.
• Duplicate — Clicking the duplicate icon will copy and paste the element with its current design edits.
• Up Navigation — The up arrow allows you to more easily navigate from one element to the next higher element. For example, click the arrow to move from an element to its container.
• Drag — Click and hold the drag icon to move an element around the popup
• Image — Allows you to add or change an image.
  
  

Defining Popup Behavior

There are two types of behaviors you can set for your popup: when and how your popup is displayed to website visitors, and how long to keep your popup hidden from visitors who have closed it.

Show Behavior

• Choose to show your popup to visitors on their first visit to your page, or define how many times they need to visit a page before they see your popup.
• Show the Popup: 

• • On Page Load — Displays the popup as soon as the page loads.
  • On Exit Intent — Displays the popup when it appears that the visitor is about to leave the page.
  •  After a Delay — Choose the number of seconds after page load before your popup is displayed.
  • After a Period of Inactivity — Choose how many seconds of no visitor activity before your popup is displayed.
  • After the Visitor Scrolls — Choose how far down the page (percentage) a visitor must scroll before your popup is displayed.
  • After Text is Scrolled into View — Define the website content that must be scrolled into view before your popup is displayed.
  • When Triggered by Javascript API — Define when your popup is displayed by a Javascript trigger.
• Hide from Known Contacts — When toggled on, the popup will not display recognized contacts that are in SlickText. 
• Start Minimized — When toggled on, the popup will display in the minimized view unless someone clicks on the minimized popup.

Close Behavior — Choose how long after a visitor closes a popup before it is displayed to this visitor again.

Click Save after making any changes.

Defining Popup Targeting Rules

Targeting allows you to define which web pages your popup will display on, the dates that it will display, and on which devices it will show.

Page Targeting — Add a show rule to define which pages your popup will be displayed. A hide rule will determine which pages they will not show on.

1. Expand the Targeting menu item in the sidebar. 
2. Click on Add a Show Rule or Add a Hide Rule.
3. Define the rule.
4. Repeat to add additional targeting rules.
5. Click Save.

Date Targeting — Add a show date to define when your popup can begin displaying. A hide date will define when your popup will no longer be shown.

1. Expand the Targeting menu item in the sidebar. 
2. Click on Add a Show Date or Add a Hide Date.
3. Enter the date and time.
4. Click Save.

Device Targeting — Toggle on to display the popup on the device. Toggle off to never show the popup on the device. Click Save.

Activating and Launching a Website Popup

After building your popup and defining its behavior and targeting rules, you can now preview, test and launch your popup.

1. Expand the Setup menu item in the sidebar
2. Copy the SlickText Tag and add it to either the footer of your website, or individual pages you want to be eligible to display the popup.
   • Make sure your page and date targeting rules are configured to allow the popup to display.
   • If you've previously added the SlickText Tag to your website, you don't need to do this again.
3. Click the beaker icon in the toolbar underneath the canvas to preview and test your popup.
   • Preview allows you to see what the popup looks like on your website without regard to the behavior and targeting rules.
   • Test allows you to test the behavior and targeting rules as well as see what the popup looks like on your website.

  4.   Toggle on Active to activate your popup.