@followgate/js 0.14.1 → 0.15.1

package/README.md

@@ -108,6 +108,41 @@ FollowGate.on('unlocked', (data) => {
 });
 ```
 
+## Username Input (2 Methods)
+
+The SDK needs the user's social media username to work. There are exactly 2 ways to provide it:
+
+**Method 1: User enters username manually (default)**
+If no username is passed, the modal shows a Welcome step where the user types their username.
+
+```typescript
+FollowGate.init({
+  appId: 'your-app-id',
+  apiKey: 'fg_live_xxx',
+  twitter: { handle: 'your_handle' },
+});
+
+FollowGate.show(); // → Modal starts with username input step
+```
+
+**Method 2: App passes username via code (skips Welcome step)**
+If your app already knows the user's username (e.g. from your own auth system), pass it directly. The Welcome step is skipped entirely.
+
+```typescript
+FollowGate.init({
+  appId: 'your-app-id',
+  apiKey: 'fg_live_xxx',
+  twitter: {
+    handle: 'your_handle',
+    username: 'their_x_username', // ← skips Welcome step
+  },
+});
+
+FollowGate.show(); // → Modal starts directly with Follow step
+```
+
+> **Note:** No Twitter API calls are made in either case. The SDK uses intent URLs only.
+
 ## Configuration Options
 
 ```typescript

package/dist/index.js

