Squarespace Popup Builder Extension Docs
Installation:
- Download the file via link sent to you from us on purchase
- Unzip the file and Open “Insert_into_footer_code_injections.txt” file
- Copy the code and inject into the Footer injections (On your backend go to Settings >Advanced > Code Injections > Footer)
Setting up options
General Options:
- Assign a unique name to your pop-up in “nameYourPopup” Option.
- 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”]” - Add the Block ID or Link in “popupOpener” 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”
link looks like “[href=”https://thesquarespacer.com/#setting_up_options”]” - Add the event for opening your popup in “popupOpenerEvent” Option. Default is “click”
Popup Options:
- Enable or Disable popup in “enable“ Option. Default is “yes”
- Let the popup auto-open on load in “autoOpen” Option. Default is “”
- Decide the popup in “width” Option.Width can be defined in “%”(i.e, “50%”) or “px” (i.e, “400px”) Default is “80%”.
- Let the popup be visible only to new visitors in “showToNewVisitorsOnly“ Option. Default is “”
- 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”
- 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”
- 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”
- 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 Name | Available Option |
|---|---|
| nameYourPopup | Create a unique name for each pop-up |
| popupSelector | Block ID or Section ID of the Popup |
| popupOpener | Block 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" |