This guide explains how to use Hustle Pro’s online marketing and business development features to grow your company with a variety of opt-in and social sharing tools. 

Use the index on the left to quickly locate usage guidance on specific features.

If you haven’t installed Hustle Pro yet, then you should visit the Hustle page, where you can explore the plugin’s many features, download the free version and where WPMU Dev members can install Hustle Pro directly to any connected site.

11.1 Dashboard

Link to chapter 1

Install and activate Hustle on your site or network then click the Hustle Pro tab in the Admin Menu to access a fly-out menu with links to the plugin’s features.

Click Dashboard to proceed.

The Dashboard

The Dashboard provides access to every module and contains the stats monitor, overview panels for each module and a link to the WPMU DEV Hustle documentation.

Stats Overview

The Stats Overview provides a quick view of key data from your ongoing marketing and business development efforts. It’s a time saver for busy admins who need to quickly check a site’s status and move on, if all is well. If there is a problem with a module, the stats monitor is one of the first places symptoms are likely to appear.

For example, if you know there should be 17 modules active, the number 16 in that position would be a red flag. An unusually large drop in the average conversion rate could indicate that some modules are not functioning. If a site normally converts 10 users a week, and the date of the last conversion was five days ago, something is definitely not right.

The stats overview displays the following information:

Active modules (1) – This is the number of modules currently engaging users. A site may have many modules, but only those currently in use will be displayed. Inactive modules are displayed in the overview panels below the Stats overview.

Last Conversion (2) – The date of the last conversion.

Average Conversion Rate (3) – The average conversion rate—the percentage of site visitors who complete a transaction (make a purchase, subscribe to a newsletter, etc.)— is the fundamental indicator of a site’s performance, particularly for ecommerce sites.

Total Conversions (4) – The total number of conversions for the site.

Most Conversions (5) – The name of the module that produced the most conversions. It’s very valuable to know which modules are most effective with your audience.

View Documentation

The View Documentation button accesses the usage document you are currently viewing.

11.2 Creating and editing modules

Link to chapter 2

New pop-up, slide-in and embed modules are created the same way and share many customization options. This section covers those shared features, while customization options that are unique to a specific module are covered in the module-specific sections below.

If you’re seeking guidance on importing modules, see the Importing Modules section.

To create a module, either click the Create button in the Dashboard panel for the desired module type, or select the module type in the Admin Menu and then click the Create button.

Edit Module Tabs

Popup, slide-in and embed modules share many editing options which are organized into tabbed categories shown in the image below. The settings discussed in this section apply when creating or editing any of the three module types.

Content

Content includes the elements you add to a module and the custom text you apply to those elements. The list below provides examples of the content options available for the three primary module-types:

Title (1) – The module’s main title as it will appear to visitors.

Subtitle (2) – A subtitle that appears below the title.

Feature Image (3) – Use the image uploader to add a feature image. Research indicates modules containing featured images have a much higher conversion rate than those without.

Main Content (4) – Use the editor to create and format a custom message.

Call to Action button (5) – The CTA button allows you to link to another page.

‘Never see this again’ Link (6) – When clicked, the module ceases to appear when this user visits the site.

Emails

Email opt-in modules include a basic form to collect user information. Use the email options to customize the form’s fields and submission behavior and to configure a confirmation email if one is desired.

Opt-in Form Fields

You can customize the email opt-in form by adding, removing and editing the form’s fields.

Inserting and editing fields
Click Insert Field to add a field(s) to the form.

Select the fields you want to add to the form. Multiple fields can be selected and inserted at the same time. When ready, click Insert Fields to insert the fields.

Click the edit icon (gear) to open a drop-down menu and then click the Edit Field option to open the Edit Field modal.

The Edit Field modal organizes customization options under three tabs: Labels, Settings and Styling.

Labels tab
These are the terms displayed with each field that identify the information users should enter. You can add placeholder text to most fields to help users understand the field’s purpose.

Settings tab
Depending on the module, the Settings tab will offer one or both of the following options:

