Skip to content

add: add content in apply-with-devfolio-integration file #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
veesesh wants to merge 1 commit into from
Closed

add: add content in apply-with-devfolio-integration file #2

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
140 changes: 68 additions & 72 deletions content/docs/guide/apply-with-devfolio-integration.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,77 +3,73 @@ title: Apply with Devfolio Integration
description: Quick steps for Apply with Devfolio Integration button
---


# ✅ Apply with Devfolio Integration

{/* <Accordions type="single">
<Accordion title="Step 1: Add the Script" id="step-1">
Include the script once, right before the closing <code>&lt;/body&gt;</code> tag:

```html
<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:

```jsx
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);
};
}, []);
```
</Accordion>

<Accordion title="Step 2: Specify Button Element(s)" id="step-2">
Copy and paste this code where you want the 'Apply with Devfolio' button to appear on your website:

<Callout title="Note" type="info">
Don't forget to replace <code>YOUR-HACKATHON-SLUG</code> with your hackathon's actual slug.
</Callout>

```html
<div
class="apply-button"
data-hackathon-slug="YOUR-HACKATHON-SLUG"
data-button-theme="light"
style="height: 44px; width: 312px"
></div>
```
<Callout title="Warning" type="warn">
Even after adding the code, the button <strong>won't be visible</strong> right away. For it to be visible, your hackathon must be verified on Devfolio.
</Callout>

</Accordion>

<Accordion title="Button Settings" id="button-settings">
| Name | Description | Value |
| ------------------- | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- |
| data-hackathon-slug | The slug/key of your hackathon. Refer to the [Links Tab](setup/links.md#devfolio-microsite-url) for more details | 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

<img src="/assets/applywithdevfolio.png" alt="Themes for Apply with Devfolio Button" />

<Callout title="Warning" type="warn">
Even after adding the code, the button <strong>won't be visible</strong> right away. For it to be visible, your hackathon must be verified on Devfolio.
</Callout>

</Accordion>

<Accordion title="Debugging" id="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.
</Accordion>
</Accordions> */}
## Step 1: Add the script

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

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

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

<Callout title="Note" type="info">
Don't forget to replace **YOUR-HACKATHON-SLUG** with your hackathon's actual slug.
</Callout>

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

<Callout title="Warning" type="warn">
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.
</Callout>

## Button Settings

| Name | Description | Value |
| ------------------- | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- |
| data-hackathon-slug | The slug/key of your hackathon. Refer to the [Links Tab](setting-up-your-hackathon/links-tab) for more details | 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**

<img src="/assets/applywithdevfolio.png" alt="Themes for Apply with Devfolio Button" />

<Callout title="Warning" type="danger">
As a security measure, we disable the button's functionality over website addresses other than the one you specify in the hackathon's setup.
</Callout>

## 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
Loading