Create FOMO with countdown timers and animated 'buy now' buttons as a sticky button on your landing page

Create FOMO with countdown timers and animated 'buy now' buttons as a sticky button on your landing page

Knorish gives you the flexibility to customize your site exactly the way you want. This allows you to write plain JavaScript code to achieve any custom functionality you desire. In this post, we will show you how to create FOMO with an animated "Buy Now" button and a countdown timer. Sounds interesting? Let’s continue.

Tutorial Video


How to add the custom code on a landing page?

In the Knorish page builder, you will find the code snippet block below, which allows you to write custom code to achieve anything.

Drag and drop this content block onto your landing page, then click the settings button, which allows you to write custom code. Here's how:


Now, replace the above code with the custom code samples provided below. After replacing the code, click the save button and then the preview button to see the changes.

How to customize the sticky button colors using AI prompts?

Customizing your custom sticky buttons is very simple with AI tools such as ChatGPT. You can use AI to update the button colors, and the countdown timer based on your specific requirements. For this, use the prompt below and customize it with your information. Then AI will generate the updated JavaScript code for you in one click. Here’s how you can do it:
  1. Copy the original JavaScript code from the sample provided below.
  2. Open AI Tool such as ChatGPT: Paste the code into the chat.
  3. Also paste the prompt below to instruct ChatGPT on how to update the code.
  4. Copy the updated JavaScript code generated by ChatGPT and paste it back into your landing page’s code block.
  5. Save and preview the page to ensure everything works as expected.

Prompt 1: Change the button color

Below is the code for a sticky button. Please update the below JavaScript code to replace the button color to light purple. Change the URL of the button to XXXXXXX.yourdomain.com. Ensure the code format remains the same and provide the entire updated code in JavaScript so I can directly copy and paste it onto my site. 

Prompt 2: Change the button color and standard Text

Below is the code for a sticky button with a countdown timer. Please update the below JavaScript code to replace the button color to light pink and the text to hurry, offer closing in 48 hours.Change the URL of the button to XXXXXXX.yourdomain.com. Ensure the code format remains the same and provide the entire updated code in JavaScript so I can directly copy and paste it onto my site.

Prompt 3: Change the button color and the countdown timer

Below is the code for a sticky button with a countdown timer. Please update the below JavaScript code to replace the button color to light pink and the countdown timer to countdown from 15 minutes to 00:00 seconds. Then once it hits zero, I would want the countdown timer to start from 15 minutes again.Change the URL of the button to XXXXXXX.yourdomain.com. Ensure the code format remains the same and provide the entire updated code in JavaScript so I can directly copy and paste it onto my site.

Sample 1 - Code for creating a full-width button fixed at the footer with a blinking animation

Here's the sample code, copy this code and paste on code content block on landing page. Save the changes and click to preview it.

Info

IMPORTANT - Please replace the checkout link/URL in the sample code below.

  1. <script>
    // Create a "Buy Now" button
    const buyNowButton = document.createElement('div');
    buyNowButton.id = 'buyNowButton';
    buyNowButton.textContent = 'Buy Now';

    // Apply styles directly in JavaScript
    buyNowButton.style.position = 'fixed';
    buyNowButton.style.bottom = '0';
    buyNowButton.style.left = '0';
    buyNowButton.style.right = '0';
    buyNowButton.style.backgroundColor = '#ff5722';
    buyNowButton.style.color = 'white';
    buyNowButton.style.textAlign = 'center';
    buyNowButton.style.padding = '15px 0';
    buyNowButton.style.fontSize = '18px';
    buyNowButton.style.fontWeight = 'bold';
    buyNowButton.style.cursor = 'pointer';
    buyNowButton.style.zIndex = '1000';
    buyNowButton.style.boxShadow = '0 -2px 5px rgba(0, 0, 0, 0.2)';
    buyNowButton.style.transition = 'all 0.3s ease';

    // Add animation styles
    buyNowButton.style.animation = 'pulse 1.5s infinite';

    // Add hover effect
    buyNowButton.addEventListener('mouseover', () => {
    buyNowButton.style.backgroundColor = '#e64a19';
    });
    buyNowButton.addEventListener('mouseout', () => {
    buyNowButton.style.backgroundColor = '#ff5722';
    });

    // Add click event to handle button click
    buyNowButton.addEventListener('click', () => {
    // Add your checkout link here
    window.location.href = 'https://knorish.com';
    });

    // Append the button to the body
    document.body.appendChild(buyNowButton);

    // Add keyframes for pulse animation
    const style = document.createElement('style');
    style.textContent = `
    @keyframes pulse {
    0% {
    transform: scale(1);
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
    }
    50% {
    transform: scale(1.05);
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.3);
    }
    100% {
    transform: scale(1);
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
    }
    }
    `;
    document.head.appendChild(style);
    </script>