Optional/Required – When adding a new field, or editing an existing one, you can specify whether or not the field is Required in the Settings tab. When you select Required, an additional field will open so you can enter an error message that the user will see if they leave the field blank or incomplete. Each required field will have an asterisk ( * ) in the form to alert your user that the field must be answered.

Validate Field – With validation enabled, Hustle will check email addresses, time data, website URLs and dates to verify that the submitted data is in a valid format. Enabling this will let you enter a custom message users will see if the data is invalid.

Styling tab
Additional CSS Classes – You can set the Additional CSS Classes in the Styling tab in the field settings. Here you can add a class to the field so you can add custom CSS (to add multiple classes, use a space to separate). This will help you, for example, separate one field from the others by adding some padding to it or to color a text of a certain field.

Submission Behavior

Use the Submission Behavior options to determine what happens when an opt-in form is successfully submitted. Options include returning users to the orginial page while displaying a success message or redirecting users to a new page.

Success message
Use the editor to create a custom message that users will see when the form is successfully submitted.

The Auto close options at the bottom determine how long the success message will display.

Redirect
Enter the URL for the page you want users to be redirected to following a successful submission.

Automated Email
Enable this feature to automatically send an email to users following a successful submission.

Use the fields provided to determine if the email is sent immediately or after a specified delay.

The email can be delayed anywhere from a few seconds to several days using the Delay option or can be scheduled to be sent at a specific time using the Schedule option.

Integrations

Hustle supports the integration of several apps into your modules, allowing you to share submission data with third-party services.  Before apps can be integrated into a specific module, however, they must be connected to Hustle. Each app connects in a unique way, so we’ve created a separate Integrations section with unique guidance for each app, which you will find here, Integrations.

Appearance

The elements contained in each module are created in the Contents tab, and the Appearance tab is where those elements are given their custom design. They key to a good design is to add the elements you want in the Content section first, then customize the module’s design.

Layout

Use the layout feature to decide how you want the module’s elements positioned relative to one another. Try different layouts and use the Preview feature to see which one works best. For example, the images below of are of the same module with the only difference being the selected layout.

Default Layout
Content Focus Layout
Feature Image

Use the feature image controls to adjust the position of the feature image with the layout. Remember, the selected layout determines the feature image’s default position. The feature image controls allow you to make subtle changes in the way the image appears.

Vanilla Theme

The Vanilla theme doesn’t affect the module’s contents or the selected layout, but it disables all other design features. The Vanilla theme is useful when using custom CSS to design your module.

The Vanilla theme hides all styling but leaves the content and layout unchanged.
Form Design

Use the Form Design controls to customize the appearance of any form fields in a module. Module’s with no form fields, naturally, will have no need for this feature. The images below show samples of how these controls can modify the appearance of a module’s form design.

Colors Palette

Use the Colors Palette to choose a color scheme from the default options, modify that default scheme if you wish or create your own custom palette.

Use the drop-down menu to choose from one of six pre-defined color schemes.

Below are examples of how the default color schemes make varying the appearance of your modules quite easy. These are the same module, each with a different default color scheme applied.

A module with the Ectoplasm color scheme applied.
The same module with the Gray Slate color scheme applied.

To modify a default scheme or create a custom palette, begin by clicking Customize the Color Palette.  A list of all the potential content options will appear, each with it’s on color picker. Use the color picker to customize the color settings for any element.

Drop Shadow

Enable the drop shadow feature, then choose the color, the x and y offsets and add a blur if you wish to create a custom drop down shadow.

Here’s a sample of how the drop-shadow feature displays.

Enable Custom Size

Hustle adjusts the size of a module to fit the elements added in the Contents section, and in most cases, this works well. More importantly, the Hustle can always adjust the size of a module to be responsive to different screen sizes. Depending on the custom size you enter, if is possible the module will no longer display as intended on some screens.

If you choose to modify the default size, be sure to verify that your module appears as intended on various screen sizes. feature. We recommend limiting the custom size to desktop devices only by enabling the Desktop Only control. Enabling this feature will apply the custom size to desktop devices but will use the default size to ensure a responsive design.

Simply adjust the module’s width and height sizes, using the Preview button to check your design.

Custom CSS

You can design a custom modal to display your module’s contents using CSS. Use the selector buttons provided to quickly design a custom module.

