ContentS:

Squarespace Popup Builder Extension Docs

Installation:

  1. Download the file via link sent to you from us on purchase
  2. Unzip the file and Open “Insert_into_footer_code_injections.txt” file
  3. Copy the code and inject into the Footer injections (On your backend go to Settings >Advanced > Code Injections > Footer)

Setting up options

General Options:

  1. Assign a unique name to your pop-up in “nameYourPopup” Option. 
  2. Add Block or Section ID in “popupSelector” Option. Use “Squarespace ID FInder” to find IDs easily.
    Example:
    Block ID looks like “#block-4e3e0cc69c04ead6e8bp” Or “#block-yui_3_17_2_1_1664470083327_3991”
    Section ID looks like  “section[data-section-id=”631cba98cda7a26f9b7d44dn”]”

  3. Add the Block ID or Link in “popupOpener” Option. UseSquarespace ID FInder” to find IDs easily.
    Example:
    Block ID looks like “#block-4e3e0cc69c04ead6e8bp” Or “#block-yui_3_17_2_1_1664470083327_3991”
    link  looks like  “[href=”https://thesquarespacer.com/#setting_up_options”]”

  4. Add the event for opening your popup in “popupOpenerEvent” Option. Default is “click”

Popup Options:

  1. Enable or Disable popup in “enable OptionDefault is “yes”
  2. Let the popup auto-open on load in “autoOpen” Option. Default is “”
  3. Decide the popup in “width” Option.Width can be defined in “%”(i.e, “50%”) or “px” (i.e, “400px”) Default is “80%”. 
  4. Let the popup be visible only to new visitors in showToNewVisitorsOnly Option. Default is “”
  5. By Turning on the Modal Behaviour other items on the page will be disabled, i.e., cannot be interacted with “modal Option. Default is “true”
  6. show: Select the animation effect on open in “effect Option. Default is “puff”. Select the duration to open in “duration” option (1000 is 1s). Default is “800”
  7. hide: Select the animation effect on open in “effect Option. Default is “explode”. Select the duration to open in “duration” option (1000 is 1s). Default is “800”
  8. position: Select the if the popup is fixed in “fixed Option. Default is “true”. Select the position of the open on screen in “at” option. Default is “left bottom”
<script>
$.fn.tsPopupOptions(
[{
"nameYourPopup" : [{
"popupSelector": `section[data-section-id="631cba98cda7a26f9b7d44ddn"]`,
"popupOpener" : `#block-yui_3_17_2_1_1664555615575_4780`,
"popupOpenerEvent" : "click",
"popupOptions": [{
"enable": "yes",
"autoOpen": "",
"width": "80%",
"showToNewVisitorsOnly": "",
"modal": "true",
"show": [{
"effect": "puff",
"duration": "800"
}],
"hide": [{
"effect": "explode",
"duration": "800"
}],
"position": [{
"fixed" : "yes",
"at": "left bottom"
}]
}]
}]
}]
);
</script>

Available options

Setting NameAvailable Option
nameYourPopupCreate a unique name for each pop-up
popupSelectorBlock ID or Section ID of the Popup
popupOpenerBlock ID or Link of the Opener
popupOpenerEvent"click", "hover", ""
popupOptions
enable"yes", "no"
autoOpen"true", ""
width"30%", "300px"
showToNewVisitorsOnly"yes", ""
modal"true", ""
show
effect"blind", "explode", "puff"
duration"800"
hide
effect"blind", "explode", "puff"
duration"800"
position
fixed"yes", ""
at"right","left", "center", "top", "bottom", "center center", "right top", "right center", "right bottom", "left top", "left center", "left bottom"
Shopping Cart