How can I set up a custom code button in Webflow that waits 2 seconds before redirecting to a specific URL when clicked?
TL;DR
- Create a button in Webflow and assign it a class for targeting.
- Add a custom JavaScript code in the Project Settings' Footer Code section to implement a 2-second delay before redirecting.
- Replace the placeholder URL with the desired redirect URL, publish the site, and test the button functionality.
To set up a custom code button in Webflow that waits 2 seconds before redirecting, you'll need to use a combination of Webflow's design tools and custom JavaScript.
1. Create the Button in Webflow
- Add a Button: Drag a button element onto your Webflow canvas where you want it to appear.
- Class the Button: Assign a class to the button for easier targeting (e.g.,
delay-redirect-button).
2. Add Custom Code
- Go to your Project Settings: Navigate to the Custom Code section.
- Place the script: Insert the following code inside the Footer Code section:
```plaintext
<script>
document.addEventListener("DOMContentLoaded", function() {
const button = document.querySelector('.delay-redirect-button');
if (button) {
button.addEventListener('click', function() {
setTimeout(function() {
window.location.href = "https://www.specific-url.com";
}, 2000);
});
}
});
</script>
```
- Replace URL: Ensure you replace
"https://www.specific-url.com"with the desired URL you want to redirect to.
3. Publish Your Site
- Publish Changes: After adding the custom code, make sure to publish your site so the changes take effect.
4. Test Your Button
- Check the Functionality: Click on the button to ensure it waits for 2 seconds before redirecting to the specified URL.
Summary
To set up a button with a delay in Webflow, create the button with a specific class, add custom JavaScript in the Footer Code to handle the delay, update the URL, and publish your changes. This approach provides a seamless delay before redirecting users to the desired page.