Visibility

By far, the chief complaint about pop-ups it’s that they appear too often to people who have no use for them. Ensuring that marketing messages are as precisely targeted as possible will greatly improve conversion rates while also minimizing the potential annoyance to uninterested users. Hustle allows you to choose where and under what conditions your module will appear by applying conditional visibility rules.

Hustle uses conditional logic rules that, strategically configured, will ensure your module only appears to users you want to see it without interfering with the experience of users for which the module has no value. Remember, in the absence of a rule preventing it, all modules will appear on every post and page of your site. If you have more than one active pop-up, you can see how that might get real old, real fast for returning users.

For example, a visibility rule can dictate that a module should only appear to logged-in users, or conversely, that it should appear only to users who are not logged in. A more complex example would be a rule that displays the module to users who are not logged in and who accessed a specific page or post directly from a search engine, or even more interesting, from a specific URL.

Naturally, Hustle supports conditional rules that dictate on which pages and posts a module will display, but it also provides 10 conditions which can be used to refine basic page/post rules. Each of the conditions below can be configured  to authorize or prevent a module from displaying:

Category

Logged-in Status

Visitor’s Device

Source of Arrival

Visitor Commented Before

Tags

Number of times visitor has seen module

Referrer

Specific URL

Visitor’s Country

We recommend that you take the time to carefully consider where and when you wish a module to appear before configuring visibility rules.

To begin, click Add Conditions and a pop-up menu will appear from which you can configure a new rule.

Select the conditional rule options you wish to configure and click Add Conditions. Depending on your strategy, it is possible to have more than one condition of the same type applied to the same module. For example, you may want to hide the module from users referred from one location and display it to users referred from somewhere else. To do that, you will need to add two Refferer conditions and configure them accordingly.

Each condition can be configured to allow or disallow the module based on that condition.  The slider setting that appears at the top of each condition determines whether, when met, the condition will enable or disable a module.

Each condition has a drop-down menu that, when opened, reveals the settings options for that condition. These options are different for each condition. To add items to the post, page, tag and category conditions, click the text input area to reveal a list of the site’s pages, posts, tags and categories, and then click the items you want to include in this rule. Click the x next to any item to remove it from the rule.

Other conditions simply require enabling a slider, such as the Logged In Status rule.

Some rules require entering text that cannot be captured a presented in a neat little menu, such as the Specific URL condition. In these cases, simply enter the URL following the “one line=one URL” rule. Remember to enter only the domain name. Do not include http:// or https://.

Behavior

The Behavior tab settings determine when and how a module appears and exits a page.

Triggers

The point at which a module appears on a page can be important. You may want visitors to see the module the moment a page opens, before the they have time to view or interact with the page’s content. On some pages you may wish to give visitors time to view the page’s content before the module appears.

To set a trigger, select the tab of the desired trigger and configure the settings as described below.

Time

Modules will appear after the indicated period of time passes. Select a unit of time from the drop-down menu and enter the delay period in the Add delay field.  A delay of 0 (zero) triggers the module the moment the page loads.

Scroll

The scroll trigger displays a module  when the page is scrolled by a certain percentage or when a user scrolls past a designated CSS selector.

The first thing to do is select the radio button that corresponds with the scroll trigger you prefer.

Set the scroll percentage in the field provided. Use the Preview feature to find the scroll point at which you want the module to appear.

To use the CSS trigger, enter the class or id of a selector,and the module will be displayed the first time the page scrolls passed that selector.

Click

There are two types of click triggers. The first (Click on existing element) involves adding a trigger to any HTML element on the page that will display the module when users click that element; and the second (Render an new button) adds a new  button anywhere on the page that triggers the module when clicked. Both types of click triggers can be used at the same time, and in fact, multiple instances of each trigger can be added and active at the same time on any page.

Click on existing element

There are three important things to remember when adding click triggers to HTML elements:

  • Adding a trigger to an HTML element does not change the element’s appearance. Users will not know the element is a trigger unless they click it.
  • Triggers added to HTML elements will temporarily override any other functionality the element may have.
  • Triggers are active only when the module to which they apply is active. Once a module has been closed, either by user action or by automatic closing method, the trigger is disabled.

