Super Plugin Info

Works with Squarespace 7.1
Only compatible on Desktop
Uses Code Block, Code Injection, and Custom CSS
Requires Business Plan or Higher

Step 1. Add this code to Header Code Injection

/* ----- EXAMPLE CODE FOR PREVIEW ---- */
function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 2. Add this code to Footer Code Injection

/* ----- EXAMPLE CODE FOR PREVIEW ---- */

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
}
function adipiscing(...elit) {
  if (!elit.sit) {
    return [];
  }
  const sed = elit[0];
  return eiusmod.tempor(sed) ? sed : [sed];
}
    
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 3. Customizable Options

These options are available in Footer Code Injection.

Canvas Background Color
Doodle Pen Line Color
Doodle Pen Line Width
Default or Custom Cursor
Cursor Offset

Step 4. Add Code Block To Any Page Section

Add this code to a Code Block within the page section you’d like the Doodle Pen on.

/* ----- EXAMPLE CODE FOR PREVIEW ---- */
function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 5. Create Doodle Pen's Canvas

The code block will act as the Doodle Pen’s canvas and wherever it is placed is where the pen will be able to draw. This page section must be using Fluid Engine.

Make the code block full width and height (edge to edge).
Send the code block “back” via Squarespace’s backwards option.
Adjust the page section's row height like normal via Squarespace settings.

Watch this video on how to resize the code block and send it to the back.

Plugin Notes

Page section must be using Fluid Engine.
Only applies to the page section it is added to.
Will not affect other page sections using Fluid Engine or Classic Editor.
The red line and “Canvas Area” message only appear while in edit mode.
Refreshing the page will “erase” the doodles.

Troubleshooting (Plugin Not Working)

Make sure the code block is full width and height (edge to edge).
Only use text and images in the page section using the plugin.
Since this plugin is changing the cursor’s default behavior, text hyperlinks, buttons, and other things that require “clicking” will be disabled - but only in the section the plugin is being used.
If using a custom cursor, upload the file to Custom CSS > Manage Files.
Custom cursor file must be PNG and 48x48 pixels in size.

Doodle Pen™ by Ghost (Preview Guide)