Calling from Widget Code

Call a connector by its permalink using the SDK. The SDK is loaded automatically by Customer Community and exposed on window.WidgetServiceSDK inside every widget — no script tag is required. The SDK sends the request to the backend connector instead of calling the destination API directly. See the Widget SDK overview for constructor options.

Call a connector

Use sdk.connectors.execute() with the connector's permalink. The method parameter must match the HTTP method configured on the connector (GET, POST, PUT, PATCH, DELETE, HEAD, or OPTIONS).

The (async () => { ... })(); wrapper is required because widget <script> tags are not ES modules — top-level await is only available in <script type="module">.

GET with query parameters

(async () => {
  const sdk = new window.WidgetServiceSDK();
  try {
    const data = await sdk.connectors.execute({
      permalink: "weather-api",
      method: "GET",
      queryParams: {
        q: "Warsaw"
      }
    });
    console.log(data);
  } catch (error) {
    console.error("Connector request failed:", error);
  }
})();

POST with JSON body

(async () => {
  const sdk = new window.WidgetServiceSDK();
  try {
    const result = await sdk.connectors.execute({
      permalink: "plantbook",
      method: "POST",
      payload: { name: "Monstera", size: "M" }
    });
    console.log(result);
  } catch (error) {
    console.error("Connector request failed:", error);
  }
})();

See more usage patterns in Examples.

Never pass user identity from browser code

Data sent from the browser — including queryParams and payload — can be modified by the user. Never pass user IDs, emails, or other identity data as SDK parameters. Instead, use server-side template variables like {{ user.id }} in the connector configuration. See Passing User Context for the secure pattern.

Working with the response

Widget code runs inside Shadow DOM. If you update the DOM after a connector call, query elements through the widget's shadow root, not document. See Rendering & DOM.

Next Steps

• Examples — More usage patterns and advanced options
• Passing User Context — Securely inject user identity into requests
• Testing & Debugging — Verify your connector works and diagnose issues
• Template Variables — Variables and functions available in templates