LogoLogo
  • ๐Ÿ’™Devfolio glossary
    • ๐ŸคDevfolio for Organizers and Hackers
    • ๐Ÿ“ƒHackathons on Devfolio
    • ๐Ÿ’ฐQuadratic Voting on Devfolio
    • ๐ŸŒธCrypto Cheer
    • โš’๏ธJudging
    • ๐ŸŽOnchain Credentials
  • ๐Ÿคนโ€โ™‚๏ธ Devfolio for Organizers
    • ๐Ÿ‘‹Set up your first hackathon on Devfolio
    • ๐Ÿ”จSetting up your Hackathon
      • ๐Ÿ“•Basics Tab
      • ๐Ÿ“„Application Tab
      • ๐Ÿ”—Links Tab
      • ๐ŸŽจBrand Tab
      • ๐Ÿ“…Dates Tab
      • ๐Ÿ†Prizes Tab
      • ๐Ÿง‘โ€โš–๏ธJudges Tab
      • ๐ŸคPartner Tab
      • ๐Ÿ™‹โ€โ™‚๏ธFAQs Tab
    • โœจOrganizer Dashboard
      • ๐Ÿ“ŠOverview Tab
      • ๐Ÿ“œReview Tab
      • ๐Ÿ‘‘Admin Tab
      • ๐ŸคผTeam Tab
      • โž•Additional Tabs
        • ๐Ÿ‘‹Volunteer Tab
        • ๐Ÿ“šLogistics Tab
      • ๐Ÿ”ผUpdate your Hackathon Details
    • ๐Ÿ’ซWrapping up the Hackathon
      • โœ๏ธFeedback Tab
      • ๐Ÿ“ขAnnouncing Hackathon Winners
      • ๐ŸŽSetting Up Onchain Credentials
    • โœ…Apply with Devfolio Integration
    • ๐Ÿ”Leaderboard
    • โ“FAQs for Organizers
  • ๐Ÿ‘จโ€๐Ÿ’ป Devfolio for Hackers
    • ๐Ÿ›ซIntroduction
    • โญYour Devfolio Profile
      • ๐Ÿค˜Signing Up
      • ๐Ÿ˜„Profile Tab
      • ๐Ÿ”งSettings Tab
      • ๐Ÿ˜My Devfolio Tab
      • ๐Ÿ’ชProjects Tab
      • ๐Ÿ…Badges Tab
      • ๐ŸŽClaims
      • ๐Ÿ’กInspire Me
    • ๐ŸšฉParticipating in Hackathons
      • ๐Ÿ“ƒHackathon Modes
      • ๐Ÿ”“Participating in Online Hackathons
      • ๐Ÿ”Applying To Online With Application Review Hackathons
      • ๐ŸคผCreate/Join a Team
      • ๐Ÿ“Project Submission
      • ๐Ÿ‘€View Projects
      • ๐ŸงReport a Project
      • โœ๏ธFeedback Section
    • โ“FAQs for Hackers
Powered by GitBook
On this page
  • Step 1: Add the script
  • Step 2: Specify button element(s)
  • Button Settings
  • Debugging

Was this helpful?

  1. ๐Ÿคนโ€โ™‚๏ธ Devfolio for Organizers

Apply with Devfolio Integration

Quick steps for Apply with Devfolio Integration button

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.

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>

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

Name

Description

Value

data-hackathon-slug

String

data-button-theme

Controls the appearance of the button. Refer to the screenshot below!

"light", "dark", "dark-inverted"

Customisation via the data-button-theme attribute

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

PreviousSetting Up Onchain CredentialsNextLeaderboard

Last updated 1 year ago

Was this helpful?

The slug/key of your hackathon. Refer to the for more details

โœ…
Links Tab
Themes for Apply with Devfolio Button