Squarespace: Lottie Clickable

To make a Lottie Clickable, we have 2 ways

Option 1. Use CSS

Add this code into Lottie Code Block

<a href="http://google.com" target="_blank" class="tp-click"></a>
<style>
  .code-block>div {position:relative;}
  a.tp-click {
  	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
  }
</style>

Replace Google.com with new url

Option 2. Use JavaScript code

In some cases, the Lottie File has a hover effect. Using CSS code will cause hover not to work. Then we’ll use JavaScript.

Add this code to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
        $('div#block-yui_3_17_2_1_1657388384401_13663').click(function() {
            var link = $(this).text(),
                href = "https://google.com";
            window.location.href=href;
        });
  		$('div#block-yui_3_17_2_1_1657449534536_2488').click(function() {
            var link = $(this).text(),
                href = "https://facebook.com";
            window.location.href=href;
        });
  		$('div#block-yui_3_17_2_1_1657449534536_3455').click(function() {
            var link = $(this).text(),
                href = "https://example.com";
            window.location.href=href;
        });
});
</script>

In the code, you will see 3 similar code

$('div#block-yui_3_17_2_1_1657388384401_13663').click(function() {
            var link = $(this).text(),
                href = "https://google.com";
            window.location.href=href;
        });

Line 1 is Code Block ID. You can use this tool to find ID.

Line 4 is new URL.

If the code doesn’t work, just send me a message. I will help.