Updated by Richale Cabauatan
A DailyStory Popup enables you to display a popup window in a web or mobile experience. Popups are a great way to capture signups for newsletters, offer discounts to new visitors, or attempt to persuade someone not to leave your website.
Popups can be shown on specific pages, configured to automatically show after a certain amount of time has passed, when the visitor first arrives, or if the visitor is leaving the site.
Create or Edit a Popup
To create a popup go to
Acquisition > Popups. This will show you a list of all the existing popups. You can edit a popup by clicking on it and you can create a new popup by clicking the side bar menu and
clicking "+Create" on the feature bar.
Clicking either will open the Popup designer:
The popup editor provides a live preview of your popup.
Set an internal friendly name for the popup and then use the rich editor to optionally build out the content for your popup.
The content and all other settings will be immediately reflected in the live preview window.
A popup typically has 2 types of interactions:
- Call to Action - the Call to Action (CTA) can submit a form, such as a newsletter signup, or navigate to another page. This is the primary objective of the popup offer: get the person viewing the popup to take some kind of action.
- Close / Dismiss - the Close or Dismiss button closes the popup and may navigate the user to another page or simply disappear.
More advanced popups introduce nuances for dismissing the offer:
- Close, but remind me later - the visitor dismisses the popup but indicates that they would like to receive the popup again in the future.
- Close and ignore - this enables the visitor to dismiss the popup and to never show it again.
These types of popup interactions are important because DailyStory tracks these choices and enables you to test which converts best.
Metrics Tracked for Popups
DailyStory tracks several metrics related to popups:
- Impressions - the number of times the popup is shown to visitors.
- Ignores - the number of times no interaction with the popup takes place even though the popup was shown.
- Call to Action click - the number of times the call to action is clicked.
- Dismiss click - the number of times the dismiss button is clicked.
These metrics are shown in the reports for your popup.
Configuring Title Options
The Title Options enable you to set the font color and font size of the title text:
These options configure CSS settings for
Configuring Body Content
Body content should be brief. You can use the return key to create line breaks in the content.
The body content is wrapped in a <p> tag with <br> to handle line breaks. CSS settings for
#ds_pop .content p
You can configure the text and background color of the body content in Background Options.
Configuring Call to Action Button
The Call to Action button is the primary action you want viewers to take. When clicked, the call to action button can navigate to another URL or capture a name and email address (see Lead Capture Form below for more details).
The Call to Action Options enable you to configure the color/style of the call to action button:
The call to action button applies CSS settings for
When the Call to Action button is clicked the popup will not be shown to this user again.
Configuring Call to Action URL
The Call to Action URL is the URL to redirect the visitor to when the Call to Action button is clicked.
If a Lead Capture Form is configured, the form will send the data entered into the form and then redirect to this URL.
Configuring Close/Cancel Button
The Close/Cancel button is used to close the popup because the offer presented to the visitor is not of interest.
By default, when the Close/Cancel button is clicked the popup will not be shown again to that visitor for one week. However, this can be configured.
The Close/Cancel button options present three toggles:
- Display button - enabled by default, this determines if the Close/Cancel button is shown.
- Display quick close - enabled by default, this determines if the X in the upper-right corner is shown.
- Easy ignore - disabled by default, this allows clicking outside of the popup or pressing escape to close the popup.
It is important to note that it is possible to configure the popup with no way to close except for the call to action.
In addition to the behavior toggles there are options for setting the button colors/style.
Finally, the Set Close/Cancel Options also enable you to configure how long to hide the popup after the close/cancel button is clicked. The recommendation is 1 week.
The Background Options enable you to set an image used in the background of the popup as well as the text and background colors:
The background color and image set CSS for
#ds_popand the background text color for
You can also provide a URL to your own image file or upload an image to DailyStory.
Configuring Lead Capture Form
The Lead Capture Form enables you to capture visitor information and create new leads within a DailyStory campaign.
Popups are great for capturing visitors that read your blog and you can offer to sign them up for your newsletter.
Important - if you use the Lead Capture Form, the email address is required and the fullname is optional. You must also choose the campaign to assign new leads to.
The Advanced Options provide capabilities that customers can change, but are completely optional and typically not used.
The Close Forever button is an additional behavior added to your popup that displays an additional button or link. Unlike the Close/Cancel button, the Close Forever button will not show the popup again to that user for one year.
You can additionally configure other automated behaviors of the popup.
The Automatically display if no browser activity will display the popup if the visitor has no activity for the specified time period. For example, if they open your page in a new tab or do something else, when they come back the popup will be displayed if the specified time has elapsed.
The Minimum visitor time on site controls the minimum amount of time the visitor must be on the website before the popup can be shown. This is useful if a visitor goes to your site and immediately leaves. It is designed to ensure that if a visitor stays longer than the specified time, they must be enagaged.
Testing your Popup
Now that you've created a popup. You can test your popup to see what it will look like when shown to your website visitors.
On the bottom right of the popup editor you will see a button that says, "Test Popup".
Clicking this button will open a new browser tab. After a 2 second delay your popup will be shown.
Once you have verified that your popup looks like you expect you can close the popup tab.
How do I enable a DailyStory Popup?
Popups are automatically shown on every page of your website or on specific pages, or paths, of your website.
Important - popups are never shown on your website until you select where they should be shown.
For example, you can create a popup that is only shown to visitors of your blog by using a path of
By default a popup is double -ocked to prevent it from displaying on your site by accident.
- There is a master enabled/disabled at the top of the popup designer. The popup will never be shown if this switch is set to off.
- In addition to enabling the master enabled/disabled switch, you must select where the popup will be displayed.
id of the enabled popup. The popup
id is a numeric value, such as 35, and can be found in the URL when editing the popup in DailyStory:
The DailyStory Popup Json File
DailyStory Popups are loaded from the data center specific URL of your DailyStory tenant. For example, a tenant in data center US-1 with the tenant id of 1a2b3c4d loads its JSON from:
This file will include any DailyStory Popups that are enabled for the tenant as well as other DailyStory features you have enabled.
Important: due to caching of the file, if you enable or change a popup in DailyStory it may take up to 20 minutes for changes to be available to your website.
Showing a popup when the page loads
The DailyStory API uses browser events to call your code after DailyStory is loaded.
Important: DailyStory loads all its files after the main page loads. This ensures that the user's content is displayed as quickly as possible.
Show a specific popup offer when the visitor is leaving