Getting Started

Step 1: Add the script

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);
    }
}, []);

Step 2: Specify button element(s)

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>

Button Settings

Attributes

Customisation via the 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>