Bound - Help Center

What, Why, and How: Modal Campaign Type

This article will discuss best practices for using Bound modals.

Table of Contents

  1. What: Introduction to Modals
  2. Why: Common Modal Use Cases
  3. How: Creating Modal Campaigns, Content, and Rules
    • Step 1 - Create a New Campaign
    • Step 2 - Create Modal Content
    • Step 3 - Create Rules to Tie it All Together

 What: Introduction to Modals

Modals are a type of overlay-style campaign.  A Modal has the same effect of a "pop-up," though it occurs within the same browser window as the page, and it is not impacted by most ad-block utilities.  A modal window containing your specified content appears in the middle of the user's screen, based upon a predetermined trigger.  Like fly-ins and banners, it adds a layer of content that is independent of the existing page; it doesn't add or change any content within the page context.  A modal grabs the attention of the user by adding a dim mask over the rest of the page and maintaining a fixed position if the user scrolls.  

Modals are the most aggressive type of campaign, because they effectively disable the rest of the page until the user clicks a call-to-action or closes the overlay, which can be done by engaging an "exit button" in the corner or by clicking any area outside of the modal content itself. Modals are different from banners and fly-ins because they force a user to engage with the content.

Why: Common Modal Use Cases

Because of their aggressive (and potentially bothersome) nature, modals are most effective with specific, highly targeted content.  Your visitors don't want to have to view and close a modal window on every page, but they can be useful when you want to present content with a "hard" impression—that is, when you want some confidence that each user will see it before accessing the rest of the page.  In this way, you can think of a modal as a way to boost conversion and move leads further down your funnel by forcing engagement with the CTA and bypassing other content on the page.

You can put any type of content in a modal at any time, but here are a few use cases to help you think about the best ways to utilize the modal campaign type:

  • Display an important announcement that a visitor must see when they arrive
  • Promote a special deal for the customer with a required click interaction
  • Invite the user to [optionally] submit an email address or other form data before proceeding
  • Redirect segmented decision makers to an ROI report or other relevant content
  • Ask the customer for a survey response
  • Autoplay a video featuring your competitive advantages

Modals work well when targeting subsets of visitors who might otherwise bounce quickly from the site.  Delay the appearance of the modal by 200-500 milliseconds to capture their attention before they leave.


How: Creating Modal Campaigns, Content, and Rules

Step 1 - Create a New Campaign

From your Campaign Library in the Get Smart Content admin platform, click the blue button to "Create Campaign" and select "Form Builder" from the dropdown menu.


Note: You may also use the interactive Campaign Editor to create modal campaigns.  For more information about the limited beta feature, see this article.

Best Practice: To avoid the appearance of multiple modals on any single page, we recommend using just one campaign of type Modal for your website.


Basic Information

Fill out the New Campaign form by providing a descriptive Name, setting the Type to "Display content in a modal," and defining one or more page-level Locations.

Enable Campaign Dimensions

By default, Enable Campaign Dimensions is turned On.  If you want every Modal presentation to be constrained to a single height and width, you may specify those dimensions here, in pixels or other available units.

If you instead intend to control the dimensions of your Modals at the content level (or by use of an external style sheet), then you can turn this campaign setting Off.  If you want the Modal to just take the dimensions of the image or other content it contains, then you can turn this setting Off or set the height and width to auto.

Default Content

For new campaigns that are replacing existing content not controlled by GSC, it is important to set up default content that will be displayed if no rules are matched for a given visitor.  This is more relevant for Embed type campaigns, for which you would likely copy the existing code into a new piece of GSC content and then choose that from the campaign's Default Content list.  This ensures that something is shown in a campaign location (if that is the required behavior) and that we can track the performance of that default content in comparison to any personalized content that replaces it.

For Modals and other overlay style campaigns, this step only applies if you want every user to your campaign location pages to see a Modal overlay, regardless of whether they meet any segment conditions.

If you want the default case to be no modal is shown when no rules are matched (which is the most common behavior), then just turn this setting Off for your Modal campaign.

If you do want a default modal, you should create a piece of content that will be shown to the broadest subset of visitors—those that fail to match any of your other segment-based campaign rules.  That becomes your default content for this campaign, and you should turn On the Serve Default Content toggle and select that content from the available dropdown list.  If you don't yet have that content in your library, you can turn Off this setting, save the campaign, and then come back and edit it after you have created the default content object.


When you set up your campaign, you may choose between these options to control when your Modal content will appear:

Value Description
Instant Default.  Your Modal will appear immediately when the page loads.
Time (delay) Specify a length of time after loading the page to delay showing the Modal (1000 milliseconds = 1 second)
Scroll Don't show the Modal until the user has interacted with the page by scrolling.  Choose how far the user must scroll by specifying a trigger scroll distance in pixels from the bottom of the page.  For example, to only trigger when they have reached the bottom of the page, set the scroll distance to 0.


