Getting Started

Step 1: Add the script

Include the script once, right before the closing </body> tag.

<script defer async src="<>"></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 = '<>';
    script.async = true;
    script.defer = true;
    return () => {
}, []);

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.


	style="height: 44px; width: 312px"

<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.


Button Settings


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.