Include the script once, right before the closing </body> tag.
<script defer async src="<https://apply.devfolio.co/v2/sdk.js>"></script>
Usage with React
If you're using React, load the SDK script dynamically for every page that has the 'Apply with Devfolio' button.
React.useEffect(() => {
const script = document.createElement('script');
script.src = '<https://apply.devfolio.co/v2/sdk.js>';
script.async = true;
script.defer = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
}
}, []);
Copy and paste this code where you want the 'Apply with Devfolio' button to appear on your website.
<aside> 📢 Don't forget to replace YOUR-HACKATHON-SLUG with your hackathon's actual slug.
</aside>
<div
class="apply-button"
data-hackathon-slug="YOUR-HACKATHON-SLUG"
data-button-theme="light"
style="height: 44px; width: 312px"
></div>
<aside> ‼️
Even after adding the code, the button won't be visible right away. For it to be visible, your hackathon must be verified on Devfolio.
</aside>
data-button-theme
attribute<aside> 🚨 As a security measure, we disable the button's functionality over website addresses other than the one you specify in the hackathon's setup.
</aside>