Once done, here's what it will look like:


Sample 2 - Code for creating a full-width block with text and button fixed at the footer with a blinking animation

Here's the sample code, copy this code and paste on code content block on landing page. Save the changes and click to preview it.

Info
IMPORTANT - Please ensure to replace the checkout link/ URL in the sample code below.
  1. <script>
    // Create a container div
    const offerDiv = document.createElement('div');
    offerDiv.id = 'offerDiv';
    offerDiv.style.position = 'fixed';
    offerDiv.style.bottom = '0';
    offerDiv.style.left = '0';
    offerDiv.style.right = '0';
    offerDiv.style.backgroundColor = '#ffffff';
    offerDiv.style.color = '#333';
    offerDiv.style.display = 'flex';
    offerDiv.style.justifyContent = 'space-between';
    offerDiv.style.alignItems = 'center';
    offerDiv.style.padding = '10px 15px';
    offerDiv.style.boxShadow = '0 -2px 5px rgba(0, 0, 0, 0.2)';
    offerDiv.style.zIndex = '1000';

    // Add the offer text
    const offerText = document.createElement('span');
    offerText.textContent = 'Hurry, grab the offer now';
    offerText.style.fontSize = '16px';
    offerText.style.fontWeight = 'bold';
    offerText.style.color = '#333';

    // Create a "Buy Now" button
    const buyNowButton = document.createElement('button');
    buyNowButton.id = 'buyNowButton';
    buyNowButton.textContent = 'Buy Now';

    // Apply styles to the button
    buyNowButton.style.backgroundColor = '#ff5722';
    buyNowButton.style.color = 'white';
    buyNowButton.style.border = 'none';
    buyNowButton.style.padding = '10px 20px';
    buyNowButton.style.fontSize = '16px';
    buyNowButton.style.fontWeight = 'bold';
    buyNowButton.style.cursor = 'pointer';
    buyNowButton.style.borderRadius = '5px';
    buyNowButton.style.transition = 'all 0.3s ease';
    buyNowButton.style.animation = 'pulse 1.5s infinite';

    // Add hover effect for the button
    buyNowButton.addEventListener('mouseover', () => {
    buyNowButton.style.backgroundColor = '#e64a19';
    });
    buyNowButton.addEventListener('mouseout', () => {
    buyNowButton.style.backgroundColor = '#ff5722';
    });

    // Add click event to handle button click
    buyNowButton.addEventListener('click', () => {
    // Add your checkout link here
    window.location.href = 'https://knorish.com';
    });

    // Append text and button to the container div
    offerDiv.appendChild(offerText);
    offerDiv.appendChild(buyNowButton);

    // Append the container div to the body
    document.body.appendChild(offerDiv);

    // Add keyframes for pulse animation
    const style = document.createElement('style');
    style.textContent = `
    @keyframes pulse {
    0% {
    transform: scale(1);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    }
    50% {
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }
    100% {
    transform: scale(1);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    }
    }
    `;
    document.head.appendChild(style);
    </script>

Once done, here's how the code will appear

Sample 3 - Code for creating a full-width block with countdown timer, text and button fixed at the footer with a blinking animation

Here's the sample code, copy this code and paste on code content block on landing page. Save the changes and click to preview it.

