🚀 Integrating FriendlyCaptcha in ServiceNow Citizen CSM Portal – SDK vs. Script Tag Approach

[Dimitri Destin]

📌Context:
In our Citizen CSM portal, we use Record Producers to allow users to submit requests. To secure these forms against bots, we’ve implemented FriendlyCaptcha.

FriendlyCaptcha offers two implementation methods (see: Installation Options A & B)

1. Option A (Current Approach): Load the JavaScript via an HTML <script> tag. This allows basic interaction with the captcha object/events.
2. Option B (SDK Approach): Use the full FriendlyCaptcha SDK, which provides advanced methods and finer control over the captcha behavior (e.g., sdk.createWidget()).
   • SDK Documentation: FriendlyCaptcha SDK v2

---

❓Problem Statement:
We want to switch from the <script> tag method to the SDK approach to leverage its full capabilities. However, we’re facing technical constraints in ServiceNow:

• Limitation: In a ServiceNow widget, we cannot directly use npm import (e.g., import { FriendlyCaptchaSDK } from "@friendlycaptcha/sdk").
• Attempted Solution: We tried creating a UI Script + Dependencies + JS Include and linking it to our widget, but we cannot successfully instantiate the captcha object using sdk.createWidget().

---

🔍Key Questions:

1. SDK Loading in ServiceNow:

   • Should we copy the entire SDK code from https://cdn.jsdelivr.net/npm/@friendlycaptcha/sdk@1.0.2/site.compat.min.js directly into our UI Script?
   • Or is there a better way to load the SDK in ServiceNow (e.g., via a JS Include or Client Script)?

2. SDK vs. Compat Script:

   • The SDK script (@friendlycaptcha/sdk@1.0.2) and the compat script (site.compat.min.js) are not the same.
     • Which one should we use for ServiceNow widgets?
     • Are there compatibility issues with ServiceNow’s environment?

3. Direct Import Feasibility:

   • Can we use ES6 import syntax in a ServiceNow widget (e.g., import { FriendlyCaptchaSDK } from "@friendlycaptcha/sdk")?
   • If not, what’s the recommended workaround?

---

💡Additional Context:

• Our goal is to replace the basic <script> tag implementation with the SDK’s createWidget() method for better control (e.g., custom styling, programmatic validation, or dynamic rendering).
• We’re unsure whether ServiceNow’s UI Script/JS Include system can properly expose the SDK’s classes/methods to our widget scope.

---

❔Has anyone in the community successfully integrated FriendlyCaptcha’s SDK in ServiceNow?
If so, could you share:

• Your implementation approach (UI Script, JS Include, Client Script, etc.)?
• Any pitfalls or workarounds for loading the SDK?
• A code snippet for reference?

🙏Thanks in advance for your insights! Let’s collaborate to find the best way to make this work in ServiceNow.

---

Why This Matters:

• Security: FriendlyCaptcha is a privacy-focused alternative to reCAPTCHA, aligning with GDPR/ethical data practices.
• User Experience: The SDK allows smoother integration (e.g., custom triggers, dynamic loading).
• Future-Proofing: The SDK is more maintainable and supports advanced features (e.g., FriendlyCaptcha Enterprise).

Thanks in advance for your help!

Dimitri

#ServiceNow #CitizenCSM #FriendlyCaptcha #JavaScript #SDK #WidgetDevelopment #Integration #Security #Frontend