@followgate/js 0.11.0 → 0.12.1

package/dist/index.d.mts

@@ -10,7 +10,8 @@ type SocialAction = 'follow' | 'repost' | 'like';
  * Twitter/X configuration
  */
 interface TwitterConfig {
-    handle: string;
+    handle?: string;
+    overrideHandle?: string;
     tweetId?: string;
     username?: string;
 }
@@ -112,6 +113,13 @@ declare class FollowGateClient {
     private injectStyles;
     private createModal;
     private getContentElement;
+    /**
+     * Get target handle with priority:
+     * 1. config.twitter.overrideHandle (explicit override)
+     * 2. serverConfig.targetHandle (from Dashboard)
+     * 3. config.twitter.handle (legacy fallback, deprecated)
+     */
+    private getTargetHandle;
     private renderUsernameStep;
     private handleUsernameSubmit;
     private renderFollowStep;

package/dist/index.d.ts

@@ -10,7 +10,8 @@ type SocialAction = 'follow' | 'repost' | 'like';
  * Twitter/X configuration
  */
 interface TwitterConfig {
-    handle: string;
+    handle?: string;
+    overrideHandle?: string;
     tweetId?: string;
     username?: string;
 }
@@ -112,6 +113,13 @@ declare class FollowGateClient {
     private injectStyles;
     private createModal;
     private getContentElement;
+    /**
+     * Get target handle with priority:
+     * 1. config.twitter.overrideHandle (explicit override)
+     * 2. serverConfig.targetHandle (from Dashboard)
+     * 3. config.twitter.handle (legacy fallback, deprecated)
+     */
+    private getTargetHandle;
     private renderUsernameStep;
     private handleUsernameSubmit;
     private renderFollowStep;

package/dist/index.js

@@ -446,6 +446,35 @@ var MODAL_STYLES = `
   color: #94a3b8;
 }
 
+.fg-close-btn {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: transparent;
+  border: 1px solid #334155;
+  color: #64748b;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+  padding: 0;
+}
+
+.fg-close-btn:hover {
+  background: #1e293b;
+  color: #94a3b8;
+  border-color: #475569;
+}
+
+.fg-close-btn svg {
+  width: 16px;
+  height: 16px;
+}
+
 .fg-btn-row {
   display: flex;
   gap: 8px;
@@ -462,7 +491,8 @@ var ICONS = {
   x: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>',
   check: '<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>',
   repost: '<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>',
-  warning: '<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>'
+  warning: '<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>',
+  close: '<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>'
 };
 var FollowGateClient = class {
   config = null;
@@ -635,6 +665,9 @@ var FollowGateClient = class {
     backdrop.className = "fg-modal-backdrop";
     backdrop.innerHTML = `
       <div class="fg-modal">
+        <button class="fg-close-btn" id="fg-close-btn" aria-label="Close">
+          ${ICONS.close}
+        </button>
         <div id="fg-content"></div>
         <div class="fg-footer">
           <p>Powered by <a href="https://followgate.app" target="_blank" rel="noopener">FollowGate</a></p>
@@ -643,6 +676,9 @@ var FollowGateClient = class {
     `;
     document.body.appendChild(backdrop);
     this.modalElement = backdrop;
+    document.getElementById("fg-close-btn")?.addEventListener("click", () => {
+      this.hide(true);
+    });
     requestAnimationFrame(() => {
       backdrop.classList.add("fg-visible");
     });
@@ -655,10 +691,28 @@ var FollowGateClient = class {
   getContentElement() {
     return document.getElementById("fg-content");
   }
+  /**
+   * Get target handle with priority:
+   * 1. config.twitter.overrideHandle (explicit override)
+   * 2. serverConfig.targetHandle (from Dashboard)
+   * 3. config.twitter.handle (legacy fallback, deprecated)
+   */
+  getTargetHandle() {
+    if (this.config?.twitter?.overrideHandle) {
+      return this.config.twitter.overrideHandle;
+    }
+    if (this.serverConfig?.targetHandle) {
+      return this.serverConfig.targetHandle;
+    }
+    if (this.config?.twitter?.handle) {
+      return this.config.twitter.handle;
+    }
+    return null;
+  }
   renderUsernameStep() {
     const content = this.getContentElement();
     if (!content) return;
-    const handle = this.serverConfig?.targetHandle || this.config?.twitter?.handle;
+    const handle = this.getTargetHandle();
     const hasRepost = !!this.config?.twitter?.tweetId;
     const allowSkip = this.serverConfig?.allowSkip ?? false;
     const welcomeTitle = this.serverConfig?.welcomeTitle || "Unlock Free Access";
@@ -713,9 +767,19 @@ var FollowGateClient = class {
   }
   renderFollowStep() {
     const content = this.getContentElement();
-    if (!content || !this.config?.twitter) return;
-    const handle = this.config.twitter.handle;
-    const hasRepost = !!this.config.twitter.tweetId;
+    if (!content) return;
+    const handle = this.getTargetHandle();
+    if (!handle) {
+      console.error(
+        "[FollowGate] No target handle configured. Set it in Dashboard or use overrideHandle."
+      );
+      return;
+    }
+    const hasRepost = !!this.config?.twitter?.tweetId;
+    const defaultTitle = hasRepost ? "Step 1: Follow" : "Follow to Continue";
+    const defaultMessage = `Follow @${handle} on X`;
+    const title = this.serverConfig?.welcomeTitle || defaultTitle;
+    const message = this.serverConfig?.welcomeMessage || defaultMessage;
     content.innerHTML = `
       ${hasRepost ? this.renderStepIndicator(1) : ""}
       <div class="fg-icon-box">
@@ -727,8 +791,8 @@ var FollowGateClient = class {
           <span class="fg-user-badge-text">@${this.currentUser.username}</span>
         </div>
       ` : ""}
-      <h2 class="fg-title">${hasRepost ? "Step 1: Follow" : "Follow to Continue"}</h2>
-      <p class="fg-subtitle" id="fg-follow-subtitle">Follow @${handle} on X</p>
+      <h2 class="fg-title">${this.escapeHtml(title)}</h2>
+      <p class="fg-subtitle" id="fg-follow-subtitle">${this.escapeHtml(message)}</p>
       <div id="fg-follow-actions">
         <button class="fg-btn fg-btn-dark" id="fg-follow-btn">
           ${ICONS.x}
@@ -754,8 +818,8 @@ var FollowGateClient = class {
     }
   }
   handleFollowClick() {
-    if (!this.config?.twitter) return;
-    const handle = this.config.twitter.handle;
+    const handle = this.getTargetHandle();
+    if (!handle) return;
     this.openIntent({
       platform: "twitter",
       action: "follow",
@@ -764,8 +828,8 @@ var FollowGateClient = class {
     this.showFollowConfirmation();
   }
   showFollowConfirmation() {
-    if (!this.config?.twitter) return;
-    const handle = this.config.twitter.handle;
+    const handle = this.getTargetHandle();
+    if (!handle) return;
     const subtitle = document.getElementById("fg-follow-subtitle");
     const actions = document.getElementById("fg-follow-actions");
     if (subtitle) {
@@ -811,14 +875,14 @@ var FollowGateClient = class {
     }
   }
   async handleFollowConfirm() {
-    if (!this.config?.twitter) return;
-    const handle = this.config.twitter.handle;
+    const handle = this.getTargetHandle();
+    if (!handle) return;
     await this.complete({
       platform: "twitter",
       action: "follow",
       target: handle
     });
-    if (this.config.twitter.tweetId) {
+    if (this.config?.twitter?.tweetId) {
       this.renderRepostStep();
     } else {
       this.renderConfirmStep();
@@ -969,11 +1033,12 @@ var FollowGateClient = class {
       this.handleFinish();
     });
     document.getElementById("fg-redo-follow")?.addEventListener("click", () => {
-      if (this.config?.twitter) {
+      const handle = this.getTargetHandle();
+      if (handle) {
         this.openIntent({
           platform: "twitter",
           action: "follow",
-          target: this.config.twitter.handle
+          target: handle
         });
       }
     });

package/dist/index.mjs

@@ -420,6 +420,35 @@ var MODAL_STYLES = `
   color: #94a3b8;
 }
 
+.fg-close-btn {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: transparent;
+  border: 1px solid #334155;
+  color: #64748b;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+  padding: 0;
+}
+
+.fg-close-btn:hover {
+  background: #1e293b;
+  color: #94a3b8;
+  border-color: #475569;
+}
+
+.fg-close-btn svg {
+  width: 16px;
+  height: 16px;
+}
+
 .fg-btn-row {
   display: flex;
   gap: 8px;
@@ -436,7 +465,8 @@ var ICONS = {
   x: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>',
   check: '<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>',
   repost: '<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>',
-  warning: '<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>'
+  warning: '<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>',
+  close: '<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>'
 };
 var FollowGateClient = class {
   config = null;
@@ -609,6 +639,9 @@ var FollowGateClient = class {
     backdrop.className = "fg-modal-backdrop";
     backdrop.innerHTML = `
       <div class="fg-modal">
+        <button class="fg-close-btn" id="fg-close-btn" aria-label="Close">
+          ${ICONS.close}
+        </button>
         <div id="fg-content"></div>
         <div class="fg-footer">
           <p>Powered by <a href="https://followgate.app" target="_blank" rel="noopener">FollowGate</a></p>
@@ -617,6 +650,9 @@ var FollowGateClient = class {
     `;
     document.body.appendChild(backdrop);
     this.modalElement = backdrop;
+    document.getElementById("fg-close-btn")?.addEventListener("click", () => {
+      this.hide(true);
+    });
     requestAnimationFrame(() => {
       backdrop.classList.add("fg-visible");
     });
@@ -629,10 +665,28 @@ var FollowGateClient = class {
   getContentElement() {
     return document.getElementById("fg-content");
   }
+  /**
+   * Get target handle with priority:
+   * 1. config.twitter.overrideHandle (explicit override)
+   * 2. serverConfig.targetHandle (from Dashboard)
+   * 3. config.twitter.handle (legacy fallback, deprecated)
+   */
+  getTargetHandle() {
+    if (this.config?.twitter?.overrideHandle) {
+      return this.config.twitter.overrideHandle;
+    }
+    if (this.serverConfig?.targetHandle) {
+      return this.serverConfig.targetHandle;
+    }
+    if (this.config?.twitter?.handle) {
+      return this.config.twitter.handle;
+    }
+    return null;
+  }
   renderUsernameStep() {
     const content = this.getContentElement();
     if (!content) return;
-    const handle = this.serverConfig?.targetHandle || this.config?.twitter?.handle;
+    const handle = this.getTargetHandle();
     const hasRepost = !!this.config?.twitter?.tweetId;
     const allowSkip = this.serverConfig?.allowSkip ?? false;
     const welcomeTitle = this.serverConfig?.welcomeTitle || "Unlock Free Access";
@@ -687,9 +741,19 @@ var FollowGateClient = class {
   }
   renderFollowStep() {
     const content = this.getContentElement();
-    if (!content || !this.config?.twitter) return;
-    const handle = this.config.twitter.handle;
-    const hasRepost = !!this.config.twitter.tweetId;
+    if (!content) return;
+    const handle = this.getTargetHandle();
+    if (!handle) {
+      console.error(
+        "[FollowGate] No target handle configured. Set it in Dashboard or use overrideHandle."
+      );
+      return;
+    }
+    const hasRepost = !!this.config?.twitter?.tweetId;
+    const defaultTitle = hasRepost ? "Step 1: Follow" : "Follow to Continue";
+    const defaultMessage = `Follow @${handle} on X`;
+    const title = this.serverConfig?.welcomeTitle || defaultTitle;
+    const message = this.serverConfig?.welcomeMessage || defaultMessage;
     content.innerHTML = `
       ${hasRepost ? this.renderStepIndicator(1) : ""}
       <div class="fg-icon-box">
@@ -701,8 +765,8 @@ var FollowGateClient = class {
           <span class="fg-user-badge-text">@${this.currentUser.username}</span>
         </div>
       ` : ""}
-      <h2 class="fg-title">${hasRepost ? "Step 1: Follow" : "Follow to Continue"}</h2>
-      <p class="fg-subtitle" id="fg-follow-subtitle">Follow @${handle} on X</p>
+      <h2 class="fg-title">${this.escapeHtml(title)}</h2>
+      <p class="fg-subtitle" id="fg-follow-subtitle">${this.escapeHtml(message)}</p>
       <div id="fg-follow-actions">
         <button class="fg-btn fg-btn-dark" id="fg-follow-btn">
           ${ICONS.x}
@@ -728,8 +792,8 @@ var FollowGateClient = class {
     }
   }
   handleFollowClick() {
-    if (!this.config?.twitter) return;
-    const handle = this.config.twitter.handle;
+    const handle = this.getTargetHandle();
+    if (!handle) return;
     this.openIntent({
       platform: "twitter",
       action: "follow",
@@ -738,8 +802,8 @@ var FollowGateClient = class {
     this.showFollowConfirmation();
   }
   showFollowConfirmation() {
-    if (!this.config?.twitter) return;
-    const handle = this.config.twitter.handle;
+    const handle = this.getTargetHandle();
+    if (!handle) return;
     const subtitle = document.getElementById("fg-follow-subtitle");
     const actions = document.getElementById("fg-follow-actions");
     if (subtitle) {
@@ -785,14 +849,14 @@ var FollowGateClient = class {
     }
   }
   async handleFollowConfirm() {
-    if (!this.config?.twitter) return;
-    const handle = this.config.twitter.handle;
+    const handle = this.getTargetHandle();
+    if (!handle) return;
     await this.complete({
       platform: "twitter",
       action: "follow",
       target: handle
     });
-    if (this.config.twitter.tweetId) {
+    if (this.config?.twitter?.tweetId) {
       this.renderRepostStep();
     } else {
       this.renderConfirmStep();
@@ -943,11 +1007,12 @@ var FollowGateClient = class {
       this.handleFinish();
     });
     document.getElementById("fg-redo-follow")?.addEventListener("click", () => {
-      if (this.config?.twitter) {
+      const handle = this.getTargetHandle();
+      if (handle) {
         this.openIntent({
           platform: "twitter",
           action: "follow",
-          target: this.config.twitter.handle
+          target: handle
         });
       }
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@followgate/js",
-  "version": "0.11.0",
+  "version": "0.12.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",