Info
IMPORTANT - Please replace the checkout link/URL  in the sample code below. Plus ensure to replace the offer ending time based on your requirements. The date and time must be in UTC format to ensure consistency for users from any country.

  1. <script>
    // Set the fixed offer end UTC time
    const offerEndUTC = new Date('2024-12-12T00:00:00Z').getTime(); // Replace with your UTC end time

    // Create a container div
    const offerDiv = document.createElement('div');
    offerDiv.id = 'offerDiv';
    offerDiv.style.position = 'fixed';
    offerDiv.style.bottom = '0';
    offerDiv.style.left = '0';
    offerDiv.style.right = '0';
    offerDiv.style.backgroundColor = '#ffffff';
    offerDiv.style.color = '#333';
    offerDiv.style.display = 'flex';
    offerDiv.style.justifyContent = 'space-between';
    offerDiv.style.alignItems = 'center';
    offerDiv.style.padding = '10px 15px';
    offerDiv.style.boxShadow = '0 -2px 5px rgba(0, 0, 0, 0.2)';
    offerDiv.style.zIndex = '1000';

    // Add the offer text
    const offerText = document.createElement('span');
    offerText.style.fontSize = '16px';
    offerText.style.fontWeight = 'bold';
    offerText.style.color = '#333';

    // Update the countdown timer every second
    const updateCountdown = () => {
    const currentTimeUTC = new Date().getTime(); // Current UTC time in milliseconds
    const timeLeft = offerEndUTC - currentTimeUTC;

    if (timeLeft > 0) {
    const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
    offerText.textContent = `Offer ends in ${hours}h ${minutes}m ${seconds}s`;
    } else {
    offerText.textContent = 'Offer has ended!';
    clearInterval(countdownInterval); // Stop the countdown
    }
    };

    const countdownInterval = setInterval(updateCountdown, 1000); // Start the countdown
    updateCountdown(); // Initial call to set the text immediately

    // Create a "Buy Now" button
    const buyNowButton = document.createElement('button');
    buyNowButton.id = 'buyNowButton';
    buyNowButton.textContent = 'Buy Now';

    // Apply styles to the button
    buyNowButton.style.backgroundColor = '#ff5722';
    buyNowButton.style.color = 'white';
    buyNowButton.style.border = 'none';
    buyNowButton.style.padding = '10px 20px';
    buyNowButton.style.fontSize = '16px';
    buyNowButton.style.fontWeight = 'bold';
    buyNowButton.style.cursor = 'pointer';
    buyNowButton.style.borderRadius = '5px';
    buyNowButton.style.transition = 'all 0.3s ease';
    buyNowButton.style.animation = 'pulse 1.5s infinite';

    // Add hover effect for the button
    buyNowButton.addEventListener('mouseover', () => {
    buyNowButton.style.backgroundColor = '#e64a19';
    });
    buyNowButton.addEventListener('mouseout', () => {
    buyNowButton.style.backgroundColor = '#ff5722';
    });

    // Add click event to handle button click
    buyNowButton.addEventListener('click', () => {
    // Add your checkout link here
    window.location.href = 'https://knorish.com';
    });

    // Append text and button to the container div
    offerDiv.appendChild(offerText);
    offerDiv.appendChild(buyNowButton);

    // Append the container div to the body
    document.body.appendChild(offerDiv);

    // Add keyframes for pulse animation
    const style = document.createElement('style');
    style.textContent = `
    @keyframes pulse {
    0% {
    transform: scale(1);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    }
    50% {
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }
    100% {
    transform: scale(1);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    }
    }
    `;
    document.head.appendChild(style);
    </script>
Here's how the code will look once added:

Any adjustment in custom code can be done using AI, watch our sample videos to learn it.


    • Related Articles

    • Create FOMO with notifications on your landing page

      Knorish provides the flexibility to customize your site exactly as you want. It allows you to write plain JavaScript code to implement any custom functionality you need. In this post, we will demonstrate how to create FOMO signals for your users ...

    • Create course, website or landing pages using the old page builder

      This article covers details on how to build new course, site or landing pages using the old Knorish page builder. For using the new page builder which is the default page builder, refer to the Article: Create A Page Using The New Page Builder Using A ...

    • How to design or create a page using the new Page Builder?

      Create stunning web and landing pages with animations, AI and tons of different designs effortlessly. No coding skills needed. The Knorish page builder offers a wide variety of options for quickly designing and launching your web pages for your ...

    • Adding an 'Accept Cookies' policy and 'GDPR' policy popup to all pages or a specific landing page

      With GDPR and data privacy being a key concern across the world, your site also needs to comply with the data privacy laws that are applicable across nations. As such, you can enable a cookie policy on your site and a GDPR policy pop up as well. For ...

    • How do I add a countdown timer to my website?

      Countdown timers help to show a countdown to some special offer starting or the offers ending. This can lead to reduced abandoned carts& increased sales. Here are the steps to setup a countdown timer on your site page. Create a Count-down Timer For ...