Only Show Campaign Once

By default, this option is Off, and your modal will appear on every page load that matches a Campaign location and Rule.  This behavior might be bothersome to some users, so it is usually a good idea to enable this option to limit the frequency that each user will see your modal.  

With this option enabled, we track if and when a user saw any modal content described by this campaign in a cookie on the user's device.  If you set a cookie expiration of, say, 7 days, then each user will see your modal a maximum of once per 7-day period.  Once the cookie expires, if the user still matches a campaign rule, then they will see the modal on their next visit.

Note:A "show only once" cookie is device- and browser-specific.  If a user visits your site using multiple devices or different browsers, or if their browser settings do not allow cookie storage, then they may see your modal more often than you have specified in the Campaign Cookie Expiration field.


Campaign CSS and JavaScript

Enable these options to add your own custom style rules or JS code that should be applied to every page that matches your campaign Locations.  This code will be executed before any rules are processed, which is helpful if you need to modify the DOM in some consistent way before displaying your Modal content.

A common use of this field is to modify the default Modal CSS to match your site's style guide, specifically in regard to fonts, background colors, and the overlay close button.  You can override the GSC Modal defaults using the following rules (default property values shown), whether in the campaign CSS, the content CSS, or in your site's own stylesheet:

.gsc-modal-wrapper {
    background: rgba(0,0,0,.6);
    z-index: 9997; 

button.gsc-modal-close {
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 10px;
height: 25px;
width: 25px; }



When you are finished configuring your new campaign, choose whether to enable it with the toggle at the top of the form, and then click "Create Campaign" to save your work to the campaign library.




Step 2 - Create Modal Content

After Step 1, you have a Modal campaign configured to show on specific pages (or sitewide, depending on your Locations settings).  But, without Content, you can't create the rules that actually display something in the overlay.

So, start in your Content Library, and click the "New Content" button or duplicate an existing template if you have one to use.


Basic Information

Give your new content a Name that describes what it is and what it's for.  Consider adding an optional Description, and apply any Tags (also optional) that are relevant to this content. See Organizing Your Smart Content for tips and recommendations on name, description, and tag conventions.


If you want to choose an image file from your hard drive to appear alone in this Content module, choose "Upload Content" and then browse to locate the file.  Get Smart Content will host the file at our CDN and serve it to the visitor when your content is shown.

If you have a file that already exists on your own web server, then choose "Self-Hosted Content" and provide the full path to the image file you want to use.  The file will be served directly from that location when it is shown to your visitors.  Make sure that the full URL is valid and can be accessed by end users from your campaign locations.  In most cases, you should avoid using files with any access restrictions, such as those that require secure logins, firewall access, or other private authentication measures.  If visitors might access your campaign pages by secure HTTPS, then your self-hosted content path should also have the HTTPS protocol.

Best Practice: A Modal image is a great way to deliver a static message or notification to your site visitors, but without a Click-Through URL, we cannot track and measure user engagement with that content.  For any sort of link or invitation type of content in a Modal, be sure to provide a URL so that we can track those clicks and include them in performance reports.

For all other non-image content, choose "HTML, JavaScript & CSS" as the content Type.  You will see three free-form text entry fields where you can add any source code to define your custom Modal content.  This could be as simple as an <img> element that requires some extra style properties or click handlers, or it could be a complex dynamic form with AJAX data submission callbacks that modify other content on the page.  The code is totally up to you and your Modal personalization needs.  However, if you disabled Campaign Dimensions when you set up the campaign, be sure that you are defining the height and width of your content somewhere—whether in the content HTML & CSS or in existing style properties elsewhere on the page.  Also, be sure to add the "gsc-track" class name to all links so that we can track user engagement with your custom content for reporting.


When you are finished configuring your new content, click Add Content to save your work to the Content library.  Repeat the process to create more content, e.g., to be used with multiple rules, A/B tests, or slideshows.


Step 3 - Create Rules to Tie it All Together

Once you have a Modal campaign and one or more pieces of content to use in your Modal, it's time to create campaign rules to activate your new Modal overlay.  If you don't yet have a Segment defining which visitors will see your Modal, then create one (or more) first.  If your Segments are ready, then return to your Campaign Library, click the ellipsis on your Modal campaign, and select "Rules" to manage its rules.


The process of creating and configuring rules is pretty straightforward, but you can read more details in this article on the subject.  A Modal campaign may contain a single piece of content, an "A/B Test" that shows a random piece of content from a collection to each visitor, or a Slideshow featuring multiple pieces of content in a sequential gallery.

The Modal campaign type does not offer any Options at the Rule configuration level, so just choose your Segment and your Content, give the rule a descriptive name, and save.

Be sure to enable your campaign and any rules once you have tested them in Preview mode to turn on the Modal presentation for your site.







Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request