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

Step 2. Add this code to Footer Code Injection

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.

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.