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.
Table of contents
- How to add the custom code on a landing page?
- How to customize the sticky button and timerscolors?
- Sample 1 - Code for creating a full-width button fixed at the footer with a blinking animation
- Sample 2 - Code for creating a full-width block with text and button fixed at the footer with a blinking animation
- Sample 3 - Code for creating a full-width block with countdown timer, text and button fixed at the footer with a blinking animation
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?
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:
Steps to Customize the Code:
- Copy the original JavaScript code from the sample provided below.
- Open AI Tool such as ChatGPT: Paste the code into the chat.
- Also paste the prompt below to instruct ChatGPT on how to update the code.
- Copy the updated JavaScript code generated by ChatGPT and paste it back into your landing page’s code block.
- 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.
IMPORTANT - Please replace checkout link in the sample code.
<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.
IMPORTANT - Please replace checkout link in the sample code.
<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 what it will look like:
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.
IMPORTANT 1 - Please replace checkout link in the sample code.
IMPORTANT 2 - Please 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.
<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>Once done, here's what it will look like:
Any adjustment in custom code can be done using AI, watch our sample videos to learn it.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article