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
- Add a button on your canvas, apply a class, and embed a script via HTML Embed for delay upon click.
- Customize your target URL in the script, publish the site, and test functionality.
To create a custom code button in Webflow that waits 2 seconds before redirecting to a specific URL, follow these steps:
1. Add a Button Element
- Drag a button from the Add panel onto your canvas within the desired section.
- Ensure the button has a class name (e.g., "delay-button") for easier targeting.
2. Embed Custom Code
- Select the button and add an HTML Embed from the Add panel near the desired location on your page.
- Insert the following code in the HTML Embed:
<button class="delay-button">Click me</button>
<script>
document.querySelector('.delay-button').addEventListener('click', function() {
setTimeout(function() {
window.location.href = 'https://your-target-url.com';
}, 2000); // 2000 milliseconds = 2 seconds
});
</script>
3. Customize the URL
- Replace
'https://your-target-url.com'with your actual target URL. - Ensure the URL starts with "http://" or "https://".
4. Publish and Test
- Publish your site to check the button's functionality.
- Click the button and ensure it waits 2 seconds before redirecting to the specified URL.
Summary
To create a button in Webflow that delays redirect by 2 seconds, add a button element, embed a script using an HTML Embed, and specify your target URL. Publish and test to ensure proper functionality.