@@ -790,9 +790,9 @@ var FollowGateClient = class {
     const allowSkip = this.serverConfig?.allowSkip ?? false;
     const welcomeTitle = this.serverConfig?.welcomeTitle || "Unlock Free Access";
     const welcomeMessage = this.serverConfig?.welcomeMessage || "Enter your X username to get started";
-    let explanationText = handle ? `Complete a quick follow${hasRepost ? " & repost" : ""} on X for @${handle} to unlock access.` : `Complete a quick social action to unlock access.`;
+    let explanationText = handle ? `Follow @${handle} on X${hasRepost ? " and repost a post" : ""} to unlock.` : `Complete a quick action on X to unlock.`;
     if (allowSkip) {
-      explanationText += ` You can skip if you prefer, but it helps support the developer.`;
+      explanationText += ` You can skip single steps, but it really helps the developer.`;
     }
     content.innerHTML = `
       <div class="fg-icon-box">
@@ -1086,7 +1086,10 @@ var FollowGateClient = class {
       verifyText = "Verifying repost";
     }
     content.innerHTML = `
-      <h2 class="fg-title">${this.escapeHtml(successTitle)}</h2>
+      <div style="display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px;">
+        <span style="color: #4ade80; width: 28px; height: 28px;">${ICONS.check}</span>
+        <h2 class="fg-title" style="margin: 0;">${this.escapeHtml(successTitle)}</h2>
+      </div>
       ${successMessage ? `<p class="fg-subtitle" style="margin-bottom: 16px;">${this.escapeHtml(successMessage)}</p>` : ""}
       <div class="fg-verify-box">
         <div class="fg-verify-box-left">
@@ -1100,16 +1103,20 @@ var FollowGateClient = class {
           </div>
         ` : ""}
       </div>
-      <p class="fg-verify-hint">Verification may take some time</p>
-      <div class="fg-warning-box">
-        ${ICONS.warning}
-        <p><strong>Note:</strong> Access may be revoked if actions are not completed.</p>
+      <div style="text-align: center; margin: 8px 0;">
+        <p style="color: #4ade80; font-size: 13px; margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px;">
+          <span style="width: 14px; height: 14px;">${ICONS.check}</span>
+          Access granted
+        </p>
+        <p class="fg-verify-hint" style="margin: 4px 0 0;">Final verification may take some time</p>
       </div>
+      <p style="color: rgba(250, 204, 21, 0.6); font-size: 11px; margin: 16px 0 20px; text-align: center;">Access may be revoked if actions are not completed.</p>
       <button class="fg-btn fg-btn-green" id="fg-finish-btn">
         ${ICONS.check}
-        Got it
+        Got it \u2014 Continue
       </button>
       ${hasFollow || hasRepost ? `
+        <p style="color: rgba(255,255,255,0.4); font-size: 11px; margin: 24px 0 6px; text-align: center;">Missed something? Open again:</p>
         <div class="fg-btn-row">
           ${hasFollow ? `
             <button class="fg-btn fg-btn-secondary" id="fg-redo-follow">

package/dist/index.mjs

@@ -764,9 +764,9 @@ var FollowGateClient = class {
     const allowSkip = this.serverConfig?.allowSkip ?? false;
     const welcomeTitle = this.serverConfig?.welcomeTitle || "Unlock Free Access";
     const welcomeMessage = this.serverConfig?.welcomeMessage || "Enter your X username to get started";
-    let explanationText = handle ? `Complete a quick follow${hasRepost ? " & repost" : ""} on X for @${handle} to unlock access.` : `Complete a quick social action to unlock access.`;
+    let explanationText = handle ? `Follow @${handle} on X${hasRepost ? " and repost a post" : ""} to unlock.` : `Complete a quick action on X to unlock.`;
     if (allowSkip) {
-      explanationText += ` You can skip if you prefer, but it helps support the developer.`;
+      explanationText += ` You can skip single steps, but it really helps the developer.`;
     }
     content.innerHTML = `
       <div class="fg-icon-box">
@@ -1060,7 +1060,10 @@ var FollowGateClient = class {
       verifyText = "Verifying repost";
     }
     content.innerHTML = `
-      <h2 class="fg-title">${this.escapeHtml(successTitle)}</h2>
+      <div style="display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px;">
+        <span style="color: #4ade80; width: 28px; height: 28px;">${ICONS.check}</span>
+        <h2 class="fg-title" style="margin: 0;">${this.escapeHtml(successTitle)}</h2>
+      </div>
       ${successMessage ? `<p class="fg-subtitle" style="margin-bottom: 16px;">${this.escapeHtml(successMessage)}</p>` : ""}
       <div class="fg-verify-box">
         <div class="fg-verify-box-left">
@@ -1074,16 +1077,20 @@ var FollowGateClient = class {
           </div>
         ` : ""}
       </div>
-      <p class="fg-verify-hint">Verification may take some time</p>
-      <div class="fg-warning-box">
-        ${ICONS.warning}
-        <p><strong>Note:</strong> Access may be revoked if actions are not completed.</p>
+      <div style="text-align: center; margin: 8px 0;">
+        <p style="color: #4ade80; font-size: 13px; margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px;">
+          <span style="width: 14px; height: 14px;">${ICONS.check}</span>
+          Access granted
+        </p>
+        <p class="fg-verify-hint" style="margin: 4px 0 0;">Final verification may take some time</p>
       </div>
+      <p style="color: rgba(250, 204, 21, 0.6); font-size: 11px; margin: 16px 0 20px; text-align: center;">Access may be revoked if actions are not completed.</p>
       <button class="fg-btn fg-btn-green" id="fg-finish-btn">
         ${ICONS.check}
-        Got it
+        Got it \u2014 Continue
       </button>
       ${hasFollow || hasRepost ? `
+        <p style="color: rgba(255,255,255,0.4); font-size: 11px; margin: 24px 0 6px; text-align: center;">Missed something? Open again:</p>
         <div class="fg-btn-row">
           ${hasFollow ? `
             <button class="fg-btn fg-btn-secondary" id="fg-redo-follow">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@followgate/js",
-  "version": "0.14.1",
+  "version": "0.15.1",
   "description": "FollowGate SDK - Grow your audience with every download. Require social actions (follow, repost) before users can access your app.",
   "author": "FollowGate <hello@followgate.app>",
   "homepage": "https://followgate.app",