A DailyStory Popup enables you to display a popup window in a web or mobile experiece. Popups are a great way to capture signups for newsletters, offer discounts to new visitors, or attempt to disuade 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.
To creae a new 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 + New Popup button:
Clicking either will open the popup editor:
The popup editor provides a live preview of your popup. You can enter a title, body, call to action button text, call to action url, close/cancel button text and select a background image. All of these settings will be immediately refelected in the live preview window.
Some fields have additional options that can be configured. You can also add form fields for name and email address. This is useful if you provide an offer such as a newsletter signup or download.
A popup typically has 2 types of interactions:
More advanced popups introduce nuances for dismissing the offer:
These types of popup interactions are important because DailyStory tracks these choices and enables you to test which converts best.
DailyStory tracks several metrics related to popups:
These metrics are shown in the reports for your popup.
The Title Options enable you to set the font color and font size of the title text:
These options configure CSS settings for
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.
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.
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.
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:
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.
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.
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.
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:
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.
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.