From d106785d19acb193967dbb2ff16352eaa56c285e Mon Sep 17 00:00:00 2001
From: Vee <vee1912566@gmail.com>
Date: Mon, 4 Aug 2025 15:22:57 +0530
Subject: [PATCH] add: add content in apply-with-devfolio-integration file

---
 .../guide/apply-with-devfolio-integration.mdx | 140 +++++++++---------
 1 file changed, 68 insertions(+), 72 deletions(-)

diff --git a/content/docs/guide/apply-with-devfolio-integration.mdx b/content/docs/guide/apply-with-devfolio-integration.mdx
index 8bf5dd4..ae81c74 100644
--- a/content/docs/guide/apply-with-devfolio-integration.mdx
+++ b/content/docs/guide/apply-with-devfolio-integration.mdx
@@ -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