Those last two points require some elaboration. Say, for example, that one of the click triggers you configured is also a hyperlink.  The first time a user clicks that link it will not open the target URL as it normally would, but instead will trigger the module.  Once the module is closed,  the trigger will be disabled, and the hyperlink’s functionality will return. If the user clicks the link again, it should work fine.

To turn any HTML element on a page into a trigger, add the element’s selector to the field provided. You can turn as many HTML elements as you want into triggers by adding multiple selectors to the list, separating each with a comma, as shown in the example below.

How to identify an element’s selector

To identify an element’s CSS selector in Chrome, Firefox, Opera and Internet Explorer:

First, right-click on the element, and choose the Inspect or Inspect Element option.

This will open a developer console with the element’s code highlighted. Now, in the console:

  1. Click the three dots to the left of the highlighted code to open the menu.
  2. Click Copy
  3. Click Copy selector

The element’s selector is now in your clipboard. Paste the selector into the field provided to add a trigger to the selected element. Save your changes, and use the Preview button to test the trigger.

Render a new button

When the Render a new button feature is enabled, Hustle creates a shortcode that can be inserted virtually anywhere on a page with the shortcode feature available in the WordPress editor. By default, the button contains the label Click, which you can see below nested within the shortcode.  That text can be modified as necessary by replacing the word “Click” with the text you want to appear in the button.

By default, the button has the appearance of a typical hyperlink, but you can modify the button’s appearance with CSS added to the WordPress customizer,  Admin Menu > Appearance > Customize > Custom CSS. The image below shows the button in its default state and the same button customized with CSS. Note that multiple buttons can be added to any page.

Exit intent

Exit intent triggers will display a module when users’ mouse moves toward a page’s close options, typically the close (X), forward or back buttons. The feature ensures that users see at least one conversion option before they leave a site.

Trigger once per session

Enabling the Trigger once per session will ensure that a module only appears once. This prevents a an endless loop of the module appearing, being closed and then appearing again as the user attempts to leave the page again. It also ensures that users will see the module on a given page only once if they visit the same page multiple times in a single session.

Add delay

Enabling the Add delay feature will delay the module’s appear for the time frame set in the fields provided.

Ad block

Enabling the Ad block feature will display a module every time Hustle detects Ad Block active in a user’s browser.

Amination Settings

Modules can be animated as they appear and as they exit the screen. Choose the desired entrance and exit animations from the drop-down menus, and use the Preview button to preview the animations.

Additional Closing Methods

Most modules require user interaction to trigger their closure. These options are intended to resolve those instances when users do not interact with the module.  They include:

Auto Close – Close modules after the period of time you set by configuring the fields provided.

When clicked outside – Close modules when users click the page anywhere outside the module.

After CTA Conversion – Many Call-to-action buttons redirect users to a new page, and if configured to do so, will close the original page in the process. However, if a CTA opens in a new tab or does not require redirection,  these controls ensure the module does not remain open on the original page  indefinitely.

Closing Behavior

These settings determine how a module will behave when it has been closed by a Trigger or any of the Additional Closing Methods.

If either of the Closed by checkboxes is selected, this behavior also will occur when users close a module by clicking the X or after the period of time set in the Auto-close setting.

The Behavior options include:

On this post/page – This setting ensures that users only encounter a given module once on any given page, regardless of whether or not they interact with it. This setting will not prevent users from seeing the same module on another page where it is configured to appear.

Use the Reset this after field and drop-down menu to choose a future point in time when the module will once again be displayed to users for whom it had been disabled on a given page.

Across the site – This setting will disable a given module on every page it appears once a user has visited any one of those pages, regardless of whether or not they interact with the module.

Use the Reset this after field and drop-down menu to choose a future point in time when the module will once again be displayed to users for whom it had been disabled.

Keep showing – This setting allows modules to repeatedly appear to users until the module is disabled by some other action, such as submission.

Additional Settings

Page Scrolling – Select Enable to allow users to scroll a page while a module is displayed. Modules will maintain their position on screen during scrolling. Selecting Disable will prevent users from interacting with the page in any way until the module is closed.

