Heart Cursor 🖤

---

Contents

Follow these steps to install the Heart 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 HEART CURSOR -->
<script src="https://lizasem.com/laz-i/heartcursor/script.min.js"></script>
<!-- LAZ-I.COM HEART CURSOR -->

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

<!-- LAZ-I.COM HEART CURSOR -->
<!---- REPLACE CONFIG HERE --->
<script>
document.addEventListener("DOMContentLoaded", function() {
    const newConfig = {
        normalSize: 20,
        hoverSize: 40,
        color: '#ff0000',
        blendMode: 'normal',
        shadowColor: '#c9c5c5',
        shadowEnabled: true,
        showConfigPanel: true,
    };
    initCustomCursor(newConfig);
});
</script>
<!---- REPLACE CONFIG HERE --->
<!-- LAZ-I.COM HEART 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.

(Same instructions as the Dot Cursor)

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 if you’re comfortable with coding.

<!-- LAZ-I.COM HEART CURSOR --> 
<!---- REPLACE CONFIG HERE --->
<script>
document.addEventListener("DOMContentLoaded", function() {
    const newConfig = {
        normalSize: 20,
        hoverSize: 40,
        color: '#ff0000',
        blendMode: 'normal',
        shadowColor: '#c9c5c5',
        shadowEnabled: true,
        showConfigPanel: false
    };
    initCustomCursor(newConfig);
});
</script>
<!---- REPLACE CONFIG HERE --->
<!-- LAZ-I.COM HEART CURSOR -->

(Same instructions as the Dot Cursor)