Dot Cursor


Contents

Follow these steps to install the Dot Cursor plugin!

Copy the plugin code

Navigate to Pages > Website Tools > Code Injection.

Copy and paste the code below to the code injection header area.

<!-- LAZ-I.COM DOT CURSOR -->
<script src="https://lizasem.com/laz-i/dotcursor/script.min.js"></script>
<!-- LAZ-I.COM DOT CURSOR -->

Then copy and paste the code below into the code injection footer area.

<!-- LAZ-I.COM DOT CURSOR -->
<!---- REPLACE CONFIG HERE --->
<script>
document.addEventListener("DOMContentLoaded", function() {
    const newConfig = {
        normalSize: 15,
        hoverSize: 38,
        color: '#ffffff',
        blendMode: 'difference',
        showConfigPanel: true  //false to turn off config panel
    };
    initCustomCursor(newConfig);
});
</script>
<!---- REPLACE CONFIG HERE --->
<!-- LAZ-I.COM DOT CURSOR -->

Your custom cursor is now active with a default dot cursor on non-touch devices.


To customize the cursor

When you install the plugin, a Cursor Configuration Panel should pop up in the top right corner.

  • Adjust settings as desired.

  • Once you’re happy with the result, click "Copy Config" to get the customized code.

  • Replace the existing code in the Footer injection where its says “REPLACE CONFIG HERE“ with the new code.

This allows you to live preview your cursor stye, but you can also adjust the configurations in the script without the Cursor Configuration Panel.

info Always test your site after making changes to ensure everything works as expected.




Turn off the Custom Configuration Panel

The showConfigPanel setting in the configuration controls whether the panel appears in Squarespace Admin mode. It does not affect the live site.

You can turn off the panel in Squarespace Admin mode by setting the showConfigPanel to false.

You can still adjust the configurations in the script without the Cursor Configuration Panel.

<!-- LAZ-I.COM DOT CURSOR -->
<!---- REPLACE CONFIG HERE --->
<script>
document.addEventListener("DOMContentLoaded", function() {
    // Cursor configuration
    const newConfig = {
        normalSize: 15,
        hoverSize: 38,
        color: '#ffffff',
        blendMode: 'difference',
        showConfigPanel: false // turn off config panel
    };
    initCustomCursor(newConfig);
});
</script>
<!---- REPLACE CONFIG HERE --->
<!-- LAZ-I.COM DOT CURSOR -->
 
Previous
Previous

Smart Announcer

Next
Next

Add Icons to the Nav