Visibility after opt-in

Keep showing – This setting will allow the module to continue to appear in accordance with all other settings even after a user has accepted or opted-in.

No longer show across the site – This setting will disable the module everywhere it appears after a user opts-in.

No long show on this page/post – This setting will disable the module only on the page from which the user opted in. It will continue to appear per it configuration elsewhere on the site.

Visibility after CTA conversion

Keep showing – This setting will allow the module to continue to appear in accordance with all other settings even after a user has accepted or opted-in.

No longer show across the site – This setting will disable the module everywhere it appears after a user clicks the CTA button.

No long show on this page/post – This setting will disable the module only on the page from which the user clicks the CTA. It will continue to appear per it configuration elsewhere on the site.

External Form Conversion Behavior

This settings apply to forms from external sources that have been integrated into a module.

Close – This setting will permanently close a module containing an external form once a user has opted in. Users who do not opt-in will continue to see the module in accordance with other settings.

Redirect – This setting will redirect users to the form’s target URL.

Do nothing – This setting will allow the Visibility after opt-in settings to apply to modules integrated with external forms.

11.3 Social Sharing

Link to chapter 3

Hustle’s Social Sharing feature allows you to add customized social network icons to any page or every page of your site.

NOTE

Hustle’s Social Sharing element  can be displayed in three ways–floating, inline and as a sidebar widget. We encourage users to take time to understand these display options before committing themselves to a social sharing strategy. A thorough explanation is located below in the Display Options section.

Services

Begin by clicking the Social Sharing tab in the Hustle Pro admin menu. This open the Services tab, which is where you add the social networks you wish to make available on your site.

Counter

When enabled, the Counter displays the number of times users share your site’s content to their own social network.

Social Services

To add one or more social networks click Add Platform, then select the platforms you want to display, then click Add Platform.

Configuring a platform

To configure a platform’s basic settings, click the arrow to reveal the drop-down menu.  These settings include a counter style, the default color and a field in which the URL that links to the social network should be entered.

Display Options

Hustle’s social sharing element can be displayed in three ways:

Floating – displays an “always visible,” sticky element at the edge of pages.</p>

Inlinedisplays the element within a page’s main content area using Hustle’s Social Sharing content block.</p>

Widget – When enabled, this option adds a Hustle widget to the Available Widget list located under the Appearance tab that can be applied to a site in the same manner as any other widget.

Floating Social

The Floating Social element displays the social network icons added in the Services tab in a sticky element that, by default, appears on each page and post of a site.  Admins can choose which pages and posts display the element using the conditional rules available under the Visibility tab.

The Floating Social module can be enabled for both desktop and mobile devices, and the configuration options are the same for each. However, it is recommended that you use the WordPress Device Preview feature and adjust the configuration options to achieve the best possible appereance on mobile devices. The Device Preview feature is located under the Appearance tab, here: Appearance > Customize.

To configure the element for desktop devices, ensure that the desktop slider in enabled, then use the Horizontal and Vertical position controls to determine where on the page the element will appear.

Below is an example of the Floating Social module in its default position at the top left edge of a page.

Below is an example of the same module in its default position at the top and center of a page.

The social icons will appear flush with the edge of the screen by default, but you can use the Offset controls to move the element away from the edge by entering, in pixels, how far from the edge you want it to appear.

Below is an example of the Floating Social module offset 50 pixels from its default position.

11.4 Integrations

Link to chapter 4

Hustle supports the integration of several apps into your modules, allowing you to share submission data with third-party services. Integrating a third-party app involves, first, connecting the app to Hustle, and second, integrating that connected app into a specific module.

IMPORTANT

Each supported app requires users to create an account on the app’s website before it can be connected. In many cases, accounts can be created for free, and sometimes basic features are also available for free. However, in order to use the data gleaned from your website, more often than not, a paid account is required.

Below are the apps currently supported by Hustle.

Prepare to Connect

Apps must be connected to Hustle before they can be integrated into a module, and it’s important to know that some configuration may be required within the connected app account before it will successfully integrate with Hustle. Sometimes this can be accomplished from Hustle during the connection process, while other times you will need to log in separately to that account and create a list or other object before the app can be integrated.

