Devfolio

Apply with Devfolio Integration

💡 Tip: Use this dropdown to get help from AI tools like ChatGPT or Claude.

Quick steps for Apply with Devfolio Integration button

✅ Apply with Devfolio Integration

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.

Note

Don't forget to replace YOUR-HACKATHON-SLUG with your hackathon's actual slug.

<div 
	class="apply-button" 
	data-hackathon-slug="YOUR-HACKATHON-SLUG" 
	data-button-theme="light"
	style="height: 44px; width: 312px"
></div>

Warning

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.

Button Settings

NameDescriptionValue
data-hackathon-slugThe slug/key of your hackathon. Refer to the Links Tab for more detailsString
data-button-themeControls the appearance of the button. Refer to the screenshot below!"light", "dark", "dark-inverted"

Customisation via the data-button-theme attribute

Themes for Apply with Devfolio Button

Warning

As a security measure, we disable the button's functionality over website addresses other than the one you specify in the hackathon's setup.

Debugging

In case your website is not being verified, you can check for the following:

  1. You've added an https:// before your website URL
  2. Your slug value for the button is correct
  3. The sponsor <img> has the correct ALT tags

How is this guide?