LaunchPop is a modal an editor configures as a datastore item. Each item chooses whether any one trigger opens it, or every trigger must happen first. With no triggers, it opens on page load.
Load one LaunchPop item by name and pass it to the partial.
{%- datastore_item var launchpop_item = "Default" -%}
{%- if launchpop_item.is_valid -%}
{%- include "/launchpop/v1/_launchpop.liquid" item:launchpop_item -%}
{%- endif -%}The item has to belong to the LaunchPop datastore. The partial attaches /launchpop/v1/launchpop.js and /launchpop/v1/launchpop.scss unless you bundle them, as described below.
On most sites, compile LaunchPop into the site stylesheet and the site script, then stop the partial from adding them again. That needs an edit in the site header, the main stylesheet, and the main script. The header for a Marketpath Bootstrap site already attaches /main.scss.
At the end of /main.scss:
@import "/launchpop/v1/launchpop.scss";On the site's main script, usually /main.js, add /launchpop/v1/launchpop.js at the bottom of the Post-Includes list. Attach that script from the header if it is not already there:
{%- add_stylesheet "/main.scss" -%}
{%- add_javascript "/main.js" position:'body' defer:true -%}In the header template, before any page includes the partial, assign both omit flags. assign stores them on the root scope, so the partial sees them without extra arguments:
{% assign omit_launchpop_js = true %}
{% assign omit_launchpop_css = true %}content_type chooses what the dialog shows.
popup_image.html_content.form_title, form_description, and popup_form.trigger_mode chooses how the triggers combine. It appears under the triggers only after two or more of them are set. With one trigger, or none, that choice stays hidden. When any trigger happens opens the dialog on the first one. When every trigger has happened waits until all of the ones you set are met. Leave every trigger empty to open on page load. The editor does not accept 0; a blank trigger is unset, and a 0 that reaches the page is ignored.
| Trigger | Field | What it waits for |
|---|---|---|
| Scroll percent | scroll_percent |
The visitor scrolls that percentage of the page (1–100). scroll_relative_to_footer measures the percentage to the footer instead of the bottom of the page. |
| Scroll distance | scroll_pixels |
The visitor scrolls that many pixels (1–3000). It can be set together with the percentage. When any trigger happens opens at the first of the two. When every trigger has happened waits for both. |
| Delay | delay_seconds |
That many seconds after page load (1–120). |
| Exit intent | exit_intent |
The pointer leaves through the top of the window. This is mainly useful on a desktop. |
| Idle | inactivity_seconds |
The visitor does not move, type, scroll, or tap for that many seconds (1–1800). |
The shared id field (id) is the key for these limits. Items that use the same id share one history. An empty id uses the item name, so each item keeps its own history.
| Field | Effect |
|---|---|
min_pages |
Do not open before this page of the visit. The number includes this page, so 2 waits until the second page. Checked in the template from session.num_pages. |
max_pages |
Do not open after this page of the visit. 3 still allows the third page. Checked the same way. |
minutes_limit |
Do not open automatically if this id was opened more recently than that many minutes. When the visitor has allowed a session, the visit is that session: every page request extends it, including pages with no popup. The history stays in the browser and is shared by every tab. Without a session, the visit lasts an hour after the last page that loaded LaunchPop. |
shown_limit |
Do not open automatically if this id has already opened that many times during this visit. A click can still open the popup. Kept with the minutes limit. |
breakpoints_to_exclude |
Do not open at the checked sizes. Small is 767px and below, medium is 768–1199px, and large is 1200px and above. An editor picks which of those three to hide. The pixel cutoffs are developer defaults, listed below. |
Page limits apply whether the item opens on any trigger or on every trigger, and only when the visitor has allowed a session. Leave both page fields blank and the triggers run without a session. Minutes and maximum shows limit automatic opens. A click can still open the popup.
The auto-init switch has to be set before /launchpop/v1/launchpop.js runs. The other defaults are set after that file has loaded, and before launchpop.init().
| Default | Starting value | What it changes |
|---|---|---|
window.LAUNCHPOP_AUTO_INIT |
true |
Set false before /launchpop/v1/launchpop.js loads to start it yourself. The same switch can be the data-launchpop-auto-init attribute on that script tag. true and false are the accepted words. |
autoAttachTriggers |
false |
When true, an element with data-launchpop-triggers="the-id" opens the popup with that id. |
footerSelector |
footer |
The element used when scroll percent is measured to the footer and the popup does not name its own selector. |
breakpoints.smallMax |
767 |
Widths at or below this are small. |
breakpoints.mediumMax |
1199 |
Widths at or below this, and above small, are medium. Anything wider is large. |
Place this ahead of /launchpop/v1/launchpop.js:
<script>
window.LAUNCHPOP_AUTO_INIT = false;
</script>After the file has loaded:
launchpop.setDefaults({
autoAttachTriggers: false,
footerSelector: "footer",
breakpoints: { smallMax: 767, mediumMax: 1199 }
});
launchpop.init();The visitor can close the dialog with the close button, the Escape key, or by clicking the dark overlay. While it is open, only one LaunchPop dialog is visible and keyboard focus stays inside it.