Generally speaking, the following are required in order to properly integrate an app with Hustle:

Account – All supported apps require a unique user account that must be created on the app’s website.
Integration authorization – In almost every case, an authorization step of some kind must be completed before a third-party app will communicate with Hustle. Sometimes that authorization can be obtained with a simple click of an “Accept” or “Authorize” button when connecting the app to Hustle. Other times the authorization comes in a form–such an API key–that can only be obtained by logging into the app’s website and following the guidance provided there.
Object to accept data – Typically, supported apps organize your data and deliver the app’s service using objects, such as lists. Sometimes these objects can only be created by logging into your account on the app’s website and following the usage guidance provided there, before attempting to integrate the app into a Hustle module.

For example, the app Hubspot compiles collected data into lists. In order to integrate a Hubspot list into a Hustle module, the list must have already been created in Hubspot so it shows in the drop-down menu that appears during the integration process as shown below.

Local List

Local list is not a connected app, however, it functions like one, so we’re including guidance here on configuring a local list.

You can create a unique list–a “local list”–of email addresses collected by each module. All the Local Lists you create will appear in the Email Lists section. To create a Local List for any module, click the edit (gear) icon next to Local List. Give this list a unique name, and click Save.

User data collected from this module will be added to this list, and can be viewed under the Email Lists tab. See the Email Lists section below for guidance on how to make the most of the data your modules’ collect.

Connecting and Integrating Apps

Once you understand how your app and Hustle will work together and have created on the app website any lists or objects you will need, navigate in Hustle to the main Integrations tab, locate the app you wish to connect in the list of supported apps and click the plus (+) symbol next to that app.

Find your app and click the plus (+) symbol.


We’ve created the following walk-through for the app ActiveCampaign as an example of how to properly connect a third-party app and integrate it with a Hustle module. If you’ve never worked with Integrated apps before, it may be helpful to review this ActiveCampaign walkthrough to see what the process may entail, even if you are not presently using ActiveCampaign.

Active Campaign

ActiveCampaign is an intelligent platform that makes it easy to leverage marketing automation. You’ll be able to design sophisticated, automated, marketing processes that save time and generate additional revenue for your company.  To connect your ActiveCampaign account to Hustle, begin by clicking the plus symbol next to ActiveCampaign.

This will bring a pop-up screen where you need to add your ActiveCampaign API credentials:

To get those credentials, log in to your ActiveCampaign account, go to Settings > Developer.

Then copy the required URL/KEY from the API Access module. Paste those credentials into your Hustle integration window and press the Connect button:

Once the connection is made, you will be asked to create a name for this integration, which will apply only to this module. Enter a name and then press on the Next button:

This will prompt you to choose the contact list you wish to collect the submitted contact information. That list must be created in your ActiveCampaign account before it will be available in this drop-down menu. Choose a list and press on the Next button:

The next step involves mapping the fields in your Hustle module to the fields in the ActiveCampaign list so the data migrates properly.

Fields that are marked with red * (asterisk) are required by ActiveCampaign and need to be mapped. By default, only the Email Address field is required in the ActiveCampaign List and other fields don’t need to be mapped, although it is best practice to collect and maintain all the user data you can.

Match the fields and then click Next .

This will bring up the Additional Options pop-up where you can configure additional options for your ActiveCampaign integration.

Your options include:

Tags: Allows you to add tags to your contacts. You can insert submitted data from your Forminator fields or you can write your own custom tags.

Double Opt-In Form: Double opt-in Form allows you to choose which ActiveCampaign form will be used when ActiveCampaign opt-in email is sent.

Enable Instant Responders: When the instant responders option is enabled, ActiveCampaign will send any instant responders setup when the contact is added to the list. This option is not available to users on a free trial.

Send last broadcast campaign: When the send last broadcast campaign option is enabled, ActiveCampaign will send the last campaign sent out to the list to the contact being added. This option is not available to users on a free trial.

Once done, click Save, and your Hustle module will begin sharing submission data with ActiveCampaign and will continue to do so as long as the module is active.