Appearance
Are you an LLM? You can read better optimized documentation at /docs/sdk/widget-sdk/examples.md for this page in Markdown format
Examples
Ready-to-use code examples for common widget patterns using the SDK. Each example shows a complete, self-contained call to connectors.execute that you can copy and adapt.
Prerequisites
These examples assume the SDK <script> tag is already loaded in your widget HTML. See Widget SDK for installation options.
GET request with query parameters
Fetch weather data by passing query parameters to the connector:
javascript
(async () => {
const sdk = new window.WidgetServiceSDK();
const weather = await sdk.connectors.execute({
permalink: "weather-api",
method: "GET",
queryParams: {
q: "Warsaw",
units: "metric"
}
});
console.log(weather);
})();1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
POST request with JSON body
Create a resource by sending a JSON payload:
javascript
(async () => {
const sdk = new window.WidgetServiceSDK();
const result = await sdk.connectors.execute({
permalink: "crm-contacts",
method: "POST",
payload: {
firstName: "Jane",
lastName: "Doe",
email: "jane@example.com"
}
});
console.log(result);
})();1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
PUT request to update a resource
Update an existing resource by its identifier:
javascript
(async () => {
const sdk = new window.WidgetServiceSDK();
const updated = await sdk.connectors.execute({
permalink: "crm-contacts",
method: "PUT",
queryParams: { id: "contact-42" },
payload: {
firstName: "Jane",
lastName: "Smith"
}
});
console.log(updated);
})();1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
DELETE request
Remove a resource using DELETE:
javascript
(async () => {
const sdk = new window.WidgetServiceSDK();
await sdk.connectors.execute({
permalink: "task-manager",
method: "DELETE",
queryParams: { taskId: "task-99" }
});
})();1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
Custom headers per request
Pass additional headers for a single request without affecting the global SDK configuration:
javascript
(async () => {
const sdk = new window.WidgetServiceSDK();
const data = await sdk.connectors.execute({
permalink: "internal-api",
method: "GET",
headers: {
"X-Request-Id": crypto.randomUUID(),
"Accept-Language": "en-US"
}
});
})();1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
Global headers via constructor
Set headers that apply to every request made through the SDK instance:
javascript
(async () => {
const sdk = new window.WidgetServiceSDK({
headers: {
"X-App-Version": "2.1.0",
"X-Client": "custom-widget"
}
});
const data = await sdk.connectors.execute({
permalink: "analytics-api",
method: "GET"
});
})();1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
Custom timeout
Override the default 30-second timeout for long-running requests:
javascript
(async () => {
const sdk = new window.WidgetServiceSDK({
timeout: 60000
});
const report = await sdk.connectors.execute({
permalink: "report-generator",
method: "POST",
payload: { range: "last-90-days" }
});
})();1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
Next Steps
- API Reference — Full SDK method signatures and types
- Testing & Debugging — Verify your Connector setup works
- Configuration — Set up the connector your widget calls
- Card Grid widget in the template repository — Working example calling connectors with the UMD SDK
- React widget in the template repository — Working example using the ES module SDK with lifecycle events